The first time i first heard about it acouple of years ago, responsive web design, i thought it was just a bundle of rules and methodology to build a web with ...responsibility??..Error free design that only could come out from a well organized studio in a dry village by a sin free person??, ...then i just understood two things:
- I needed to improve my english as "responsive" has another meaning that nothing has to do with responsible.
- Responsive in this case stands for "adaptable", "flexible"..
Which finally turned into a web design that can suit to any screen resolution and device. How is this done??. Where is the magic?. Well, fortunately there is no magic so it will depend a lot on your skills with makes it exciting!!, isn't it?.
A responsive website is based in three pillars:
- A pure Responsive Website may use only one CSS, but another approach is, through CSS3 Media Queries, choose the right CSS style rules based on the Device you are using, mainly a big screen, a laptop, a mobile phone or a tablet. Let's say that the trick in any of the cases is to get to know the width of the screen Resolution and resize the elements to fit properly in it.
- Use of Relative Units and Avoid Absolute units. Mandatory to be able to resize the contents to the screen resolution. This will created Fluid grids and components. This applies as well to images and multimedia
- Components alignment. Depending on the device and screen resolution you may prefer to have the content align in one column, or two, of the menu may be on the left hand side or in a listbox!!.
What are the media queries??. Is a CSS3 mechanism, or let's call it module, which help your site to adapt the rendering of webpages based on conditions such as screen resolution. I recommend this link about CSS3 Media Queries from the great Web Designer Wall. Choosing different CSS and same HTML you can create very nice Design that will adapt to any device. I recomend you to take a peek at this msdn Article "HTML5, Responsive Web Design", ..yes i am mentioning a Microsoft resource...for those of you that consider me a MAC guy!!
Relative units sometimes may take to unwanted results such as a content oversized in a 27" display or a ridiculous size of a movie in a 3 column website in your galaxy SIII big screen. But combined with the other 2 responsive website Pillars everything will be under control.
The proper way to control component alignment is mainly done using CSS styles, although developments as jquery masonry will make your day on this issue. Actually these two links can be usefull to undertand how easy that alignment may be accomplished:
As i said before, there is not a magic application which will turn into your old site into a responsive web design but reading through the links that i have provided will help you a lot!!, ..and surely you will get to develop web as the ones in these 20 examples of Responsive Web Design.