• Save
Scaling Gracefully & Testing Responsively
Upcoming SlideShare
Loading in...5
×
 

Scaling Gracefully & Testing Responsively

on

  • 626 views

The web isn't just desktop anymore. The web is everywhere, creating a fluid conundrum for the QA professional. As the testing matrix grows and grows into a multiplatform expanse, we must be ready for ...

The web isn't just desktop anymore. The web is everywhere, creating a fluid conundrum for the QA professional. As the testing matrix grows and grows into a multiplatform expanse, we must be ready for not just the size of a screen, but also user browsing habits. In this talk, we'll explore the problems presented by responsive design, examine the flexible grid and forecast systematic solutions.

Statistics

Views

Total Views
626
Views on SlideShare
604
Embed Views
22

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 22

http://127.0.0.1 11
https://twitter.com 9
https://si0.twimg.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Formatted my presentation thinking we were now in 16:9 worldOf course our screens here are 4:3, so forgive the squishynessActually it works pretty well with the subject matter.
  • I’d like to kick things off with a little exercise. Don’t worry, I’m not testing you. Just judging you.
  • You get the idea.
  • My name is Richard KriheliAnd there I am, likely testing mobile webA little background about me:
  • I’m a professional nitpicker (explain)I nitpicked this presentation (so you’ll likely notice some edits from the downloads)Been in this business for more than ½ of my 16 year career.Work for RGAResponsible for Nike (next slide)
  • I’m a skepticPersonal mottto is : Question EverythingI have trust issues, and it helps my careerAs QA professionals, I think you’d relate to this – yes?
  • I’m an easy targetGoogle me and you’ll see I’m a very public dudeMy privacy settings are pretty much offWYSIWYG
  • OK OK… I do have a secret identityI did mention that half my career was in QAOther half was in designI am formally trained in fiction writingI’m a conference speaking newbieJust putting it out there
  • Let’s talk QA
  • First, shake up the foundationWe’ve got all this KNOWLEDGEBUT a lot is changingWhat that change…Our POV needs too change tooLET ME EXPLAIN
  • Don’t want to jar anyoneAnd I want to state the obviousDESKTOPS ARE NOT THE WEB ANYMOREIt’s not going awayRather being displacedWeb is no longer confined to the desktopAnd unless you’re completely unaware, let me break it to you this way:
  • THIS IS THE WEBWeb is changingIt’s FLUIDIt’s ADAPTIVE and RESPONDING TO ENVIRONMENTSIt’s increasingly UNPREDICTABLEIt’s making SPIDEY nutsWHO IS SPIDEY? -> CROWDITS US+ our spidey sense is going bonkersWHY? Because with all the contortions and permutations, there’s a lot to make sense of
  • Let’s defineResponsive web IS PLASTIC MANIt is : GETTING A WEBSITE TO ADAPT TO ITS ENVIRONMENT.Ethan Marcotte, webdesigner
  • But it’s not thisCommon misconceptionResponsive is NOT about cramming contentCat’s or otherwise
  • More like thisWebsites responding to user’s preferencesResponding to user behaviorWebsites are SCALING GRACEFULLY
  • StarbucksDesktop versionTablet versionSmartphone versionWhat happens?Navigation changes, content and function gets re-arranged, content gets stacked.As the viewport shrinks
  • Boston GlobeOne of the most celebrated, high profile examples of RWDThey invested a lot of money in RWDYou see the usual form factors here Desktop / Tablet / SmartphoneNEWTON!!!That device is almost 20 years oldAnd there’s the Boston Globe, Scaling gracefully down to meet it’s limitations.
  • Why is this happening?This is a popular questionThere was a time when there would be a separate mobile version and a desktop versionMain point of contention from pundits:Smartphone browsers TODAY are built so robust that they can display everything correctly as is.
  • First reasonThings like this happen at a ridiculous paceIn this case – which is only a month or so oldTaller screen size than it’s predecessorThe mobile content needs to respond to this change without altering code
  • Also because of thisWeb is everywhere nowThe game is changedThis person is using a fingerSignificant and fundamental differences in how users consume content
  • ON TOP OF THATEndless array of apps / services that web is encompassingSocial media is at the forefront of thisAll have RWD components and widgets and whatnotWeb designers are forced to keep pace.
  • So how is this done?Let’s get to the meat
  • It’s EASYHow many of you are familiar with HTML and CSS?HTML is a markup language that communicates with the browser to display contentCSS or Cascading Style Sheet is set of styles that makes the content look the way the designer intends
  • Let’s talk about Flexible GridSo basically, websites are abandoning fixed width divsAnd going to percentage based divs4 columns cutting up a page evenly will go to 25% each, for exampleCSS3 makes use of Media Queries A SET OF CONDITIONS IN THE CODE You can specify: width / height / aspect ratio / resolution
  • Hey rich, you’re talking about web developers a lot
  • Gives us opportunity to flex testing musclesShow we’re prepared to meet the challengeBrad Johnson mentioned yesterday in his talk that this is a fantastic opportunity for us – I AGREEThose of us who test web know browsersWe understand what developers are trying to doNow we get to test it! Lots of problems to be found, right?
  • Not if you aren’t preparedYou, too must be responsiveBecause the whole game is changingAnd you have to change with itLook at this dudeHe’s your user base
  • Your user is finding new ways of getting annoyedHow he interacts with the contentThings you can’t automate (Sorry, Brad)One hand browsingLimited browsing timeShort attention spansSession InterruptionsNot only must we understand thisWe must embody this / become this guy
  • BUT those are just user problemsREMEMBER Limitless and growingLet’s FOCUS instead on common issuesEveryday issuesSo I’ve put together a sample of 4 problemsMOST QA folks will likely deal with when testing responsive webRemember – this is just a sample. We could go on for hours talking about issuesBut I’m just giving you a taste
  • Entire point of RWD – TO LIVE ON ALL OF THEMHow is this a problem?If the sites will live on all of them, which ones do we address first?CONSIDER:1) Hundreds of new devices introduced regularly2) Sizes are not standardized3) for Smartphones, you have to MULTIPLY by twoCONUNDRUMSo what’s the best approach?
  • NO DUH / OBVIOUSBUT HERE ARE SOME TIPS:1) settle before development starts2) know your target before you agree to timelines --- Save yourself the headaches3) Do some research4) Put together a matrix of supported devicesKNOW:It’s Easy to get bullied with same expectationsThe game has changed / adjust accordingly
  • Here’s a bug you’ll find every time you test RWD w/o failCSS doesn’t specify how browsers deal with decimal point percentages1000 pixel / 6 columns16.66667 %Some round up (4)Some round down (2)Nobody winsPixel perfection is hurt
  • No current workaroundAdaptive design / fixed grids Some don’t careSome really doEducate the clientEducate the developer / project managerOh and use FIREFOX for a more accurate test
  • How is this a problem?Nike use case53 regions 20 + languages
  • No real fix hereLots of problemsInvest in precise copy rather than translation servicesForce linebreaks
  • How is this different than prioritizing devicesThis case, we’re dealing with mobile browsersiPhone4s – 3 different safari versionsChrome, Opera, FfoxiOS has 80% adoption rate for new OS/Browsers – good for 4.3 and above – test back to 4.0Android? Android 2.1Android users don’t upgrade regularlyHow do you prepare
  • YES BUILD IT3 years old2 year contractsShagalovThere is nothing quite like having a physical lab accounted for
  • HOW FAR BACK DO WE GO?CUTOFFSSymbian S60 – 4% and fallingAndroid 2.1 Eclair (HTC Desire)iPhone 3GS (bare minimum) iOS5Debatable : BB OS 5 / 6Kindle Fire – good for the viewport size of 7” (Android 2.3 Gingerbread)One of newest Windows PhonesSymbian S60 - N95
This phone represents the lowest of our requirements, mobile width is 240px wide, meaning that our lowest support width is the same. The Nokia N95 is a great test case to identify the impacts to other dependencies within a webpage. This phone is also widely used, given the low cost nature of the OS(open source), as well as having a strong user base in our stats.Android 2.1 - HTC desire
This phone is our minimum Android OS support for smart phones, this is based upon the fact that it cuts the mustard in our tests. While the user base for this OS is dropping due to more recent versions of Android replacing 2.1, this devices is a good hardware point to test against as well. It features a 1ghz CPU, which was less optimised when 2.1 was launched, meaning that 2.2 on a slower CPU may produce a smoother experience. With manual testing, we have discovered a consistency across Android in that, if it works on 2.1, it has a strong chance of working on later versions. 2.1 has some issues which you can read about later, but overall, 2.1 is the best phone to test against for maximum stability across the Android user base, from 2.1 to 2.3.3iOS 5 - iPhone4
In our analysis, after iOS 5 was launch, the take was nearly 80% of the user base, with only 2 main versions remaining in our stats, iOS5 and iOS4. Nearly 3 times as many people use iOS5 as 4, with 8 times as many using 4 as 3. Given that iOS was introduced primarily on the iPhone 4, this is the most useful test device. The changes in the browsers we will come back to later, but it is important to note the update by iOS users is very high to new versionsBlackberry OS 5 - Bold 9700
BBOS5 is a very popular version of the OS, it makes up significant share of our Blackberry user base.  What is also important to note about this device is the browser support is still relatively poor, even though devices were still being sold with OS5 until the end of 2010.  The security element of BBOS5 means a lot of users will not use a third party browser, so the stock browser is of most importance.  OS5 has a similar, but more advanced browser than OS4, but OS5 should be on your device list, it is a browser that we test against every day.Blackberry OS 6 - Bold 9700
BBOS6 is not the latest version of the OS, but does feature a near identical browser as 7, with minor improvements seen in 7. Even so, the uptake of 7 is light, so the focus should be on 6. This is for 2 reasons, 1, BBOS6 supports a Webkit browser, 2, the browser cuts the mustard. What is important to note about BBO6 is the Curve range.  The curve range is a budget range of phones with lower report rates or resolutions.  The 9300 for example, has a strong user base, but it also is a good indicator of how the smartphone experience is impacted by a screen with a small vertical height.  For this reason, testing on a 9300 could give you a skewed result, the same for only testing on the 9700.  If you are only testing features that have no layouts and CSS changes, the 9700 is the better of the two, but testing on the 9300 will give you an idea of the budget uses experience.Kindle Fire
The OS is actually rather irrelevant for this use case, either Kindle OS, QNX or Android can be used, this is because the size of the device is what this last device represents. The maximum support for a responsive mobile site will be up to 7 inches, after this, you can use most desktops sites with little problem. The 7 inch device also shows how odd a website can look, in landscape, these devices are very good in terms of the view port, by the vertical height and portrait view are much more difficult when testing. As the total vertical height of a screen can be 600px high or wide, depending on orientation, minus any icons or tool bars, you can be left with a poor tablet experience.
  • Lets look at some tools you should have in your arsenal
  • Best alternative to having actual devicesNot an emulatorExplain how it worksDifferent carriers/countriesComprehensive libraryBUT Subscription based, and not cheapNokia Vodafone Europe and Asian markets
  • Formerly, ShadowGreat appIntended for developmentGreat resource for QAInstall on your machinePair with as many physical devices you can get your hands onSimultaneously load all Great for quick inputting, and suchHas some limitations with login authentication and suchBut overall solidAnd FREE
  • Excellent tool for Blackberry testing (they were acquired by RIM)Ibut it’s an emulatorJavascript debuggingHandles PPI (Pixel density) issues wellGPSAlso good for developmentFREE
  • FF 15 and up come with thisTools > Web Developer MenuResponsive ModeYou can specify custom sizes Portrait + LandscapeIt’s an emulator but not device/browser specific emulationGood for a quick screen, but can’t be trusted
  • Nothing bettterMy colleague Brad FrostHe’s a web designerNo excuses
  • The short answer is, we don’t knowCurrently, devices shipping with Retina/ High Pixel Density screensImac / MBPEnormous ImagesCommunity/Blogs are addressing issues.
  • What else?Oh yea, this.MINORITY REPORTAgain, thanks Brad JohnsonThis is already here, but you know the dealGPSGESTURE BASED INTERACTIONFACE RECOGNITIONEYE TRACKING

Scaling Gracefully & Testing Responsively Scaling Gracefully & Testing Responsively Presentation Transcript

  • SCALING GRACEFULLY &TESTING RESPONSIVELY ! ( SESsion 1004 : Richard kriheli )
  • Um. Thanks ! MATT JOHNSTONSreekanth singaraju Sherri sobanksi Todd schultz Brad johnson Jean ann harrison
  • BUT FIRST…DUH JELLY!
  • BUT FIRST…Kriheli(duh-jelly!)
  • GET RICH QUICK !
  • GET RICH QUICK ! PRONITPICKER
  • GET RICH QUICK ! PRONITPICKER SKEPTIC
  • GET RICH QUICK ! PRONITPICKER SKEPTIC EASY TARGET
  • GET RICH QUICK ! PRONITPICKER SKEPTIC EASY TARGET MY SECRET IDENTITY
  • ENOUGH GET RICH QUICK ! ABOUT ME! PRO NITPICKER SKEPTIC EASY TARGET MY SECRET IDENTITY
  • A WISE SAGE ONCE SAID… UNLEARN WHAT YOU’VE LEARNED© LUCASFILM LTD.
  • NOT THE WEB ( ANYMORE )
  • THE WEB !
  • BUT… WHAT IS ThisRESPONSIVE WEB ??
  • WHYRESPONSIVE WEB ??
  • WEB IS EVERYWHERE
  • UNDER THE HOOD
  • HOW?
  • ELEMENTARY!
  • HOW DOES QAFIGURE INTHE MIX ??
  • TIME TO SHINE !
  • ERR… I MEAN…
  • USER BEHAVIORS* unpredictability* One hand browsing* TiME CONSTRAiNTS* ATTENTiON SPANS* INTERRUPTION* ETC., Etc.
  • ADDRESSING PROBLEMS
  • PROBLEM # 1VARYINGSCREEN SIZES
  • SOLUTION # 1PRiORiTiZE!
  • PROBLEM # 2<- ROUNDING -> ERRORS
  • SOLUTION # 2EDUCATE( And USE FIREFOX more )
  • PROBLEM # 3LOCALIZATION
  • SOLUTION # 3BUDGET!OR FORCE LINEBREAKS
  • PROBLEM # 4SHORT MOBILE LIFESPANs
  • SOLUTION # 4BUILD ALAB
  • HOW FAR BACK ?
  • SHOW ME SOMETOOLS MAN !
  • DEVICE ANYWHERE!
  • ADOBE EDGE INSPECT !
  • RIPPLE !
  • FIREFOX RESPONSIVE
  • THE BEST TOOLS!
  • WHAT’s NEXT ??
  • This.
  • THAT’S ALL ! THANKS !
  • QA + Q&A@kriheli : Twitterkriheli@gmail.com : EMAIL