What is responsive web design?

Post 92 of 262

September 5, 2011Andreas ViklundLearn11 comments

I got a question a few days ago which was really good: What does “responsive web design” mean, and why should I use it? In short, responsive web design is a term that describes the concept of building a website design in a way that allows the layout to change depending on what screen resolution the viewer has. For example, an advanced four-column layout that looks great with a screen width of 1280 pixels (or higher) could be simplified into a more simple 2-column layout on screens with 1024 pixels width – and further down to a single column on small screens such as those on smartphones or small tablet computers. It is an alternative to building separate mobile sites, and when done in a good way it can look really beautiful.

Instead of going into details, I recommend you to read the excellent Beginner’s Guide to Responsive Web Design by Nick Pettit. It describes the concept and provides further links to a lot of useful articles that I have learned a lot from. So far, I haven’t released any responsive website template. But I will do that in the future for sure, both new designs and alternate versions of already existing template releases.

css3, responsive web design, templates

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

11 comments:

JasonSeptember 9, 2011 at 23:47Reply

I run my own Vancouver Web Design Company and I like that Article. I’ve stayed away from Responsive Web Design for the most part. Great article though.

MartinSeptember 16, 2011 at 22:02Reply

But I guess with responsive web design you really have to watch out and take all factors into consideration when designing a site that will fit on all screen sizes and smartphones as well. I am correct?

AbeSeptember 22, 2011 at 23:52Reply

Yes, you are right.

For more detailed information on this topic, read the following article:

http://www.impressivewebs.com/responsive-web-design/

druSeptember 25, 2011 at 20:58Reply

Great article, especially considering that a lot of people are now using tablets and smartphones
but I was wondering how well technique works with older browsers?

Joseph BuaraoJanuary 18, 2012 at 14:57Reply

wow.. great! article mate.. thank you so much for sharing this.. now I understand what is Responsive web design.. and thank you again for the link beginner tutorial.

kennetFebruary 14, 2012 at 08:14Reply

great article though… Responsive web design it is very well described

nichaelFebruary 16, 2012 at 08:49Reply

thank you so much for sharing this.. now I understand what is Responsive web design

SkiurlaubMarch 28, 2012 at 12:13Reply

I didn`t know anything about responsive web-design until now. I already visited the Beginner`s Guide to Responsive Web Design and it seems really suitable for the business I work for. Many of our clients are searching via their smartphones or tablets. I think until today no one thought about adopting the website to different screen width. I will pass it on in my company and maybe it might be realizable.
Thank you.

WMIApril 17, 2012 at 19:57Reply

Responsive Web Design will become one of the leading forms of web design, but there’s so many more things that you now have to account for that it might not be able to push itself to the forefront of web design.

JimJuly 31, 2012 at 12:02Reply

Good article, I agree that one is better off designing a site which is natively mobile friendly. Mobile browsers on iOS and Android including Safari, Firefox and Chrome are constantly being optimized to enable viewing websites in both 1024 and 1280. Additionally there is a plethora of smartphones in todays market with screen sizes 4.3″ and larger. I think 1024 is more than ideal.