10 Gorgeous Examples of Responsive Web Design

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.


HDLlogo

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.

More resources on responsive design

 

 

 

 

 

 

10 gorgeous examples of responsive web design at work

By Patrick McNeil

Responsive web design represents a major shift in how designers and developers build web sites. Along with such a shift comes countless technical details to uncover. But for the designer, we really just want to know what to plan for, what is possible and how we can use the new approach as effectively as possible.

I always find that in such situations we can look to what others are already doing. As such, here are 10 fantastic examples of responsive design at work. Let’s dig in and see what solutions others are finding with this new approach.

Food Sense http://foodsense.is/ [01]

One of the most common tactics we will find is that as the size of the layout shrinks, the content gets simpler, trimmer and minimized. So, at each step we see the content simplified, become less decorated and just generally streamlined to accommodate the screen size at each step. This simply reminds us that as the screen shrinks, less will usually work better.

ZEDD http://www.zeddmobile.com/ [02]

Another common denominator among many of these sites is the need to shift from horizontal to vertically oriented layouts. On the desktop we have plenty of room for long horizontal navigational menus. However, on a small smartphone even just a few nav items in a row become difficult. This sample has two menus with only three short items each, and they have forced these into a vertical list on the smallest renditions of the site.

Team PAWS http://briandrum.net/team-paws/ [03]

A clever strategy to use when planning a site that demands this level of flexibility is to rely exclusively on text. You will notice that this site lacks any imagery (beyond the background) for layout purposes.This means scaling the site is pretty much a matter of adjusting the text styles. In this case it also includes changing the number of columns. But overall the approach leads to less complicated development issues.

More Hazards http://morehazards.com/ [04]

This sample takes a more radical approach to the process of minimizing the content. In this case once the size gets small enough it reduces itself to the most bare bones of content. In this case, showcasing the band’s music is the top priority. Something that is evident as you see the site scale down. This sort of singular focus is wise considering how mobile visitors are even more prone to abandon sites.

Sifter https://sifterapp.com/ [05]

Another frequently used approach is to have images scale to fit the screen size. This not only ensures the image renders at a size appropriate to the screen, but also minimizes maintenance time. If you design your site such that the images can easily scale up and down automatically based on the width of the site, then you won’t have to create image sizes for every browser size. Even better, you won’t have to create some code to dynamically change what image is being shown.

Mapalong https://mapalong.com/hello [06]

In contrast to shrinking and growing the amount of content and decoration we find the Mapalong site. Here, the design scales and accommodates the exact same content regardless of screen size. While shrinking the amount of content as the site scales might work for some, it won’t work for everyone. Always carefully consider the business needs as you implement responsive design to ensure you hit the goals of the client and web site you are designing.

JCHEBLY http://jchebly.com.br/ [07]

A fundmanetla change happens when a site is viewed on a tablet or smartphone; the main user interface becomes a finger instead of a mouse. A finger is not nearly as accurate as a mouse, and perhaps more importantly, doesn’t allow for an hover event. In the desktop version of this site the main navigation is text with a hover state that highlights the specific item. In contrast, the main navigation takes on a button like style in the smaller mobile versions. This simple change makes it easier for users to touch what they want, and to see the results.

Diablo Media http://diablomedia.com/ [08]

This design uses an element that isn’t really specific to responsive design, but is none the less interesting to consider. Here both a fixed header and footer follow the page as the content scrolls. Since this is a single page site, it does well to ensure that users can always see the most important elements of the page.

Andersson Wise Architects http://www.anderssonwise.com/ [09]

Although the design of this site is relatively minimalistic, its design requires some major effort to scale. I am by no means implying there is anything wrong with this design, on the contrary it is a remarkably slick site. The point I want to make is that the design has to change layout structures rather significantly as the browser changes size. Would you 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 http://www.wormsigntshirts.co.uk/ [10]

Perhaps the most obvious of all the patterns here is the way these designs all lack interconnecting elements. You will notice in this sample, and all the others, that the layout is not comprised of elements that lock the page into a specific size. Here the static background and individual elements can float around into endless configurations. In an interesting way this presents an opportunity. If you develop a graphical rich layout that includes layout variations for different browser sizes you will perhaps be able to distinguish yourself. Of course, just be cautious of the development time as such an approach will simply cost more to build.

Conclusion

Responsive web design presents the designer with some new challenges to overcome. And at the same time presents some awesome possibilities. More and more we find that web sites are being built to accommodate for various screen sizes. The more you can learn to prepare your designs for such changes the more valuable you will be.

Resources

For more examples of responsive web design check out these web sites:

·Media Queries

·Collection at Line25.com

Some hands on resources for building responsive sites:

·Tools and techniques

·What it is and how to use it

COMMENT