Testing responsive websites @EuroTestConf
- 1. @gita_m @EuroTestConf Testing Responsive websites Gita Malinovska @gita_m gita@earthware.co.uk
- 3. @gita_m @EuroTestConf What this talk will be about? First Project Quick Tips Useful Tools
- 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
- 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. @gita_m @EuroTestConf Clarify & Research & Plan
- 9. @gita_m @EuroTestConf Clarify Devices • Online statistics every 3 months • screen resolution • OS • vendors • country • browsers • Build your device lab with labels
- 10. @gita_m @EuroTestConf Check Google analytics
- 13. @gita_m @EuroTestConf Client involvement • Limited devices • Little knowledge • Inaccurate expectations of responsive design • Understand time constraints • Clarify browsers
- 14. @gita_m @EuroTestConf Design • Never on time • Rarely responsive • Mobile first / Website first • Testers = business analysts • Developers = designers
- 16. @gita_m @EuroTestConf Load time is important
- 17. @gita_m @EuroTestConf Usual problems with load 1. Unoptimised images 2. Icons fonts 3. Large videos 4. Bulky Code 5. Data in production
- 19. @gita_m @EuroTestConf Pay extra attention to • Long text • Tables / Graphs • Auto complete fields • Date pickers • Dialog boxes • Headers / footers
- 20. @gita_m @EuroTestConf Showing less content
- 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
- 25. @gita_m @EuroTestConf Developers use Chrome resizer all the time • Don’t test on mobiles • Work great on desktop
- 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. @gita_m @EuroTestConf When to use emulators
- 29. @gita_m @EuroTestConf Other mobile tools • Snoopy to look for website code on iPhones / iPads • GhostLab, Adobe Inspect etc. • Proxies - Charles, Fiddler
- 30. @gita_m Do I still get these?
- 31. @gita_m @EuroTestConf Three challenges for you 1. Clarify your devices 2. Understand user behaviour 3. Find tools that works for you
- 32. @gita_m @EuroTestConf Q & A gita@earthware.co.uk @gita_m