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