Responsive Web Design(RWD) and W5H?????

W5H is!! guess what? Read and find it…

What is it?
Responsive web design (RWD) is a designing paradigm around web designing community which says that any web site which is a responsive website can respond to its environment!

Respond to environment means what? It says that you view this web site on any device or any platform it will adjust itself according to the environment it is being viewed in.
Untitled.png

Why it is required?
Day by day, the number of devices, platforms, and browsers that need to work with your site rows.
Will it not be cool if we develop a single website for hundreds of devices and platforms available out there? And it will adjust its layout and behaviour according to the environment?
That is why it is required that we move towards responsive web design approach which exactly solves the problem above. Responsive websites adjusts their layout according to the view port/screen size we are viewing them same as the screen shot above.
Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.
2.png
One site for every screen…
Who is using it?
Oh!! Is it even possible? Is it a Proof of Concept? Is it in Demos?
Well it is not just being used but being used by some of the biggest companies and some of the politicians also!!
Some examples of RWD are:
The Boston Globe: One of the largest RWD project out there. Find out more at bostonglobe.com
 3.png

Grey Goose: Responsive site for Grey Goose with parallax scrolling animation find more at www.greygoose.com
 4.png
Political RWD: Barack Obama
The Obama campaign continues to be at the leading edge of web technology.
barackobama.com
 5.png
And there are plenty more to explore at http://mediaqueri.es/
When to use?
Well there are two critical resources an enterprise has that is Time and Money. So is it required that you create a website responsive and it will give you large revenue? Well consider having Leave Management System as a responsive website which you can access from your desktop, ipads, iPhones, Androids and plenty more devices and platforms. Or you create a desktop application in Web Dynpro and create separate applications for the same for all varied platforms available out there? Answer is pretty much clear going with a single RWD website.
Another critical thing to consider is the performance of the application. So what do you think which approach is better? Well if you are creating a really high performance application say image processing applications then better you go with native approach and develop a separate application for each platform.
If performance is considered then the performance factor will be affected by the content of the web application that you are delivering. Say if it is just some form processing and displaying content which is the case with most of the enterprise web applications. So here we can leverage the RWD pattern and create single web application for every platform!
Now I think you have reached the peaks of your curiosity bounds to know how one can achieve this.
How?
Well there was an adaptive approach used to web designing prior to the CSS3 and HTML5 releases where multiple fixed width layouts were created for each screen size.
Later with the help of media queries (a very significant part of RWD concept) introduced in CSS3 and data attributes from HTML5 and some tricky javascript stuff it is quite possible to create a layout which responds to its environment.
Media queries:
In CSS we define media type and its attributes using @media rules. For example, if we want to render something only specific to media type screen and on minimum screen size of 500px.
@media screen and (min-width: 500px) {…}
Data attributes:
They are same like general HTML attributes example:
<div data-visibility=’phone’></div>
There are plenty of Frameworks available for rapid development of RWD applications. If you want more control over the design and behaviour then you can create your own Framework too!
Where to Learn?
There are plenty of tutorials and lots of demos available on TUTS+ (webdesign.tutsplus.com) or the best is Google what you want to know more about RWD.
Some of the leading frameworks available providing RWD features are:
Some of the useful links you can explore to know more about RWD concept and resources.

 
Note: Check all the above websites in HTML5 compatible browsers(IE10, Firefox 16+ Chrome and Safari)