Automatic Detection of Potential Layout Faults in Responsive Web - - PowerPoint PPT Presentation

▶
automatic detection of potential layout faults in
SMART_READER_LITE
LIVE PREVIEW

Automatic Detection of Potential Layout Faults in Responsive Web - - PowerPoint PPT Presentation

Sep 28, 2023 330 likes •577 views

Automatic Detection of Potential Layout Faults in Responsive Web Pages Thomas A. Walsh* , Phil McMinn* and Gregory M. Kapfhammer + University of She ffi eld * , Allegheny College + twalsh1@she ffi eld.ac.uk www.thomaswalsh.co.uk Thomas Walsh

slide-1
SLIDE 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

slide-2
SLIDE 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

slide-3
SLIDE 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

slide-4
SLIDE 4

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

Making a Webpage Mobile-Friendly

slide-5
SLIDE 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
slide-6
SLIDE 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

slide-7
SLIDE 7

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

slide-8
SLIDE 8

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

slide-9
SLIDE 9

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

slide-10
SLIDE 10

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

Layout Faults

slide-11
SLIDE 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

  • f layout differences

between the two versions of the page

slide-12
SLIDE 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

slide-13
SLIDE 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)

slide-14
SLIDE 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)

slide-15
SLIDE 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”})

slide-16
SLIDE 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})

slide-17
SLIDE 17

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

RLG - Width Constraints

(wmin, wmax, m, c)

slide-18
SLIDE 18

Thomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages

RLG - Width Constraints

Element Width (px)

  • 175

175 350 525 700 Parent Width (px) Element Width (px) 75 150 225 300 Parent Width (px)

(768, 1300, 0, 150)

(400, 767, 1, -20)

(wmin, wmax, m, c)

slide-19
SLIDE 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)

slide-20
SLIDE 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

slide-21
SLIDE 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

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

slide-22
SLIDE 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

slide-23
SLIDE 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