Hell is other browsers - Sartre




The Open Web
   goes Mobile
   Peter-Paul Koch (ppk)
  http://quirksmode.org
  http://...
The mobile web
Four problems with making a
website work well on a phone:
- Small memory
- Small display
- Flaky browsers
-...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory

Performance tests are necessary.

And...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory
- Small display

This problem has been...
Small display
CSS: solve it with media queries

@media all and (max-width: 300px) {
  div#container {
    // special style...
Small display
JS: solve it with offsetWidth

if (document.body.offsetWidth < 300) {
   // special scripts for small displa...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory
- Small display
- Flaky browsers
- Fla...
Mobile browsers
Thanks to Vodafone's generous
support I'm now able to deliver a
preliminary report on the State of the
Mob...
Mobile browsers
- Android WebKit
- Opera Mobile
- NetFront
- Safari
- Opera Mini
- Blackberry
- S60 WebKit
- IE Mobile
- I...
Mobile browsers
All these browsers have their own
problems with advanced CSS and
JavaScript.

Worse, you have to test real...
Opera Mobile
9.5 on HTC
Diamond Touch

Supported
but only in
desktop
mode
S60 WebKit on
Nokia E71

Supported,
but error in
font-variant
Opera Mini 4.2
on Nokia E71

Supported
except for
letter-
spacing
NetFront on
Sony Ericsson
C510

Basics
supported
Opera Mobile
8.00 on
Motorola V3xx

Only color
and text-
transform
supported
Mobile browsers
The current top level mobile browsers
are:
- Android WebKit
- Safari
- Opera Mobile
Mobile browsers
Top level:
Android WebKit, Safari, Opera Mobile

Mid level:
- S60 WebKit
- Blackberry
- Opera Mini
Mobile browsers
Top level:
Android WebKit, Safari, Opera Mobile

Mid level:
S60 WebKit, Blackberry, Opera Mini

Bottom lev...
Mobile browsers
Top level:
Android WebKit, Safari, Opera Mobile
Mid level:
S60 WebKit, Blackberry, Opera Mini
Bottom level...
Mobile browsers
Top level:
Android WebKit, Safari, Opera Mobile
Mid level:
S60 WebKit, Blackberry, Opera Mini
Bottom level...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory
- Small display
- Flaky browsers
- Fla...
The mobile web
Four problems with making a
website phone-compatible:
- Small memory
- Small display
- Flaky browsers
- Fla...
Flaky connections
If the guy next to you is downloading a
few movies
your network connection will slow
down regardless of ...
Flaky connections
This is a serious problem for the
mobile web,
especially when your site uses 200K of
custom JavaScript p...
Flaky connections
Solution:
Put the core files on your mobile phone

so that you only need to download the
data.
Flaky connections
W3C Widgets offer this solution:
- Local applications
- HTML/CSS/JavaScript
- Run in a browser (any brow...
Flaky connections
The same approach is taken by all
app systems:
- iPhone apps
- Windows Mobile apps
- Blackberry apps
- A...
Flaky connections
The same approach is taken by all
app systems:
- iPhone apps (proprietary)
- Windows Mobile apps (propri...
Open standards
If a company wants to put data on
mobile phones, it can
- create a website (which may be slow
  to load)
- ...
Open standards
If a company wants to put data on
mobile phones, it can
- create a website (which may be slow
  to load)
- ...
W3C Widgets
Widgets are better than websites
because they download only the data;
and not the core files.

Widgets are bet...
W3C Widgets
Eventually, I'll be able to share a
widget with a friend via Bluetooth,
even if I use an Android
and he uses a...
W3C Widgets
Wouldn't that be
totally
astoundingly
absolutely
inconceivably
interoperable?
W3C Widgets
And hundreds of thousands of web
developers already know how to create
widgets.

It's just HTML/CSS/JavaScript...
W3C Widgets
- Create 1 HTML page with as much
 CSS, JavaScript, and images you
 need.
- Add an icon and a config.xml
- Zip...
W3C Widgets
Widgets will open the web faster and
for more people than any other system.

If people can easily create them
...
Application systems

An app system may remain more
suited for some forms of applications:

- animation-heavy games
- secur...
Application systems

Besides, native app systems can foster
innovation, too, and eventually W3C
Widgets will profit from t...
W3C Widgets
It Just Works.

But not quite yet, unfortunately.

That's one of the reasons I'm here
today.
W3C Widgets
It Just Works

in the Vodafone Widget Manager for
S60 phones.
W3C Widgets
It Just Works
S60

in the Opera/T-Mobile Widget
Manager for (probably) Windows
Mobile phones.
W3C Widgets
It Just Works
S60
Windows Mobile

in the Nokia Widget Runtime on S60
(as long as you add an info.plist file)
W3C Widgets
It Just Works
S60 (2x)
Windows Mobile

Otherwise, though, there's no support.

Yet.
W3C Widgets
It Just Works.
S60 (2x)
Windows Mobile
Google Android?
W3C Widgets
It Just Works
in Google Android?
I came here to ask if it's possible
Google Android will support W3C
Widgets
n...
W3C Widgets
We need:
- a browser (Android WebKit will do perfectly
 fine, thanks)
- a way of associating .wgt files with
 ...
JavaScript Device APIs
are APIs that grant access to phone
functionality
- camera
- contact list
- text messages
- etc.
JavaScript Device APIs
are necessary for a true mobile
experience.

W3C widgets should be able to tie into
phone functiona...
JavaScript Device APIs
- BONDI specification
(not yet implemented)
- Phonegap library
(Android, Blackberry, iPhone)
- Oper...
JavaScript Device APIs
Security

If I receive a widget from someone
and it uses device APIs
how do I know it's not going t...
JavaScript Device APIs
Security

This problem will probably be solved
by signed widgets and security levels.

On the lowes...
JavaScript Device APIs
Security

Still, this problem will remain pretty
serious and more research is
necessary.

Google ca...
W3C Widgets
Security

JavaScript's same-source policy is not
implemented in widgets,
because they have to be able to reque...
W3C Widgets
Pros
- Open standards
- Countless people can already create
  them
- Interoperability on a massive scale
- The...
W3C Widgets
Cons
- Other systems may remain better
  suited for certain applications
- As yet moderately supported
- Secur...
W3C Widgets
The pros heavily outweigh the cons.

So let's get to work.
Thank you
for your attention
Questions?
Ask away.
Or ask me on Twitter
http://twitter.com/ppk
or on my site
http://quirksmode.org
Upcoming SlideShare
Loading in...5
×

Google presentation: The Open Web goes mobile

5,191

Published on

A review of mobile browsers and a short introduction to W3C Widgets.

Published in: Technology, Business
2 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,191
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
260
Comments
2
Likes
18
Embeds 0
No embeds

No notes for slide

Google presentation: The Open Web goes mobile

  1. 1. Hell is other browsers - Sartre The Open Web goes Mobile Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk Google, 24 April 2009
  2. 2. The mobile web Four problems with making a website work well on a phone: - Small memory - Small display - Flaky browsers - Flaky connections
  3. 3. The mobile web Four problems with making a website phone-compatible: - Small memory Performance tests are necessary. And I'll leave it at that.
  4. 4. The mobile web Four problems with making a website phone-compatible: - Small memory - Small display This problem has been recognized years ago, and people are thinking about it.
  5. 5. Small display CSS: solve it with media queries @media all and (max-width: 300px) { div#container { // special styles for small displays } } Supported by Opera, iPhone, Bolt and Iris.
  6. 6. Small display JS: solve it with offsetWidth if (document.body.offsetWidth < 300) { // special scripts for small displays } offsetWidth and offsetHeight seem well supported (except on Blackberry).
  7. 7. The mobile web Four problems with making a website phone-compatible: - Small memory - Small display - Flaky browsers - Flaky connections
  8. 8. Mobile browsers Thanks to Vodafone's generous support I'm now able to deliver a preliminary report on the State of the Mobile Browsers.
  9. 9. Mobile browsers - Android WebKit - Opera Mobile - NetFront - Safari - Opera Mini - Blackberry - S60 WebKit - IE Mobile - Iris, Bolt, Skyfire, Obigo, OpenWeb, Nokia S40, Palm Blazer, Fennec, Teashark etc. etc. You may groan now.
  10. 10. Mobile browsers All these browsers have their own problems with advanced CSS and JavaScript. Worse, you have to test really basic stuff, too such as font-style: italic
  11. 11. Opera Mobile 9.5 on HTC Diamond Touch Supported but only in desktop mode
  12. 12. S60 WebKit on Nokia E71 Supported, but error in font-variant
  13. 13. Opera Mini 4.2 on Nokia E71 Supported except for letter- spacing
  14. 14. NetFront on Sony Ericsson C510 Basics supported
  15. 15. Opera Mobile 8.00 on Motorola V3xx Only color and text- transform supported
  16. 16. Mobile browsers The current top level mobile browsers are: - Android WebKit - Safari - Opera Mobile
  17. 17. Mobile browsers Top level: Android WebKit, Safari, Opera Mobile Mid level: - S60 WebKit - Blackberry - Opera Mini
  18. 18. Mobile browsers Top level: Android WebKit, Safari, Opera Mobile Mid level: S60 WebKit, Blackberry, Opera Mini Bottom level: - NetFront - IE Mobile (old)
  19. 19. Mobile browsers Top level: Android WebKit, Safari, Opera Mobile Mid level: S60 WebKit, Blackberry, Opera Mini Bottom level: NetFront, IE Mobile (old) Other default browsers (old): - OpenWeb, Nokia S40, Palm Blazer
  20. 20. Mobile browsers Top level: Android WebKit, Safari, Opera Mobile Mid level: S60 WebKit, Blackberry, Opera Mini Bottom level: NetFront, IE Mobile (old) Other default browsers (old): OpenWeb, Nokia S40, Palm Blazer Other browsers (non-default): - Iris, Bolt, Skyfire, Obigo, Fennec, Teashark etc. etc.
  21. 21. The mobile web Four problems with making a website phone-compatible: - Small memory - Small display - Flaky browsers - Flaky connections
  22. 22. The mobile web Four problems with making a website phone-compatible: - Small memory - Small display - Flaky browsers - Flaky connections
  23. 23. Flaky connections If the guy next to you is downloading a few movies your network connection will slow down regardless of how good it's supposed to be. I don't see this problem disappearing any time soon.
  24. 24. Flaky connections This is a serious problem for the mobile web, especially when your site uses 200K of custom JavaScript plus a few libraries. They have to be downloaded every time the user visits your site and caching isn't always reliable.
  25. 25. Flaky connections Solution: Put the core files on your mobile phone so that you only need to download the data.
  26. 26. Flaky connections W3C Widgets offer this solution: - Local applications - HTML/CSS/JavaScript - Run in a browser (any browser) - Can handle Ajax requests
  27. 27. Flaky connections The same approach is taken by all app systems: - iPhone apps - Windows Mobile apps - Blackberry apps - Android apps - etc.
  28. 28. Flaky connections The same approach is taken by all app systems: - iPhone apps (proprietary) - Windows Mobile apps (proprietary) - Blackberry apps (proprietary) - Android apps (proprietary) - etc. (probably proprietary)
  29. 29. Open standards If a company wants to put data on mobile phones, it can - create a website (which may be slow to load) - or create 4 or more separate applications (which is certainly expensive)
  30. 30. Open standards If a company wants to put data on mobile phones, it can - create a website (which may be slow to load) - or create 4 or more separate applications (which is certainly expensive) - use W3C Widgets
  31. 31. W3C Widgets Widgets are better than websites because they download only the data; and not the core files. Widgets are better than app systems because you don't have to write 4, 5, or 10 of them. Just the one is enough.
  32. 32. W3C Widgets Eventually, I'll be able to share a widget with a friend via Bluetooth, even if I use an Android and he uses a Nokia S60 or a HTC Windows Mobile or a Blackberry and It Just Works
  33. 33. W3C Widgets Wouldn't that be totally astoundingly absolutely inconceivably interoperable?
  34. 34. W3C Widgets And hundreds of thousands of web developers already know how to create widgets. It's just HTML/CSS/JavaScript, after all.
  35. 35. W3C Widgets - Create 1 HTML page with as much CSS, JavaScript, and images you need. - Add an icon and a config.xml - Zip the lot - Change extension to .wgt - It Just Works.
  36. 36. W3C Widgets Widgets will open the web faster and for more people than any other system. If people can easily create them and share them with their friends and They Just Work why do we need anything else?
  37. 37. Application systems An app system may remain more suited for some forms of applications: - animation-heavy games - secure applications - more ... ?
  38. 38. Application systems Besides, native app systems can foster innovation, too, and eventually W3C Widgets will profit from that. Proprietary systems are fine as long as you also support the standard.
  39. 39. W3C Widgets It Just Works. But not quite yet, unfortunately. That's one of the reasons I'm here today.
  40. 40. W3C Widgets It Just Works in the Vodafone Widget Manager for S60 phones.
  41. 41. W3C Widgets It Just Works S60 in the Opera/T-Mobile Widget Manager for (probably) Windows Mobile phones.
  42. 42. W3C Widgets It Just Works S60 Windows Mobile in the Nokia Widget Runtime on S60 (as long as you add an info.plist file)
  43. 43. W3C Widgets It Just Works S60 (2x) Windows Mobile Otherwise, though, there's no support. Yet.
  44. 44. W3C Widgets It Just Works. S60 (2x) Windows Mobile Google Android?
  45. 45. W3C Widgets It Just Works in Google Android? I came here to ask if it's possible Google Android will support W3C Widgets not instead of but in addition to its own app system.
  46. 46. W3C Widgets We need: - a browser (Android WebKit will do perfectly fine, thanks) - a way of associating .wgt files with this browser OR an installation mechanism - JavaScript device APIs
  47. 47. JavaScript Device APIs are APIs that grant access to phone functionality - camera - contact list - text messages - etc.
  48. 48. JavaScript Device APIs are necessary for a true mobile experience. W3C widgets should be able to tie into phone functionality.
  49. 49. JavaScript Device APIs - BONDI specification (not yet implemented) - Phonegap library (Android, Blackberry, iPhone) - Opera/T-Mobile widget manager (Windows Mobile)
  50. 50. JavaScript Device APIs Security If I receive a widget from someone and it uses device APIs how do I know it's not going to try to steal my contact list?
  51. 51. JavaScript Device APIs Security This problem will probably be solved by signed widgets and security levels. On the lowest security levels, phone users will be prompted for every device API call the widget wants to perform. Higher levels do it automatically.
  52. 52. JavaScript Device APIs Security Still, this problem will remain pretty serious and more research is necessary. Google can certainly help us figure out a good answer.
  53. 53. W3C Widgets Security JavaScript's same-source policy is not implemented in widgets, because they have to be able to request data from any source. This, too, requires more thought.
  54. 54. W3C Widgets Pros - Open standards - Countless people can already create them - Interoperability on a massive scale - They'll open the Web more quickly than any other system
  55. 55. W3C Widgets Cons - Other systems may remain better suited for certain applications - As yet moderately supported - Security issues
  56. 56. W3C Widgets The pros heavily outweigh the cons. So let's get to work.
  57. 57. Thank you for your attention
  58. 58. Questions? Ask away. Or ask me on Twitter http://twitter.com/ppk or on my site http://quirksmode.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×