5 Really Useful Responsive Web Design Patterns

by on 27th March 2012 with 35 Comments

screenshot

Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive.

To help reprogram your brain to consider layouts in new ways, we’re going to take a look at some interesting responsive design patterns that are being implemented by talented designers all over the web.

Starting Small

One of the most popular ways that I see responsive design being implemented is to simply assign a fluid width to the columns of content on the page, which become narrower and narrower as the page width decreases until the one major jump to a single column mobile layout. We can see this technique at work on the luxury hotel website 137 Pillars House.

screenshot

As you can see, the layout really only goes through a single major transformation. The rest of the adaptation is very gradual and is merely a narrowing of the initial layout.

This seems to be how many designers are sticking their proverbial toes in to test the waters of responsive design. It’s a great place to start because it can require much less time and effort than multiple major transformations while still offering the benefit of serving up a web page that looks great in any viewport size.

Rather than simply flirting with responsiveness though I want to encourage you to take the plunge and explore the vast possibilities that are now available to you in terms of layout design. Don’t get me wrong, there is nothing wrong with the approach above, but it’s always a good idea to take your skills a step further and stretch what you consider yourself to be capable of pulling off.

Mondrian

screenshot

Our first responsive web design pattern was one that Piet Mondrian would’ve appreciated. It uses three simple and large areas of content separated by thick lines. The initial state itself is quite versatile and can hold up well under a fairly intense reduction of width.

Once it becomes too narrow for the initial state though the widescreen layout adapts and becomes a vertical layout. This is accomplished by taking the two smaller boxes on the right and moving them under the large, featured box. This layout then breaks down to our standard single column mobile view where each piece of content is simply stacked under the last.

In The Wild

We find this pattern being used on the website of Andersson-Wise, an architecture firm. We can see that it’s perfect for displaying big, beautiful photos. To complement the primary focus, the photo, the two boxes on the side are simple and filled with a solid color sampled from the image. The type is strong and clean, giving the site a very sophisticated feel.

screenshot

Given that the layout is so box-driven, it’s a fairly simple responsive pattern to wrap your mind around. If you have a minimal amount of content to work with, you should give it a shot.

Basic Gallery

screenshot

Thumbnail galleries are a popular design pattern that has existed for nearly as long as the web. These days designers usually keep them quite minimal: simple rectangles arranged evenly on a solid background. This format is super easy to reflow as the viewport changes. You simply have to reduce the number of columns a few times.

We went over this process in depth in our article on building a responsive thumbnail gallery so be sure to check that out if you’re looking for a step by step guide of the process.

In The Wild

To see this pattern in an actual site, check out Brad Sawicki’s portfolio. Right on his homepage he starts with a simple three column gallery that collapses down to a double and finally a single column layout. The benefit here is that the work preview image sizes make the most of the available viewport so that the viewer can always see them in a nice, large format.

screenshot

Featured Items

screenshot

This one is a lot like the gallery layout, only it’s more geared towards highlighting a few items as opposed to several. The example here utilizes four featured items but it’s just as popular, or even more so, to see three items instead.

As you can see, the layout starts with the four featured items side by side with some introductory content above. It then follows the path of the gallery as it jumps down to two columns and finally one. Notice how the introductory content adapts as well: the navigation goes from the right side to flush left under the main headline or logo.

In The Wild

The web development firm Splendid makes perfect use of this pattern on their site. They even animate the transitions, something done purely for the sake of design nerds who resize their browser just to watch the transformation.

screenshot

This particular site is a really great implementation of responsive web design. It never feels even slightly off but handles every viewport size you can throw at it with pixel perfect finesse.

Column Flip

screenshot

This one of the most complicated pattern yet. The top of the layout features some really large elements that grab your attention and introduce the site. The next portion is split into three columns, but as you reduce the size of the browser, the first column flips onto its side and becomes a row that sits above the other two columns.

It’s a fairly complicated transformation but it’s quite effective. You could easily pull it off simply by adding in a media query that floats the items in that column to the left, then clearing the float so the other two columns remain intact.

The final step is of course to reflow everything once again to one wide column. It can make for a lot of scrolling but as long as you don’t overflow the page with content it’s not too bad.

In The Wild

Inspiration for this layout comes from Palantir, another development company. Notice that web developers are first experimenting with responsive design on their own sites, which can serve as both a great learning experience and an example for clients.

screenshot

Palantir is a shining example of just how drastic your transformations in responsive web design can be. This is more than merely reducing the width of a column or eliminating it completely, it represents a major reflowing of the page’s content to continually maximize the available width.

Feature Shuffle

screenshot

This last pattern is a different take on the featured items idea. I really like it because it throws a slight curve during the first reflow. Instead of simply dropping to two columns and floating left, it creates a staggered two column layout where sections are floated to either side.

For the single column layout, the thumbnail images are dropped altogether to allow for greater emphasis on the text content. This is optional of course, one of the previous single column formats could just as easily be implemented.

In The Wild

Orestis uses this pattern on their site. The three featured items are the services that they offer, each of which is represented by a colorful illustration.

screenshot

When you resize the browser, the services are stacked and the images are floated either to the left or right. It’s a fun, quirky site that you have to check out yourself to really get a feel for how it all works.

More Patterns

screenshot

In my research for this piece I came across an existing article by Luke Wroblewski on the same topic. Rather than looking at very specific patterns like I have done here, Luke does an amazing job of really breaking common layouts down to their most basic ideas and showing you how they work. It’s a really great piece and I really like the way he shows how the layout works both inside and outside of the canvas.

Conclusion

I hope your mind is now in overdrive thinking about responsive layouts. The web design community has spent a ton of time discussing the technical aspects about how responsive CSS is accomplished through media queries, it’s definitely time that we start giving some deep thought into the actual design aspects of this exciting new frontier.

Leave a comment below and let us know what you think of these responsive design patterns. Would you use any of them in your own work? Why or why not?

Comments & Discussion

35 Comments

  • Thomas

    Nice overview, thank you!

    A very interesting pattern not mentioned here (but shown in the linked article by Luke Wroblewski) is the “Off Canvas” approach shown on this website.
    But it required javascript to work…

  • http://dutchcelt.nl/ Egor Kloos

    What I’d also like to see more focus on art direction as the context also changes design/layout. A previous article here on DS already mentions the risk of a myopic device driven approach. http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/

  • http://www.boostinspiration.com Boost Inspiration

    Thanks for sharing this. Going to redesign my website soon and this will really help.

  • FXWorks

    What’s the best tools to create responsive designs ?

  • http://blogverize.blogspot.com Nimsrules

    I wanna thank you with the bottom of my heart because I was looking for reliable sources for responsive conversion for my client’s website. I wanted to try something different than media queries and found this post in my newsletter. Thanks once again Joshua.

  • http://www.serkanazeri.com Serkan Azeri

    Çok faydalı güzel bir paylaşım, bu sene front-end developerların en çok üzerinde durması gereken konulardan bir tanesi esnek web arayüz geliştirmeleri.

  • http://mein.herz.ag KChristoph

    Thanks from Hannover, Germany !

  • http://www.orestis.nl Orestis

    “In The Wild”, cool name! :)

  • Nick

    What font is making up the word “RESPONSIVE” in the first image!? I gotta know!

  • http://www.animhut.com/ Sri Ganesh.M

    I like to know where i can learn Responsive theme creation from PSD to code for WordPress ?
    Bookmarking this page for further reference.

  • http://martealdesigns.com bob marteal

    This is a helpful article. It’s always nice to have a visual with examples. More and more there is soooo much info and idea generation everyday, it’s just too much to try to internalize words. Thanks!

  • http://bradfrostweb.com Brad Frost

    Great roundup! I took a look at the myriad patterns regarding navigation in responsive design: http://bradfrostweb.com/blog/web/responsive-nav-patterns/

    Thanks for a great article!

  • http://www.webzplus.com.au John Robinson

    I can’t wait to dive in a try this for my own site, great article thanks

  • http://www.theseoexpert.com.au Paul Thomas

    Interesting article Joshua, thanks for posting!

    I guess this comment should be on your February article: http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/, but I think it is still in context here.

    I think fluid design is great if it’s really necessary to have a website render in a handheld device. Other than that we shouldn’t lose sight of that fact that most people using smartphones are using 3G or maybe now, 4G, to access the Net. Their bandwidth may be limited and on top of that, readability is reduced on smartphones.

    Even twitter and Facebook prefer you to use their apps, as both seem to push this when they detect your device as being handheld. I guess they want to ensure the UX is the best possible.

    After creating a few mobile sites, I went over to the W3C mobileOK checker,[http://validator.w3.org/mobile/] and I realised that trying to force a full blown website down a smartphone users bandwith gave me a ‘mobileOK’ score of 28%.

    So back to the drawing board. After streamlining the sites down to 10KB, plus adjusting the code, headers, caching, DOC Type etc, I now get a mobileOK score of 100%.

    Designers really need to consider the medium, rather than work out how to fit a huge wesite into an iPhone. There is nothing wrong with having a scaled down version of a site as most readers will only skim on a small screen anyway.

    In addition, on mobile websites you can use anchors like ‘tel:’ and ‘sms’ to invoke the device’s phone number dialer or SMS app. Neither of those anchors will work on a desktop computer.

    It takes me six hours to create a mobile ready website with a WordPress backend. I use WURFL (Wireless Universal FiLe) to detect the device’s capabilities such as (can_make_a_phone_call) and then redirect from the main site to the mobile site if a phone is detected.

    Tablets render most sites with 960px column width so no need to redirect to mobile. I call all the images from the main site and scale down according to device orientation in CSS.

    Don’t forget that as designers we need to make money too! I’d rather get paid for a desktop site plus a mobile version than boast how I can make one site fits all … and only get paid once!

    We still have a long way to go, but we must always remember the end user. Being able to nicely flow content on a 1.8MB website might be clever but is it practical?

    Cheers,
    Paul

  • http://www.theseoexpert.com.au Paul Thomas

    Oh, by the way.

    Brad Sawicki’s website scores 33% on the W3C mobileOK Checker! You can check your mobile websites there at: http://validator.w3.org/mobile/

    There are more devices than just iOS and Android, so accessibility is an important consideration.

    You can see a list of the most current mobile device User-Agents here: (if the ZyTrax.com site is up) http://www.weloveseo.com.au/useragents.php

    You can also get Chris Pedeick’s User-Agent Switcher for FireFox here – http://chrispederick.com/work/user-agent-switcher/ to do some testing if you need to.

    Have fun,
    Paul

  • http://www.danielnordmark.se Daniel Nordmark

    Nice summary of some of the ways responsive designs can work.

  • http://www.fiveforblogger.com Fowziey

    Oh really great collection. I think I’ve found a solution for rearranging all elements in sidebar based on Mondrian’s pattern. As commonly done, the sidebar will be pushed down to the bottom. I don’t even think about dividing its child elements into 2 separate divs. For my latest work I try to set 2-3 columns in the sidebar specifically for tablet version. So I use :nth-child which isn’t supported in IE8 to fix float issue among them due to height difference. By now I think it’s easier to handle 2 sections rather than a single tall sidebar. Helpful article, thanks again

  • http://www.moziweb.com mozi

    I tried ‘In the Wild’ as palantir.net do have a look at my try http://rabble.io/

  • http://tjphilli.com Trevor Phillippi

    Ahhh this is great!! Love it. My question though, is both practical and I guess a little bit design theory, in that what is everyone’s impression is it better to use max-width and work backwards to mobile, or min-width and work up to desktop? This is something I’ve been mulling over the past few days as I’m trying to put a few previous sites on mobile.

  • http://www.uykusuzadam.com xJason21

    helpful article for designer, thx !

  • http://www.webdoodling.com/ Nomaan

    good article for web developer

  • http://rodleg.wordpress.com/portfolio/ Rodleg

    excellent! thank you very much

  • http://think360studio.com/ Think360studio

    Hi Joshua. I always love your articles, specially the description which is always in a very easy method. I really appreciate your work and your collection of all responsive web design patterns.

  • http://raisedeyebrow.com Matt

    Hey there Joshua. This is a fantastic article. We’re newly in love with responsive design and this gave us a lot of inspiration.

    These design patterns are great so we took the time and and we’ve mocked them up including source code.

    http://www.raisedeyebrow.com/blog/2012/04/responsive-design-patterns

    I’d love to know what you think. Would you have done it differently?

  • http://www.theconnectorz.com/ Web Designing Chennai

    I am web designer and developer, i always want new patterns and concepts to impress my new clients. These patterns will be very useful, i am agree with these points. I will keep looking here for more tips. Thanks.

  • http://www.ventzke-media.de frederik

    Good article with examples. Thx :-)

  • http://www.stephenhull.com Stephen Hull

    Great advice, yet as an old print designer and new web designer I am overloaded with new HTML5/CSS responsive site options. I would like someone to create a basic template with all this wrapped in, video, gallery etc… Not images just place holders and lorem ipsum text. Need something visual that I can play with. Take apart and back engineer. It is hard to put separate pieces of code together into one site. Most templates are either cheap ready made with bad code or so simple they only tackle one aspect of HTML5 or CSS. Is there a way to build a comprehensive template showcasing all the new technology so some old school visual people can put all this together?

  • Sergey

    Thanks for this article. Sure using responsive web design business owners can get more freedom and their client base can grow.
    Because a lot of people prepare use mobile phone or tablets.
    Also on the net you can find a lot of free programs and product for responsive web.
    For example using free responsive templates on http://www.free-responsive-templates.com every can create his/her website very fast and without any special knowledge.
    But we need remember that every business can not be the same. And if some business good for PC + Tablet some business like just PC or just mobile.
    But anyway responsive its a huge jump to show our business on any device and any platform.

  • http://www.cheapwebdesigncompany.net web development company

    Great blog, your styles and concepts are really appreciated….
    Thanks for sharing it.

  • http://www.chocotemplates.com Steve

    Great examples! That’s my addition to the list: http://chocotemplates.com/category/responsive/

  • http://tutvid.com Nathaniel Dodson

    Love this kind of thing! Great little article loaded with info!

    -N.

  • http://imperativeideas.com Imperative Ideas

    Hey folks,

    I wouldn’t worry overmuch about your results at [http://validator.w3.org/mobile/]. That validator is like goign up against YSlow; it’s a bit of an arsehole. I ran validation against a Foundation 3 based responsive template I had up and got a score in the low 40s. Looking into why:

    Basically it’s saying:
    PROBLEM: Your images are too big
    SOLUTION: Use adaptive images (I’ve been meaning to test it anyway). Without Adaptive images, your solution is ugly design. Uh, no. [http://adaptive-images.com]

    PROBLEM: Your CSS is too new
    SOLUTION: They can fark right off. I like my shadows and rounded corners. I really don’t know anyone who actively supports IE6 and IE7 anymore. The goal is more one of graceful degradation. This is a stupid stupid thing to penalize so badly.

    PROBLEM: Too much white space
    SOLUTION: You are a responsive designer, yes? Good, you can ignore it. Again, this is a stupid thing to penalize so highly without a context.

    PROBLEM: A length property uses an absolute unit
    REASON: It is getting very angry with the Foundation CSS team. I like to think Foundation probably knows what they are doing when it comes to the art of responsive design.
    SOLUTION: We’ll ignore it

    PROBLEM: The document does not validate against XHTML Basic 1.1 or MP 1.2.
    SOLUTION: This is a lot like the CSS3 stuff above. In some cases I have valid fixes to make. In others not so much. Do what makes sense. I especially liked being penalized for a class attribute on my HTML tag. You know what we call that? HTML5… as in: (!DOCTYPE html). I’m pretty sure it degrades gracefully.

    Anyhow, I’m not going to run through the entire list of minor changes.

    My point here was to illustrate how the Validator is a grandfather shouting “DAMN KIDS GET OFF MY LAWN” at all of your responsive and CSS3 techniques.

    You may now freely go about the business of designing things.

    • Dawn

      Wow. Great post reply. I’ve been banging my head against that validation wall too. Well said! :)

  • http://imperativeideas.com Imperative Ideas

    An additional thought on the article itself —

    It’s a very nice showcase. I don’t know that it’s as “great for beginners” as everyone seems to be saying. The article didn’t once explain *how* the designs are achieved, only that they exist.

    For the most part, it would be an exercise in frustration for beginners.

    “See all this candy? Guess what, you can’t have it! Keep Googling or learn to study the code”

  • http://www.sixinformatica.com Diseño Web Cordoba

    Very usefull, but, the code is needed… jejeje
    Thanks

Subscribe
Membership
About the Author