Aug 12 2014

The 14 Best Examples of Responsive Design

header

There’s a reason responsive web design (RWD) is the bee’s knees right now. It epitomizes everything that is UX— from easy-to-use navigation, simplistic and useful design, adaptive orientation and resolution, to lightning fast loading speeds.

Using flexible grids and layouts, smart CSS and flat-out intuition, RWD responds to users’ needs in every way possible. It’s a UX design element that is incredibly broad-reaching and encompasses a variety of different types of websites among many different industries. Check out our showcase of excellent retail, music, editorial, tech, and inspiration sites.

1. More Hazards

morehazards

More hazards removes any anti-mobile hazards by keeping its mobile version pretty minimal. It retains functionality, but we want to know what you think about this approach. Yay or nay?

2. Bonobos

bobobos

On mobile, Bonobos simplifies navigation to a simple hamburger menu icon on the left and a shopping cart on the right. The site retains the same style and detail of the original website, but with the convenience and feel of mobile.

3. Sasquatch Festival

14_sas

Who doesn’t love a sasquatch? But in all seriousness, this site nicely turns its lineup from a grid to a rotator using buttery-smooth CSS animations that work with swipe or touch.

4. Skinny Ties

skinnytie

Streamlined and super fast, both the original site and the mobile site offer speed and style with its RWD… and its ties.

5. The Paint Drop

paintdrop

Valspar’s The Paint Drop artfully demonstrates just how well they know color. The simple scrolling site includes easy to understand icons with user-friendly large touch targets, and of course, a great color palette.

6. PACK

pack

OH MAN, PUPPEHS! You can easily sniff, explore, jump and play on this site on a desktop or mobile device without feeling caged. (Oh, and by sniff, explore, jump and play, I mean navigate, sign up and scroll — You know, throw me a bone, here.)

7. MRY

mry

MRY is design forward with parallax scrolling, animation, and bold colors. The mobile site echoes this sentiment, but with a simple nav icon that expands, and a scroll button that glides users to its case studies.

8. The Boston Globe

bostonglobe

What would this list be without The Boston Globe!? A pioneer in responsive design, its clean typography is evident throughout both views making it easy to read and use.

9. Change.org

changeorg

The mobile version of Change.org appropriately adjusts to the size and resolution of the mobile device making it a quintessential example of RWD.

10. Twitter Bootstrap

bootstrap

Look! A responsive grid website in a blog post about responsive design? LOLWHUT. See what we did there? This site maintains practical usability with a simple grid, and we like it.

11. Made By Hand

11_madebyhand

Big video and big photography in a responsive site? Well done. The mobile version is just as eye catching and functional as the original.

12. Mashable

mashable

Mashable gets content to its audience quickly and efficiently with smart reading panes and smooth-moving navigation. Multiple social buttons make sharing content easy breezy.

Editor’s note: If you’re in the market for an awesome share bar, we just released Flare Pro by Filament. See it in action on our blog!

13. Starbucks

starbucks

Starbucks used the traditional grid design to create a snappy, functional mobile site which includes a handy store locator. BONUS: You can even pay for your drinks with its companion app.

14. World Wildlife Fund

15_wwf

Breaking down a navigation to a mobile size isn’t as easy as swapping for a hamburger icon. World Wildlife Fund’s carries their two biggest CTAs in the nav through to every size. Also note how they treat the mobile slider functionality — a great simple solution.

That’s all, folks!

We try to be responsive to our readers and keep our lists brief (after all, we know you have other things going on), so we’ll wrap it up here. This list showcases a variety of styles of RWD that have been successfully implemented into different versions across their sites. We want to know what you think about our selection. Let us know in the comments!

About the Author:

I'm a writer, animal lover, and social media enthusiast living in a one stoplight town south of Chicago. I write about things from my perspective: a ferociously fun, educated, almost-30-year-old who's working for the man full-time. When I'm not doing that, I'm also a blogger at digital-telepathy. Yes, I like piña coladas and getting caught in the rain. But I also love sunshine and beer. Oh, but ain't that America.

Leave a Response

2 Responses

  1. Aug 13 2014
    Big Lew

    When I see RWD I think rear wheel drive. Vs. Responsive Web Design. I think we need to shy away from all these abbreviations and other such jargon. If our audience is a group of web designers then we can get away with such jargon. But I have seen when we use jargon and our own terms in companies we turn off other people and clients. Come on how hard is it to say Responsive Web Design? Also one other thing that annoys me is it leads to RWD design, like the VIN number. We said number and design twice yet it sounds right. Abbreviation can mean different things to different people. If you are saying it over and over again and you have explained what the abbreviation means then you can use the abbreviation. Just the other day in a company meeting some did not understand what was said because they were not all “web people”/ “computer people”

    https://www.youtube.com/watch?v=Q63vKbavVAY

    • Aug 13 2014
      Big Lew

      Also want to say this is a solid gold post, sorry to go off on a rant.