RWD Testing - Baiju Joseph

  • 120 views
Uploaded on

vodQA Bangalore 2013

vodQA Bangalore 2013

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
120
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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