30 Creative Examples of Responsive Web Design
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.
Related Posts
Here's some other articles that you will definitely find useful.
19 Beautiful Examples of Texture in Web Design
19 Beautiful and Colorful Websites for your Inspiration
20 Single Page Web Designs to Inspire You
19 Inspiring Examples of Text Over Images in Web Design
18 Websites that Take Scrolling to the Next Level
25 comments
CJ Spencer
June 3, 2011Thanks for showing Visua
There’s a much more responsive, ‘touchy-feely’ version coming very soon!
Tristar Web Design
June 3, 2011Thanks 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.’
(sic)
June 3, 2011Amazing 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.
nick
July 28, 2011….. That’s what responsive web design is……
(sic)
June 3, 2011Examples are very inspiring but can you also hint us what technology is used in these designs to achieve “responsive” effect? CSS switch, jQuery…?!
Nicole
October 14, 2011could be media queries and css, jquery, server-side scripts…
Seb Ashton
June 3, 2011Here is another cool responsive design:
http://www.glueisobar.com
Joe Myers
June 3, 2011Wow, great post. Can’t wait to start using some of these techniques.
Kevin
June 3, 2011Tessa, that website link you posted is not responsive. At all. Are you just spamming?
Shawn McCollum
June 3, 2011http://mediaqueri.es/
Nathan Marcarelli
June 3, 2011Awesome sites! Really like the first 5. Great article.
Thanks,
Nathan Marcarelli
http://www.treelifedesigns.com Small Business Web Design
web development service MD
June 3, 2011Fantastic web designs you have provided.
Abdu
June 3, 2011A list of ‘Responsive web design’ websites without telling us why? How is that useful?
nick
July 28, 2011You 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.
Vimal
June 4, 2011Thanks for the list. I was also greatly inspired by the article in ALA and experimented “Responsive design” in my site.
Leo Brown
June 4, 2011Thanks for sharing this…..nice collection keep on continue….!!!
Stefan
June 4, 2011Cool 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.
Lex Koff - Templamatic
June 5, 2011Thank 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!
Ila
June 6, 2011Nice collections. thanks for sharing.
lab
June 15, 2011No, it’s not. Seems like link begging. Or she doesn’t know what responsive means…
Jam Ward
August 9, 2011You’ve made a nice collection here, thanks for sharing!
It’s defiantly gave me a few ideas to play with.
dreamincolor
September 16, 2011Good collection very good sources for inspiration.
But you forgot to mention my blog take a look http://www.dreamincoloronline.com/category/inspiration/
Aquaster webdesign
May 1, 2012These 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
Mick
May 8, 2012Hi guys, look at this full responsive design with a masonry layout:
http://openlastminute.it
mike jonsone
October 31, 2012I suggest : http://www.fe-el.com