A brief introduction to Responsive Web Design

From Virtual Labs Community
Jump to: navigation, search

What is Responsive Web Design (RWD)?

web-design-process

Plainly put, Responsive Web Design (RWD) means ‘ designing a single website that fits multiple screen sizes.’ You might have noticed that it is the new buzzword thrown around a lot lately. With the explosion of varying screen sizes for various devices like smart phones, tablets, PCs, TV screens and the like, RWD has become a mainstream word in the world of web design. Every web designer today thinks and talks in terms of RWD. And please note: the ‘Responsive’ in RWD doesn’t refer to how quickly a page refreshes, how quickly the server responds, or how a page responds to a user’s input. Instead it largely refers to how the code responds to different screen widths.

You might have observed yet an other thing- a website which is designed for a desktop if opened on a smartphone or tablet may look a little different from the way it has been rendered by the desktop. You may have to zoom in, flip, scroll or pinch to read the contents! This may be quite inconvenient. Also if there are flash animations on the desktop, those animations are very unlikely to work on iOS or Android handheld devices.

Until now the traditional way was to design separate websites for devices with varying screen sizes . For instance for a website with a URL http://examplewebsite.co.in which works with mobiles too, there would be a separate mobile website at http://m.examplewebsite.co.in. (notice the ‘m’ prefix denoting ‘mobile’) But with a range of devices in today’s market, it is getting harder to create separate apps like the above. Also it is difficult to create separate versions for every device and operating platforms like Android apps, iOS apps or a Blackberry apps. The new trend is to design a single website that is usable across a range of devices. In other words having a responsive design that is flexible enough to be viewed on multiple devices is today’s elegant solution. If a website is visited more by smartphone users or tablet users, the trend is to build it in a “mobile up” way, where the development of the website is first optimised for a mobile device, and considerations for desktop sized screens are taken up as a secondary task. The alternative and more popular solution is to build the site in “desktop down” manner. i.e creating the website first for desktops, and then considering it for smartphones and tablets.

The Three Technical Ingredients:

  1. Fluid grids:
    Fluid grids mean that just as a liquid spreads out to fill an allotted space and retains its appearance, responsive web design’s fluidity achieves the same result with website content on a device screen.
  2. Flexible images:
    Flexible images mean that images retain their aspect ratio and are not distorted in any way. Images get rendered in the same way independent of screen sizes.
  3. Media queries:
    While there are various techniques to detect the screen resolution and re-arrange the content blocks, the easiest and most commonly used technique is by taking advantage of one of CSS3′s new feature called Media Query. CSS Media Query is where you can define a set of CSS rules which would apply when the media query condition is satisfied. You just need to specify the screen widths of the various devices in your CSS.

/* A sample CSS Media Query file: */

body
{
font-family: courier;
text-align : center;
font-size : 1.5em;
}
img
{
max-width: 100%;
}

/*if max-width is 467 pixel, the device is a phone, for it is neither a desktop nor a tablet*/

@media (max-width: 467px)

{
.desktop
{
display: none;
}
.tablet
{
display: none;
}
}

/*if the width is in the range of 468 to 768 pixels, the device is a tablet, for it is neither a desktop nor a phone. */

@media (min-width: 468px) and (max-width: 768px)

{
.desktop
{
display: none;
}
.phone
{
display: none;
}
}

/*if the minimum width is 769 pixels, it is a phone, for it is neither a desktop nor a tablet.*/

@media (min-width: 769px)

{
.phone
{
display: none;
}
.tablet
{
display: none;
}
}

BENEFITS

Experts are of the opinion that Responsive Web Design is here to stay. RWD cuts down on development costs, and also simplifies code maintenance. Maintenance can be carried out at a single site which will cost much lesser than having to maintain two or more sites.

Responsive Web Design directs all user traffic to a single site. This improves impact on the target audience from the perspective of the website owner or from the business perspective. Also the user analytics will be consolidated by default, reducing the cost of collecting them from related fragmented sites.

Responsive Web Design helps in giving such users a cohesive user experience across all devices when the same users access the site from different devices.

Any FLIP side?

Yes, there is! There is likely to be a detriment in the quality of code since the code has to be a more generalised one to work with two or more devices. Any optimisation meant for a particular device will have to dropped in the general code.

Also, there are the issues of graphics, advertisements and download speed. On mobile devices, it may be wise to display fewer graphics, smaller advertisement and lesser but all important content, for faster downloading as well as economical use of battery. Also there is a need for developers to consider both mouse events and touch evente while writing their code.

However compared to all the benefits that RWD has to offer, for now these issues can be ignored. It is very likely that in the near future there will be someone coming out with a tool to work around them.

TEST your site for RWD!

You need not go far. An example of RWD is here: our website http://vlead.virtual-labs.ac.in You can test it by resizing your browser. You’ll see, as the browser size gets smaller, the website adapts to provide optimum viewing for the user.

Here is a tester which I picked from the web. You may test your favourite sites and check if they are responsive or not. Do it! It’s fun :) http://mattkersley.com/responsive/

Finally, words from Ethan Marcotte the designer of RWD

“… Flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes…” These are the words of Ethan Marcotte, a long-time proponent of non-fixed layouts and the designer who coined the word ‘Responsive Web Design’ in 2010.

And here goes the much appreciated and talked about article about Responsive Web Design from Ethan Marcotte- http://alistapart.com/article/responsive-web-design

Also check this site for twenty four interesting examples of Responsive Web sites

http://webdesignledger.com/inspiration/24-excellent-examples-of-responsive-web-design

- Jayashree Prasad

This entry was posted in Uncategorized on October 6, 2013 by Jayashree Prasad.

Post navigation

Field trial in GITAM School of Technology, Hyderabad