Après avoir touché un peu au HTML5 dans mon précédent article, je pense que cette version 5 du langage le plus utilisé du Web va révolutionner la manière de structurer le code des pages et donc des interfaces que nous réalisons au quotidien.
Il y a des pour et des contre, et à travers cet article je vais surtout vous exposer ce qui me semble incohérent ou pas prêt pour la mise en production d’un site codé en HTML5.
Les spécifications html5 ne sont toujours pas arrêtées et je voulais quand même y toucher « pour voir ». Malheureusement « coder pour coder », ce n’est pas mon dada. J’avais envie de raconter une histoire et de me servir des nouveaux éléments pour leur apport sémantique dans un contexte appliqué.
Récemment nous avons déménagé au 2è étage du 24 bis Rue Maréchal Joffre. C’est une nouvelle expérience pour toute l’agence. La bonne aubaine : ma première page HTML5 est donc un article qui raconte en quelques paragraphes les bienfaits de notre déménagement sur notre cadre de travail.
J’ai découvert des choses vraiment intéressantes en codant cette page. Le HTML5 me semble être un grand pas en avant vers un langage très adapté au web d’aujourd’hui d’un point de vue sémantique. J’espère que le HTML5 règlera certaines maladies des intégrateurs, notamment la divite ou la spanite aigüe, étant donnée la quantité d’éléments bientôt à notre disposition. D’ailleurs je vous laisse découvrir cela dans la source de l’article.
Notez que j’ai aussi utilisé Cùfon, un moteur de remplacement de texte en son équivalent image (futé pour se permettre certaines fontes non-standards dans une page web). Nous l’utiliserons probablement dans le catalogue produit de l’un de nos clients, qui devra être traduit dans plus de 5 langues (cela nous évitera de refaire toutes les images).
Lire l’article : Notre ascension au second étage
Pour les commentaires, je vous invite à les déposer en bas de l’article lié.
Hier nous lancions notre nouveau service d’abonnement à la Newsletter Lunaweb, et aujourd’hui nous apprenons de source officielle que Google a mis en ligne une nouvelle fonctionnalité dans son webmail : un bouton « Se désinscrire et signaler comme spam » pour se désinscrire facilement des newsletters que vous recevez régulièrement.
La fonctionnalité (aussi présente sur Live! Mail depuis la fin-2007) n’est pour le moment supportée qu’en anglais, comme visible ci-dessous :
Même si les choses ont un peu évolué depuis la parution de cet article de Christian Heilmann (merci Pompage.net pour la traduction), ce dernier vous permettra sans aucun doute de mieux comprendre pourquoi de nombreux clients sont encore peu sensibles à l’accessibilité et vous donnera peut-être quelques idées pour essayer de les faire changer d’avis.
Comme le dit son auteur :
Il est actuellement très frustrant d’être consultant en accessibilité dans une entreprise spécialisée dans les technologies de l’information. Les procès fortement médiatisés et les mythes profondément enracinés sur l’accessibilité ne nous rendent pas service lorsque le produit final n’aide pas vraiment les visiteurs. Nos clients ne s’inquiètent pas autant de l’accessibilité que nous le voudrions et il y a plusieurs raisons à cela.
Internet Explorer, connu des webmaster pour sa fâcheuse habitude à ne pas respecter les standards du Web, va utiliser une balise META (inscrite dans l’entête des pages Web) pour se référencer aux normes du W3C.
Cette caractéristique permettra, selon Microsoft qui s’en explique sur son blog MSDN, de conserver les artifices utilisés par les webmaster pour rendre leurs sites correctement interprétables par les versions antérieures de leurs navigateur (Internet Explorer dans sa livrée 7, 6, 5…) lorsque l’on tentait de coder un site correctement par l’usage de xHTML strict et de CSS 2.1 ; et donc de ne pas « casser » le rendu des anciens sites (ceux faits pour IE 6 et 7 notamment, avec des patchs spéciaux pour corriger le mauvais rendu du CSS) dans le nouveau navigateur.
C’est ma foi une relative bonne nouvelle dans la mesure où IE8, qui passe le test ACID2 (le test Acid2 vise à tester la qualité de la mise en œuvre d’un choix de fonctionnalités liées à différents standards du web dans un navigateur, dixit Wikipedia), se plie enfin aux bonnes règles du W3C et pourra afficher un rendu correct de sites conçus selon des règles communes à tous les navigateurs.
Petit accroc dans le tableau, la balise lui permettant de suivre ces principes est la suivante :
META HTTP-EQUIV="X-BALL-CHAIN"
Comme un fait exprès, cette balise est spécifique à IE8, et donc non standard au sens strict du terme, c’est à dire qu’elle fera échouer la certification aux tests de validité du W3C…
Il est dommage de constater (mais que peut-on espérer de plus avec Microsoft) l’usage d’une balise propriétaire pour valider le fait d’utiliser les standards, c’est véritablement prendre le problème à l’envers que de forcer à utiliser un élément étranger aux normes pour valider au navigateur l’usage de celles-ci.
Enfin, si déjà IE8 suit à la lettre le reste des instructions xHTML et CSS, ce sera beaucoup de temps de développement de gagné, en attendant que tout le monde switche à Firefox Internet Explorer 8.
[Mise à jour] C’est pas moi qui le dit, c’est Jeremy Keith dans le A List Apart du 15/02/08 :
Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.
Et, toujours dans ALA, par Jeffrey Zeldman lui-même :
Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes.
» Lire l’article They Shoot Browsers, Don’t They? etVersion Targeting: Threat or Menace?
Excellent article de Joe Dolson et relayé par Pompage.net pour sa version anglaise. Il aborde le thème de l’accessibilité du contenu d’un site Web vu par le prisme de la typographie.
On balaie la taille des polices, l’interlignage, le choix des typo, l’alignement des paragraphes d’un texte ainsi que l’espacement des lettres. L’accès universel et aisé à un texte est en effet d’abord conditionné par la lisibilité d’un texte, il faut donc avant toute chose soigner en particulier la perception de votre contenu auprès d’un public de lecteurs qui ne sont pas tous à 10/10 d’acuité visuelle, ni équipé des meilleurs écrans du marché…
Je laisse la parole à l’auteur pour la conclusion :
Les éléments à prendre en compte dans la typographie pour Internet sont les mêmes que pour les autres médias, c’est la manière d’utiliser les ressources qui change, afin de s’adapter aux visiteurs. L’absence de contrôle sur de nombreux éléments oblige les webdesigners à réfléchir à d’autres façons d’optimiser les moyens à leur disposition. Il ne suffit pas de s’en tenir à un modèle spécifique, il existe trop d’impondérables. Il vaut mieux au contraire savoir dans quelle mesure les préférences de l’utilisateur peuvent avoir un impact sur vos choix typographiques et éviter les situations risquant de rendre le texte illisible.
» lire l’article Améliorer l’accessibilité Web par la typographie
Autre livre à méditer pendant les périodes plus calmes de la fin d’année,
Coder pour le web est un ouvrage sacrément bien conçu abordant la problématique épineuse de la conception selon les standards du web de gros sites dynamiques, car s’il est facile de concevoir un site portfolio répondant aux exigences les plus pointues des standards d’accessibilité et de validité du code xHTML/CSS ; il est en revanche beaucoup plus compliqué d’observer la même rigueur avec des sites manipulant beaucoup plus de variables et de données.
Vous apprendrez notamment comment :
Excellent article, qui peut servir de mémo, du collectif Openweb, et qui a pour but de (re)donner les principes d’édition d’une popup tout en insistant bien sur l’accessibilité d’un tel dispositif .
À noter en particulier, une astuce pour faire bénéficier de l’info de la popup pour ceux qui n’ont pas Javascript activé sur leur navigateur :
a href="page.htm" onclick="window.open(this.href); return false;"
C’est également un bon rappel de la syntaxe javascript pilotant l’ouverture de la popup et de ses paramètres (largeur, hauteur, équipement, etc.).
» Lire l’article Créer des pop-up intelligentes
C’est du classique mais cela ne fait pas de mal à relire de temps en temps, l’excellent article « Définir des tailles de police dynamiques cohérentes avec CSS » de Pompage.net revient sur l’utilisation judicieuse du em en guise d’unité de mesure dans ses pages HTML, en donnant quelques astuces afin d’avoir une présentation homogène dans tous les navigateurs.
» Lire l’article « Définir des tailles de police dynamiques cohérentes avec CSS« .
Si comme moi vous êtes un serial utilisateur d’istockphoto.com, mais que vous trouvez le site « un peu » lent, une solution simple et rapide existe : installer dans Firefox, votre ami de toujours, un accès direct à la recherche d’images sur le site.