Responsive Web Design

The devices and means of accessing the web have grown-up unrecognisably beyond what was existing back in the 1990s. Our web industry and ruling has matured and many lessons have been learnt along the way. We have wonderful potential in what we can do now. One of the hottest trends across the web industry is the boost in Responsive Web Design.

Let’s say you design a website with Desktop Computer in mind and someone visits your website using the mobile browse. They will be having very different resolution. Obviously all the content will not be visible. Now the trend has reached to a level where majority of people are using mobile browsers than desktop browsers. This created the obligation for developing websites for mobile use. Hence there is a need to have a desktop as well as mobile version for the same website. This will be like an application that detects the device and reads the application and renders the website accordingly. This approach was working fine for a while but the amount of work effort, money and time spend on the same has reduced the intensity of its growth. This has made a new trend of Media Queries to detect the resolution of browsers and respond to the size of the browser and change their layout accordingly.

Responsive Web Design has been changing to such an extent that, they have eventually come to a threshold where layouts are designed to match all forms of digital media. The goal is to have a single set of codes which run flawlessly on all environments. The site adapts to whatever size screen it is being displayed on. It makes the specific element adaptive to the resolution of the browser that is viewing your website.

The Core Concepts

The spine of responsive Web design comprises:

  1. Media queries
  2. Flexible/Fluid  grid-based layout.
  3. Elastic images and media.

Let’s have a terse look in to the above points.

Media queries

Media queries are CSS3 extension to media types that allows extreme greater control over rendering across different devices. It allows you to target the CSS to a specific width and do the changes accordingly without affecting the content. Media queries let the presentation of content be adapted to a particular range of output devices without having to change the content itself. This shows the immense power of CSS as it possess the control over the resolution of browsers and devices.

Flexible/Fluid grid-based layout

Flexible or fluid grid based system means setting the layout of the web page in a relative value. So by using relative sizing through flexible grid system the website responds to different device widths. For example, if you have three column web page and if you tried to view the same in smaller resolution browser or devices, the flexible grid system will automatically adjust the columns and content by scaling to a certain extent and then pushing it down and by making proportionate width. So it’s time to get out of Photoshop and enter in to the browser and content!

Elastic Images & Media

Normally the text showing in web pages are fluid by default, but the images are not. The behaviour of images and media play a very important role in responsive web design. This is achieved by using CSS. So the idea is to set the maximum width (max-width) of an image to 100% in CSS. This will take care of responsiveness for images and media. Also keep in mind to compress the images as much as possible, as its helps to load faster.

Switching over to a responsive web design will be a immense challenge, but with the way the business is moving, it’ll set up you for the future, and put you a step in front of your competitors. So it is apparent that responsive design will bounce into the mainstream in 2013.

Prasad Ambaledath is a UI Developer at Compassites Software. He has more than 4 years of work experience in UI development. He has worked extensively in Front End development and responsive designs on many projects. Prior to joining Compassites he worked at America Online. He loves listening to music and likes cooking.

Leave a comment