Presented by Ethan Marcotte.
Introduction
- suck.com: one of the earliest ad-supported content sites. More on Wikipedia.
- Access to content is one of the fundamental design principles of the Web.
- Seminal article: To Hell with Bad Browsers
- Seminal article: A Dao of Web Design
We must accept the ebb and flow of things.
- Interactive Architecture by Michael Fox & Miles Kemp
- Examples: Designing Monsters, Andersson-Wise Architects, and AIDS.gov, the first American government site to launch with a respnosive web design.
- BBC’s responsive news experiments
- On People Magazine’s new mobile-specific site: The decision was made to spend more up-front time/money/effort on building a responsive site as it would save time/money/effort in the long term. The end goal is to slowly roll this design out to more and more devices.
- Do not define breakpoints upfront. Instead, start with content and content heirarchy.
- When designing responsively, get out of Photoshop as early as you feel you can.
- Kevin Hoffman: “Sketch mobile first, then adapt from there.”
- Brad Frost’s Test on real mobile devices without breaking the bank
- Mobile Portland’s Device Lab
- Mobile first and Content first: ensure that each piece of content has the right to be on the page.
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
em
s for vertical measurements. Avoid fixed heights: Usemin-height
and set them inem
s 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.
- See: OOCSS’
.lastUnit
class in the Lines & Grids section of the documentation.
- See: OOCSS’
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
- Regarding the usage of Filament’s Responsive Images on the Boston Globe’s site: Preloaders, cookies, and race conditions.
- Adaptive Images
- Works with a mobile-first approach
- Could poetntially show the small
src
from theimg
element and not enhance
- Responsive images with the
<noscript>
element: a really ugly technique, but interesting nonetheless. - Content negotiation via third-party service sencha.io.
- Brett Jankford’s Categorizr
- Scott Jehl’s picturefill brings the proposed
<picture>
element to current browsers.
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
- Embedded video doesn’t have intrinsic dimensions.
- Creating Intrinsic Ratios for Video
- Size
<object>
element to a reasonable size for small screens (say, 300px). - FitVidsJS: jQuery plugin for fluid width video embeds.
- Craig Mod’s A List Apart article, A Simpler Page. Demo: craigmod.com/bibliotype/demo/
- Filament Group’s picturefill has optional HD/SD preferences.
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 replacemeta
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 thehtml
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. Settingorder
on flex items will place them in order after the elements grouped as 0.
- Flexible items by default have an
- Template Layout Module is some kind of witchcraft. This is movement toward source independence.
Process, Patterns, and Q&A
- FitText: jQuery plugin that makes font sizes flexible.
- Wilto’s Dynamic Carousel
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?
- Idea: Quarantine web font usage above a certain screen size
- Filament Group’s SouthStreet core tools and workflow for delivering rich, cross-device web applications. Ethan’s favorites: Enhance, eCSSential, AjaxInclude, AppendAround, Picturefill.
Look for opportunities to do no harm …and make things pretty.