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
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?