HTML5/CSS3 : dynamiser le contenu et l’expérience utilisateur.

HTML5/CSS3 : dynamiser le contenu et l’expérience utilisateur.

13 décembre 2010 Ressources, Tendances, Web design ferklechien

Le HTML5, tout le monde en parle … Petit rappel non exhaustif des nouvelles possibilités supportées par cette nouvelle version en terme de contenu et d’expérience utilisateur

L’expérience utilisateur avant tout.

Annoncé comme un facteur d’évolution spectaculaire du support Web, le HTML5 et le CSS3 apparaissent comme des solutions stables, accessibles et efficaces en terme de développement et de dynamisation de contenu. Des solutions comme le Flash ou le Java Script existent et ont su démontrer au cours de la dernière décennie que les éléments interactifs étaient un véritable atout en terme de navigation. Un rollover animé ou un slideshow de présentation produits sont, à mon sens, de véritables atouts en terme d’ergonomie. Les utilisateurs ont su assimiler ces « détails qui tuent » (un site réussi est composé d’un ensemble de détails agencés de manière harmonieuse) et sont en attente récurrente d’évolution et d’innovation.

Une demande liée à l’évolution des supports.

L’évolution des technologies liées aux devices montre également que le binome HTML5/CSS3 s’impose progressivement comme un acteur non négligeables de l’enrichissement de l’expérience utilisateur : l’iPhone d’Apple a par exemple démocratisé l’effet de « slide » comme une transition naturelle entre différentes zones de contenu. Il est important de souligner que cette même société, tout en écartant le Flash de ses supports mobiles, a su privilégier et imposer le CSS3 et ses fameuses propriétés -webkit- lors du processus de développement d’app web : Apple propose sur son site un showcase très impressionnant montrant les utilisations possibles du HTML5 en terme d’enrichissement de contenu (ne marche que sur Safari et Chrome) :

Plusieurs choses à retenir de ce showcase :

La gestion des médias : l’apparition de balises directement liées aux médias audio et vidéo (<video> et <audio>) peuvent nous laisser imaginer de nouvelles possibilités ergonomiques : vidéos fullscreen en background, players configurables et compatibles multi devices. L’exemple donné par Apple nous montre également d’autres possibilités non négligeables : resezing du player, inclusion de masques en png, intégration d’éléments 3D interactifs … Autrefois allouée au format flash, cette nouvelle standardisation des médias apportera à mon goût une meilleur flexibilité en terme de développement et une dynamisation sans précédent du contenu.
Les slides : ici aussi, nous pouvons constater que les possibilités offertes par le CSS3 laissent présager de nombreuses initiatives liées à l’ergonomie : présentation de produits dans le cadre d’un site e-commerce, portfolios, … N’oublions tout de même pas les nombreuses possibilités qu’apporte le Javascript et sa bibliothèque jQuery (par exemple : http://slidesjs.com/).
La typographie : bonne nouvelle pour les webdesigners, afficher des polices non système sur un site web sans l’ajout de fichiers image devient enfin possible. Une propriété CSS comme @font-face permet d’appeler un fichier .otf ou .ttf à partir de votre serveur. A noter également l’excellente initiative de Google Font qui permet de choisir une font parmi une bibliothèque de polices et de copier un code d’appel à placer directement dans la balise <head>. Autre point important, l’apparition de la propriété CSS text-shadow qui permet l’application d’ombrages sur une partie texte, sans utilisation d’images.

Pour aller plus loin …

Ces nouvelles versions du HTML et du CSS voient également l’apparition de petites expérimentations très intéressantes qui laissent présager une évolution du support Web (certains exemples incluent évidement du JavaScript).

Hakim.se / Experiments

Htmlstack

Html5studio by Google

Bloop Html5 Instrument

Chose importante à ne pas négliger : tous les navigateurs ne sont pas encore prêts à prendre en compte ces nouveaux standards. Il faudra par exemple attendre la version 9 d’internet explorer pour voir le navigateur Microsoft accepter la nouvelle syntaxe HTML. Une étude montre d’ailleurs que seul 45% des internautes sont actuellement capables de lire le HTML5. A noter enfin que le format doit être finalisé avant 2012 et recommandé en 2020 … Le flash et le Javascript ont encore de beaux jours devant eux !

Pour toute information complémentaire concernant le HTML5 et le CSS3, je vous conseille de consulter les spécificités présentées sur le site du W3C (html5 et css3). Autre ressource très intéressante, le livre de Mark Pilgrim , HTML5 Up and Running.