In his Rolling Up Our Responsive Sleeves talk at An Event Apart in Chicago, IL 2012 Ethan Marcotte walked through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are my notes from his talk:
- “Chaos was the law of nature, order was the dream of man.” –Henry Adams. This quote neatly summarizes how a shift in perspective can leave you unprepared for a new world.
- On a daily basis Web designers are asked to deal with an increasing number of diverse devices. Mobile & tablet don’t even begin to describe the situation. People are using multiple devices throughout the day. These devices are interconnected and used together.
- Where do you begin to turn this pile of chaos into something orderly? Into a system.
- Responsive design is: flexible, fluid grids & media, plus media queries that adapt to different devices. Many amazing solutions have been created using these small and relatively simple elements.
- Even Google has suggested using responsive design for Web sites.
- How do I get started with responsive design? Solve the parts not the problem. Roll up your sleeves and start breaking things down into more accessible, smaller elements.
Layout
- Every responsive design has a flexible or fluid foundation. The formula for this is target /context = result. This gives you a percentage based result you can use in your stylesheets. Proportions are the basis of great typographic grids -not fixed units.
- Media queries set breakpoints that adjust content appropriately for various viewports. This provides new opportunities for design.
- If you have a legacy site, scaling down your site with media queries can help adjust layouts but there are problems with this approach.
- Starting from the outside and working in seems like a good technique when you start with responsive design. But we should really do the opposite: start from the barebones capabilities of small mobile devices first. Starting with widescreen designs means all browsers that don't understand media queries get widescreen designs.
- Start with a linear, small-screen friendly design. We should treat layout as an enhancement. Assume your first media query is the absence of a media query.
- Shearing layers: every building is aging at different levels. The levels are: site, structure, skin, services, space plan, and stuff. The high the level the harder it is to make changes. Slow constrains, quick. Slow controls quick.
- What is the slow changing part of the Web system? Layout maybe one of the fastest moving parts of the system.
- We're not designing pages. We're designing systems of content.
- Trade the control you have in Photoshop for the control you get for managing your content across devices using responsive design.
- When evaluating content: width, hierarchy, density, and interaction. Width: how to flex to various widths? Hierarchy: which modules show up where? In what order? Density: how much detail do you show at any point? Interaction: how does it change as browser window changes shape (like a menu changing into a single click action)?
Start Small
- Simplify before you suppress content. Simply hiding elements because they don’t fit is problematic. You need to have a discussion on what’s critical and what isn’t.
- Lead with content over navigation. The site Contents Magazine positions the navigation out of the footer into the header when screen size increases. The Grey Goose responsive site does the same.
- Design your source order more intelligently. Start with basic defaults for the simplest screens.
- Width, hierarchy, density, and interaction helps you understand where to place elements and content.
- Design grids from the smallest element up. This allows you to move away from breakpoints connected to devices and instead focus on breakpoints connected to your content.
- Breakpoints associated with your content are likely to have longevity beyond the current set of devices being used to access Web sites.
Advertising
- Ads are fixed width on the Web. This is obviously problematic on mobile devices and especially in fluid layouts.
- Ads are traditionally sold based on size and position on a page. Following their responsive design, The Boston Globe sold ads based on how they are promoted on the page instead.
- Ads are often added to pages using document.write which slows down the page and affect re-positioning.
- Boston Globe put empty DIVs on the page where ads will go and turned them on or off at different resolution breakpoints. Javascript looped the page looking for open ad slots and wrote ads in when the page was resized.
- Layout is the easy part. Rich ads, takeovers, and more are just assumed to work –no progressive enhancement in most ad systems.
- Custom solutions might have to be created until larger systems catch up with the diversity of devices.
- We need to start asking for change and making things happen.
Media & Images
- Setting max-width 100% means an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.
- But videos don’t scale proportionally. They need a width and height set in HTML.
- One way to get videos to work responsively is to use Javascript to resize videos with an intrinsic ratio.
- To create a ratio-aware video box we need to set a ghost box around a video with flexible padding. Then we can absolutely position a video inside the box. This is a CSS only solution but it does require a bit of extra mark-up.
- Bandwidth and performance are important axis to consider in responsive Web designs. This especially important for images.
- Responsive images (from Scott Jehl) is a Javascript solution that replaces small screen images with larger ones when appropriate. It was great until it broke when browsers started downloading images early to render pages faster.
- Content negotiation techniques may be needed to manage image differences but is there an answer that uses less code?
- A way around the bandwidth problem may be to offer users control over their experience. With all the complexity, maybe we can acknowledge our limits and ask for our users help. Craig Mod's approach to iPad pages gave the reader options for how large to make type. The Filament Group created data tables that allow people to set which data columns to show.
- The web is inherently messy, maybe it’s ok that we can’t solve some problems and ask for help where we need it.