Conception HTML et CSS

Fil des billets - Fil des commentaires

Le futur de Flash : Javascript

Pour promouvoir leur moteur Javascript ultra performant, l'equipe de Google Chrome a rassemblé un bon nombre de démos techniques sur ce site : Chrome Experiments.

Certaines sont vraiment impressionantes, ceux qui pensaient que Javascript ne servait qu'a ouvrir des popups vont être surpris (évidemment pour en profiter munissez-vous d'un navigateur à la pointe : Chrome, Safari 3+, Firefox 3.1, ... oubliez IE)

Alors après avoir vu tout ça, Flash a t'il encore sa raison d'être ? Faut-il laisser tomber Actionscript et rejoindre Javascript et ses potes Ajax et jQuery ? De mon point de vue, Flash possède encore quelques atouts incontournables... pour le moment :

L'audio et la vidéo

Les nouvelles balises audio et video, prévues par HTML5, arrivent au loin et sont actuellement supportées par Safari 3, Chrome et Firefox 3.1. Mais comme d'habitude, leur démocratisation ne pourra se faire sans leur prise en charge par Internet Explorer... encore un peu de patience donc mais pouvoir intégrer une vidéo dans une page aussi simplement qu'une image reste un vrai besoin à l'heure actuelle.

Les animations vectorielles

Flash propose un outil puissant et complet pour créer des animations vectorielles, et surtout avec une interface accessible aux non-développeurs. Coté HTML, l'element Canvas, introduit par Apple dans Safari, puis repris par Firefox et Opera, permet de dessiner via une API 2D, mais aucun outil WYSIWYG équivalent à Flash avec sa timeline et ses images clés n'existe encore, les animations doivent être codées, donc réservées aux développeurs.

La typographie

Pouvoir utiliser n'importe quelle police sur le web reste un des gros points forts de Flash, et coté CSS c'est pas encore ça pour le moment... Outre le problème des droits de diffusion sur les polices, la technique des polices téléchargables arrive timidement et seuls Safari et Firefox 3.1 la supporte actuellement. La propriété font-face est néanmoins prévue dans CSS3 mais comme pour la video, seul un support par IE permettra véritablement son usage.

De ce coté donc, les techniques telles que sIFR ont encore quelques jours devant elles...

Se passer de maquette Photoshop?

J'aime bien 37 signals, et j'aime assez souvent leur prises de position assez radicales sur la manière de travailler un site web. Dans cet article en l'occurrence, ils expliquent qu'ils se passent totalement de maquette Photoshop lorsqu'ils designent une interface, et passent directement du crayon et de la feuille de papier au prototype HTML/CSS.

En fait je suis assez d'accord avec eux, même si leur billet peut laisser croire que le prototype HTML/CSS peut remplacer totalement l'étape Photoshop/Illustrator/... (entourez votre logiciel préféré). Ce sont à mon avis deux étapes différentes, et qui ont deux buts bien différents.

Effectivement aujourd'hui, la maquette Photoshop est bien mal utilisée. Elle sert malheureusement de référence et d'étape de validation pour des chose qu'elle ne peut pourtant pas ou mal montrer :

  • Le zoning, la taille et le placement des blocs, qui sont souvent fastidieux à modifier sur Photoshop, on perd beaucoup de temps à chaque itération (et le designer s'énerve...)
  • Quid de l'interaction ? Comment voir le comportement d'un lien au survol ? L'apparition d'un bloc AJAX ? Ce sont pourtant des éléments clés d'un design interactif.
  • A la différence d'un travail print, le design interactif doit également prendre en compte les comportements. Par exemple le comportement d'une page lorsqu'on agrandit le texte FAIT parti de la démarche design, et Photoshop ne le montre pas non plus.
  • Enfin la déclinaison de toutes les maquettes d'un site est également une étape extrêmement fastidieuse et peu valorisante. Voir 50 images jpeg avec le même site et le contenu central qui change n'a absolument aucun intérêt. Cette déclinaison pourra se faire bien plus rapidement en HTML ensuite.

Pour tout ça, un prototype HTML/CSS est un document de travail extrêmement souple pour affiner des problématique de zoning, de placement et de taille de blocs, bien plus que Photoshop. Déplacer un bloc en HTML/CSS prend environ 5 secondes, et le résultat est montrable immédiatement. Modifier un texte idem, etc...

En revanche, une maquette Photoshop pourra clairement permettre de travailler la charte graphique globale. Mais il ne sert à rien d'y consacrer trop de temps au calage au pixel près ou à au positionnement des blocs entre eux, c'est simplement long, fastidieux et inutile. Bref, amis Photoshopeurs, arrêtez de passer des heures sur des détails sans importances et concentrez-vous sur votre coeur de métier : la création graphique.

Maintenant, se passer de Photoshop conduit à mon avis à un excès inverse, c'est à dire que le code CSS se met à conduire l'ensemble de la charte graphique. Dans cette démarche, on aboutit souvent à une "pauvreté" graphique et on se surprend à faire des choix graphiques non plus en fonction d'un concept créatif mais d'un simplicité à produire tel effet en CSS rapidement. C'est sûrement quelque chose qui peut convenir à 37 Signals, qui ont des designs très "dépouillés", mais sûrement pas applicables à tous.

Bref pour résumer :

  • Un prototype HTML/CSS pour valider les placements, les tailles, l'interaction et d'une manière générale ce qu'on peut appeler "l'expérience utilisateur".
  • Une maquette Photoshop pour la charte graphique, les illustrations, le travail sur les couleurs, etc...

Et à chaque outil sa fonction :)

Internet Explorer 8 : standard par défaut

C'est la petite surprise du jour, Microsoft vient en effet d'annoncer aujourd'hui qu'Internet Explorer 8 adoptera le mode de rendu standard par défaut.

En effet, on savait déjà que la prochaine version du navigateur de Redmond possèderait 2 moteurs de rendu : un tout neuf supportant (enfin) les derniers standards HTML, XHTML et CSS (et passant même le test ACID2), et celui d'IE 7 pour garder la compatibilité avec les sites existants.

Mais la team IE avait annoncé que ce nouveau moteur serait désactivé par défaut, sauf si le concepteur indiquait explicitement de l'utiliser pour son site (via une balise meta dans l'en-tête HTML). Autrement dit, si un concepteur voulait qu'IE8 affiche son site de manière standard, il devait lui indiquer explicitement. Sans la présence de cette balise, IE8 utilisait donc le "vieux" moteur d'IE7.

La règle sera donc désormais inverse, et c'est bien le nouveau moteur de rendu qui sera utilisé par défaut, sauf si le concepteur indique explicitement au navigateur de ne pas le faire (toujours via une balise META).

Et ça change quoi alors ?

Concrètement, la bonne nouvelle dans tout ça c'est qu'IE8 possèdera un nouveau moteur respectueux des derniers standards, activé ou non par défaut. Que le mode standard soit appliqué par défaut me parait tout de même beaucoup plus logique, sachant que cela fait maintenant quelques temps que la plupart des sites ont pris le virage des standards W3C et du respect des normes. Et si ce n'est pas le cas de votre site, c'est le moment de s'y mettre ;-)

13 règles pour accélérer son site web

Yahoo nous propose sur cette page 13 règles pour optimiser et accélérer l'affichage de son site.

En résumé et en français :

  1. Minimiser le nombre de requêtes HTTP
  2. Utiliser un réseau de diffusion de contenu ("Content Delivery Network")
  3. Configurer un en-tête d'expiration pour tous les composants images, scripts et styles
  4. Utiliser la compression Gzip
  5. Placer les styles CSS dans la partie head de la page
  6. Placer les scripts en bas de page
  7. Eviter les expressions javascript dans les feuilles de styles
  8. Utiliser des fichiers externes pour les scripts et les styles CSS
  9. Réduire le nombre de résolutions DNS
  10. Compresser le code Javascript (avec des outils comme JSMin)
  11. Eviter les redirections
  12. Retirer les scripts en double (visiblement ça arrive souvent quand on travaille en équipe...)
  13. Configurer correctement les "entity tags" si besoin

Chaque règle est très bien expliquée et documentée, et Yahoo nous fournit même une extension pour Firebug permettant d'analyser la page en cours vis-à-vis de chacune de ces règles.

Le rendu des polices sous Mac et PC

Un article très intéressant qui explique les philosophies bien distinctes que suivent Apple et Microsoft sur la manière d'afficher et de lisser les polices sur nos écrans.

En resumé, Apple respecte au mieux la forme de la police, mais en donnant alors une impression de flou, alors que Microsoft, avec sa technologie ClearType, obtient un rendu plus net mais en déformant si besoin la fonte originale.

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Safari sous Windows (suite et fin)

C'est chose faite :)

Attention, Webkit est également à jour, on passe à la version 522.10.1

Edit : Pour info, sous Mac, la beta remplace la version actuelle (mais on peut la désinstaller pour retrouver Safari 2)

Edit 2 : D'après les premiers échos, ça bug pas mal sous Windows encore

Firebug sans Firefox

Utiliser la console de Firebug sur tous les navigateurs c'est possible grâce à Firebug Lite, la version allegée de Firebug. Ça se présente sous la forme d'un fichier javascript à inclure, puis la console s'affiche en appuyant sur F12 (Ctrl+F12 sous Mac, sinon ça lance Dashboard...)

Firebug Lite

- page 1 de 3