Ce titre fortement accrocheur à la limite de l’injure annonce la couleur : l’ouvrage est censé vous expliquer que les techniques employées aujourd’hui ne sont que du bricolage et qu’on peut faire la même chose en plus propre et plus simple.

En route pour cette saine lecture … ou pas.

Chapitrage

Everything You Know About CSS Is Wrong! est découpé en 5 chapitres. Cela représente un volume d’une petite centaine de pages. En voici la structure :

1. The Problem with CSS
2. CSS Table Layout
3. CSS Table Solutions
4. Considering Older Browsers
5. The Road Ahead

Si vous commencez à flairer le mauvais plan, vous n’avez pas tout à fait tort.

display: table-cell au lieu de float/clear/margin

Tel serait le credo de l’ouvrage. C’est en teneur ce qui y est distillé, ni plus ni moins.

Quand on y repense, aujourd’hui on utilise vraiment des techniques à la noix pour positionner les flux, pour imiter des colonnes de taille égale. Tout ça pourquoi ? Parce que le navigateur dominant du marché s’appelle Internet Explorer 6/7 et ne permet pas d’utiliser l’attribut CSS display: table-cell.
Son utilité ? Donner à l’élément concerné le comportement d’un tableau : des cellules de hauteur égale et des colonnes notamment.

Les 2 premiers chapitres sont à ce titre très démonstratifs puisque simplement, on apprend à construire un habillage classique à 2 colonnes avec cette technique. Mais, à mon avis, le chapitre 3 est entièrement à jeter.

Le livre commence en nous expliquant qu’on utilise des techniques de barbare pour le rendu. Sauf que celles proposées pour palier aux lacunes de cette mise en page en tableaux ne valent pas beaucoup mieux : pas de solution générique possible, simulation de colspan et rowspan laborieuse … si j’ai été convaincu par la présentation en grille, je l’ai en revanche moins été par ces solutions proposées.

Le chapitre 4 explique avec plein de sous-entendus qu’Internet Explorer 6 et 7 … ben il faut arrêter. En tous cas pour utiliser le display: table-cell. Je pense que même sans cette technique on avait déjà envie de les balancer mais bon. Ça sera un argument de plus pour prôner cette solution.

Le chapitre 5, The Road Ahead, propose une présentation maintes fois vue et revue de l’avenir avec CSS3. Ça fait office de piqûre de rappel concernant le module templates et  grille notamment.

Texte 2 colonnes avec display: table-cell

Pourquoi je ne vous recommande pas son achat ?

Parce qu’au final on se trouve face à gros article doublé d’un titre bon pour écouler des exemplaires. Il aurait pu s’appeler « comment présenter en grille sans tableaux et sans flottants » par exemple.

Sans vouloir relancer le fumeux débat du  Web contre les livres, je pense qu’il y a des articles sur display: table-cell plus courts, moins chers et tout à fait valables (y compris leur article de présentation), notamment sur Alsacréations.
Pour moitié prix, le contenu aurait pu passer. À 30$, j’en attends davantage …

Je recommande avec beaucoup plus de ferveur l’indémodable Transcender CSS d’Andy Clarke.

Un dernier point toutefois : je ne suis pas convaincu qu’un rendu à l’identique au pixel près soit une solution d’avenir. Il ne faut pas espérer avoir un rendu identique à la maquette ni identique sur tous les naivgateurs (notamment au niveau de la colorimétrie). Je crois davantage à un support de fonctionnalités et des solutions alternatives pour les navigateurs ne supportant pas ces dites-fonctionnalités. De même qu’on n’a pas le même rendu de couleurs pour les téléviseurs (y compris HD), il est utopique de vouloir la même chose d’un site.

Depuis quelques mois je ne recommande plus à mes clients de supporter IE6 et ce, malgré ses 20% de parts de marché. Je préfère largement proposer une solution dégradée, toujours fonctionnelle mais moins jolie.
Cette année je refonds le thème de ce blog et je ne compte pas supporter ni IE6 ni IE7. Votre adoption d’autres navigateurs aide mais il faut montrer l’exemple.

Je suis tombé nez à nez sur l’annuaire des sites Internet publics la semaine dernière en cherchant l’adresse de la CPAM de Gironde. Il se trouve que la page de cette dite organisation était affublée d’un message explicite … ou en fait pas vraiment.

Ou comment un message partant d’un bon sentiment peut ruiner une navigation.

Manque de clarté du message

Voici la disposition de l’alerte une fois sur la fiche de l’organisation recherchée :

Message d'alerte de Service-public.fr

On est sur du simple et direct : message puis information recherchée.

Le problème c’est qu’on est confronté à plusieurs messages :

• la partie locale de l’annuaire va fermer.
  Suis-je sur la partie locale ? Je proviens d’une recherche Google et franchement, je n’en sais rien. Un petit « locaux » en rouge aurait tendance à me le faire croire.
  Résultat des courses : j’ai eu besoin de chercher à vérifier si j’étais concerné par le message.
• Elle est remplacée par l’annuaire de l’administration / services locaux.
  Le premier message vraiment utile est là : cette partie va être remplacée et j’ai un lien d’accès à la nouvelle ressource.
• Les mises à jour ne sont plus effectuées.
  Donc si je comprends bien, je suis en train de consulter des données sans aucune garantie qu’elles soient encore fiables. Autant dire que je n’ai qu’un seul intérêt : me rendre sur le site de remplacement.
  Un effort cognitif de plus.
• Un message d’information pour les administrations locales.
  Est-ce ce message concerne l’utilisateur lambda ? Pas vraiment. Surcharge de texte inutile sauf s’il n’y a aucun autre moyen d’avertir ces fameuses administrations locales de mettre à jour leurs procédures.

L’information principale se retrouve noyée dans la masse et laisse à penser qu’on n’aura pas les informations souhaitées sur la page courante.

Alors soit, cliquons sur le seul lien de rechange que l’on ait.

Perte de l’information et de la navigation

Je pense qu’en terme de perte d’information de substitution, on ne peut pas faire pire (sauf à avoir un lien cassé).

En effet, alors que j’étais sur une page d’information très précise, je reviens au point de départ : l’échelle nationale sans aucun repère.
En clair :

• j’ai perdu l’information dont j’étais en possession
• je dois à nouveau la retrouver dans une disposition différente de l’origine

La bonne chose à faire serait de taper à nouveau ma recherche (CPAM gironde) dans le champ de saisie mais préférant la facilité, j’use de la carte de France et clique sur la région Aquitaine.

Enfer et damnation, je dois retrouver la CPAM dans une liste à 5 niveaux de défilement. 2 solutions :

• cliquer sur un département : l’affichage de la longue liste se retrouve filtré au département en question. À nouveau recherche de l’information.
• scanner la page pour y trouver ce que je veux. Heureusement que l’occurence CPAM est affichée, ce qui m’évite d’avoir à tout lire.

Et comme si je n’avais pas assez cherché, je me retrouve confronté à un choix difficile : choisir parmi 8 liens hypertexte au même libellé. Jugez-en par vous-même :

Quel lien choisir ?

Le pifomètre m’a fait cliquer sur le premier des 8 liens et coup de bol … c’est bon.

J’ai désormais l’information souhaitée … différente de la page initiale sur le futur-ex annuaire local de Service-public.fr. Mais après combien de manipulations et de réflexion ?

Conclusion

Trop de manipulations c’est certain. Résumons les erreurs principales :

• présentation d’un message peu clair
• renvoi vers une page détruisant l’information en notre possession
• obligation de rechercher à nouveau l’information en notre possession

Cela aurait pu être évité par l’un de ces 2 moyens :

• redirection automatique permanente.
  On ne voit pas de message, on tombe directement sur une information à jour et on ne perd pas un seul instant. La meilleure solution et de loin.
• afficher un message plus clair avec un hyperlien direct vers la ressource de remplacement.
  C’est un chouilla moins bien mais si on tient vraiment à faire passer un message, c’est très bien.

Avec la méthode présentée, on a un peu l’impression de faire le boulot à la place des mainteneurs du site. Est-ce vraiment si pratique ?

L’accessibilité passe aussi par une présentation réduisant les efforts cognitifs. Et ça ne vaut pas que pour des personnes handicapées, ça vaut également pour des utilisateurs peu avertis du Web, pour votre référencement mais aussi pour le simple respect de votre clientèle.

Hier Sébastien Delorme s’est fendu d’un petit twit qui m’a fait sourire sur le site de vente en ligne Ooshop. Cependant après réflexion, je me suis dis que c’était particulièrement grave.

En 2008 on vous demande encore de venir en smoking sur un site Web et qui plus est, avec des recommandations liées à des logiciels périmés, à savoir Internet Explorer 6 et Firefox 1.5 à jour (le site a été mis à jour suite à cet article).

Entrevue d’une configuration optimale tout sauf accessible et acceptable.

Avant toute chose, prenez connaissance de cette fameuse configuration optimale. Y’aurait de quoi écrire une thèse dessus.

Navigateur optimal

Ooshop recommande d’utiliser la résolution d’écran suivante : 1024×768.

Ooshop recommande pour une navigation optimale d’utiliser les navigateurs suivants :

Pour PC :
Internet Explorer 6 – Télécharger
Firefox 1.5 – Télécharger

Pour Mac :
Firefox 1.5 – Télécharger
Safari 2.0.3 – Ce navigateur est installé par defaut par Apple

Les navigateurs Konqueror, Opéra, Avant Browser ne sont pas encore entièrement compatibles sur notre site.

Tout est critiquable mais je suis joueur.

La résolution optimale, je pense qu’à peu près tout le monde s’en fiche :

• ceux qui ont la bonne résolution n’en auront que faire (et je les comprends)
• ceux qui n’ont pas la bonne … et bien ils s’en apercevront et surtout, que peuvent-ils faire ?

Combien de personnes ont diminué leur résolution pour cause de problème de vision ? Vont-ils augmenter la résolution uniquement parce que ça a été voulu sur ce site Web ? C’est un peu comme si en allant au supermarché on regardait la taille de votre coffre de voiture en refoulant tous les possesseurs de Smart.
Personne ne le fera, faut arrêter de rêver. Et surtout si les personnes ne savent pas régler leur résolution (tant et si bien que ça leur parle).

Plusieurs cas de figure :

• si on a vraiment besoin de ces 1024, on s’arrange pour placer au moins la navigation principale dans la partie qui sera toujours visible sans avoir à scroller horizontalement
• ou alors on opte pour un site à largeur variable, fluide ou élastique

Et pour le navigateur ? J’ai un PC mais je ne comprends pas, je ne peux pas avoir Internet Explorer 6 dessus. Ah je suis sous Linux ? Je comprends pas pourquoi je ne me sens pas concerné.
Hé les gars : faut faire la différence entre Windows (système verrouillé par conception) et PC (architecture basée sur x86, dont les Mac feraient même partie aujourd’hui si on reste large).

Et à côté de ça on me cite Konqueror, un des navigateurs avec les plus faibles part de marché (et compatible Linux uniquement). Y’a franchement de quoi se marrer.

Solution : virer ce bout de texte et opter pour un code compatible avec des navigateurs modernes, d’Internet Explorer 7 à Safari en passant par Firefox.

Configuration optimale

J’adore ce genre de pots-pourris façon Internet de la bulle Internet des années 2000. Et vas-y qu’y a du simple pixel gif et que je te parle de ce qu’il faut configurer sans image aucune (ben ouais, c’est pas optimisé les images).

La configuration des cookies est tellement bien expliquée, à tel point qu’on te dit :

• que ça ne fait «que» mémoriser des informations
• que ça ne permet pas de lire des informations sur le disque dur (à moitié vrai, les cookies c’est pas sur le disque ?)
• mais qu’à côté de ça, ça permet de créer une base de données sur les visiteurs (c’est beau la transparence ceci dit)
• et surtout le plus fun, que les cookies sont gérés automatiquement par les sites de commerce électronique

Alors 2 possibilités :

• Ooshop n’est pas un site de commerce électronique, ce qui explique la procédure de configuration des cookies expliquées juste en-dessous
• Ooshop se fiche éperdument de la tête de ses visiteurs et compte sur leur aptitude à ne pas lire cette même pas (et là ils ont raison, personne ne la lit/lira/a lu)

Mon conseil : vérifier que les cookies sont activés sur le navigateur. C’est pas comme si on pouvait le faire de manière automatique mais presque … En cas d’erreur, lui présenter en image les manipulations à effectuer sur son navigateur.
À quoi bon parler de la configuration d’Internet Explorer si on utilise Konqueror …

Je passe également le volet sur le SSL. Quand on vient faire des courses, c’est certainement pas pour prendre des cours de crypto. J’entends déjà mon médecin m’expliquer que les données sur ma carte Vitale sont accessibles car non protégées lors d’une visite médicale.
Ah non pardon, ça c’est vrai.

Conclusion

Au lieu de s’évertuer à pondre une pleine page en popup pour expliquer comment paramétrer un navigateur dans un language peu compréhensible, il faudrait glisser du il faut à nous allons.
Oui, optimiser au lieu d’expliquer comment optimiser son navigateur pour un site donné.

Imaginez qu’on doive paramétrer son butineur favori/imposé pour chaque site.
C’est le reflet d’une mauvaise conception ou d’un vice assumé.

Je n’aurais qu’une chose à dire, le slogan d’Ooshop, il est parfait !

Je te le fais pas dire ...

High Performance Web Site, sous-titré Essential Knowledge for Frontend Engineers, est ce genre de livre à lire au moins une fois à défaut de le posséder. Il résume en à peu près 120 pages 14 points d’optimisation d’un site Web.

C’est d’autant plus intéressant que l’approche se base sur les mécanismes et non sur de l’optimisation de code. Ainsi dans la plupart des cas, vous n’aurez « que » du paramétrage serveur à faire.

Ce livre fait étrangement penser aux conseils de haute performance prodigués par le Yahoo! Developer Network et repris par l’extension Firefox pour Firebug, j’ai nommé YSlow.
C’est normal : ce livre est écrit par un ingénieur de Yahoo!, probablement un de ceux qui ont participé à la rédaction du guide de performances.

Pourquoi acheter High Performance Web Sites ?

On serait tenté de ne pas acheter le livre puisqu’une bonne partie de ses conseils sont repris sur le guide de haute performance cité plus haut.

Sachez toutefois que cet ouvrage va plus loin dans le détail, prend bien le temps de présenter ses tests de performance pour illustrer et de justifier l’application de leurs méthodes. La plupart des relevés de mesure sont effectués sur une dizaine de sites allant de Google à Amazon.

J’achèterais ce livre si j’étais :

• un administrateur système chargé d’héberger 1 ou plusieurs sites Web
• un technicien/webmaster en charge d’un site à plus ou moins fort trafic
• un développeur Web soucieux des performances de ses productions
• toute personne avare en kilo-octets superflus
• toute personne voulant accélérer les temps de réponse de son ou ses sites Web

Les 14 points d’optimisation

High Performance Web Sites axe son discours sur 14 points :

1. Limiter le nombre de requêtes HTTP
2. Utiliser un Content Delivery Network (CDN)
3. Utiliser une entête Expires
4. Compresser les composants avec Gzip ou Deflate
5. Placer les feuilles de style en début de page
6. Placer les scripts JavaScript en bas de page
7. Éviter les expressions CSS (Internet Explorer)
8. Placer les scripts JavaScript et les feuilles de style dans des fichiers externes
9. Réduire le nombre d’appels à des DNS différents
10. Minifier le JavaScript et les CSS
11. Éviter les redirections
12. Supprimer les doublons de scripts
13. Configurer ETags
14. Permettre la mise en cache des appels Ajax

Il prend cependant le soin de bien expliquer les mécanismes d’HTTP et les intérêts à améliorer les performances frontend.

Le livre termine sur un comparatif des 14 points sur 10 sites, notation YSLow comprise, dont Amazon, Google, CNN, eBay, Wikipédia et Yahoo!.

La mise en pratique

J’étais déjà sensibilité à presque tous les points pour avoir lu ces fameuses 14 règles en utilisant l’extension YSlow et Firebug. Cependant après la lecture du livre j’ai eu davantage de clés et des exemples probants pour me convaincre de les mettre en œuvre.

On peut appliquer la majorité des points et les points pertinents en 1 heure. En effet, tout site ne peut se permettre d’utiliser un CDN pour accélérer les temps de réponse autour du globe.

Personnellement j’ai mis en place une compression Gzip directement au niveau d’Apache au lieu d’utiliser une compression effectuée en PHP (avec Gzip aussi). J’ai couplé cet effort avec la minification JavaScript et la désactivation des ETags.

J’avais déjà au préalable externalisés mes CSS et JavaScript, placé au bon endroit (mais seulement les appels externes au DNS principal en bas de page) et sans doublon.

C’est bête à dire mais le résultat s’est vraiment senti avec des chargements de page incroyablement plus rapides. YSlow est effectivement un compagnon idéal pour la mise en application de ces éléments avec son analyse des performances et des composants.

Conclusion

J’ai dévoré High Performance Web Sites grâce à sa simplicité de rédaction, les nombreux exemples et surtout, les explications enrichissantes. Elles sont mises en application sur Yahoo! et certes, même si on peut se dire qu’on n’a pas de site de leur envergure, leurs conseils sont toujours bons à prendre.

High Performance Web Sites est un concentré de bonnes pratiques, simples à mettre en œuvre. Pourquoi s’en priver ?

Ces optimisations ne sont évidemment pas les seules à mettre en place pour que tout fonctionne bien : il faut aussi produire du code HTML propre, du JavaScript optimisé, du code application qui ne soit pas redondant.

C’est un bon début et des pratiques à généraliser.

J’étais impatient de pouvoir accéder à la beta privée de Netvibes pour bénéficier de ses nouvelles fonctionnalités. Je n’attendais pas grand chose si ce n’est plus de confort d’utilisation. Tout le bruit généré par cette beta privée et ces Ginger c’est trop bien me laissaient à croire que j’avais de bonnes raisons d’avoir attendu.

Hélas au final ce n’est que déception et maigre consolation.

Netvibes Ginger : la critique ergonomique

La sympathique Jacinthe Busson s’est déjà chargée de dresser une analyse ergonomique rapide de Netvibes Ginger alors je ne vais pas spolier son travail. D’autant plus que je suis plutôt d’accord avec elle : c’est réussi même si on est loin du sans faute.

À vrai dire, certaines fonctionnalités comme le glisser-déposer de widgets dans l’espace privé ou public sont loin d’être flagrantes. À tel point que si on ne le tente pas, on ne peut pas se douter de sa présence. Dommage car c’est un gain de temps.

La navigation et les widgets

L’intégration de l’écosystème directement dans une barre escamotable est une bonne idée … sauf qu’elle ne contient pas les onglets ni même les univers publics. Ces derniers étant une des nouveautés de Netvibes, le minimum aurait été de pouvoir en chercher.
La recherche est fluide et bien guidée mais manque de catégorisation : impossible de trouver facilement un flux RSS dans la catégorie jeux vidéo par exemple. Il y a encore un sentiment de fouilli et d’inachevé.

Côté gestion de widgets … c’est simple, c’est pareil (ou presque) ! Notre page privée se gère comme avant, les options sont comme avant, les problème sont comme avant (essayez de recharger un widget dont le titre est trop long). Bref pas de quoi sauter au plafond : c’était bien avant, ça l’est aussi maintenant.

Les univers publics

Si jusqu’à ce niveau on était loin de pouvoir crier Ginger c’est trop bien, on pouvait espérer que ça soit le cas avec les univers publics (exemple avec mon Univers), LA grosse nouveauté tant attendue. En clair c’est une page Netvibes mais que l’on conçoit pour que ça soit les autres qui la regardent, pas nous. L’idée est franchement bien : c’est idéal pour donner une image de soi et communiquer autour de flux et de widgets qu’on apprécie.

Sauf qu’en pratique c’est ingérable.
On ne peut en effet pas s’abonner à un univers public, que ce soit via RSS ou via Netvibes. Non, la seule possibilité c’est d’envoyer un widget vers sa page privée ou son URL à un ami par email. Donc autant dire que la consultation d’un univers sera sporadique, si ce nombre dépasse celui des doigts d’une main.

Ce faisant, l’intérêt d’entretenir un univers devient très restreint. On affirme une présence certes, mais réduite.

La dimension sociale

Les univers publics sont un bon moyen de se faire des amis par affinité. La tissage du réseau d’amis se fera cependant dans des douleurs minimes grâce aux différents systèmes d’import depuis Twitter, Facebook ou son carnet d’adresse Gmail, Hotmail ou Yahoo! Mail. Pour le coup on ne peut que les féliciter car Dieu sait si la création d’un réseau est douloureuse quand on en est à son énième « réseau social ».

Car de sociale, la dimension n’en a que le nom : à part écrire dans le vide son statut (à la Facebook) et lire celui des autres, toute autre interaction est plus que limitée. Impossible de proposer un onglet à un de ses contacts, impossible de transmettre quoi que ce soit en fait. Les contacts sont juste là pour faire jolis … et pour voir l’adresse de leur univers et de finalement se rendre compte qu’il n’y a rien à faire socialement sur Netvibes … pour l’instant.

Pour le coup, le panneau escamotable est une tare car l’ouvrir et le fermer juste pour voir ce qu’ont fait nos amis, c’est pas génial. Du coup un widget a été créé pour suivre tout ça dans … Netvibes. Amusant : Netvibes pour suivre Netvibes. La boucle est bouclée.

Mon avis rien qu’à moi sur Netvibes Ginger

En attendant, le grand bruit généré par la sortie de la version beta aura été effectivement … du bruit. Je respecte totalement le travail des gens de Netvibes car je sais à quel point il est difficile de sortir un produit de qualité, fonctionnel et résistant à une forte utilisation.

Je pense cependant qu’il aurait préférable de ne pas emballer la machine marketing avant que le produit soit réellement fini … ou apporte en tous cas davantage d’avancées significatives. Parmi celles-ci on pourrait citer le Drive qui permettrait de stocker toutes sortes de fichiers en ligne. L’idéal serait de pouvoir partager certains fichiers uniquement avec certaines personnes mais la difficulté serait du même coup de faire s’inscrire des gens sur Netvibes sans qu’ils en aient un réel intérêt. À voir.

Pour l’instant c’est pas chaud du tout : Netvibes Ginger c’est du Coriander+.