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 PagesThomas A. Walsh*, Phil McMinn* and Gregory M. Kapfhammer+

University of Sheffield*, Allegheny College+ twalsh1@sheffield.ac.uk www.thomaswalsh.co.uk

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

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 BusinessEase of Use

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Making a Webpage Mobile-Friendly

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

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

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

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) => ZSample

WebpageExtract 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

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

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)

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)

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”})

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

ContainerNav

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})

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

RLG - Width Constraints

(wmin, wmax, m, c)

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

RLG - Width ConstraintsEl

emen

t Wid

th (p

x)

-175

0

175

350

525

700

Parent Width (px)

Elem

ent W

idth

(px)

0

75

150

225

300

Parent Width (px)

(768, 1300, 0, 150)(400, 767, 1, -20)

(wmin, wmax, m, c)

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Link 1

Body

ContainerNav

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)

Thomas Walsh twalsh1@sheffield.ac.uk

Automatic Detection of Potential Layout Faults in Responsive Web Pages

Experimental Procedure

Oracle Webpage

CSS Files

CSS Mutator

M5M4M1 M2 M3

M10M9M6 M7 M8

M15M14M11 M12 M13

M20M19M16 M17 M18

REDECHECKM1

M2M3

M4

M11 M13 M17M12 M16M14 M15 M18

M8

M20

M1 M4 M5M3 M6M2 M7

M19

M9 M10

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

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

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