Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012
The iPhone opened up pandora’s buzz word box. Now there is a large number of things we have to account for.
Calm the ‘eff down.
RWD is a set of tools, RWD is our hammer.
RWD is simply three things: A flexible grids, flexible media, media queries.
A flexible grid is important because of all of the screen sizes that are out there, the unknown, unknowns.
We start grasping for new comfort zones, but by definition, there are none anymore.
Because we base the classes on a flexible grid, we can now reuse them over and over through out the site.
Get your own damn breakpoints
Content like water concept – Josh Clark
em based media queries
Opera always treats font size as 16px, even if you reset it.
Flexible Images and Media
max-width: 100% makes an image responsive.
The problem is the media needs to be large enough that we can scale up to the largest size possible.
video tag, add media query, down side, it work basically no where.
Responsive Images Cookie based
Responsive Images: How they Almost Worked and What We Need
Shouldn’t hinge on javascript long term.
Enter the Responsive Images Community Group and the picture tag.
Similar to video tag. Uses media queries. But….
An alternative by the implementors is currently in the draft. Not really intuitive. Doesn’t really solve the issue and will still prefetch which is unwanted behavior.
A compromise is in the works. It combines items from both, but it is still in flux.
A solution for right now, picturefill
We have a layout but we are still missing something important.
Progressive Enhancement
Start with semantically rich markup, independent of css.
Basic Experience
- basic css
- basic typography
- horizontal rules
- text alignment
- display:inline/block
Enhanced Experience
- enhanced css
- @font-face
Don’t have to write a single line of Javascript to make this happen.
<link rel="setylesheet" href="basic.css">
<link rel="setylesheet" href="enhanced.css" media="only all">
Must conditionally allow for IE
Same approach for Javascript.
By starting at the basics and building up, allows for sites to work across nearly all devices. All done with a handful of simple tools.