@gita_m @EuroTestConf

Testing Responsive websites Gita Malinovska

@gita_m [email protected]

@gita_m @EuroTestConf

About myself

Industries Countries

SyncHerts

Entrepreneur QA Champion

@gita_m @EuroTestConf

What this talk will be about?

First Project

Quick Tips

Useful Tools

@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

@gita_m @EuroTestConf

@gita_m @EuroTestConf

iPhone

iPad

@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?

@gita_m @EuroTestConf

Clarify & Research & Plan

@gita_m @EuroTestConf

Clarify Devices• Online statistics every 3 months • screen resolution • OS • vendors • country • browsers

• Build your device lab with labels

@gita_m @EuroTestConf

Check Google analytics

@gita_m @EuroTestConf

Google mobile-friendly test

@gita_m @EuroTestConf

OpenDeviceLab.com

@gita_m @EuroTestConf

Client involvement• Limited devices • Little knowledge • Inaccurate expectations of responsive design • Understand time constraints • Clarify browsers

@gita_m @EuroTestConf

Design• Never on time • Rarely responsive • Mobile first / Website first • Testers = business analysts • Developers = designers

@gita_m @EuroTestConf

Testing

@gita_m @EuroTestConf

Load time is important

@gita_m @EuroTestConf

Usual problems with load1. Unoptimised images 2. Icons fonts 3. Large videos 4. Bulky Code 5. Data in production

@gita_m @EuroTestConf

Layout

@gita_m @EuroTestConf

Pay extra attention to• Long text • Tables / Graphs • Auto complete fields • Date pickers • Dialog boxes • Headers / footers

@gita_m @EuroTestConf

Showing less content

@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

@gita_m @EuroTestConf

Rotate device

@gita_m @EuroTestConf

Browser vs Responsive

@gita_m @EuroTestConf

Use tools

@gita_m @EuroTestConf

Developers use Chrome resizer all the time• Don’t test on mobiles • Work great on desktop

@gita_m @EuroTestConf

BrowserStack

@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

@gita_m @EuroTestConf

When to use emulators

@gita_m @EuroTestConf

Other mobile tools• Snoopy to look for website code on iPhones / iPads • GhostLab, Adobe Inspect etc. • Proxies - Charles, Fiddler

@gita_m

Do I still get these?

@gita_m @EuroTestConf

Three challenges for you1. Clarify your devices 2. Understand user behaviour 3. Find tools that works for you

@gita_m @EuroTestConf

Q & A

[email protected] @gita_m