Responsive Web Design: 50 Examples and Best Practices
Responsive web design term is related to the concept of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. More precisely, the concept allows for an advanced 4 column layout 1292 pixels wide, on a 1025 pixel width screen, that auto-simplifies into 2 columns. Also it suitably fixes on the smartphone and computer tablet screen. This particular designing technique we call “responsive web design”.
Responsive web designing is a completely different designing version than the traditional web designing, and developers (especially fresher) must know about the pros and cons of responsive web designing. This blog is a mighty example of the approach so we will reveal a few facts about the uses of responsive web designing. The basic instinct might be to choose media queries to develop a responsive site. However, the hassle you face with media queries is that new queries can pop up from moment to moment; each time the user experiences sudden and drastic changes to the look and organization of the site. Experts suggest using some CSS transitions to ease the jump.
Pages that include data tables pose a special challenge to the responsive web designer. Data tables are very wide by default and when you zoom out to see the whole table it becomes too small to read. When you try to zoom in to make the it readable, you are supposed to scroll both horizontally and vertically to look through it. Well, there are several ways avoid this problem. Reformatting the data table as a pie or mini-graph is an approved solution. The mini-graph fixes even in narrow screens.
Images in responsive web designs are called context-aware. Responsive web design images are primarily fluid images that can be replaced by context aware images, an updated version for better designing. This particular technique serves the purpose of responsive designing in true sense as the images serve at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues and a careful use of this can do wonder while designing.
Responsive Web Design Examples
Simon Collison
Andersson-Wise Architects
Stephen Caver
Sparkbox
Food Sense
The Boston Globe
Think Vitamin
Sasquatch! Music Festival
Internet Images
Staffanstorp
Seminal Responsive Web Design Example
Naomi Atkinson
Forefathers Group
Spigot Design
Adrian
We believe we are an exceptional team that works hard to do things the right way. We help designers and developers to find the good inspiration before create their works. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.
Stay in Touch with Us
Sponsors
PXLated
October 12, 2011 at 3:41 am
Seems to be a very predictable rearrangement pattern to most of them.
John
January 17, 2012 at 10:17 pm
Would you prefer it to be unpredictable? That’s not good UI design.
Susan
October 12, 2011 at 9:50 am
Very nice! Beautiful site designs as well. :)
aledesign.it
October 12, 2011 at 11:56 am
A great example by design responsive. So useful when I see some site in my
smartphone..Is the time for these sites, now.
Designrshub
October 12, 2011 at 2:10 pm
I like those thumbnails :) Its really awesome to see a uniformed images.
Wing
October 13, 2011 at 12:07 am
Surprised to see http://webdesignerwall.com is not on the list.
Dzinepress
October 13, 2011 at 3:18 pm
excellent examples for design inspirations. thanks
Michael Hobson
October 13, 2011 at 7:09 pm
Add mine to the list! http://www.movembermike.com
I redesigned it last weekend using the getskeleton boilerplate
Adrian
October 13, 2011 at 7:15 pm
Hi, in the next showcase.
Daphne
February 22, 2012 at 5:47 pm
You should remove the responsive button on the bottom on smaller screens. They can’t do anything with this.
Roll studio
October 14, 2011 at 10:31 am
Great showcase, but take a look at http://www.helpfulstrangers.com too!
Jeremy Linskill
October 19, 2011 at 4:18 am
Great article and examples. I think something else that should be mentioned is that in the field of web design and development, we are at a point where it is impractical – financially and otherwise – for any business to attempt to keep up with the seemingly endless amount of new devices coming to market. Understanding and being able to apply responsive design is key to operating in this reality.
Robert Tobys
October 28, 2011 at 3:12 am
A few more great examples here: http://www.greengoatmedia.com/blog/10-new-responsive-design-web-design-examples.html
Sagar Ranpise
November 3, 2011 at 12:49 pm
Hi Adrian,
Very nice post on responsive design. I have also created a post on creating responsive html5 page using media queries. I hope you like mine too.
http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/
Thanks & Regards,
Sagar S. Ranpise
contact@afi-aveyron.fr
November 8, 2011 at 12:11 am
Very beautiful theme. The work of the fonts is in the spotlight.
Terry
November 8, 2011 at 7:11 pm
This is a great list, I especially liked ASU’s site. I read a good article about workflows that might be helpful to others interested in responsive design.
bisnisukm
November 14, 2011 at 5:22 am
awesome.
nice collection.
Michael Byers
November 22, 2011 at 2:42 pm
Really good examples. I am trying hard to make sure my future designs are responsive.
KBG
November 28, 2011 at 11:55 am
This is a great list,
take a look at http://www.alicelists.com. the way I am implementing ‘responsive design’ ( it is currently only working in latest firefox, safari, chrome and opera, and it does not work on IE. I am still working on it…), if you are interested in my project. drop me a message…kbg@alicelists.com :-)
1. it changes based on the browser’s width ..
2. the ‘skin’ can be changed based on the width and height , but i finally decide let the viewer selects the skin’s color….
Tammy Cornett
December 2, 2011 at 12:12 am
After a complete redesign and new content creation in August, this week our site (it.eku.edu) is now responsive. Our goal with the redesign was to be clear, concise, consistent and keep our content correct. The goal with the RWD is for our users (students, faculty, staff) to be able to find the IT support they need on any device.
Nick M
December 9, 2011 at 4:19 am
This was a very interesting article, I liked the many examples.
Boris Kotevski
December 12, 2011 at 3:11 pm
Considering the above example can be a great step in the right direction toward a good website design.
gene keenan
December 13, 2011 at 3:42 am
The best one http://www.audiovroom.com/ is not listed.
nor is our own site: http://www.isobar.com
xevica
December 19, 2011 at 11:01 pm
Very useful article! I think that the responsive design trend is definitely bringing a lot of players on the table. We also have a nice demo that is not listed in your list: http://www.xevica.com/responsive-design-demo/demo.html
tim
December 20, 2011 at 2:01 am
this one is also pretty good.. http://www.smart-urban-stage.com/
Eric Snowden
December 20, 2011 at 2:05 am
I just redesigned my site using Foundation. Would love to be added to the list – http://www.ericpaulsnowden.com
Greg
December 20, 2011 at 10:43 pm
Some great examples here. Also thinking of developing a responsive layout for my site next year.
For anyone interested I’ve started writing a series of articles on responsive design here:
http://www.phoenixstudios.co.uk/blog/2011/03/02/responsive-web-design-an-introduction/
Tim Conrad
December 22, 2011 at 8:37 am
Take a look at http://www.aquatera.ca. Just finished new site design as well as responsive design. Now to make those features grow!
Sohel
January 10, 2012 at 10:00 pm
Hey its very nice to learn and very interesting.
Joseph Buarao
January 18, 2012 at 1:55 pm
Great collection mate! :) thanks for sharing this mate
Paul Eustice
January 18, 2012 at 8:35 pm
Some nice examples here. I recently launched my site (I actually started playing with it in December 2010 but I got lazy) which uses a responsive layout with column-count, which I haven’t seen used on any other sites.
It’s also fluid between breakpoints, which is something I think many people miss out, to ill effect. What point is a responsive site that isn’t fluid between your set resolutions?
Take a look :)
http://pauleustice.com
Sahil
January 19, 2012 at 1:30 pm
thanks, great collection of these responsive designed sites, this is really a good reference.
Joe Twumasi
January 20, 2012 at 2:31 am
Nice list on responsive web design and looking forward in getting my new website to this technique in making it easier on different screen resolution.
Martin
January 28, 2012 at 3:47 am
Im currently working on redesign project: You can take a look: http://www.aktivtek.no/hjemmeside-design.html I just hope to find some inspiration soon. I have been trying to figure something out but it take some time. BTW Arrrrcamp Conference is really cool.
Scott Levy
January 30, 2012 at 4:58 am
Great post. Here’s a handy list of free web design tools to create polished website styles and web app designs
http://blog.caspio.com/web_apps/free-web-design-tools-to-style-your-website/
TJ
February 3, 2012 at 12:13 am
This is a great article and some really good examples of responsive design.
I think we’re really going to start to see a shift from traditional design to responsive design. It makes the most sense for client who are looking to design their website and applying similar themes to a mobile or tablet device without having to create a native app.
If you’re looking for more inspiration on responsive design, check out this gallery @ http://www.gottaloveresponsivedesign.com.
- TJ
Theme Weekly
February 4, 2012 at 4:22 pm
A very good and fresh collection. Good for inspiration. This has also been featured in the very first issue of our Theme Weekly.
Ken
February 5, 2012 at 1:47 pm
Great examples of very responsive and fluid design. Really nice for inspiration for any designer willing to level up their skills for flexible work
reidy68
February 8, 2012 at 8:22 pm
…great examples! any recommendations on where i could learn this style of web design? ie books or preferably video tuts?
cheers!
Michael Hobson
February 10, 2012 at 6:14 pm
Just redesigned my portfolio site responsively! http://www.tremulantdesign.com
Sheryl
February 11, 2012 at 2:11 am
Love these examples. Does anybody have any examples or insight on how to apply responsive design to desksites that currently employ mega-dropdown navigation?
Nicolas ROSSI
February 16, 2012 at 12:53 pm
Hello, here is an example of a French site.
Nicolas ROSSI
February 16, 2012 at 12:54 pm
Sorry, the link : http://www.sitadapt.com
Prodyot
February 18, 2012 at 8:06 pm
Unquestionably this is an awesome list.
Each of them is a great treat to my responsive eyes.
Now, had the title of this collection read “50 Mind Boggling Responsive Templates Free To Download” then maybe I would have jumped in undefined uncontrollable ecstasy and maybe would have collapsed dead with a sudden heart attack :)
Thanks for saving my life :)
And, thanks for sharing the list.
Dinesh
February 20, 2012 at 6:19 pm
Inspirational … another good example of responsive web design is labnol include it.
Coco
February 20, 2012 at 9:35 pm
Thank you for the article with those great examples. There are so many good inspirations …
Abhishek Pandey
February 29, 2012 at 1:11 pm
Kindly mail me all the updated information about design
Alice
February 29, 2012 at 6:32 pm
A rare example of news media employing responsive grid comes from Belarus where a regional news portal Westki.info (http://westki.info) has recently switched to a new design with the above-described features.
rakesh
March 5, 2012 at 8:16 am
Well i am here for the first time. Love the idea of responsive web- design otherwise i always think that we can have only two type of website. Fluid or fixed with.
Sebasitan
March 9, 2012 at 4:02 pm
Great lists that really presents at lot of interesting examples. We are currently trying to educate our clients in Responsive Design, and I will add this to a “must read list” :)
Westleigh
March 18, 2012 at 7:05 pm
How to I brief my designers for a responsive web design layout? or is this purely a developers role where he/she must convert the design into responsive code?. How is responsive handled / done when it’s PSD to HTML/CSS?
Mads Sørensen
March 20, 2012 at 2:05 am
Very nice examples here! RWD is moving along really fast, but I wish there was a better way to do images responsive!
I found this little browser app who’s located in the menubar, it’s really great for when I’m developing my responsive sites. Check out http://www.minisizeapp.com.
Steve Dwyer
March 21, 2012 at 10:45 pm
This is a very cool list of responsive design examples. A couple members of our Front End Development and Design team at the agency I work for (Hanson Inc. http://www.hansoninc.com) presented a Slideshare talking about the future of responsive design. Check it out… It’s loaded with great information and may be helpful ~
http://www.hansoninc.com/slideshare-what-is-responsive-design/
Either way, great examples.
P.S. Our agency website was built using responsive design – http://www.hansoninc.com
Cheers!
Steve
Stein
March 22, 2012 at 3:08 pm
Thanks for these great example websites! Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.
PXLated
March 22, 2012 at 7:12 pm
My concern also – Even though these sites have different “style” they seem to all be the same. Formulitic. Mobile is now our new IE5, a limiting factor.
Peter
March 23, 2012 at 11:30 am
Here is a nice Overview about Responsive Webdesign in german: http://www.bake-the-web.de/2012/03/20/responsive-webdesign-erklarung-und-vorteile/
Mohsin Nazir
March 23, 2012 at 1:56 pm
responsive web design is awesome
Sebastien Gignoux
March 28, 2012 at 11:28 pm
Hi Adrian,
Very useful post to get inspired. Thanks.
I am trying to find out how widespread responsive design has currently become for web designer, do you know of any survey or polls?
Since I haven’t found anything I am trying to do my own poll. Answering it will take only 4 clicks and less than 30 seconds. You can access it here: http://responsive.wufoo.com/forms/z7x3x5/ and the results are here: https://responsive.wufoo.com/reports/z5p8q2/
If you could just answer it or even spread the word with a twit or something, that would be great. I think the results will interest everybody in the web design community.
DiegoQ
March 31, 2012 at 4:01 am
Amazing design.
Besides the new way to be friendly with the user: responsive design rocks!
Arun Sengupta
April 17, 2012 at 3:43 pm
Love the collection :)
Great work :) and thanx for so many awesome examples :D
Carla Dawson
April 19, 2012 at 5:20 pm
Does anybody know of site that sells responsive design themes? Template monster has some but not enough. I am looking for wordpress themes.
Thanks
Carla
Adrian
April 19, 2012 at 5:26 pm
Here are responsive WordPress themes http://designmodo.com/responsive-wordpress-themes/
Tony Porto
April 20, 2012 at 6:35 am
Awesome examples that go beyond the usual grid layouts
Janimatti Ellonen
April 27, 2012 at 8:11 pm
Hi, this article causes my Safari on the new iPad to crash. Happens every time. Tried 4 times.
Melvin Thambi
May 3, 2012 at 8:56 am
Great List, thanks for sharing this article m8!
Michele
May 9, 2012 at 12:58 am
Hi guys, look at this full responsive design with a masonry layout:
http://openlastminute.it
Frederik Heyninck
May 17, 2012 at 10:57 am
This is also a nice example to mention http://www.felix-partners.be
PV
May 21, 2012 at 11:59 am
here’s another great example of responsive design..
http://www.visitfinland.com