Blog

Latest Updates. News. Insights. Ideas.

April 2013 - Sahi Pro

Testing responsive web design

Posted by | features | No Comments

Understanding responsive web design

When web content was primarily consumed through laptops and desktops, web sites were designed, developed and tested for handful of screen resolutions such as 800×600, 1024×768.

With advent of mobile operating systems such as iOS, Android, Windows 8 and BlackBerry 10, device manufacturers are rolling out different models of smart phones and tablets. Web content is being increasingly consumed using these smart phones and tablets. Screen size of these smart phones and tablets not only varies from one device model to other but also from one device manufacturer to another. Varying screen sizes among smart phones and tablets, create challenge for web designers, developers and testers.

Responsive web design is a user interface technique used by designers and front end developers to create adaptive web pages. These adaptive web pages will automatically change their design and layout to fit across different screen sizes (often of different devices).

Example of responsive web design

In this example we will look at a web page created using responsive web design technique. Below images show different view of same webpage across different screen size.

Webpage on Tablet Webpage on Mobile

What to test?

In responsive web design, when screen size changes, there will be an impact on following elements,

  1. Page Layout
  2. Visibility of elements
  3. Position of visible elements
  4. Size, color of visible elements

By asserting on visibility, css properties and position of elements, we could validate design and functionalities of a web page, across different screen size.

How to test?

  1. Resizing browser window
    • Load web page in a browser and resize the browser window to prefered screen size. Manually resizing browser window to specific size would be difficult and error-prone. We could use “window.open” javascript api to set window size & load the web page.
  2. Using firefox developer tools
    • Go to “Tools” > “Web developer” > “Responsive Design View”, set prefered screen size and load the web page.
  3. Device emulators/simulators.
    • Android & iOS development environment comes with device emulators/simulators. Android emulator allows us to set device resolution. Web pages can be loaded and tested on these emulators/simulators.
  4. Actual devices.

Automtaion using Sahi

Sahi pro has many capabilities that will make testing of responsive web design across different screen sizes & devices, easy & elegant. Register below for free webinar (April 2013) on testing responsive web design using Sahi pro.

This webinar has expired

Use fully-loaded Sahi Pro FREE for a month. Download Now Request a Demo