Responsive Web Design
Responsive web design is a proposal to web design targeted at drafting sites to provide an excellent viewing experience-easy reading and navigation with a minimum of planning, resizing, and scrolling across a broad range of electronic devices such as tablets, mobiles phones, laptops, etc.
A site which is designed with RWD (Responsive Web Design) adjusts the layout by using proportion-based grids, fluids and CSS3 media queries. This is done in the following ways:
- Flexible images are sized in respective units to prevent them from displaying outside the holding element.
- Media queries allow the page to use variety of CSS styles based on the width of the browser.
Concepts useful in RWD:
Compared with a simple RWD approach, RESS (Responsive web design with Server-side components) or device experience approaches are useful in providing a user experience that is better optimized for mobile phones and tablets.
One ongoing challenge for RWD is that some videos and banner advertisements are not adaptable. And the other is that RESS is more expensive to develop. So it is reserved for organizations having large budgets.
Ajax can be used to display various advertisements variants on a page.
Testing RWD Designs:
There are many ways of testing and validating RWD designs varying from mobile site validators and emulators to testing tools such as Adobe Edge Inspect. The Chrome console and the Firefox browser offer resizing tools for responsive design viewport.
Cameron Adams first in 2004 demonstrated a site layout example that adapts to browser viewport width. By 2008, few related terms such as “liquid”, “elastic”, “flexible” and “fluid” were being used to depict layouts. CSS3 media queries came into existence in late 2008. The term RWD was coined by Ethan Marcotte. He defined it to represent fluid grid, flexible images and media queries.
Somebelieve that responsive design will be more dominant than native apps because of the browser compatibility and the cost associated with programming those apps.