Skip to content

Instantly share code, notes, and snippets.

@jose8a

jose8a/ResponsiveImages.md

Last active August 29, 2015 14:20
Show Gist options
  • Save jose8a/e205286417921499df8d to your computer and use it in GitHub Desktop.
Save jose8a/e205286417921499df8d to your computer and use it in GitHub Desktop.
Download ZIP
ResponsiveDesignNotes - ud893
Raw
ResponsiveImages.md

Image size: Total bits = pixels * bits/pixel

To improve performance:

  • need to keep images as small as possible (less pixels) -AND-
  • compression as HIGH as possible (bits/pixel)
  • therefore, (less pixels) * (better compression) ==> LESS BYTES

For pictures:

  • don't assume window-size === screen-size
  • don't assume the window-size WON'T change
  • max-width: 100% IS your friend
  • CSS calc(..) can be used for resizing, margins, etc
  • img: last-of-type {} ... to prevent settings on a last item (or image) in a list/set

New CSS width/height properties:

  • vh, vw, vmin, vmax for setting images to a certain % of the height, widht
  • vmin, vmax for setting images to AT MOST a certain % of either the height or width
  • Did you notice how setting both the height and the width to 100vmax or 100vmin changes the image's aspect ratio? It'll compress your images to squares, so be careful if you want to maintain a different aspect ratio!

Raster vs Vector Images

  • Raster typically pictures ... grids of dots to create image
  • Vector can be resized ... geometry is described vs array of pixels

Image Placeholder Services:

Responsive Images - Tools

Image Optimization Tools:

Images with Markup:

Lesson4 - Full Responsiveness

SRCSET - Setting up Responsive Images * Images - Google Web Fundamentals * Srcset and Sizes * Phone Pixel Density List * High DPI Images for Variable Pixel Densities * Height Based selection * The SRCSET attribute * Using SRCSET * Understanding Pixel Density, Resolution and Retina Displays * Standard Image Sizes * Responsive Images in Practice The Picture Element * WebP - new image format for web * Art direction can be achieved fairly easily with the element * Picturefill (a element polyfill) allows use of on browsers not yet supporting it * Picturefill Tool * Element Queries - Use Cases and Requirements * Responsive Images Community Group

Alt Attributes - important for situations/web-tools that don't display images * Lynx * Chromevox Screen Reader * General advice about alt attributes: * alt attributes should be descriptive for important images, like this body surfer. Because body surfing is important, I guess. * alt attributes should be empty for images that are just decorations, like this boiler image. Do you get the joke? It's a boiler to represent boiler plate code, which is sometimes empty of content. * alt attributes should be set on every image, just like this pig is set on being so darn cute. *

Raw
UdacityResponsiveNotes.md

Make the site mobile-friendly

Set ViewPort with meta tag:

Details: 'width=device-width' --> instructs the page to match the screen's width in DIPs. This allows the page to reflow content to match the screen sizes whether rendered on laptop or any mobile device.

initial-scale --> instructs browsers to establish a 1-1 relationship b/w DIPs and CSS pixels.

Use Relative dimensions ... positions, widths, etc for responsiveness in your pages

Strategies: *** add a catch-all in your main.css for your images, embed, object, and video to force them to fit INSIDE their containers: img, embed, object, video { max-width: 100%; }

*** Make sure tap-targets on mobile (links, buttons, etc) are at least 
    48x48 pixels big (avg finger = 40px wide) to protect users from hitting more than one tap-target at a time.

Start designing with the smallest form-factor device in mind (e.g. small phone).

*** when done with that one, move on to a larger size one (e.g. ph-ablet)
*** when done with that one, move on to a larger one (e.g. tablet)
*** and so on, until the largest form-factor design is completed (e.g. large notebook or desktop screens)

Prioritize Content

*** when starting small, we must always make sure that the key content is always on the page ... and users get the full experience no matter what device they are using.

PerfMatters

*** also, when starting with smaller-form-factor design, it forces performance matters to the forefront.
*** forces prioritization of content, and how much data being sent to the user.

Media Queries to Target Styles for Different Devices

*** Use a link tag in the HTML markup
    ** pros/cons --> many small http requests 
    <link rel="stylesheet" media="screen and (min-width: 500px)" href="over500.css">
*** == OR ==
    ** pros/cons --> only one css http request, but may be LARGE file
    @media screen and (min-width: 500px) {
        // styles here
    }
*** most common attributes used for media queries:
    ** min-width AND/OR max-width
*** avoid using 'min-device-width' or 'max-device-width' as they are based on the DEVICE
    width, NOT the browser width which can be resized ... e.g. on desktop
    \--> also, some legacy browsers (e.g. Android) may report wrong value

Breakpoints - Where/When to put them?

*** Choose breakpoints based on the CONTENT of your pages, NOT on possible device sizes
    as those are constantly changing.

Patterns for Responsive Layouts

#### Flexbox is a new CSS feature providing very fluid and responsive solutions
#### Four common patterns often seen being used in fluid/responsive design
    * Column Drop
        -- at smallest viewport, all columns
        -- reflows as viewport width grows ... columns at top of page begin reflowing side-by-side
            until no columns left at a large enough viewport width
    * Mostly-Fluid
        -- at smallest viewport, all columns
        -- reflows as viewport width grows ... columns at top of page begin reflowing side-by-side
            until no columns left at a large enough viewport width
        -- at a maximum width, margins are added to left/right instead of growing columns wider
    * Layout Shifter
        -- probably the most fluid/flexible of all the patterns
        -- using flexbox, not only do sizes of containers/divs change, but also order can also change
    * Off Canvas

Optimizations

#### Tables and Responsive Design
    ##### 3 Options
        * Hidden Columns
            ** figure out most important data in your tables
            ** used 'display: none' to hide least important column data
            ** use this technique with caution
            ** preferable use abbeviated data when possible, so as not to hide data from users
        * No More Tables
            ** 
        * Contained Tables
        ** you'll want to experiment w/these to find what works best for your content
#### Line lengths for reading content
    * Research shows b/w 45-90 chars/line 
    * Ideal measure:  ~65 chars/line
    * Use line-length as an important factor for picking breakpoints
    * Choose at least 16px font-size and 1.2em line height.  Smaller is not ideal for text-heavy
        sites.
#### Minor breakpoints
    * Major breakpoints usually for reconfiguring the layout of a page based on device sizes
    * Use minor breakpoints to adjust the margins, font sizes, icon sizes, and other smaller 
        details for a better user experience on a larger variety of devices
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment