Responsive Web Design – New Way of Designing Web Sites

by seetaram on August 30, 2013

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.

{ 2 comments… read them below or add one }

Shiva September 4, 2013 at 11:24 am

Hi Seetaram,
Very Good Article to start on RWD.
Does Selenium Webdriver have any libraries specific to RWD?

Reply

seetaram September 4, 2013 at 12:28 pm

There is no direct way of doing this. But you can try some workaround as in the below link,

“I can think of two ways of doing this.

One – for each web element you can check its size, location, visibility, etc. After each resize you could compare those parameters with some previously specified values to check if layout has changed……..

http://stackoverflow.com/questions/10604606/is-there-a-way-to-test-responsive-css-with-selenium

Reply

Leave a Comment

Previous post:

Next post:

Do you want to get updates on the recent articles written? Please subscribe to RSS feed or Email