Download - Testing – responsive web design
TESTING RESPONSIVE WEB DESIGNONE SITE FOR EVERY SCREEN
Baiju Joseph
Director QE & RE , Yahoo!
18 May 2013
AGENDA
• Ever growing Mobile
• Why Responsive Web Design
• Responsive Web Design - RWD
• RWD Testing
• RWD Testing Tools
• RWD Testing Challenges
• Tools Demo
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.
EVER GROWING MOBILE
Source : Morgan Stanley Research
EVER GROWING MOBILE
Source : comScore
© comScore, Inc. Proprietary. 15 Source: 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 pm 12:00 am
rule our evenings
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
• 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
• 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 : Wikipedia
• fluid , proportion based grids
• flexible images
• Media queries
• Selectively serving style sheets based on
device
• Server-Side Components (RESS)
RESPONSIVE WEB DESIGN - RWD
• compare functionality on devices
• rendering
• performance
• real device testing
• Mobile cloud
• automate once – run on multi devices
• testability hooks (?mobile , ?tablet)
RWD TESTING
•Mobile emulators (chrome)
• Tries to mimic behavior of real device
• Browser based user agent simulators
RWD TESTING TOOLS
•Mobile emulators (opera )
• Tries to mimic behavior of real device
• Native application on your desktop
RWD TESTING TOOLS
• 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
• performance
• Yslow : analyzes web pages and
suggests ways to improve their
performance
RWD TESTING TOOLS
• Mobile Testing skill
• Mobile , RWD technology
knowledge
• Too many device combinations
• Lack of real devices
• Testability hooks in architecture
RWD TESTING CHALLENGES