Next Steps for Responsive Design by Mat Marquis

Posted on: by

Notes at Breaking Development :focus on responsive
Minneapolis, MN

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.