rwd testing baiju joseph
DESCRIPTION
Presentation from vodQA Bangalore Get Set TestTRANSCRIPT
TESTING RESPONSIVE WEB DESIGN ONE SITE FOR EVERY SCREEN
Baiju Joseph Director QE & RE , Yahoo!
[email protected] 18 May 2013
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.
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 : Wikipedis
• fluid , proportion based grids • flexible images
• Media queries • Selectively serving style sheets based on
device
RESPONSIVE WEB DESIGN - RWD
• compare functionality on devices • rendering • performance • real device testing • automate once – run on multi devices
RWD TESTING
• Mobile emulators (opera , chrome) • Tries to mimic behavior of real device • Browser based user agent simulators
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