For example: Two user, one with a screen 1360 pixel wide, one with a screen 1024 pixel wide, access the same site with Responsive Web Design. The former may see the site with a 4 columns layout while the latter see the site with 2 columns layout, even though the content was the same and the site's width never exceeding their browser’s size.
Such an effect is achieved thank to the flexible grids and layouts (which work using percentages and EMS instead of the traditional pixels), as well as Media Query.
Why Responsive Web Design?
Prior to RWD, “Mobile support” means the site has to have at least two different layouts: one for PC/Laptop and one for mobiles. Sometime, it required several: one for PC/Laptop, one for Black Berry, one for iPhone, one for iPad, etc. With time, as more mobile devices are created, the requirement for ‘Mobile support’ will only keep expanding.
However, with a Responsive Web Design, most devices accessing the site will be seeing the same content and layout, which fluidly adapted itself to fit their screen solution. This eliminates the need for an ever-expanding repertoire of alternative layout.
Even on PC and laptop, RWS helps make web-browsing more convenient, as the site will change to fit your current resolution and window size, allowing you to avoid scrolling both horizontally and vertically at the same time.
