Understanding responsive web design
When web content was primarily consumed through laptops and desktops, web sites were designed, developed, and tested for a handful of screen resolutions such as 800x600, 1024x768.
With advent of mobile operating systems such as iOS, Android, Windows 8 and BlackBerry 10, device manufacturers are rolling out different models of smartphones and tablets. Web content is being increasingly consumed using these smartphones and tablets. Screen size of these smartphones and tablets not only varies from one device model to other but also from one device manufacturer to another. Varying screen sizes among smartphones and tablets create a 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 a responsive web design technique. Below images show a different view of the same webpage across different screen sizes.
 |
 |
| Webpage on Tablet | Webpage on Mobile |
What to test?
In responsive web design, when screen size changes, there will be an impact on the following elements,
- Page Layout
- Visibility of elements
- Position of visible elements
- 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?
- Resizing browser window
> Load web page in a browser and resize the browser window to preferred 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 - Using firefox developer tools
> Go to "Tools" > "Web developer" > "Responsive Design View", set preferred screen size and load the web page. - 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. - Actual devices.
Automation 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
