1

Testing Responsive Web Design

12 Giugno 2013

Cristina Lusetti

Senior Quality Assurance

frog

"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

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.

Front End Testing in a Design Company

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

Responsive Web Site

7

8

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

Example

10

11

12

Test a Responsive Web Site

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

15

Modules

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

17

Responsive - Desktop

18

Responsive Tablet e Smarphone

19

Menù Esempio 1

20

Esempio 2

21

22

23

Carousel Adaptation of the module and enable touch experience

24

Listing

25

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

27

Particular case

Desktop

Tablet – First/Design version

Tablet – Fixed/Developed Version

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

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

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

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

31

Documentation

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

7/11/13

Du: Web implementation and delivery 33