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,
- 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
- Using firefox developer tools
- Go to “Tools” > “Web developer” > “Responsive Design View”, set prefered 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.
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