blog

Vestiges d’un CSS Guru

Catégorie : Bien développer

Billet

Le bouton à 300 millions de dollars

Vous savez sans doute que le bouton de Google “J’ai de la chance” leur coûte $110 millions par an ? Et bien, un autre bouton lui vole la vedette! Je vous présente le bouton qui vaut 300 millions de dollars!

Ca se passe en 2004. Il s’agit d’un redesign très léger dans le processus d’achat d’un site de e-commerce. Les deux acteurs sont Best Buy et Luke Wroblewski (Interface Designer dont le blog est excellent).

Un problème de formulaire

Le problème : beaucoup d’internautes ont du mal à finaliser leurs achast à cause du formulaire qui apparaît en début de processus. Ce formulaire consiste en 5 éléments:

  • 2 champs : Email et Mot de passe
  • 2 boutons : Se connecter et S’inscrire
  • 1 lien : Mot de passe oublié

Tout le monde avait des problèmes :

  • les nouveaux arrivants étaient réticents quant à l’idée d’avoir à s’inscrire avant de faire quoique ce soit
  • certains nouveaux arrivants ne savaient pas si ils étaient déjà venus auparavant et tentaient de se connecter avec leur adresse mail
  • même les habitués avaient du mal à se souvenir de leurs informations

Le formulaire, qui était là pour aider les gens (parce qu’il permettait de garder ses infos si on revenait régulièrement), était au final un obstacle à l’achat.

Une solution toute simple

La solution s’est avérée être particulièrement simple (du moins, dans son application) : le bouton “S’inscrire” a été remplacé par un bouton “Continuer” suivi d’un message.

Vous n’avez pas besoin de créer un compte pour faire des achats sur notre site. Cliquez simplement sur “Continuer” pour accéder au paiement. Pour accélérer vos achats futurs, vous pouvez créer un compte pendant le processus de paiement.

BAM! $300 millions de gagnés.

Billet

L’art du management dans le monde du web

Le web est un domaine professionnel récent. Je ne songe pas aux entreprises qui utilisent le web au quotidien dans leur processus de production. Je pense plutôt aux entreprises qui existent (uniquement) grâce au web : les agences, les sites de e-commerce, les éditeurs d’applications web…

Parce que cet univers est jeune et en perpétuelle évolution, ses acteurs doivent s’entourer d’une population dynamique et innovante, qui a non seulement grandi avec cette révolution numérique, mais veut avant tout en faire partie. C’est une catégorie de salariés peu agée et peu expérimentée dans le monde de l’entreprise, mais à qui il faut faire confiance parce qu’elle déborde d’idées et possède un désir créatif très prolifique. Le web est loin d’avoir atteint son adolescence et son avenir est tellement gigantesque qu’il faut laisser libre cours à la recherche et aux expérimentations qui se révèleront être demain des standards. L’inspiration existe à tous les niveaux d’une hiérarchie.

Il faut éviter de se considérer comme ayant atteint un état de stabilité et de maturité invariable parce que la course à la première place est permanente. Il n’existe pas de risque à prendre mais uniquement des opportunités à saisir. Rien n’est déjà tracé : il faut dessiner sa propre route.

Cette quasi-obligation de progression est parfaitement compatible avec le monde du web, où les contraintes physiques (notamment logistiques) sont souvent insignifiantes. La scalabilité de la production est rudimentaire. L’exemple le plus évident qui me vient à l’esprit est 37signals qui a su exploser sur le marché sans pour autant décupler son effectif. La clé de la réussite d’une telle politique réside sans doute dans une organisation multi-latérale où aucune entité de l’entreprise ne voit son travail dévalorisé, mais au contraire se retrouve incité à s’impliquer activement (et au départ à titre individuel) à la réussite de l’ensemble de la société.

When you’re hiring, seek out people who are managers of one.

Billet

Transformer IE6 en IE7 avec un JavaScript

Hier je suis tombé sur un post très surprenant : une librairie JavaScript qui fait fonctionner IE6 comme IE7.

Il s’agit d’un JS à implanter sur son site et qui (si le JS est actif chez le client) fixe les divers problèmes HTML et CSS de IE6. En gros, plus de problème de :

  • PNG
  • Margin
  • Pseudo-classes (hover notamment)
  • Positionnement

Je l’ai implanté sur mon site, mais n’ayant pas d’IE6 sous la main, je n’ai pas pu vérifier la performance du JS. Si un passant encore sous IE6 pouvait me le dire, ça serait sympa. Comment vérifier ? C’est simple : mon site est cassé sous IE6 (parce qu’il est bien codé 😉 ) et ne le serait pas a priori avec ce JS.

“It sounds to good to be true, right?”

Comme le dit le site lui-même, ça semble trop étonnant pour être vrai. Les heures passées à régler les innombrables bugs d’IE6 seraient de l’histoire ancienne ? Cela voudrait dire aussi que l’excellent Position Is Everything ne serait plus indispensable ?

La réponse est : attendons de voir. Ce JS est relativement passé inaperçu donc je ne sais pas ce qu’il vaut exactement. Mais ça reste un grand espoir pour les web designers hostiles à ce fossile qu’est IE6.

Billet

Faut-il arrêter de coder pour Internet Explorer 6 ?

Tombe IE6

Ce débat est récurrent dans le temps parce qu’encore aujourd’hui, beaucoup d’intégrateurs s’efforcent de faire marcher leur site (ou ceux de leurs clients) sur IE6. Je ne suis pas le seul (français en tout cas) à réfléchir à ce problème, voire à y répondre carrément en proposant 5 raisons d’arrêter de coder pour IE6.

L’état des lieux

Internet Explorer 6 a globalement une part de marché de 36%. J’utilise TheCounter.com comme référence parce que d’autres sites (comme w3schools ou webreference) ne prennent en compte que leur propre traffic. Ce n’est que depuis février dernier que IE7 est passé devant IE6.

IE6 est sorti en 2001, et sa dernière grosse MAJ date de 2004. Le web étant ce qu’il est en terme de rapidité, IE6 est technologiquement dépassé depuis quelques années. Mais il reste encore très populaire parce qu’il est installé par défaut sur Windows XP.

Le logiciel est tellement buggé que cette page de résolution des bugs est (malheureusement) devenue une référence incontournable : Explorer Exposed.

La concurrence

Etant donné le succès très mitigé de Windows Vista, Internet Explorer 7 a des difficultés à se répandre, malgré le fait qu’il soit, contrairement à son prédécesseur, disponible en téléchargement gratuit.

Chez la concurrence externe à Microsoft, on trouve :

  • Firefox : populaire chez les web developers et chez les jeunes
  • Safari : populaire chez les Mac users
  • Google Chrome : très récent et relativement peu populaire (sans compter le buzz à sa sortie)
  • Opera : une perle malheureusement très inconnue du grand public

Aucun de ces logiciels ne peut néanmoins exploser au niveau du grand public, cette part de marché, grandissante, novice et à ne surtout pas négliger.

Pourquoi continuer à coder pour IE6

Pour le grand public justement. On peut se poser la question “Mais qui est assez bête pour continuer à utiliser IE6 ?”, mais l’on serait peu respectueux du fait que la plupart des gens ne savent pas ce qu’est un navigateur web. Vous en connaissez surement autour de vous, et vous ne pouvez pas les considérer comme imbéciles pour autant.

N’oublions pas que Tim Berners-Lee (l’inventeur du Web) veut que le Web soit ouvert et accessible à tout le monde, quelle que soit la plate-forme utilisée. Cela passe bien sûr par les Standards du Web, mais il faut tenir compte des faits, c’est à dire la popularité d’IE6.

Une autre raison de coder pour IE6, ce sont les clients. Imaginez que vous fassiez un site pour un prestataire, mais en le prévenant : “Votre site marchera très bien, à part pour un tiers de vos visiteurs, pour qui le site sera totalement buggé.”
Et si il vous demande pourquoi, il sera difficile de lui dire “Parce que le site est parfaitement codé.”

La grand majorité des clients se contrefichent du code derrière un site, et se soucient uniquement du résultat, ce qui est totalement légitime. Ils veulent un site qui fonctionne. Point. D’ailleurs, certaines web agency m’étonnent en mettant en avant le fait qu’ils codent en respectant les standards, tel un argument marketing de premier plan. Leurs clients sont peut-être des développeurs purs et durs qui n’aiment pas intégrer, je ne sais pas, mais ça m’intrigue.

Pourquoi arrêter de coder pour IE6

La raison principale : le temps.
Pour ma part, cela prend 50% de mon temps de faire fonctionner un site sous IE6, ou devrais-je dire, de débugger mon site… C’est comme créer deux sites distincts. Il faudrait facturer cette rétro-compatibilité (parce que oui, je considère IE6 comme rétro) au prix fort.

Autre raison : ne pas avoir à se brider.
Il y a les incapacités d’IE6 (png, hover, position fixed…) et les difficultés d’IE6 (float, margin, alignement…). Avec l’arrivée prochaine des propriétés CSS 3 (border-radius, ombre portée, display table…), ça sera encore plus vrai.

Pour les utilisateurs
Si un internaute voit la plupart des sites buggés sur son ordinateur, il pensera peut-être que le problème ne vient pas des sites mais de son logiciel. Mais il faudrait une action commune et concertée des web developers pour arriver à changer les mentalités. Ca semble compliqué à l’échelle de la planète ? Il suffit que Google dise “Arrêtez de coder pour IE6” et le monde changera.

Faire un choix

Je pense que le choix se fait au cas par cas. Par exemple, je n’ai pas testé mon blog sous IE6 parce que le temps m’en manque, et parce que le public visé (très vaguement) n’est surement pas grand utilisateur d’IE6.

Mais pour un client (une assocation par exemple), il faudra se plier à cette compatiblité, par respect des utilisateurs, même si, sans qu’ils le sachent, ces utilisateurs ne nous respectent pas. 😉

Billet

Choisir des couleurs en fonction du contraste

Choisir des couleurs pour son site, c’est cool, parce qu’il n’y a pas de limites. Même si l’on est parfois contraint de respecter une certaine homogénéité lorsqu’il s’agit d’un client ayant déjà une charte graphique définie (même partiellement), les couleurs (et surtout leur association) sont un terrain de jeu quasi infini.

Mais le web, même si il est très graphique, reste un support pour le contenu. Et le média le plus répandu reste le texte. Dans ce cas là, le choix des couleurs doit tenir compte de certaines règles en matière de contraste pour éviter de rendre difficile voire impossible à lire votre site web. Le W3C possède une formule pour analyser ce contraste.

Analyser le contraste de son site

AccessColor est un outil gratuit qui analyse les CSS de votre site pour vérifier le contraste entre le texte et le fond. Il évalue alors la différence de luminosité et le contraste (en utilisant le formule du W3C). Mais il ne marche pas pour les images de fond. Mon site, comme vous le voyez, obtient un très mauvais score.

Analyse AccessColor de bbxdesign

Trouver des couleurs suffisamment contrastées

Autant l’outil précédent est utile pour analyser, autant il ne permet pas de décider quelles couleurs utiliser à la place. C’est là que Particletree entre en jeu. En utilisant là encore la formule du W3C, ils ont écrit une fonction en PHP pour définir la couleur d’un élément en fonction de la couleur de fond. Bien sûr, tout ceci est dynamique.

Wufoo Charts
Billet

Lancement de site : Words On Design

En parcourant le net, je tombe souvent sur des phrases très intéressantes, qu’elles proviennent d’un site, d’un article, ou d’un commentaire. Mais “blogger” dessus semble peu approprié car une seule phrase ne peut pas fournir un article. Je pense néanmoins qu’il faut le partager et c’est pour ça que j’ai décidé de lancer sous forme de micro-blog le site Words On Design.

Words On Design

Utilisant comme moteur Asaph (le même que pour Alt-Tab), Words On Design sont des extraits de blogs ou de discussions qui concernent le web design. L’essentiel du site réside dans ces phrases, dans leur contenu, et dans leur contexte (accessible en cliquant dessus). C’est pourquoi le flux rss est aussi (voire plus) important que le site en lui-même.

Words On Design (dont le nom provient de “Joel On Software”) intéressera je l’espère tous les web designers parmi vous.

Billet

L’interface de l’iPhone en psd

Si vous comptez développer une application pour iPhone et que vous voulez créer des ébauches de l’interface, utilisez donc ce PSD de l’interface de l’iPhone. Quasiment tout y est : boutons, clavier, liste déroulante, barre de progression, liste alphabétique… et bien sûr, l’iPhone lui-même avec plusieurs écrans déjà prédéfinis.

C’est très pratique car on se rend compte au pixel près de l’espace dont l’on dispose. Par exemple, si l’on décide de faire afficher le clavier, quel espace reste-t-il pour l’application ?

Non seulement, ce psd est complet, il est aussi graphiquement très proche de la réalité, et le fait que la plupart des éléments soient en vectoriel est un plus non négligeable. Gardez bien ce lien dans vos favoris car le psd sera régulièrement mis à jour par leurs auteurs.

Billet

Pdfgeni : trouvez des pdf gratuits en ligne

Parmi les moteurs de recherche spécialisés qui foisonnent sur le web, en voici un qui peut intéresser les web designers : Pdfgeni.com

C’est un moteur de recherche de pdf. Il permet notamment de trouver des E-books (l’équivalent d’un livre en ligne). Il est par conséquent très facile de trouver des documents concernant un domaine particulier. Même si il peut chercher dans n’importe quel domaine, Pdfgeni s’avère très pratique pour fournir des pdf concernant le web. Par exemple on peut chercher :

Ce ne sont ici que 3 exemples pour trouver de très bons documents. Libre à vous de chercher dans d’autres domaines que le web!

Billet

Histoire d’un redesign

Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

  • bbxcloud
    Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
  • bbxland
    Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
  • bbxrevision
    Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

  • la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
  • arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
  • les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
  • la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
  • la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
  • une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion 😉 ).