Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Testing responsive websites @EuroTestConf

435 views

Published on

Talk given in European Testing Conference Feb 12th, 2016

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Testing responsive websites @EuroTestConf

  1. 1. @gita_m @EuroTestConf Testing Responsive websites Gita Malinovska @gita_m gita@earthware.co.uk
  2. 2. @gita_m @EuroTestConf About myself Industries Countries SyncHerts Entrepreneur QA Champion
  3. 3. @gita_m @EuroTestConf What this talk will be about? First Project Quick Tips Useful Tools
  4. 4. @gita_m @EuroTestConf What is responsive website? Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. ~ Wikipedia
  5. 5. @gita_m @EuroTestConf
  6. 6. @gita_m @EuroTestConf iPhone iPad
  7. 7. @gita_m @EuroTestConf Problems on initial project • Which devices to test? • Android vs iPhone • Devices missing • Personal phones • Not charged • Not connected to Wifi • How to make screenshots and get them out?
  8. 8. @gita_m @EuroTestConf Clarify & Research & Plan
  9. 9. @gita_m @EuroTestConf Clarify Devices • Online statistics every 3 months • screen resolution • OS • vendors • country • browsers • Build your device lab with labels
  10. 10. @gita_m @EuroTestConf Check Google analytics
  11. 11. @gita_m @EuroTestConf Google mobile-friendly test
  12. 12. @gita_m @EuroTestConf OpenDeviceLab.com
  13. 13. @gita_m @EuroTestConf Client involvement • Limited devices • Little knowledge • Inaccurate expectations of responsive design • Understand time constraints • Clarify browsers
  14. 14. @gita_m @EuroTestConf Design • Never on time • Rarely responsive • Mobile first / Website first • Testers = business analysts • Developers = designers
  15. 15. @gita_m @EuroTestConf Testing
  16. 16. @gita_m @EuroTestConf Load time is important
  17. 17. @gita_m @EuroTestConf Usual problems with load 1. Unoptimised images 2. Icons fonts 3. Large videos 4. Bulky Code 5. Data in production
  18. 18. @gita_m @EuroTestConf Layout
  19. 19. @gita_m @EuroTestConf Pay extra attention to • Long text • Tables / Graphs • Auto complete fields • Date pickers • Dialog boxes • Headers / footers
  20. 20. @gita_m @EuroTestConf Showing less content
  21. 21. @gita_m @EuroTestConf Zooming in / out of site • possible to disable zooming by using META tag • only disable if your photos / text on site is visible enough without zooming • items / menus tend to go out of screen when zoomed
  22. 22. @gita_m @EuroTestConf Rotate device
  23. 23. @gita_m @EuroTestConf Browser vs Responsive
  24. 24. @gita_m @EuroTestConf Use tools
  25. 25. @gita_m @EuroTestConf Developers use Chrome resizer all the time • Don’t test on mobiles • Work great on desktop
  26. 26. @gita_m @EuroTestConf BrowserStack
  27. 27. @gita_m @EuroTestConf Emulators can’t emulate everything • Gestures (tap, pinch, zoom) • Interruptions (calls, battery running low, internet disappearing) • Performance and load • Look and feel • Orientation change • Display brightness, saturation and similar
  28. 28. @gita_m @EuroTestConf When to use emulators
  29. 29. @gita_m @EuroTestConf Other mobile tools • Snoopy to look for website code on iPhones / iPads • GhostLab, Adobe Inspect etc. • Proxies - Charles, Fiddler
  30. 30. @gita_m Do I still get these?
  31. 31. @gita_m @EuroTestConf Three challenges for you 1. Clarify your devices 2. Understand user behaviour 3. Find tools that works for you
  32. 32. @gita_m @EuroTestConf Q & A gita@earthware.co.uk @gita_m

×