http://www.w3.org/2009/Talks/phila-lws/
Phil Archer <phila@w3.org>
No excuses. Don't do it.
(Because it's really hard to handle multiple screens on a mobile, even if your deivce 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"
The many reasons for not using frames include:
target="_blank"
In the specific mobile context, many mobile devices do not support frames, therefore, frames should not be used in Mobile Web sites.
target="_blank"
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"
Nested tables merely compound the problem. And you may not realise you're doing it. If you use a big table to control the page layout and then plonk another table in the middle then that's a nested table!
target="_blank"
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.
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.
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).
Yes... and maybe more than you think.
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/?p=72 (Note, this has moved recently and there's no 301 from the old URI).
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.
Watch out for nasty traps...
To go further means device-aware content generation.
W3C's Device Description Repository Simple API is there to help!
dot Mobi's Device Atlas is the best-known DDR and there are tutorials on the mobiforge site.
<?php try{ $vendor = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor'); } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) { $vendor = "Unknown"; } ?> <h1>Hello <?php echo $vendor; ?> user!</h1>
However many versions you create, make sure there is one URI to link to.
Never ask your users, or other content creators - or search engines - to choose whether to link a particular version of your page.
However many versions you create, make sure there is one URI to link to.
Never ask your users, or other content creators - or search engines - to choose whether to link a particular version of your page.
Please
mobileOK is about the machine-testable best practices.
1 <?xml version="1.0"?>
2 <powder xmlns="http://www.w3.org/2007/05/powder#">
3 <attribution>
4 <issuedby src="http://www.example.com/company.rdf#me" />
5 <issued>2008-06-25T00:00:00</issued>
6 <supportedby src="http://validator.w3.org/mobile/" />
7 </attribution>
8 <dr>
9 <iriset>
10 <includehosts>example.com</includehosts>
11 </iriset>
12 <descriptorset>
13 <typeof src="http://www.w3.org/2008/06/mobileOK#conformant" />
14 <displaytext>The example.com Web site conforms to mobileOK</displaytext>
15 <displayicon src="http://www.w3.org/2005/11/MWI-Icons/mobileOK.png" />
16 </descriptorset>
17 </dr>
18 </powder>
<?xml version="1.0"?> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:wdrs="http://www.w3.org/2007/05/powder-s#"> <rdf:Description rdf:about="http://example.com/anypage.html"> <rdf:type rdf:resource="http://www.w3.org/2008/06/mobileOK#Conformant" /> <wdrs:logo rdf:resource="http://www.w3.org/2005/11/MWI-Icons/mobileOK.png" /> <wdrs:text>The example.com webiste conforms to mobileOK</wdrs:text> <wdrs:describedby rdf:resource="http://www.w3.org/TR/powder-dr/dr-example_5_3.xml" /> </rdf:Description> <rdf:Description rdf:about="http://www.w3.org/TR/powder-dr/dr-example_5_3.xml"> <wdrs:issuedby rdf:resource="http://www.example.com/company.rdf#me" /> <wdrs:issued>2008-06-25T00:00:00</wdrs:issued> <wdrs:supportedby rdf:resource="http://validator.w3.org/mobile/" /> </rdf:Description> </rdf:RDF>
http://www.w3.org/2009/Talks/phila-lws/
Phil Archer <phila@w3.org>