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

2. "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. 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.

4. Front End Testing in a
Design Company

5. 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

6. Responsive Web Site

7. 7

8. 8

9. 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

10. Example
10

11. 11

12. 12

13. Test a Responsive Web Site

14. 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. 15
Modules

16. 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. 17
Responsive - Desktop

18. 18
Responsive
Tablet e
Smarphone

19. 19
Menù
Esempio 1

20. 20
Esempio 2

21. 21

22. 22

23. 23
Carousel
Adaptation of the
module and enable
touch experience

24. 24
Listing

25. 25

26. 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. 27
Particular case
Desktop
Tablet – First/Design version
Tablet – Fixed/Developed Version

28. 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

29. 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

30. 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

31. -Global patterns
-Colors and fonts
-Space inside and
outside modules
31
Documentation

32. 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

33. 7/11/1Du: Web implementation and delivery 33