In recent years, web developers have turned to responsive web design to help them design web pages that can accommodate the vast number of devices currently available on the market that can be used to access the Internet.
Responsively designed pages adjust their layout according to the screen size of the device, and the space available. However, web developers can still make mistakes when coding their designs, which can result in ugly presentational effects called "layout failures". Examples of layout failures include when web content overlaps or overlays other content on the page, incorrectly wraps, or is rendered off the page, because there is less screen space than anticipated by the developer.
Due to the amount of manual testing needed with different specific screen sizes, layout failures can easily be missed before a web page goes live. The technique of this award-winning paper automates the testing process and the detection of layout failures by repeatedly resizing a web page and applying a series of algorithms that assess changes to its visual appearance. The algorithms are capable of detecting layout anomalies in responsive designs that are likely to be mistakes made by developers.
These techniques are implemented in a series of prototype tools. For more information about these tools and the techniques evaluated in this paper, please contact Phil McMinn: p.mcminn@sheffield.ac.uk
Read the paper: Automatic Visual Verification of Layout Failures in Responsively Designed Web Pages