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.


More Hazards

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?



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.


Sasquatch Festival

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.


Skinny Ties

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


The Paint Drop

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.



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.)



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.


Boston Globe

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.


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


Twitter 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.


Made By Hand” target=”_blank”>Big video and big photography in a responsive site? Well done. The mobile version is just as eye catching and functional as the original.



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 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


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!

  • 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”

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

    • Sorry for the insane delay in responding to your comment— I somehow missed the notification on the post. At any rate, I’m sorry you found RWD distracting. As a car person, that’s also the first thing that comes to my mind, but it’s definitely also a term we use in the design industry. We figured we’d keep it simple in the post. No worries about the rant, and thanks for the compliment.

  • I think you have some great examples here. I think the card style on the World Wildlife Fund works really well for responsive design. I tend to like it when designers don’t go too nuts with all the possibilities. I think the coolest thing about RWD today is that website builders now even allow people to create a responsive website – so no code necessary. An example would be LiveControl… you can even do a lot of the animated interactions from your examples above.

    • Very true, Jamie! Thanks for your input and for the compliment!

  • JTech

    This article has very relevant information and links pertaining to response design. I was intrigued by the array of layouts shown and the processes used to create them. This site really shows the importance of layouts that cater to devices that are more frequently being created and used by the public. I would love to learn more technical aspects, if interested, please view my company article on response design to provide feedback. Thank you again for the great article!

  • Adam

    You can also try “”, a showcase website on responsive designs with more than 800+ responsive websites.

  • Responsive

    Toyota model landing pages are sweet,

  • These are some of the best examples of creativity which designers created. I liked Starbucks design.

  • Pingback: Adaptive vs. Responsive Web Design: What’s The Difference? - CMS Social Media Miami FL()

  • gorgeous template we also provide custom template by user specification.

  • Thanks. Very good examples of responsive designs.

  • Wow…. responsive websites also have this much of varieties… :O. Good to know this. Thanks for the post.

  • snsj2

    You’ve provided really nice examples of responsive design. In 2017, we can guess that responsive design will be even more important, because it is one of the most effective ways of achieving a great user experience. Having that in mind, I had to make my website responsive, but I wanted professionals to do it. I chose BGO Software who did their best and the results are amazing.

  • Most probably they are using boostrap. Bootsrap is quite easy to go with.

  • its good to know the types of responsive websites as well, with the knowledge of responsive websites. thank you stephanie for sharing things with us.
    have a good one

  • hey! that’s a great stuff you shared stephanie, it’s really good to read. keep up the great work.