Supported by MobiWeb2.0,
funded by the European Union
François Daoust, Mobile Web Best Practices Working Group Staff Contact
http://www.w3.org/2008/Talks/04-overtheair/
Shorter URI: http://tinyurl.com/224e9x
Over the Air
London, United Kingdom, 4 April 2008
... although I would be happy to talk about these points, feel free to ask!
→ Switching between windows may turn out to be a perilous live exercise.
(the slides include some screenshots, just in case)
Links to the examples are available from the following menu page:
Main choices available?
There will always be a need for native/Java applications, but...
→ The Web will be the main mobile development plaform in the future!
The iPhone is a perfect example of a mobile phone that promotes the use of the Mobile Web as the development platform for applications:
Back to topic:
Mobile Web pages need to rely on solid foundations so that it's easier to build on top of them.
→ the Mobile Web Best Practices 1.0 document is here to help:
What is mobileOK Basic?
mobileOK applies to an hypothetical default delivery context (DDC)
NB: DDC is "the minimum delivery context specification necessary for a reasonable experience of the Web".
Do not target the DDC if you know better about the user's phone capacities!
Several implementations of mobileOK Basic checkers already exist:
- desktop -
- phone -
What does the checker have to say on a Web page that "looks" just fine?
View page, View checker's report
Before we come back and fix the page, let's:
- desktop -
- phone -
Let's build a mobileOK Basic template page from scratch
<html> <body> <p> Hello mobileOK! </p> </body> </html>
View page, View checker's report
→ We need to be explicit about the content of the page.
The more explicit, the easier for the browser to render the page.
Standards mode - as opposed to Quirks mode - is less CPU-intensive.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <p> Hello mobileOK! </p> </body> </html>
→ The title is missing. It should be short and descriptive.
- desktop -
- phone -
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mOK Basic</title> </head> <body> <p> Hello mobileOK! </p> </body> </html>
View page, View checker report
Internal
<style type="text/css"> blah... blah... </style>
External
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
Warning: so-called full-web browsers usually download the screen stylesheet..
Use more specific @media queries in that case.
For instance, for the iPhone:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="handheld.css" />
- desktop -
- phone -
template4.html
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mOK Basic</title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" /> </head> <body> <p>Hello mobileOK!</p> </body> </html>
screen.css
p { font-size: 2em; } body:after { content: url(W3C-MWI-large.png) }
handheld.css
p { font-size: 0.5em; }
- desktop -
Bad: View page, View checker report
Good: View page, View checker report
- desktop -
Bad: View page, View checker report
- desktop -
Good: View page, View checker report
- desktop -
- phone -
Bad: View page, View checker report
- desktop -
- phone -
Good: View page, View checker report
- desktop -
- phone -
Bad: View page, View checker report
You may use scripting but don't rely on it!
- desktop -
- phone -
Good: View page, View checker report
- desktop -
- phone -
Remember the Beethoven lyrics page that "looked" just fine?
Using the checker's report and our knowledge of Best Practices, we may now fix the page by:
Good: View page, View checker's report
Within the Mobile Web Initiative:
In other working groups:
François Daoust <fd@w3.org>
Staff Contact for the Mobile Web Best Practices Working Group
Supported by MobiWeb2.0,
funded by the European Union