TESTING RESPONSIVE WEB DESIGN ONE SITE FOR EVERY SCREEN

Baiju Joseph Director QE & RE , Yahoo!

baiju@yahoo-inc.com 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