25 Beautiful Responsive Web Design Examples for Inspiration

Sep 15 2012 by Jacob Gube | 33 Comments

Responsive web design is the practice of enhancing the experience of the user by adapting the web page layout to the device he or she is using when accessing the site. There are several ways to create a responsive web design, media queries being the standard technique.

Check out the beautiful responsive website layouts below for inspiration in your own responsive web design projects.

1. Maryland Craft Beer Festival

Responsive web design example: Maryland Craft Beer Festival

2. Daniel Vane

Responsive web design example: Daniel Vane

3. Inspire Conference

Responsive web design example: Inspire Conference

4. Formfett

Responsive web design example: Formfett

5. Forefathers Group

Responsive web design example: Forefathers Group

6. Design Week Portland

Responsive web design example: Design Week Portland

7. Humaan

Responsive web design example: Humaan

8. These Are Things

Responsive web design example: These Are Things

9. Andersson-Wise Architects

Responsive web design example: Andersson-Wise Architects

10. Café Evoke

Responsive web design example: Café Evoke

11. Stephen Caver

Responsive web design example: Stephen Caver

12. Ryan O’Rourke

Responsive web design example: Ryan O'Rourke

13. Simon Collison

Responsive web design example: Simon Collison

14. Fork

Responsive web design example: Fork

15. Sunday Best

Responsive web design example: Sunday Best

16. Earth Hour

Responsive web design example: Earth Hour

17. Belong

Responsive web design example: Belong

18. White Lotus Aromatics

Responsive web design example: White Lotus Aromatics

19. Cognition

Responsive web design example: Cognition

20. Create Digital Media

Responsive web design example: Create Digital Media

21. Full Frontal 2011

Responsive web design example: Full Frontal 2011

22. Garret Keizer

Responsive web design example: Garret Keizer

23. Dust and Mold

Responsive web design example: Dust and Mold

24. Clean Air Challenge

Responsive web design example: Clean Air Challenge

25. Dress Responsively, LTD

Responsive web design example: Dress Responsively, LTD

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

33 Comments

Georgios

September 15th, 2012

I am anxious to the further development of responsive web design. Great examples, thanks!

Rumjhum

September 16th, 2012

This collection is a bunch of fresh grapes which act as a mind appetizer for me.
Now I’m ready to design something… best of mine..:)

jion

September 16th, 2012

Hello,
Great design.

Ferdinand

September 16th, 2012

Wonderful collection. Is there a tutorial that we can follow on how to design a responsive layout?

Jacob Gube

September 16th, 2012

@Ferdinand: I’ll write about my favorite tutorials already on the Web on designing responsive layouts. I think other readers are interested in knowing how to design responsive layouts too; thanks for the inspiration.

Ramnath

September 17th, 2012

Nice collection and got some inspiration for my current work. Thanks for sharing. :)

Rumjhum

September 17th, 2012

really nice collection…I’m getting refreshed.

Allison

September 17th, 2012

Jacob,

Thanks so much for including Cognition!

Have a great day,
Allison Wagner

Tim

September 18th, 2012

Some cool stuff. Unfortunately, the majority of the phone layouts have no clear calls to action. Take the Inspire Conference just for one. What am I supposed to do when I go to this on my phone? It offers no direction, no buttons, nothing.
These are responsive for the sake of being responsive rather than having a purpose. If there is no purpose other than to try and look cutting egde, then you might as well give up on yourself as a web designer. That is just the same as using Flash for the sake of using Flash.
Sites like Forefathers have actually thought about and tested how their site works and looks at a smaller size.

Justin Lanigan

September 19th, 2012

Suuuuuch a good list on an increasingly important topic.

Janis Davis

September 19th, 2012

Thank you for the inspiration. I have followed your tutorials and look forward to seeing more!

Gunjesh Kumar

September 19th, 2012

I liked Formfett and Dust and Mold. Great collection of responsive websites. A true inspiration.

Thanks!

Rosalinda Lieber

September 20th, 2012

Cool website designs! And I am looking forward to more of your responsive web designs. Just new to this web designing career and those designs will help me a lot in building my new project sites. Thanks

Ted

September 21st, 2012

This is a wonderful collection of responsive web design. It’s given me some great ideas to work from.

Luis Salazar

September 23rd, 2012

Great selection of awesome sites Jacob. Oh Ferdinand, SIx Revisions actually does have some tools to start you off on responsive design. Its an older article but still very useful. http://sixrevisions.com/tools/responsive-web-design/

Jonah

September 24th, 2012

Great selections. My sites layout is fluid. It’s the way to go with the climbing number of mobile devices accessing sites.

Jonah

September 24th, 2012

Great examples of responsive design indeed! My site is responsive as well. It’s the only way to go with the climbing rate of mobile devices accessing sites now.

arkadiuss

September 26th, 2012

Hey guys, please take a look at this site: http://stronynasmartfony.pl/
It works very cool on tablet and smartphone. Have fun! :)

Gagan Chhatwal

September 26th, 2012

Amazing work I liked it thanks

chris s

September 27th, 2012

Jacob, nice list of responsive web design examples- thanks for this. there’s a lot of talk about what is better responsive web design or adaptive (separate mobile site) – Which do you think is better? Like to know your thoughts on this.

Also, we made a quick video of a few top US organizations responsive web design examples here if you want to check it out…http://www.responsivewebdesignblog.com/2012/09/responsive-web-design-examples/

Brett Pollak

September 28th, 2012

Nice examples. Check out our Admissions site http://admissions.ucsd.edu/

Adriel

September 28th, 2012

Gorgeous, love the Maryland craft beer one.

Anthony

September 29th, 2012

I think Earth Hour design looks attractive. Designing a responsive theme is the current need for top websites and I will appreciate if you start posting some tutorials for newbie designers.

Griffin Jones

October 4th, 2012

Woah! Daniel Vine’s art is epic! Totally digging it. That type of design fits perfectly for my personal site.

John

October 4th, 2012

Got damn… I have to make a responsive website soonish! This is the future of websites for sure.

Bark Golgafrincham

October 4th, 2012

Just be careful… Responsive Web Design is not just about widgets. RWD is about methodology, code management, and good design — not just media queries. The RWD you read about is reality only for brochure and news sites, not for web applications.
See here for more:
http://wp.me/p2brND-8C

Veruca

October 7th, 2012

Thanks for sharing such a nice collection of designs. I really like #18.

Very subtle, elegant and pleasing to the eyes!

Beautiful!

Stacy Summers

October 8th, 2012

Lovely web design examples! Thank you for inspiration :)

Brianna Deleasa

October 8th, 2012

Great collection of responsive layouts! I absolutely love the idea of responsive layouts. I believe it is becoming very vital with all of the different screen sizes today.

Sara Petersen

October 15th, 2012

Such a great list, thanks for the post! I’ve compiled a list of my favorite 11 responsive website designs. http://www.responsivewebdesignblog.com/2012/10/11-awesome-responsive-web-design-examples/

Ria

October 21st, 2012

What a great collection you’ve got for us here, thank you. This post certainly inspired me and gave me some great ideas, especially for some better ways I can style the nav menus.

sean

March 26th, 2014

The site designs are nice but having everything shift around is not my cup of tea. The site earth hour does not even re-size.

Leave a Comment

Subscribe to the comments on this article.