TESTING RESPONSIVE WEB DESIGNONE 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 - 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