Understanding the Dynamics of Responsive Web Design

September 2013

rwd In today’s times, responsive web design (RWD) has become one of the key elements in the field of web development. Whenever you are designing a website, it is mandatory to ensure that it is responsive.

What do you mean by Responsive Web Layout?

Responsive web design refers to the approach used by designers to provide the end users an optimal viewing of the website regardless of the device they use to view the site. These days, the use of mobile devices for surfing the website has increased tremendously. Not only this; the screen sizes for tablets, laptops and desktop varies considerably. As a result, if a site does not have a responsive web layout, it will end up losing a lot of the visitors. The main aim of responsive web design is to design the websites in such a way that the pages can adjust to the screen size of the device where it is being viewed.

In order to make a RWD, the following elements are generally used.

  • Fluid portion based grids: Instead of sizing the pages on the basis of pixels, this technology helps in sizing pages on basis of percentages.
  • Flexible images: This element is used to size images relatively and it ensures that they do not overflow the container and can adjust to the screen depending upon the size of the device.
  • Media queries: It uses components like width of the browser and other CSS styling elements to display the site on basis of device screen sizes.
  • Server side components: The server side components along with client media queries can help in quick loading of sites on mobile phones, tablets and other portable devices and therefore ensures that the layout is compatible too.

These are the top elements that can help in making responsive web layouts. However, there are a lot of other complexities that needs to be handled too. Generally, the videos and banner advertisements that are present on sites are not fluid and so a lot of different frameworks were launched to make responsive web layouts easily and efficiently.

Twitter Bootstrap holds the key

Bootstrap is a framework launched by Twitter that simplifies the development of Responsive Web Designs. Bootstrap makes use of the following ideas for making responsive web layouts.

It uses a grid layout, where in the browser window is divided into 12 equal columns, irrespective of the size of the browser. So we would create our website components, with sizes relative to those 12 columns. Hence the web components that we develop, adjust in size with the change in size of the browser, thereby making efficient scaling possible.

Further, it resizes heading and texts based on the size of the browser and to make this easier, it uses stack rather than float. There are a lot of other useful classes that are also available in bootstrap which reduces the effort of the developers while developing websites. Creating a responsive web layout is not only easier, but also faster and paves the way for easy maintenance of the website, when developed using bootstrap.