0
TESTING RESPONSIVE WEB DESIGNONE SITE FOR EVERY SCREENBaiju JosephDirector QE & RE , Yahoo!baiju@yahoo-inc.com18 May 2013
AGENDA• Ever growing Mobile• Why Responsive Web Design• Responsive Web Design• Testing – Responsive Web Design• Useful too...
EVER GROWING MOBILESource : Morgan Stanley Research
EVER GROWING MOBILESource : comScore© comScore, Inc. Proprietary. 15Source: comScore Device Essential December 10, 2012Peo...
WHY RESPONSIVE WEB DESIGN“Day by day, the number of devices,platforms, and browsers that need to workwith your site grows....
• accessible on many devices – just need abrowser and internet connection• one code for many screens•  easy to develop and...
• a design approach• for providing optimal viewing experience•  easy reading and navigation•  with a minimum of resizing, ...
• fluid , proportion based grids• flexible images• Media queries•  Selectively serving style sheets based ondeviceRESPONSI...
• compare functionality on devices• rendering• performance• real device testing• automate once – run on multi devicesRWD T...
• Mobile emulators (opera ,chrome)•  Tries to mimic behavior of real device•  Browser based user agent simulatorsRWD TESTI...
• iOS Simulator•  Closest to working of real device•  Part of Xcode tools with iOS SDK• Android Emulator•  mimics all of t...
• performance•  Yslow : analyzes web pages andsuggests ways to improve theirperformanceRWD TESTING TOOLS
• Mobile Testing skill• Mobile , RWD technologyknowledge• Too many device combinations• Lack of real devices• Testability ...
Rwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
Upcoming SlideShare
Loading in...5
×

Rwd Testing Baiju Joseph

444

Published on

Presentation from vodQA Bangalore Get Set Test

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
444
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • The DevTools support for device emulation includes native User Agent and dimension overriding. This allows developers to debug mobile browsers on different devices and operating systems via the Overrides menu. - https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
  • https://developer.apple.com/library/ios/#documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html http://developer.android.com/tools/devices/emulator.html
  • Transcript of "Rwd Testing Baiju Joseph"

    1. 1. TESTING RESPONSIVE WEB DESIGNONE SITE FOR EVERY SCREENBaiju JosephDirector QE & RE , Yahoo!baiju@yahoo-inc.com18 May 2013
    2. 2. AGENDA• Ever growing Mobile• Why Responsive Web Design• Responsive Web Design• Testing – Responsive Web Design• Useful toolsDisclaimer: The opinions expressed herein are my own personal opinions and do not represent my employers view inanyway.
    3. 3. EVER GROWING MOBILESource : Morgan Stanley Research
    4. 4. EVER GROWING MOBILESource : comScore© comScore, Inc. Proprietary. 15Source: comScore Device Essential December 10, 2012People are using different devices depending on the time of the day(Weekday: December 10, 2012)SmartphonesTabletsPCsrule ourworkdaysrule ourmornings8:00 am 6:00 pm12:00 amrule ourevenings
    5. 5. WHY RESPONSIVE WEB DESIGN“Day by day, the number of devices,platforms, and browsers that need to workwith your site grows. Responsive web designrepresents a fundamental shift in how we’llbuild websites for the decade to come.”~ Jeffrey Veen
    6. 6. • accessible on many devices – just need abrowser and internet connection• one code for many screens•  easy to develop and maintain•  cost effective• better SEOWHY RESPONSIVE WEB DESIGN
    7. 7. • a design approach• for providing optimal viewing experience•  easy reading and navigation•  with a minimum of resizing, panning, andscrolling• across a wide range of devices (pc ,tablet , phones…)RESPONSIVE WEB DESIGN - RWDSource : Wikipedis
    8. 8. • fluid , proportion based grids• flexible images• Media queries•  Selectively serving style sheets based ondeviceRESPONSIVE WEB DESIGN - RWD
    9. 9. • compare functionality on devices• rendering• performance• real device testing• automate once – run on multi devicesRWD TESTING
    10. 10. • Mobile emulators (opera ,chrome)•  Tries to mimic behavior of real device•  Browser based user agent simulatorsRWD TESTING TOOLS
    11. 11. • iOS Simulator•  Closest to working of real device•  Part of Xcode tools with iOS SDK• Android Emulator•  mimics all of the hardware andsoftware features of a typical mobiledevice•  With Android SDKRWD TESTING TOOLS
    12. 12. • performance•  Yslow : analyzes web pages andsuggests ways to improve theirperformanceRWD TESTING TOOLS
    13. 13. • Mobile Testing skill• Mobile , RWD technologyknowledge• Too many device combinations• Lack of real devices• Testability hooks in architectureRWD TESTING CHALLENGES
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×