Automatic detection of potential layout faults following changes to responsive web pages

Interested in learning more about this topic? Visit this web site to read the paper: https://www.gregorykapfhammer.com/research/papers/Walsh2015/

Transcript

1. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection of Potential Layout Faults in Responsive Web Pages Thomas A. Walsh*, Phil McMinn* and Gregory M. Kapfhammer+ University of Sheffield*, Allegheny College+ twalsh1@sheffield.ac.uk www.thomaswalsh.co.uk
2. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages The Web - Past and Present https://blog.pivotal.io/labs/labs/an-introduction-to-qa-at-xtreme-labs
3. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Why go mobile- friendly? More Potential Customers Higher Search Engine Rankings Increased User Loyalty Better User Retention More Business Ease of Use
4. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Making a Webpage Mobile-Friendly
5. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Responsive Web Design • Introduced by Ethan Marcotte in 2011. • Aims to provide an optimal browsing experience to all devices. • Described by W3C as “a must for tablet and mobile devices”. • Based around three main concepts: • Flexible grids • Flexible images • Media queries
6. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Testing Responsive Web Pages Hundreds of different devices No stable automation framework Insufficient suite of developer tools
7. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Layout Faults
8. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Layout Faults
9. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Layout Faults
10. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Layout Faults
11. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Responsive Layout Graph (400, 767) => W (400, 1300) => X (768, 1023) => Y (992, 1300) => Z Sample Webpage Extract Layout Constraints Models responsive behaviour of web page across a wide range of viewport widths Focusses on three layout features: visibility, width and alignment Comparing two RLG models results in a set of layout differences between the two versions of the page
12. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Body Link 1 Link 2 Nav Container Div 1 Div 2
13. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages RLG - Visibility Constraints (wmin, wmax) (400, 767) (768, 1300)
14. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Body (400,1300) Link 1 (768,1300) Link 2 (768,1300) Nav (768,1300) Container (400,1300) Div 1 (400,1300) Div 2 (400,1300)
15. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages RLG - Alignment Constraints (400, 767, S, {“Above”}) (wmin, wmax, t, A) (768, 1300, S, {“Left Of”})
16. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages UL (768,1300) (768,1300) (768,1300) (400,1300) (400,1300) (400,1300) Body Container Nav Link 2 Div 1 Div 2 (400,1300) Link 1 (768,1300) (768,1300) (768,1300) (400,1300) (400,1300) (400,1300) (400,1300,PC,{T,C}) (400,1300,S,{A}) (768,1300,PC,{LJ}) (768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L}) (400,1300,PC,{C}) (400,1300,PC,{}) (400,1300,PC,{}) (768,1300,PC,{RJ})
17. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages RLG - Width Constraints (wmin, wmax, m, c)
18. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages RLG - Width Constraints Element Width (px) -175 0 175 350 525 700 Parent Width (px) Element Width (px) 0 75 150 225 300 Parent Width (px) (768, 1300, 0, 150) (400, 767, 1, -20) (wmin, wmax, m, c)
19. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Link 1 Body Container Nav Link 2 Intro About (400,1300,S,{A}) (768,1300,PC,{LJ}) (768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L}) (400,1300,PC,{T,C}) (400,1300,PC,{C}) (400,1300,PC,{}) (400,1300,PC,{}) (768,1300,PC,{RJ}) (768,1300,0,50) (768,1300) (768,1300,0,50) (768,1300) (768,1300,50,0) (400,1300) (400,1300,100,0) (400,1300) (400,767,100,-20) (768,1300,50,-20) (400,1300) (400,767,100,-20) (768,1300,50,-20) (400,1300,100,0) (768,1300) (400,1300)
20. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Experimental Procedure Oracle Webpage CSS Files CSS Mutator M5 M4 M1 M2 M3 M10 M9 M6 M7 M8 M15 M14 M11 M12 M13 M20 M19 M16 M17 M18 REDECHECK M1 M2 M3 M4 M11 M13 M17 M12 M16 M14 M15 M18 M8 M20 M1 M4 M5 M3 M6 M2 M7 M19 M9 M10
21. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Results aftrnoon.com briefi.ng getbootstrap.com responsiveprocess.com reserve.com 0 5 10 15 20 1 6 1 1 4 1 1 5 18 16 13 19 14 True Pos True Neg False Pos False Neg
22. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages The REDECHECK Tool Available at https://github.com/redecheck/redecheck-tool
23. Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages ReDeCheck tool available for download Responsive Layout Graph Supporting the mobile web is crucial Encouraging initial empirical results