33
1 Testing Responsive Web Design 12 Giugno 2013 Cristina Lusetti Senior Quality Assurance frog

Testing responsive web design pdf

  • Upload
    crilusi

  • View
    1.391

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Testing responsive web design pdf

1

Testing Responsive Web Design

12 Giugno 2013

Cristina Lusetti

Senior Quality Assurance

frog

Page 2: Testing responsive web design pdf

"Man had landed on the moon and young people wanted to change the world; we all wanted to make a difference. I wanted to make people smile.” — Hartmut Esslinger, 1969

2

design changed the world

Page 3: Testing responsive web design pdf

3

Product Design Our legacy in craftsmanship brings form to our clients' ideas.  

Technology Design Our technological expertise inspires and validates our creative work.

Software Engineering We deliver ideas to market with the speed and fidelity our clients need to succeed.

frog ThinkTM We help our clients generate ideas through insights and provocation.

We combine research, strategy, design, and engineering to link insights to ideas and bring ideas to markets.

Innovation Strategy We uncover market insights and craft strategies to commercialize ideas.

Brand Design We shape brands by building the brand story into the products we create.

Design Research We understand consumer behavior by immersing ourselves in their world.

Experience Design We create design for all of the platforms, unifying them into a single, consistent experience.

Page 4: Testing responsive web design pdf

Front End Testing in a Design Company

Page 5: Testing responsive web design pdf

5

•  Text, controls and images are aligned properly

•  Hover and selection states highlight and color changes

•  Suitable clickable area

Screen

Controls

Text

Understand what is possible to transfer from the design to the developed

product

•  Color, shading, and gradient are consistent with comps. •  Check for correct padding around the edges •  Text, images, controls, and frames do not run into the edges of

the screen

Visual Testing

•  Font size, style and color are consistent for each type of text

•  Typed text (data entry) scrolls and displays properly

Page 6: Testing responsive web design pdf

Responsive Web Site

Page 7: Testing responsive web design pdf

7

Page 8: Testing responsive web design pdf

8

Page 9: Testing responsive web design pdf

9

Responsive Web Design - Di cosa si tratta

This approach will simplify Web Site Design to obtain an adaptable

version for different platforms such as desktop, tablet or

smartphone, keeping the focus on the most important elements.

Pages should be readable on all resolutions.

Never visualize the horizontal bar in the page.

Content defined ‘important’ need to be visible in all breakpoints.

Basic Rules

Page 10: Testing responsive web design pdf

Example

10

Page 11: Testing responsive web design pdf

11

Page 12: Testing responsive web design pdf

12

Page 13: Testing responsive web design pdf

Test a Responsive Web Site

Page 14: Testing responsive web design pdf

Breakpoints

Each breakpoint requires an adaptation of the layout, with modules that change their position and rules. Another possibility is to have a fluid layout, with text and images that fit proportionately in relation to the width of the page.

14

Breakpoints

Page 15: Testing responsive web design pdf

15

Modules

Page 16: Testing responsive web design pdf

16

Focus on the system and on the rules of the modules.

Page resize Keep the fluidity of the elements

Breakpoints change No visual lock on the elements

Device rotation Check that all items carry the resize together

Page 17: Testing responsive web design pdf

17

Responsive - Desktop

Page 18: Testing responsive web design pdf

18

Responsive Tablet e Smarphone

Page 19: Testing responsive web design pdf

19

Menù Esempio 1

Page 20: Testing responsive web design pdf

20

Esempio 2

Page 21: Testing responsive web design pdf

21

Page 22: Testing responsive web design pdf

22

Page 23: Testing responsive web design pdf

23

Carousel Adaptation of the module and enable touch experience

Page 24: Testing responsive web design pdf

24

Listing

Page 25: Testing responsive web design pdf

25

Page 26: Testing responsive web design pdf

Content Check

Content need to be visible on all the screens with

different sizes and resolutions

•  Text alignment

•  Text size

•  Max characters number

•  End of the sentence with 3 dots

26

Page 27: Testing responsive web design pdf

27

Particular case

Desktop

Tablet – First/Design version

Tablet – Fixed/Developed Version

Page 28: Testing responsive web design pdf

OS and Browser support

It’s not realistic to think we can promise all designs will work perfectly on all devices and on all Operating Systems.

We need to define a Gradual Support and some specific Reference Device.

28

Page 29: Testing responsive web design pdf

Something useful Testing on the Desktop with various resolutions is an important step for understanding how the Web Site will look on a device and help save time in testing for each device.

Chrome – Window Resizer

29

Firefox Nightly

Page 30: Testing responsive web design pdf

Documentation Guidelines outlining a Responsive Website focus on the specific rules of the various modules.

Each module needs to have a dedicated, detailed section that explains the functionality and the adaptation rules for each breakpoint.

30

Page 31: Testing responsive web design pdf

-Global patterns -Colors and fonts -Space inside and outside modules

31

Documentation

Page 32: Testing responsive web design pdf

32

Make a recap…

Breakpoints And Fluidity Modules

Strange Case

Browser Support and OS Documentation

Most important things to

remember are the System and

testing on Real devices

Page 33: Testing responsive web design pdf

7/11/13

Du: Web implementation and delivery 33