Testing responsive web design pdf


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Testing responsive web design pdf

  1. 1. 1 Testing Responsive Web Design 12 Giugno 2013 Cristina Lusetti Senior Quality Assurance frog
  2. 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. 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. 4. Front End Testing in a Design Company
  5. 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. 6. Responsive Web Site
  7. 7. 7
  8. 8. 8
  9. 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. 10. Example 10
  11. 11. 11
  12. 12. 12
  13. 13. Test a Responsive Web Site
  14. 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. 15 Modules
  16. 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. 17 Responsive - Desktop
  18. 18. 18 Responsive Tablet e Smarphone
  19. 19. 19 Menù Esempio 1
  20. 20. 20 Esempio 2
  21. 21. 21
  22. 22. 22
  23. 23. 23 Carousel Adaptation of the module and enable touch experience
  24. 24. 24 Listing
  25. 25. 25
  26. 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. 27 Particular case Desktop Tablet – First/Design version Tablet – Fixed/Developed Version
  28. 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. 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. 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. 31. -Global patterns -Colors and fonts -Space inside and outside modules 31 Documentation
  32. 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. 33. 7/11/1Du: Web implementation and delivery 33
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.