Responsive web design represents a major shift in how designers and developers build websites. Creating sites that adjust automatically to the size of the browser window, of course, requires specific technical knowledge. Responsive web design presents designers with some new challenges to overcome—but also awesome possibilities. The more you can learn to prepare your designs for such changes, the more valuable you will be. Seeing what others are doing will help your work and broaden your horizons, so here are 10 fantastic examples of responsive design at work.
Food Sense: One of the most common tactics in responsive design is to simplify and minimize content as the window size shrinks. Takeaway: As the screen size shrinks, less is usually more.
Responsive website design will be among the topics at HOW Design Live in San Francisco, June 22-26. The HOW Conference offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.
Zedd: Another common denominator among many of these sites is the need to shift from horizontal to vertical layouts. On a big-screen desktop, users have plenty of room for long horizontal navigational menus. But on a small smartphone, even a few nav items in a row get difficult to use. This site has two menus with only three short items each, but the designers forced these into a vertical list on the smallest renditions of the site. Takeaway: Mind the navigation.
Team PAWS: This site lacks imagery, aside from the background, so scaling the site is just a matter of adjusting text styles and changing the number of columns. And overall, the approach leads to less complicated development issues. Takeaway: When your site needs to be flexible, consider going text-only.
More Hazards: This site takes a more radical approach to minimizing the content. Once the window size gets small enough, the site reduces its content to the most bare bones. In this case, showcasing the band’s music is the top priority—which is evident as the site scales down. Takeaway: Singular focus can help keep the site sticky for mobile visitors, who are more prone to abandon sites.
Sifter: Having images scale to fit the screen size not only ensures the image renders at a size appropriate to the screen but minimizes maintenance time. If you design your site so the images easily scale up and down automatically based on the width of the site, you won’t have to resize images for every browser size or create some code to change what image is being shown. Takeaway: Smart programming can do a lot of heavy lifting for you.
Mapalong: Unlike the previous examples, this site doesn’t change the amount of decoration or content—and it works. The design scales and accommodates the exact same content regardless of screen size. Always carefully consider the client’s needs as you implement responsive design to ensure you meet the goals of the website. Takeaway: While shrinking the amount of content as the site scales works for some, it won’t work for everyone.
JCHEBLY: A fundamental change happens when a site is viewed on a tablet or smartphone: The main user interface tool becomes a finger instead of a mouse. A finger isn’t nearly as accurate as a mouse and, perhaps more importantly, doesn’t allow for a hover event. In the desktop version of this site, the main navigation menu is text with a hover state that highlights a specific item. In the smaller mobile versions, the main navigation is button style. Takeaway: Make it easy for users to touch what they want and see the results.
Diablo Media: This design uses an element that isn’t specific to responsive design, but is interesting to consider. Both a fixed header and footer follow the page as the content scrolls. Since it’s a single-page site, it ensures users can always see the most important elements of the page. Takeaway: Make sure users can see what they need to see.
Andersson Wise Architects: Although the design of this site is relatively minimalistic, its design requires some major effort to scale. It’s a remarkably slick site, but the layout changes significantly as the browser changes size. Takeaway: Would your site be best served with a custom layout for each browser size, or are minor shifts to condense the content enough?
Worm Sign T-Shirts: You’ll notice in this example, and all the others, that the layout isn’t comprised of elements that lock the page into a specific size. The static background and individual elements can float around into endless configurations. Developing a graphic-rich layout that includes layout variations for different browser sizes is certainly impressive, but it will also simply cost more to build. Takeaway: Consider development time.