Talk given in European Testing Conference Feb 12th, 2016

1. @gita_m @EuroTestConf
Testing Responsive websites
Gita Malinovska
@gita_m
gita@earthware.co.uk

2. @gita_m @EuroTestConf
About myself
Industries
Countries
SyncHerts
Entrepreneur
QA Champion

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

5. @gita_m @EuroTestConf

6. @gita_m @EuroTestConf
iPhone
iPad

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

11. @gita_m @EuroTestConf
Google mobile-friendly test

12. @gita_m @EuroTestConf
OpenDeviceLab.com

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

15. @gita_m @EuroTestConf
Testing

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

18. @gita_m @EuroTestConf
Layout

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

22. @gita_m @EuroTestConf
Rotate device

23. @gita_m @EuroTestConf
Browser
vs
Responsive

24. @gita_m @EuroTestConf
Use tools

25. @gita_m @EuroTestConf
Developers use Chrome resizer all the time
• Don’t test on mobiles
• Work great on desktop

26. @gita_m @EuroTestConf
BrowserStack

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