AEA12: Rolling Up Our Responsive Sleeves

We’ve discussed at length the fundamentals of responsive design, combining fluid grids and media queries to create more flexible, device-agnostic sites. So does that mean responsive design is a magic formula that solves all our problems? Well, no. But thankfully, we didn’t get into web design because we wanted to be bored. In this session we’ll review strategies for handling trickier elements that’d make even the most seasoned designer quail: stuff like advertising, complex layouts, deep navigation patterns, third-party media, and, yes, actual, honest-to-goodness content.

Rolling Up Our Responsive Sleeves
Ethan Marcotte
@beep

The Story of Henry Adams

• Worked extensively as journalist
• Became a historian
• Life bookended by Civil War and died a few months before the end of WW1
• Felt unprepared for this period of innovation in which he lived
• “Chaos was the law of nature; Order was the dram of man.”

The Rise of the Digital Omnivore

Responsive Web Design

• Flexible or fluid grid
• Flexible images
• Media queries

Where do I begin? Solve the parts, not the whole problem.

Solving the parts

• Layout
• Starting Small
• Advertising
• Media and Images

01. Layout

• The Great Discontent
• flexible foundation
• target / context = result

Introducing Media Queries

• Articulate what the design should do at certain breakpoints
• Starting wide and shrinking down

A more mobile first approach.

• Start with a linear, small screen friendly design.
• The absence of support for @mediaquery is in fact our first @mediaquery.

We should start treating layout as an enhancement.

Let’s embrace the Entropy.

What is our slow system?

• Our content is our slowest system.
• We are no longer building web page, we are building “A network of content”

02. Starting Small

Width, Interaction, Density, Hierarchy

• Tread carefully while dealing with density - be careful removing content that is deemed unimportant.
• Simplify your designs before you suppress.
• Design your source order and see how that informs you design

Starbucks redesign Style Guide

http://Styletil.es

Let’s refocus on content.

Move away from breakpoints connected to known devices.

03. Advertising

• Ads are fixed width
• Dimensions are desktop-centric
• Smashingmagazine - Widescreen readers subsidizing small screen readers. Ads are removed on small screens.

04. Media and Images

• img {max-width: 100%}
• Flexible Video
• What’s responsible to deliver to users?
• Responsible Images library (available in Github)
• Picturefill Library
• A simpler page may be the answer?