Etape 1: Récupération d'un billet de test super fourni chez notre grande spécialiste des thèmes DOTCLEAR à savoir Kozlika

Etape 2: Copie du thème defaut en handhled pour cela je duplique le repertoire puis je le renomme et enfin je vais modifier le fichier _define.php provisoirement pour mettre /* Name */ "Handheld", ainsi je vais pouvoir selectionner ce thème depuis l'admin DOTCLEAR et ne pas poulluer le thème defaut d'origine.

Etape 3: Création d'une feuille de style spécifique handheld.css pour les mobiles que je place au même endroit que style.css avec pour contenue :

ul { list-style: none; }
ul li { list-style: none; }

a:link  { color: Blue; text-decoration: underline; }
a:visited { color: #FF8C00; }
/* pre { overflow: auto; width: 100%; height: auto; } */
pre {
	width: 100%;	
}

#top h1 { font-size: 2em; }

#prelude, #navlinks {
  background: #FFFACD;
}

#prelude {
	font-size: 0.8em;
}

h2 {
  background: #DCDCDC;
}

#main {
	width: 100%;
}
body {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

Etape 4: Faire connaître la feuille de style au appareil mobile, pour cela il faut modifier le fichier _head.html en ajoutant la ligne

<link rel="stylesheet" type="text/css" href="{{tpl:BlogThemeURL}}/handheld.css"  media="screen" />

Etape 5: Test de conformité avec http://ready.mobi/

Bon au 10/09/2007 j'obtiens un niveau 3/5 il reste des problèmes incontournables mais pas forcément important :

2 erreurs (pas bon du tout) :

XHTML Mobile Profile

FAIL
Incorrect doctype specified:
-//W3C//DTD XHTML 1.0 Strict//EN
PASS
Validates against its doctype which is: -//W3C//DTD XHTML 1.0 Strict//EN
FAIL
Does not validate against -//WAPFORUM//DTD XHTML Mobile 1.0//EN

Valid Markup

FAIL near line 2 column 17
Attribute "lang" must be declared for element type "html".

2 warnings :

  • Default input mode
  • Access keys

Pour l'instant donc voici deux exemples d'écran :

Mobile NOKIA PDA SONY