The term Responsive Web Design was coined By Ethan Marcotte to describe a new technique for providing alternate layouts for multiple screens sizes within a single HTML page. In his article on A List Apart Ethan details how to use Media Queries (part of the CSS3 spec) to use different styles for the page based on the width of the browser window.
It is easiest to see the effects in his demonstration page by adjusting the width of your browser window. You will notice that his fluid grid snaps to a new layout when the window’s width is 480 pixels or less. You will see the same layout on your iPhone or Android phone.Since the release of this article, there has been a good deal of discussion about the technique. I’ll review some of that after the jump.
- It relies on support for Media Queries and if you are targeting things beyond the most capable mobile browsers, the technique will not work.
- It adds both code and image weight to the page. This is particularly negative when you consider the limited bandwidth, ram and processing speeds of mobile devices.
If you read one article, this should be it:
Next, read the original:
If you want more still, read the response to that first article: