Presentation from vodQA Bangalore Get Set Test

1. TESTING RESPONSIVE WEB DESIGN
ONE SITE FOR EVERY SCREEN
Baiju Joseph
Director QE & RE , Yahoo!
baiju@yahoo-inc.com
18 May 2013

2. AGENDA
• Ever growing Mobile
• Why Responsive Web Design
• Responsive Web Design
• Testing – Responsive Web Design
• Useful tools
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in
anyway.

3. EVER GROWING MOBILE
Source : Morgan Stanley Research

4. EVER GROWING MOBILE
Source : comScore
© comScore, Inc. Proprietary. 15Source: comScore Device Essential December 10, 2012
People are using different devices depending on the time of the day
(Weekday: December 10, 2012)
Smartphones
Tablets
PCs
rule our
workdays
rule our
mornings
8:00 am 6:00 pm12:00 am
rule our
evenings

5. WHY RESPONSIVE WEB DESIGN
“Day by day, the number of devices,
platforms, and browsers that need to work
with your site grows. Responsive web design
represents a fundamental shift in how we’ll
build websites for the decade to come.”
~ Jeffrey Veen

6. • accessible on many devices – just need a
browser and internet connection
• one code for many screens
• easy to develop and maintain
• cost effective
• better SEO
WHY RESPONSIVE WEB DESIGN

7. • a design approach
• for providing optimal viewing experience
• easy reading and navigation
• with a minimum of resizing, panning, and
scrolling
• across a wide range of devices (pc ,
tablet , phones…)
RESPONSIVE WEB DESIGN - RWD
Source : Wikipedis

8. • fluid , proportion based grids
• flexible images
• Media queries
• Selectively serving style sheets based on
device
RESPONSIVE WEB DESIGN - RWD

9. • compare functionality on devices
• rendering
• performance
• real device testing
• automate once – run on multi devices
RWD TESTING

10. • Mobile emulators (opera ,
chrome)
• Tries to mimic behavior of real device
• Browser based user agent simulators
RWD TESTING TOOLS

11. • iOS Simulator
• Closest to working of real device
• Part of Xcode tools with iOS SDK
• Android Emulator
• mimics all of the hardware and
software features of a typical mobile
device
• With Android SDK
RWD TESTING TOOLS

12. • performance
• Yslow : analyzes web pages and
suggests ways to improve their
performance
RWD TESTING TOOLS

13. • Mobile Testing skill
• Mobile , RWD technology
knowledge
• Too many device combinations
• Lack of real devices
• Testability hooks in architecture
RWD TESTING CHALLENGES