30 Creative Examples of Responsive Web Design

By / Jun 3, 2011 / Inspiration
shares

Responsive web design means that the website will respond according to the medium that is being used to view it. These days websites are not only viewed on standard computer screens, but after the evolution of smartphones and tablets there’s a necessity to make websites that look good on multiple devices. In this roundup we have showcased some amazing and outstanding responsive web designs that use media queries to provide an optimal presentation on various screen sizes.

glitch

dustinsenos

clearairchallenge

trentwalton

owltastic

buildguild

dolectures

320andup

sasquatchfestival

cognition

interim

ribot

sweethatclub

sleepstreet

cohenspire

electricpulp

adifferentdesign

teixido

colly

stephencaver

hicksdesign

alistapart

porcupine

3200tigres

bakery

tileabl

visuadesign

teegallery

calebacuity

naomiatkinson

staffanstorp

About the Author

Hi, I'm Prakash Ghodke, a 19 year old from India working as freelance Web Designer. You can follow me on twitter.

26 Comments

  1. CJ Spencer
    June 3, 2011

    Thanks for showing Visua :) There’s a much more responsive, ‘touchy-feely’ version coming very soon!

    Reply
  2. Tristar Web Design
    June 3, 2011

    Thanks for putting the responsive version next to it. I’ve been looking at a lot of inspirational blog posts on responsive web design and its quite annoying having to click on ones your not that interested in just to see how it works. I like the Naomi Atkinson site, the boxes move like an animation and i’m already a big fan of ‘The Sweet Hat Club.’

    Reply
  3. (sic)
    June 3, 2011

    Amazing design capabilities.

    I actually found out if window resized to minimum width, the design is automatically swapping to mobile version….. Fantastic!!

    I use Chrome, btw.

    Reply
    • nick
      July 28, 2011

      ….. That’s what responsive web design is……

      Reply
  4. (sic)
    June 3, 2011

    Examples are very inspiring but can you also hint us what technology is used in these designs to achieve “responsive” effect? CSS switch, jQuery…?!

    Reply
    • Nicole
      October 14, 2011

      could be media queries and css, jquery, server-side scripts…

      Reply
  5. Seb Ashton
    June 3, 2011

    Here is another cool responsive design:

    http://www.glueisobar.com

    Reply
  6. Joe Myers
    June 3, 2011

    Wow, great post. Can’t wait to start using some of these techniques.

    Reply
  7. Kevin
    June 3, 2011

    Tessa, that website link you posted is not responsive. At all. Are you just spamming?

    Reply
  8. Shawn McCollum
    June 3, 2011

    http://mediaqueri.es/

    Reply
  9. Nathan Marcarelli
    June 3, 2011

    Awesome sites! Really like the first 5. Great article.

    Thanks,
    Nathan Marcarelli
    http://www.treelifedesigns.com Small Business Web Design

    Reply
  10. web development service MD
    June 3, 2011

    Fantastic web designs you have provided.

    Reply
  11. Abdu
    June 3, 2011

    A list of ‘Responsive web design’ websites without telling us why? How is that useful?

    Reply
    • nick
      July 28, 2011

      You obviously don’t know what ‘Responsive web design’ is.. Maybe do some research? Or.. Just look at the freakin’ pictures and you’d realize what responsive web design is… When you change the browser size, the website changes into a mobile/tablet mode… just look at the pictures…. geez.

      Reply
  12. Vimal
    June 4, 2011

    Thanks for the list. I was also greatly inspired by the article in ALA and experimented “Responsive design” in my site.

    Reply
  13. Leo Brown
    June 4, 2011

    Thanks for sharing this…..nice collection keep on continue….!!!

    Reply
  14. Stefan
    June 4, 2011

    Cool list, Owlfantastic has to be my favorite. I guess I love that the owl logo takes up a large portion of the site, where as many designers seem forced to making the logo small top left corner.

    Reply
  15. Lex Koff – Templamatic
    June 5, 2011

    Thank You. ‘media’ CSS query pretty much does all the magic =). It’s really educative for a CSS noob to see the code of these site. Thanks for a round up!

    Reply
  16. Ila
    June 6, 2011

    Nice collections. thanks for sharing.

    Reply
  17. lab
    June 15, 2011

    No, it’s not. Seems like link begging. Or she doesn’t know what responsive means…

    Reply
  18. Jam Ward
    August 9, 2011

    You’ve made a nice collection here, thanks for sharing!
    It’s defiantly gave me a few ideas to play with.

    Reply
  19. dreamincolor
    September 16, 2011

    Good collection very good sources for inspiration.
    But you forgot to mention my blog take a look http://www.dreamincoloronline.com/category/inspiration/

    Reply
  20. Aquaster webdesign
    May 1, 2012

    These webdesign examples really ask for response of the visitors. Look at the simplicity and ask try yourself for not clicking on the elements in the webdesign. lol

    Reply
  21. Mick
    May 8, 2012

    Hi guys, look at this full responsive design with a masonry layout:
    http://openlastminute.it

    Reply
  22. mike jonsone
    October 31, 2012

    I suggest : http://www.fe-el.com

    Reply
  23. Howard Steele
    July 1, 2013

    ‘Electricpulp’ has a very modern touch.
    Thanks for sharing this great compilation!

    Reply

Leave a Reply