Home >> Design Inspiration >> 10 Incredible Examples of Responsive Web Design
10 Incredible Examples of Responsive Web Design

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.

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

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

Gravitate 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

Spark Box

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

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.

dConstruct

dConstruct

dConstruct is a stunning example of dynamic images that are resized on the fly. As you drag the window left and right you will see that the padding between images isn’t what’s adjusting in width and size, but the images themselves are. Once you hit a certain parameter all of the images resize to a smaller, or larger depending on if you’re shrinking or expanding the site, version to accommodate the screen size.

Clean Air Challenge

Clean Air Challenge

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

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.

Flexslider

Flexslider

It only seems fitting that Flexslider also has a flexible website to promote their handy jQuery image slider. And what better way to get people interested in the slider than to use pictures of cupcakes to show off how it works! One of the best things this site has going for it is that you don’t lose a single thing between widescreen mode and mobile mode, all icons, images, elements, comments, and everything stay there. This way visitor’s don’t feel cheated between missing out on content if they’re browsing the site from their mobile device or desktop computer.

The Cacao Trail

The Cacao Trail

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

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.

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’s 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.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.

Ultimate Designer Toolkit

About Scott Stanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton

26 comments

  1. Brad @ Web Design Gold Coast

    One of my favorites is http://www.360niseko.com – I think responsive designs in the tourism information industry is a great match! While people are on holiday using the mobile or tablet to look up reviews and information is common practice, but frustrating navigating websites that have a poor mobile ready site.

  2. Alec

    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.

  3. Farooq Siddiquee

    This site is very convenient for us and also very much user friendly.

  4. Cube @ Agence web en vendée

    Alsacreation est top, ils font pas des bouquins pour rien ;)

  5. aledesign.it

    Is a good innovation this..in the future I hope to make a good sites without flash o
    similar things. Thanks for examples.

  6. seth

    http://www.css-tricks.com/ should definitely be added to this list!

  7. Marnus Wolvaardt

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

  8. zalel

    Where can we find some useful info about the coding that makes this responsive approach possible?

  9. Scott McGuire

    Hey that is a good post & a good set of conversations too. Keep sharing, that is good…

  10. Vlad Anichkin

    Best example of responsive design I’ve seen to date.

  11. web design

    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

  12. Sahriar Hassan Riaz

    It’s very good est example of responsive design

  13. vanessa

    any clue as to where to place ads in a responsive design layout? Your examples are great but they contain no ads :(

  14. Inspire web design

    I love responsive techniks, nice example

  15. Art 8

    Muy buenos los ejemplos. Espero nuevos posts si son todos de esta calidad ;-)

  16. Shingo Tamura

    Fantastic examples of responsive web design. I’ve written a tutorial about responsive design as well. http://shingokko.com/blog-entry/responsively-design-a-blog.html it should provide few useful tips for those who are keen on the coding side of things. Thanks!

  17. Theo

    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.

  18. Stacy Summers

    Lovely web design examples! Thank you for inspiration :)

  19. Nalie

    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.

  20. Bill NYC

    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.

  21. Wayne Strickland

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

  22. Internet Marketing Mentor

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

    Keep up the good work :)

  23. techaxle

    These Web Design are great. Thanks for Sharing. Excellent Work Indeed.

  1. Pingback: Responsive Web Design by whatsthebigidea - Pearltrees

  2. Pingback: O scurt? introducere în Responsive Web Design | Ctrl-D

  3. Pingback: Mobile-User-Interface-Beispiele | webSimon.eu

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

10 Incredible Examples of Responsive Web Design