10+ Incredible Examples of Responsive Web Design

Home » Design Inspiration » 10+ Incredible Examples of Responsive Web Design

With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both mobile devices and computers. When internet capable phones first began gaining popularity the method was to have two separate sites, a mobile site and a “full” site. But that would limit the mobile viewers’ experience because the site would be so basic it would cause you to wonder if it was coded by chisel and stone. That was then, now everyone is jumping on the “Responsive Web Design” bandwagon and finding it to be a rather happy median.

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries, a person may only be viewing a site from their mobile device to find that companies contact info. In those instances, it is probably best that’s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what’s best for them, and keep all monitor sizes and internet browsing devices in mind as you’re developing your next project.

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let’s take a look at 10 excellent examples of responsive web design.

Sony

Sony USA Responsive Web Design

Sony is a big brand that has embraced responsive web design. You’ll notice there’s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you’ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.

Gravitate Design

 Responsive Web Design

It’s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate’s site not only because it’s responsive but because it’s very clean and simple. Their color palette compliments itself nicely and they didn’t go overboard on shadowing, borders or putting all their content in boxes.

Spark Box

Sparkbox Responsive Web Design

Spark Box is another web design studio that knows a good thing when they see it and doesn’t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don’t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn’t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.

Food Sense

Food Sense Responsive Web Design

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don’t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that’s on the side column under the navigation. They still have links to both social networks in the footer, so it’s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.

Warface

 Freelance UI Responsive Web Design

Warface is the real deal.  It’s creative, extremely fluid and if you stretch and squeeze the width you’ll notice that it’s not one flat image, but in fact, several stacked on top of each other.

Clean Air Challenge

Clean Air Communte Challenge Responsive Website

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn’t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.

Sasquatch Music Festival

Sasquatch! Responsive Website

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it’s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.

Andersson-Wise

Andersson-Wise Responsive Website

Andersson-Wise is an Austin, Texas based architect and design firm.  Antialiasing jQuery scripts help this site maintain its responsiveness, regardless of how big your display is, this site will keep up.  A very simple, modern, clean and classy look, perfect for an architect and design firm.

The Cacao Trail

El Sendero del Cacao Responsive Website

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don’t mind as the image doesn’t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.

Alsacreations

Agence web de qualité Responsive Website

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile, they dropped all elements except their “About” blurb and their email form while including links to everything else.

Yoke

yoke Responsive Website

Yoke is a fluid site thanks to a bit of javascript and its WordPress platform.  A well organized and structured layout keeps all of the animations and imagery from giving the site a cluttered look but keeps the site looking fun and creative.

Spigot

Responsive Web Design & Content Strategy from Park City,

Spigot Design is yet another design firm who showcase their responsive abilities on their own website.  The overall look and layout of the site is very clean, almost minimalist, but a decent amount of color and creativity provide a nice balance and accent where it’s needed.

Author
Iggy
Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter

23 thoughts on “10+ Incredible Examples of Responsive Web Design”

  1. In my personal opinion, half of these mobile versions are still entirely too busy. Some great content in here but there’s a few that still need work

    Reply
  2. Great examples of responsive web design. In some cases, the website changes completely for a different screen size… I bet it’s very hard for designers to make that happen.

    Reply
  3. Thanks so much for sharing. I’m browsing the web looking for full width examples.

    Keep up the good work 🙂

    Reply
  4. As a web design / development company we have found that most of our new customers are requesting that their sites be responsive and we have moved in that direction in a strong way. We have even set up our website to demonstrate how a site works “responsively”.

    We realize that about a 5th of the visits to any website is on a tablet, phone or other device and that if web developers don’t stay up to date they will miss customers that realize that as well. We are happy to provide responsive websites to our customers and feel that ever web design and development company should be able to provide responsive design for their customers as well! Just looking over the sites you show above should motivate others to make a move in this direction if they haven’t already!!

    Reply
  5. Responsive design works well for light-weight websites and brochure sites. Once you start to actually do transactions, eCommerce or deep content linking it fails. Big time.

    Look at the Sony site on your smart phone. Basically it gives you a decent landing page. But then click on Shop Now. You’re back to a desktop website that probably has an abandon rate in the 90% range.

    More sophisticated solutions from companies like Usablenet or Moovweb are much better suited to providing an optimized user experience and providing real value to the business.

    Reply
  6. Just a comment around “Alsacreations”. If they had to drop the bells & whistles like the slider & icons for the mobile size, they probably didn’t need those bells & whistles to begin with.

    Reply
  7. Great collection, call me old school but i never saw a responsive site using breadcrumbs. OK, the most of them don’t need it as they do not have in depth page structure… however i kinda miss it.

    Reply
  8. any clue as to where to place ads in a responsive design layout? Your examples are great but they contain no ads 🙁

    Reply
  9. Really interesting article! Responsive design continues to get a lot of attention. Thank you so much for this fine piece of quality content. Stay blessed

    Reply
  10. Designers are creating some incredible looking websites compared to a couple of years ago. Looks fantastic! Thanks for the post.

    Reply
  11. I believe you have done a good job by posting such informative article. It has been seen that responsive web design is a concept of developing a website design that helps the lay out to get changed according to the user’s computer screen resolution. Thanks for sharing it.

    Reply

Leave a Comment