So this ‘responsive web design‘ lark is proving rather popular isn’t it? Unless you’ve been living in a cave for the last 12 months you’ll know that the trend of building websites that respond to different browser window sizes is one that is showing no signs of abating.
Below is a selection of 40 inspiring websites that use CSS3 media queries to create an adaptive user-experience. Some are new, some are older, all are fantastic. To learn more, here is another tutorial that teaches you how to Create a Responsive Web Design Template.
40 Responsive Websites
Harpeth Valley Animal Hospital
More Hazards More Heroes
Naomi Atkinson Design
New Adventures in Web Design 2012
Final Thoughts
It seems to me that the ‘responsive’ approach to web-design is more than just another trend. People are now accessing the Internet on a vast range of different devices, from large desktop monitors, to laptops, tablet computers and smart-phones. This isn’t something that is going to change.
It is relatively easy to develop websites that function effectively across a range of different devices just by using CSS media queries and elastic layouts. Sure, it requires a little extra development time and a lot more testing. But we used to spend a lot more time hacking websites to work with the likes of IE6 (we sometimes still do). Web browsers are becoming more consistent but web devices are becoming more varied. The time that we used to spend considering browser compatibility now needs to be spent considering device compatibility. Do you agree?
Do you have any favourite examples from this list? Have you seen any other excellent examples of responsive layouts? Let’s hear them!
