Phil Archer <phila@w3.org>
W3C Mobile Web Initiative
http://www.w3.org/2009/Talks/phila-ota/
Over The Air
London, 25 September 2009
Supported by MobiWeb2.0, funded by European Union's FP7.
No excuses. Don't do it.
(Because it's really hard to handle multiple screens on a mobile, even if your device supports them.)
target="_blank"
target="_blank"
No excuses. Don't do it.
(Because every image is another network request, which is more latency and, often, more cost).
Use CSS, that's what it's for.
target="_blank"
target="_blank"
target="_blank"
target="_blank"
Using tables for layout, as opposed to using tables to present tabular data, is bad practice on desktop as well as mobile (mainly for accessibility reasons).
On mobile, tables often force horizontal scrolling (which is naff) or may be transformed (server side or client side). This may work but do you want to hand control to a content transformation engine?
target="_blank"
target="_blank"
Think in a single column
Yes, but...
The marketing departments of the device manufacturers don't want to talk about the mobile Web, they are keen to offer the 'full Web' and so top end devices ignore @media="handheld" completely.
Thankfully, support for media queries offers a way out.
The problem is explained in detail in an article by W3C's Dominique Hazaël-Massieux called Return of the Mobile Stylesheet.
Dom proposed a solution based on different browser's habits and this works but a more efficient method, based on Dom's work, was proposed by Dean Hamack of Bushido Designs.
<!-- Mobile device detection by Bushido Designs: BushidoDesigns.net --> <link rel="stylesheet" type="text/css" href="mobile.css" /> <style type="text/css" media="screen and (min-width: 481px)"> <!-- @import url("screen.css"); --> </style> <!--[if IE]><link rel="stylesheet" type="text/css" href="screen.css" media="screen" /><![endif]--> <link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
Basically it uses quirks of different browsers to kludge around inconsistent implementation - and covers the majority, but not all, cases.
Read Dom's original article at http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Then read the Bushido article at http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/ (Note, this has moved a few times and may not be reliable).
Many features that are familiar in the desktop world can and should be used on mobile... but let's flip the 'fail gracefully' mantra on its head and talk about progressive enhancement.
<dl>
lists are especially useful for this.Many features that are familiar in the desktop world can and should be used on mobile... but let's flip the 'fail gracefully' mantra on its head and talk about progressive enhancement.
This page:
dl
list not a tableThe page is written almost entirely by JavaScript (try http://www.w3.org/2009/05/mwi_course_dl_badjs.htm with and without JavaScript enabled).
Without JavaScript support the same page looks like this:
The two frames below show exactly the same code as each other but we've disabled the JavaScript in the page on the right. The page is available separately (and through http://tinyurl.com/n8l7bm).
Take a look at the simple page at http://www.w3.org/2009/Talks/phila-ota/example.htm.
To make this mobile-friendly, you'll need to change the CSS and maybe play around a little more.
If that's too easy for you make the same page work on either desktop or mobile, by following the advice in Dom's article [1] and/or the Bushido method [2].
It has:
Phil Archer <phila@w3.org>
W3C Mobile Web Initiative
These slides availablehttp://www.w3.org/2009/Talks/phila-ota/
Ask me about the forthcoming Live in Cambridge and online training courses.
Supported by MobiWeb2.0, funded by European Union's FP7.