Responsive Web Design

Feb 7, 2015   Allumez   Web Designing

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:

Browsers of basic mobiles do not understand JavaScript or media queries. So basic approach is to create a basic website and enhance it for PCs and smartphones using “Mobile First” and unobtrusive JavaScript.

To support a website on basic mobile phones that lack JavaScript, mobile device detection and browser detection are the two methods of deriving if various HTML and CSS aspects are supported. However these ways are not completely acceptable unless used in database of device capabilities.

Many other JavaScript frameworks like jQuery, and jQuery Mobile are also popular that can test browser support for HTML/CSS features.

Other Approaches:

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.

Challenges:

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.

 

 

History:

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.


Share this post

We are always here to help. If you have a query Send Now