Gone are the days when the good old’ desktop was the sole medium of Internet browsing. With the ever changing technological landscape, we now see a host of Internet access mediums around us in the form of smartphones, net-books, ultrabooks, e-readers and tablets. This has also generated the necessity to allow device-independent and resolution-independent web design that looks and feels the same across all these devices.
For example, your smartphone may offer a screen resolution of 960 x 640 pixels; this changes dramatically to around 1366 x 768 pixels for a desktop PC. Well, thanks to the new age Responsive Web Design (RWD) technology, web pages are now designed to acclimatize according to the outline of the viewing environment and are no longer limited by browser or machine.
In responsive web design, the grids used are based on fluid proportion technology. As a result, the grids use ems/percentages instead of pixels. So, when the grids no more depend upon the number of pixels, it eventually allow them to stretch and squeeze according to the screen size. In simple words, it adds flexibility to the web layout. What this means for you is that your site now has a much wider target audience reach translating to increased prospects.
To make a site responsive, it has to fulfill three prerequisites:
1. A flexible (or fluid) grid of web elements (use of Marcotte Calculator is a popular method): Here the size of web element and the container size determines the layout in terms of number in ‘ems’ that can be programmed to give flexibility of viewing across different media.
2. Use of media queries: This is W3C’s answer to the challenge of showing images consistent with the web browser. They allow web designers to program target styles based on different device properties such as orientation, resolution, screen size etc
3. Use of fluid images: Use of programming to restrict the image size to be less than that of the container is what ‘fluid images’ denotes in the simplest terms. So irrespective of how small or big the container becomes, the image within it resizes itself proportionately to fit the container.
The impact that responsive web design has had on web design can be gauged from its popularity. In fact it was recognized as the #2 top design trends of 2012 (source – .net Magazine – Jan 2012).