Presented by Ethan Marcotte.

Introduction

We must accept the ebb and flow of things.

The Flexible Grid

  • Media Queries: not all sites are strictly speaking responsive, but they use some manner of technology to ensure that their content is accessible across devices.
  • Responsive design is a subset of adaptive design.
  • Adaptive examples: Focus and FEMA.
  • Jan Tschicold’s Die Neue Typographie

Mark Boulton, A New Canon:

Think “content out,” not “canvas in.”

  • The Formula: target ÷ context = result
  • The focus here is on proportions, not pixels.
  • Sass’ percentage() function: percentage( 200px / 800px )

Margins & Padding

  • Check out The Great Discontent’s buildout
  • The Formula is not just for widths: it can be used for any horizontal measurements.
  • For margin and padding, the context is the same as the context of the element to which you’re applying the margin and padding. Look for the first established width above the element.
  • You can’t calculate borders in percentages.
  • Possibly use ems for vertical measurements. Avoid fixed heights: Use min-height and set them in ems whenever possible.

Learning to Love/Survive Rounding

  • John Resig’s 2008 blog post Sub-Pixel Problems in CSS
  • Generous gutters help.
  • Floating the last column/module in the opposite direction can help.
  • display: table-cell can help.
  • Examples of responsive frameworks: Golden Grid System and Foundation
  • Frameworks are great for prototyping, but can incur substantial maintenance debt. Most are desktop-centric.

Images & Media

  • img { max-width: 100% } shrink-wraps images to the width of their containers.
  • Size images slightly higher than your reference design (~125%).
  • It may be more appropriate to serve different images at different sizes.
  • Screen size does not correlate to bandwidth.

Responsive Images

Backgrounds

  • background-size: contain; preserves original image’s proportions and aspect ratio.
  • background-size: cover; preserves proportions and aspect ratio, but will be as large as possible to cover its container.

Video

Media Queries

  • Historically, we’ve had media types in CSS for quite a long time: <link rel="stylesheet" media="screen">.
  • Media Queries = media type + query (feature and value): @media screen and ( min-width: 800px )
  • From the spec, these terms come up frequently:
    • Display area: think of the browser’s viewport.
    • Rendering surface: think of the entire display/screen.
  • Shared properties: @media screen and (max-device-width: 480px ), screen and min-width: 480px )
  • Negating a query: @media not screen and ( min-device-width: 480px )
  • Chaining: @media screen and ( min-device-width: 480px ) and ( orientation: landscape )
  • CSS pixel vs device pixel: CSS pixels are an abstraction for designers.
  • Viewport meta element allows us to control/override the layout viewport. target-densitydpi=high implemented by Android.
  • CSS Device Adaptation: introduces @viewport to replace meta element.
  • Ethan’s approach to the viewport meta element: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Simplify your design before you suppress information.

If this doesn’t have value to our mobile users, then what value does it have to any of our users?

  • Multiple backgrounds were used with a single-pixel GIF to do borders between days in the weather module on The Boston Globe site.

Mobile-first Queries

  • Starting with mobile styles and building up from there is an additive process.
  • One way of developing a mobile-first approach:
    • Start with building out the desktop view.
    • Go to the top of the CSS and quarantine rules inline with @media.
    • Consolidate queries at the bottom of the stylesheet.
  • Scoped queries: @media screen and ( min-width: 480px ) and ( max-width: 600px )
  • em-based Media Queries: Values are all based on the font size on the html element (Default is generally 16px).
  • There is no ideal set of breakpoints; hardware is evolving way too fast.
  • It’s time to refocus on content instead of columns. Move past breakpoints tied to specific devices and move to breakpoints that work for the content.
  • The Goldilocks Approach to Responsive Web Design

Advanced Layout Trickery

Margins

  • Examples: The Great Discontent and Strange Native (proportional margins on paragraphs in a content container).
  • The Boston Globe pulls ads outside of the containing element/article text.
  • Proportional Negative Margins: uses The Formula, measured against the context that the ad sits in.

CSS3 Features

  • Multiple Backgrounds: For say, styling blockquotes. Treat these as enhancements and provide fallbacks for older browsers.
  • Flexbox: The specification is nearly complete.
    • Flexible items by default have an order of 0. Setting order on flex items will place them in order after the elements grouped as 0.
  • Template Layout Module is some kind of witchcraft. This is movement toward source independence.

Process, Patterns, and Q&A

All of your users are no-JavaScript users while they’re downloading your JavaScript.

  • If the user has JavaScript, grab an “Additional photos” link’s href attribute and suck in a page with the photos for the carousel.
  • Tom Maslen, BBC: Cutting the mustard
  • Testing for Dummies: How to test responsive design across the mobile landscape by David Blooman.
  • In a media query, the keyword only filters out browsers that don’t understand media queries.
  • Boston Globe’s enhanced test: Does your browser understand media queries or not?
  • LABjs and yepnope for loading in modules based on tests/conditions.
  • Boston Globe throttledresize jQuery plugin
  • A progressive enhancement bootstrapping utility from Filament Group: enhance

Is this content or an enhancement? If so, what’s the upgrade path to it?

Look for opportunities to do no harm …and make things pretty.