Tirer le meilleur de CSS

La première partie devrait à elle seule déclencher l’acte d’achat. Raphaël passe en revue les propriétés CSS 2.1 dont l’intégrateur HTML & CSS s’est privé pendant des années à cause de leur manque d’implémentation dans IE6 et IE7, bons derniers de la classe à l’école des standards… A nous, désormais, les joies procurées par l’utilisation de sélecteurs sur lesquels nous faisions l’impasse : sélecteur d’enfant, sélecteur de frère adjacent, sélecteur d’attribut, :first-letter et first-line, :first-child, :focus, :before et :after, règle «@» diverses et variées.

Selon votre politique de prise en compte des versions d’Internet Explorer, vous pourrez utiliser tout ou partie de ces «nouveaux» jouets. Le niveau de support spécifique de tel ou tel sélecteur par les versions d’IE est précisé à chaque fois au fil de la lecture. Notons qu’il devient de plus en plus courant de délaisser IE6 et de prévoir une dégradation gracieuse pour IE7, ce qui permet d’utiliser à fond la spécification des CSS 2.1 prise en charge par IE8 et les autres navigateurs modernes.

HTML5 et CSS3 : l’innovation en marche

Cette partie fait le point sur les nouveautés qui arrivent dans le sillage de HTML5 : la syntaxe, les nouvelles balises sémantiques pour structurer les contenus, avec un focus particulier sur les balises video, audio et canvas, les nouveaux attributs de formulaires, etc.

Après HTML5, le livre présente CSS3. Toutes les nouveautés passent sur le grill bien chaud de Raphaël qui en profite pour nous faire saliver avec ses recettes «maison» et ses tours de main, pour que nous aussi, devenions des chefs en CSS ! Toujours très pragmatique, le livre donne dans cette partie — comme dans les autres  –, des bonnes adresses permettant de prendre en compte les navigateurs anciens via Javascript, ou des composants HTC.

CSS et applications spécifiques

Web mobile

Cette dernière partie aborde le web mobile avec les défis qu’il lance à l’intégrateur web et les solutions qu’il peut mettre en oeuvre pour tenir compte du parc hétérogène des téléphones portables plus ou moins «smarts» et des tablettes tactiles aux formats et résolutions d’écran disparates.

CSS Print

Les CSS pour l’impression ne sont pas oubliées. Il est vrai qu’elles sont souvent le parent pauvre des CSS en dépit de leur utilité indiscutable. Surtout quand on pense que le web — loin d’avoir diminué les besoins en ressources de la planète –, n’a fait qu’augmenter l’utilisation de l’encre et du papier ainsi que l’énergie nécessaire à leur production :-(

Profitons donc de @media print pour limiter l’utilisation de l’encre en éliminant les couleurs, les aplats et tout ce qui n’est pas utile dans le contexte de l’impression.

Lecteurs de mails et CSS

Créer des Newsletters ou tout autre document susceptible de s’afficher sur un client de messagerie est une épreuve que je ne souhaite à personne. Et pour cause : à côté des clients de messagerie de bureau comme Lotus ou Outlook et certains services de messagerie en ligne, IE6 fait figure de champion du monde ! Bref, c’est galère, mais il est possible de s’en sortir en suivant les conseils de conception de page web pour les clients mail de ce livre.

En deux mots

CSS avancées, vers HTML5 et CSS3 est un des rares livres indispensables que tout intégrateur web devrait avoir à portée de main. Raphaël Goetter sait comment expliquer les concepts flous des spécifications (et il y a !) avec humour et simplicité tout en restant didactique. Le livre est à priori destinés aux utilisateur avancés, mais devrait rester accessible aux jeunes «padawans». Toutefois, je recommande fortement à ces derniers la lecture de la 3ème édition de CSS2 — Pratique du design web qui vient d’être rééditée au format semi-poche le 31 mars 2011 !

Informations pratiques

CSS avancées. Vers HTML 5 et CSS 3

• Auteur(s) : Raphaël Goetter
• Editeur : Eyrolles
• Nombre de pages : 400 pages
• Date de parution : 17/03/2011
• Extraits au format PDF disponibles sur la fiche du livre
• EN COULEUR !

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Editeur de dégradés CSS3 à la mode de Photoshop
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Nouvelle méthode de remplacement de texte par une image

Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications – parfois sibyllines – du monde joyeux des recommandations puissent être interprétées de diverses manières…

Prudence est mère de sûreté…

Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.

D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^__^ Une autre notion indispensable : avoir une idée des possibilités d’imbrication des balises.

Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.

La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont « priorisés » les différents styles qui peuvent s’appliquer à un élément.

Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné… Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet :

• margin et padding à zéro avec le sélecteur universel
• Reset CSS Reloaded, Eric Meyer
• INITIAL, Christian Montoya
• YUI Reset CSS, Yahoo! UI Library
• undohtml.css, Tantek Celik

Remise à zéro du margin et du padding avec le sélecteur universel *

Cette méthode a le mérite de la concision et de la simplicité :

* {
  margin: 0;
  padding: 0;
}

Et border: 0 ?

Oui, il est possible d’ajouter border: 0 pour s’assurer que les éléments n’auront pas de bordures indésirables. Comme cette dernière déclaration est de plus en plus utilisée, voici la liste des éléments qu’elle concerne afin que vous jugiez de sa pertinence :

• input
• textarea
• select
• button
• table
• fieldset
• abbr
• hr
• img et object (si lien)
• iframe

Redonner des couleurs à vos balises

Reste à redonner à ces balises un rendu plus agréable en regroupant, par exemple, les éléments qui partagent les mêmes valeurs tout au long du site web :

• Différents niveaux de titre h1 – h6,
• Conteneurs de texte comme p, blockquote, pre, code, address, hr, form,
• Listes avec dl, ul, ol,
• Eléments en ligne tels que strong, cite, em, var, samp,
• Etc.

Selon le document, il pourrait être tout aussi judicieux de regrouper les éléments suivants :

• Balises ul et ol dans la sidebar
• Balises identiques dans la zone de contenu principal
• etc.

Une autre méthode inspirée par le billet paru sur pixenjoy est de reprendre la feuille de style proposée par le W3C qui peut avantageusement servir de modèle pour avoir la liste des éléments HTML concernés par cette remise à zéro des marges et retraits.

Une technique obsolète ?

Malgré son apparente simplicité et efficacité, cette méthode n’est pas la panacée : un navigateur comme Firefox consomme de précieuses ressources à boucler sur toutes les balises. Par ailleurs, un travail important reste à faire pour restyler les balises (même si ce travail n’est pas à refaire complètement à chaque nouveau projet). Quoiqu’il en soit, je vous propose de mettre cette technique de côté pour tester d’autres méthodes.

Reset CSS Reloaded d’Eric Meyer

Vous aurez peut-être remarqué que si l’ajout de border: 0 peut apporter un plus dans la remise à zéro des éléments, d’autres propriétés pourraient elles aussi gagner à être réinitialisées. C’est sûrement ce que c’est dit Eric Meyer lorsqu’il s’est penché sur son Reset CSS. (

L’exemple suivant est la version 2.0 du 26/01/2011, cf. http://meyerweb.com/eric/tools/css/reset :

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Reset again

Dans un premier temps, pas de surprise, nous retrouvons la remise des margin, padding et border à zéro, suivie de près par un outline: 0 qui sert généralemement à afficher un cadre pointillé lorsqu’on maintient le bouton de la souris appuyé sur un lien (:active, quoi ;) ). Ne pas confondre avec le même cadre qui apparait quand le lien a le focus, via la touche TAB, même s’il s’agit de la même déclaration outline: 1px dotted invert. La pseudo-classe :focus est également remise à zéro pour l’ensemble des éléments via :focus { outline: 0 }.

Héritez, qu’y disait…

Viennent ensuite les propriétés relatives à font : on s’assure qu’elles seront bien héritées par les éléments parfois récalcitrants (certains éléments de formulaire). La taille 100% sert à la fois à obtenir une valeur « héritable » par les balises filles et avoir une taille par défaut pour l’ensemble de la page web. Si vous préférez partir avec un corps inférieur, rien ne vous empêche de spécifier 62.5% pour avoir une taille par défaut de 10px env. ou 75% pour obtenir 12px. Sachant que si vous pouvez vous débrouiller pour fournir une taille de texte généreuse à vos lecteurs, ils vous le rendront bien.

Je ne veux voir qu’une tête !

Nous terminons cette première partie avec vertical-align: baseline qui permet d’harmoniser l’alignement des éléments en ligne au sein d’une boite. Il s’agit de la valeur par défaut pour aligner la ligne de base du texte avec le bas d’une image placée à côté.

Avez-vous la quote ?

Les dernières règles s’appliquent aux éléments blockquote et q dont on supprime préventivement le contenu « éventuellement » généré avant ou après, puis dans un second temps, on supprime les guillemets ouvrants et fermants. Tout ce que vous avez toujours voulu savoir sur ces éléments se trouve sur la page web de yoyodesign consacrée au contenu généré, au numérotage automatique et aux listes.

Y a pas un problème avec la valeur de line-height ?

La curiosité de cette feuille de style, est la présence d’une valeur sans unité de mesure (line-height: 1) qui mérite quelques explications. Pour ceux qui ne sont pas à l’aise avec l’anglais, j’ai repris les exemples donnés sur la page citée précédemment qui parlent d’eux-mêmes :

En utilisant line-height: 1em

La règle CSS suivante…

ul {
  font-size: 15px;
  line-height: 1em;
}
li {
  font-size: 10px;
}
small {
  font-size: 80%;
}

ul {
  font-size: 15px;
  line-height: 1em;
}
li {
  font-size: 10px;
  line-height: 15px;
}
small {
  font-size: 80%;
  line-height: 15px;
}

<ul>
  <li>I'm a list item with <small>small text</small>.</li>
</ul>

En utilisant line-height: 1

Appliquée sur l’exemple html précédent, la règle CSS suivante…

ul {
  font-size: 15px;
  line-height: 1;
}
li {
  font-size: 10px;
}
small {
  font-size: 80%;
}

ul {
  font-size: 15px;
  line-height: 1;
}
li {
  font-size: 10px;
  line-height: 10px;
}
small {
  font-size: 80%;
  line-height: 8px;
}

C’est une spécificité de la propriété line-height qui est la seule à accepter une valeur brute. Car, vous l’avez sans doute remarqué, mais spécifier 2em sur une taille de police a bien un effet multiplicateur par rapport à la valeur dont elle hérite au départ :

body {
  font-size: 12px;
}
h1 {
  font-size: 2em;
}

En finir avec le reset-reloaded ?

Le défaut essentiel de ce reset est aussi sa principale qualité : il déshabille carrément les balises de leurs attributs les plus usuels, jusqu’à ceux dont on n’avait pas vraiment conscience (:focus, :before, :after, quotes, etc.). Ceci permet de prendre conscience que le fonctionnement « naturel » de nos chères balises html ne l’est pas tant que ça…

Par ailleurs, à force de lire un peu partout qu’il ne faut pas mélanger la sémantique des balises html avec leur rendu visuel, je me dis que le full monty proposé par Eric Meyer va dans le bon sens en nous obligeant à en apprendre un peu plus sur le HTML et les CSS (trollinou inside) ^_^v.

Eric Meyer considère toute utilisation des styles par défaut comme une béquille qui nous rend dépendant du bon vouloir des navigateurs (ce qui n’est pas totalement faux). Toutefois, comme le précise, Laurent Denis, a-t’on vraiment besoin de vouloir garder la maitrise des éléments à ce point-là ou lieu de lâcher prise ? Pour finir de vous détendre, méditez cette phrase extraite de l’excellent article le tao du design web :

accepte le flot et le cours des choses, les entoure, mais ne les possède pas,

En attendant d’arriver à ce degré de sagesse dont il faudrait que nos bien-aimés clients et patrons soient aussi imprégnés, revenons vers le côté obscur de la force avec un autre reset à nous mettre sous le clavier ;)

INITIAL de Christian Montoya

Cette remise à zéro est proposée par Faruk Ates, amendée par Robert Nyman et Christian Montoya. Plus qu’un reset radical, il s’agit plutôt d’un feuille de style minimale située entre la remise des marges à zéro et le reset-reloaded. Mais jugez plutôt :

// =INITIAL   v2.1,
// by Faruk Ates - www.kurafire.net
// Addendum by Robert Nyman - www.robertnyman.com
// Addition by Christian Montoya - www.christianmontoya.net


// Neutralize styling:   Elements we want to clean out entirely:
html, body, form, fieldset {
   margin: 0;
   padding: 0;
   font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
 }

// Neutralize styling:   Elements with a vertical margin:
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
   margin: 1em 0;
   padding: 0;
 }

// Apply left margin:   Only to the few elements that need it:
li, dd, blockquote {
   margin-left: 1em;
 }

// Miscellaneous conveniences:
form label {
   cursor: pointer;
}
fieldset {
   border: none;
}
input, select, textarea {
   font-size: 100%;
   font-family: inherit;
}

Un autre avantage d’INITIAL sur le Reset-Reloaded, est que les éléments en ligne ne sont pas affectés, ce qui est une bonne chose, vu le peu de différences de rendu qu’ils présentent d’un navigateur à l’autre.

Personnellement, je trouve cette approche plus élégante que le reset reloaded : plus « lisible » donc plus maniable, notamment en ce qui concerne son « extensibilité » car on peut même lui ajouter certaines trouvailles d’Eric Meyer comme :

• spécifier une valeur brute pour line-height : 1.4 à la place de la valeur « INITIAL » de 120%,
• prendre en compte les éléments table, tr ,td ou caption,
• enlever les puces des listes,
• etc…

… afin de construire une feuille de style de base reprenant par exemple le reset de Faruk, puis en ajoutant certains éléments prélevés dans le Reset-Reloaded (Ex. 1) ou encore d’autres règles CSS récurrentes (Ex. 2). L’idée est d’obtenir une sorte de tableau de bord CSS où la modification de certaines valeurs-clés permet de gérer des maquettes différentes. Je précise qu’il s’agit juste d’un exemple pour insister sur le fait que c’est au reset de s’adapter à vos besoins, et non le contraire ;)

Ex. 1
ol, ul {
  list-style: none;
}


// tables still need 'cellspacing="0"' in the markup
// j'ai modifié les valeurs, car il est bon que les tableaux soient visibles !
table {
  border-collapse: collapse;
  border-spacing: 1px;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}

Ex. 2
// Couleurs à adapter selon votre charte
a {text-decoration: none;}
a:link {color: #000;}
a:visited {color: #000;}
a:hover {color: #000;}
a:active {color: #000;}
img, iframe, object {border: 0 none;}
input, textarea, select, button, {border: 1px solid #000;
}

YUI Reset CSS de Yahoo! UI Library

Parmi les Reset CSS existants, on trouve la contribution de Yahoo! qui propose dans son pack Yahoo! UI Library une technique pour réinitialiser les éléments html qui manquent de « consistance » d’un navigateur à l’autre.

body, div, dl, dt, dd, ul, ol, li, h1,
h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea,
p, blockquote, th, td {
  margin: 0;
  padding: 0;
 }
table {
  border-collapse: collapse;
  border-spacing: 0;
 }
fieldset, img {
  border: 0;
 }
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
 }
ol, ul {
  list-style: none;
 }
caption, th {
  text-align: left;
 }
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}

base.css

// base.css, part of YUI's CSS Foundation


h1 {font-size: 138.5%; /* 18px via YUI Fonts CSS foundation /}
h2 {font-size: 123.1%; / 16px via YUI Fonts CSS foundation /}
h3 {font-size: 108%; / 14px via YUI Fonts CSS foundation */}
h1, h2, h3 {margin: 1em 0;}
h1, h2, h3, h4, h5, h6, strong {font-weight: bold;}
abbr, acronym {
  border-bottom: 1px dotted #000;
  cursor: help;
}
em {font-style: italic;}
blockquote, ul, ol, dl {margin: 1em;}
ol, ul, dl {margin-left: 2em;}
ol li {list-style: decimal outside;}
ul li {list-style: disc outside;}
dl dd {margin-left: 1em;}
th, td {
  border: 1px solid #000;
  padding: 0.5em;
}
th {
  font-weight: bold;
  text-align: center;
}
caption {
  margin-bottom: 0.5em;
  text-align: center;
}
p, fieldset, table {margin-bottom: 1em;
}

undohtml.css de Tantek Celik

Peut-être le plus ancien Reset CSS. Pour des raisons de lisibilité, j’ai revu l’organisation visuelle des commentaires.

// undohtml.css (CC) 2004 Tantek Celik.
// Some Rights Reserved. http://creativecommons.org/licenses/by/2.0
// This style sheet is licensed under a Creative Commons License.
// Purpose: undo some of the default styling of common (X)HTML browsers *//


// link underlines tend to make hypertext less readable,
// because underlines obscure the shapes of the lower halves of words
:link, :visited {text-decoration: none;}

// no list-markers by default, since lists are used more often for semantics
ul, ol {list-style: none;}

// avoid browser default inconsistent heading font-sizes and pre/code too
h1, h2, h3, h4, h5, h6, pre, code {font-size: 1em;}

// remove the inconsistent (among browsers)
// default ul,ol padding or margin the default spacing on headings
// does not match nor align with normal interline spacing at all,
// so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote
// as well form elements are oddly inconsistent, and not quite CSS emulatable. nonetheless
// strip their margin and padding as well
ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

// whoever thought blue linked image borders were a good idea?
a img, :link img, :visited img {border: none }

// de-italicize address
address {font-style: normal;}

// more varnish stripping as necessary...

C’est reparti pour un tour ?

• margin et padding à zéro avec le sélecteur universel
• Reset CSS Reloaded, Eric Meyer
• INITIAL, Christian Montoya
• YUI Reset CSS, Yahoo! UI Library
• undohtml.css, Tantek Celik

Pour conclure

Ni liste exhaustive ni comparatif point par point, j’ai essayé de faire le tour des Reset CSS les plus utilisés en espérant avoir fourni quelques informations utiles sur les techniques existantes et leur fonctionnement. J’espère surtout que ce billet vous aura donné des éléments de réflexion pour vous en passer lorsque ce n’est pas nécessaire ;) Ce billet pose certainement plus de questions qu’il n’apporte de réponses car un Reset ne dispense pas de réfléchir à l’organisation de ses CSS, bien au contraire !

Stay tuned and mind the gap!

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Exercice de style CSS et HTML : table vs div

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

1. La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
   • i-mode (cHTML)
   • wap 1.0 (WML)
2. Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
3. Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
4. Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
5. Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
6. La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
7. La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

1. J’évite de concevoir mes pages web avec des propriétés display ou float,
2. Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
3. Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
4. Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
5. J’utilise les accesskeys sur tous les liens,
6. Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

1. Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
2. Spécifier les dimensions des images,
3. Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
4. Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
5. Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
6. Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• La journée mondiale de l’accessibilité, c’est maintenant !
• Check your <body> avec le W3C
• 9 ressources pour web designer
• -prefix-free : du beau, du bon, du mauvais ?