Presented by Ethan Marcotte.

Layout

  • Give The Great Discontent another look.
  • A responsive design has a flexible foundation.
  • Small-screen friendly by default. This is the way to go!
  • Mobile first prevents broken layouts on devices that don’t understand media queries.
  • Bryan and Stephanie Rieger: “The absence of support for @media queries is in fact our first @media query.”

Starting Small

As available real estate changes, questions about the following come up:

  1. Width
  2. Heirarchy
  3. Interaction
  4. Density
  • If you’re finding content that doesn’t fit in the mobile context, ask yourself: “Does this content make sense in any context?”
  • “Simplify your content before you supress.”
  • LukeW’s article RESS: Responsive Design + Server Side Components
  • Contents Magazine uses a similar navigation approach to Viget: Content-first, then navigation.
  • Grey Goose’s website has been brought up a couple of times by several speakers.
  • Design your source order.
  • We’ve been too focused on columns. Let’s refocus on content.
  • It’s time to move past breakpoints tied to devices that exist now. Breakpoints should be tied to your content.
  • Paul Robert Lloyd’s personal site is pretty amazing.
  • On the Boston Globe site, responsively promote an ad’s position based on available horizontal real estate.
    • <div data-adname="CENTRAL" class="ad ad-slot-a"></div>
    • See Ethan’s “How It Works” slide for more on the implementation
  • See Mark Boulton’s Responsive Advertising post.
  • http://m.people.com/ served to 7-inch tables and lower.

Media and Images

  • This Is Made By Hand film series uses some JavaScript to pull dimensions of a video on page load. When changing browser size or orientation, the JavaScript resizes based on the original dimensions.
  • Creating Intrinsic Ratios for Video: Use to create completely ratio-aware videos that resize proportionally without the stuttering introduced by JavaScript.
  • Ethan recommends against using this. Avert your eyes!
  • The Responsive Images JavaScript worked great until asset pre-fecthing came into being. Small images would load before the script could fire and feed the user the larger image.
  • Wilto: “picture is tentatively slated for inclusion under the HTML5 umbrella, rather than being pushed to HTML.next.”