Responsive Web Design – New Way of Designing Web Sites

If your website has tremendous resource of useful information (or business) and users’ are visiting from array of devices such as notebooks, mobiles, tablets, blackberry, iPhone, and desktops. Also, from different platforms and browsers. How do you make sure that your website designs are crafted in such a manner that responds well to your users’ needs? Answer is Responsive Web Design (RWD). It uses design principles like fluid grids, flexible images, and media queries.

Working Principles

1. Adapting to the screen size and orientation
2. Considering user’s needs and device capabilities
3. Relative sizing and dynamic resizing
4. Changing the order in which the objects are displayed
5. No need of horizontal scrolling

Take the example of foodsense which is a responsive web design. Open the web site, then slowly resize the browser. As you resize, the objects on the browser will start dynamically resize and change the order they appear on the site. This gives a rich experience to the viewers.

Fundamental Concepts used in Designing RWD

1. Fluid grid
2. Flexible Images
3. Media queries
4. Media query listeners

Above all techniques implemented make the web site responsive web design. As a tester first thing that comes to my mind when I saw the Responsive Web Design is how do I test this? Thanks to many tools out there with some of them being free. We need to resize the browser to different dimensions in order to test the responsive web design. Add-ons to browsers’ such as Mozilla will do the trick. Suppose if you want to test the application in Google chrome, then search for an extension which can be used for resizing the browser. Window Resizer is an extension for Google chrome for resizing. Similarly Firesizer, Window Resizer, FlashResizer are the add-ons for Mozilla Firefox. These add-ons gives you the power to resize the window to different resolutions as if it is viewed on array of devices.

There are some more tools on the web, where you need to just give the URL of your website and see it on different devices such as iPhone, iPad, Mac system and so on. For example Respondr, Viewport Resizer, Responsivator, etc.

I would like to even let you know some of the test automation tools which can be used to test the Responsive Web Design.

• Testing Anywhere: This is a test automation tool by Automation Anywhere, Inc.
• Sahi Pro: This has many features to support the Responsive Web Design

Here is an interesting article "http://sixrevisions.com/mobile/responsive-web-design-not-the-future/" by Josh Chan. He debates on the future of Responsive Web Design. Most of the time while looking at the RWD, we consider only the look and feel, its usage in multiple browsers and devices. But there is also an interesting angle of discussion here that is performance of Responsive Web Design as well as time and complexity of the design. But anyway this approach of designing websites is definitely an interesting topic of this era.