Responsive Web Design

Recently i was looking into Responsive Web Design (RWD), as i see there is a lot of momentum.

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Via :

I did not understand the full meaning of it until i started reading this book “Architecting Mobile Solutions for the Enterprise” by Dino Espito.

The essence of RWD is that when you are building websites for mobile, the size vary from device to device. Now how do we build a site which works with the different sizes?

A Responsive Web design is a client side solution which uses CSS for the Visual Characterstics and JavaScript for Behavior characterstics to build sites.

This means that you arrange webpages around a fluid HTML layout, which is then reconfigured and styled dynamically on the client using JavaScript functions in your pages. Your Javascript code, decides the browser’s capabilities and rearranges the page, apply styles etc.

Key technical features of responsive Web design:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

Via :

Sounds very good. If you happened to have good javascript programmers, then its definitely worth looking into this.

Couple of good pointers

Happy Learning!!!!


1 thought on “Responsive Web Design

  1. If you happened to have good (javascript) programmers, then its definitely worth looking into this.

    Ruled out :-), Good Programmers are becoming an extinct species.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s