Unless you've been too busy wake boarding the Alps to notice, there's a movement afoot amongst web designers -- Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size. If you've never heard of responsive design before, Marcotte's introduction is well worth a read.
In a nutshell, responsive design means using fluid grids, fluid layouts and @media queries to adapt your website to the plethora of different screen sizes on today's (and tomorrow's) web. Whether your visitor is on a phone, an iPad or a gargantuan desktop monitor, your website adapts.
Responsive design becomes an even more appealing tool when you start, as Luke Wroblewski says, designing for mobile first. That is, start with the small screen. Strip your site down to its essence and then build from there. Starting from the bare bones ensures a great mobile site, and it forces you to really focus on what matters to your visitors.
So how do you go about building a good responsive site? Well, that depends on the individual website, but there are some common patterns that are starting to emerge. To help you get started with responsive design, here are a few nascent best practices we've gleaned from a variety of sources around the web:
- Use @media to scale your layout for any screen, but remember that this alone isn't really responsive design.
- Use liquid layouts that can accommodate any screen size. Don't simply design one look for the iPhone/Android, one for tablets and one for the desktop. Keep it liquid, otherwise what happens when some new, intermediate screen size suddenly becomes popular?
- Roll your own grids based on the specifics of your site's content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don't fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
- Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around.
- Use the Respond or CSS3 Media Queries JavaScript libraries to bootstrap @media query support into older browsers that won't otherwise know what to do with it. Starting with the smallest screen and working your way up means it's the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
- Forget Photoshop, build your comps in the browser. It's virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
- Scale images using
img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screen. - Embrace lazy loading. There may be items on your site, auxiliary content that's nice to have, but not essential. Load that content using JavaScript after the primary content is done loading.
- Forget about perfect. Even with these suggestions you're still leaving out users who have old browsers with JavaScript disabled. Such users are increasingly rare and if they see the mobile layout on their desktop, guess what, it's not the end of the world. Your site is still perfectly usable.
Keep in mind of course that responsive design is a young idea and new ideas -- and new tools -- pop up everyday. Think of these not as hard and fast rules, but guidelines to build on.
See Also:
