Responsive web design epitomizes everything that is great UX--from easy-to-use navigation, adaptive orientation & resolution, to fast loading speeds.
Try again in a bit, and if you are still having trouble, let us know.
The post should arrive in your inbox shortly.
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
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.
3. 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.
4. Skinny Ties
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
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.
8. The 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 Change.org appropriately adjusts to the size and resolution of the mobile device making it a quintessential example of RWD.
10. 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.
11. Made By Hand
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!
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.
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!
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!
Thanks for the comment!
You can also try “http://responsivecss.net/”, a showcase website on responsive designs with more than 800+ responsive websites.
Toyota model landing pages are sweet, http://www.toyota.com/camry
© 2015 Digital Telepathy
Enjoy the weekly design insider.