blog

Vestiges d’un CSS Guru

Catégorie : Best Of

Billet

Introduction au HTML 5

Si vous le souhaitez, allez lire le tutoriel complet sur le HTML 5 et le CSS 3 que j’ai écrit.

Le HTML 5 est la prochaine version importante du HTML. Bien qu’étant en compétition avec le XHTML 2, le HTML 5 fait davantage parler de lui parce qu’étant plus facilement implémentable et plus pragmatique dans l’utilisation des nouvelles balises qu’il introduit.

Quoi de neuf chez les balises ?

J’avais déjà parlé du HTML 5 l’an dernier, en parlant notamment des balises visant à structurer le contenu. Mais l’intérêt du HTML 5 se trouve surtout dans ces balises qui vont grandement faciliter la création d’applications web.

  • <canvas>
    Une balise dans laquelle on peut dessiner avec du JS. A priori on peut faire beaucoup plus avec.
    Exemples : dessiner, labyrinthe ou encore mieux : Bespin par Mozilla, un éditeur de code utilisant canvas et JS
  • <video>
    La vidéo est aujourd’hui implémentée sur le web grâce à différents plugins (Silverlight, Quicktime, WMP et surtout Flash). Pourquoi ne pas utiliser une simple balise <video> ?
    Exemples : YouTube et Dailymotion font déjà des tests avec cette balise <video>, et Mozilla en parle.
  • Geolocation
    La géolocalisation grâce à l’API de l’HTML 5.
    Exemple : Where Am I géolocalise en utilisant Google Maps (il faut Firefox Beta).
  • App Cache
    Ca permet de sauvegarder des informations en local, pour travailler offline notamment.
    Exemple : des Post-It accessibles offline (il faut Safari Beta).
  • Workers
    Un outil qui permet de mieux gérer la surcharge de JavaScript. En gros, plus de problème de ralentissement à cause d’un JS trop gourmand.
    Exemple : 2 scripts qui calculent le plus grand nombre premier. Le premier fait crasher le navigateur (j’ai testé…), alors que l’autre y arrive très bien.

Tous les exemples proviennent de la Google Keynote.
Lire la suite →

Billet

Un h1 pour le logo ou pas ?

A la question “Est-ce que je mets un <h1> pour mon logo ?”, je répondais oui avant. Maintenant, je réponds non.

Le débat

Il existe un débat assez récurrent sur l’élément de la page qui portera le h1. Que ce soit dans un post ou deux, ou dans des commentaires, la question reste ouverte. Il y a 2 écoles :

  • h1 pour le logo
    Etant donné que le logo porte le nom du site, c’est l’élément le plus important. Il doit donc être dans un <h1>, sur toutes les pages.
    Exemple : http://wordpress.org/
  • h1 différent par page, un lien pour le logo
    Le h1 doit représenter le contenu de la page. Ce dernier étant différent pour chaque page, il faut que le h1 change aussi.
    Exemple : http://simplebits.com/

Cas particulier : il arrive d’avoir un h1 pour le logo uniquement sur la page d’accueil, les autres pages ayant un h1 différent. Je classe ces sites dans la deuxième catégorie.

Le h1, le plus important et l’unique (?)

C’est quoi un h1 d’abord ? Selon le W3C, ça donne :

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Le h1 est le titre de premier niveau et doit introduire la section qui le suit.

Paradoxal le h1 ?

Si le h1 est sur le logo, alors il est tout en haut. Il doit donc décrire tout ce qui le suit, c’est à dire, le reste de la page. Il ne faut pas le mettre sur le logo alors ?

Title et h1 : amis intimes

Le titre de la page (balise <title>) est défini ainsi par le W3C :

The TITLE element is not considered part of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document.

Le titre est unique et doit décrire le contenu de la page. C’est à peu près de cette façon que j’utilise mon h1 : il est unique et décrit la page. Il est pour moi différent pour chaque page, comme l’est le titre.

Par contre, le titre doit être davantage fourni que le h1. L’idéal pour ce post serait :

  • <title>Un h1 pour le logo ou pas ? < Blog < bbxdesign</title>
  • <h1>Un h1 pour le logo ou pas ?</h1>

Mon titre décrit le contenu du document et d’où il provient.
Mon h1 décrit la section qu’il introduit : mon post.

Les deux sont complémentaires parce que l’un fait partie du flux du document, l’autre non. Ils ont donc un rôle légèrement différent.

Un h1 est-il unique ?

Je viens de remarquer que Digg et A List Apart ont deux h1 dans la même page (lorsque l’on va dans les commentaires ou sur un article). Ca m’a surpris parce que j’ai toujours cru que le h1 était unique, comme l’est la balise title. Le W3C ne spécifie rien sur l’unicité des headings (h1,h2,h3…) mais étant donné qu’elle préconise d’utiliser une partie de la balise title pour son contenu, je présume qu’il faut que le h1 soit unique.

La solution optimale : un h1 différent par page, un lien pour le logo

Si je résume, le h1 :

  • décrit la section qui le suit
  • reprend une partie du title, qui lui-même décrit la page
  • est unique (selon moi)

Cette équation a une seule solution : il y a un h1 différent par page, un lien pour le logo (à part éventuellement pour la page d’accueil, qui est un cas particulier).

Si le h1 doit décrire ce qui le suit et que je le mets sur le logo “bbxdesign” sur toutes les pages (il l’est actuellement uniquement sur ma page d’accueil), alors toutes mes pages auront comme contenu “bbxdesign” ? C’est très léger comme description de ma page, et très redondant, surtout pour les moteurs de recherche. Toutes mes pages ne parlent pas de “bbxdesign”. C’est juste le nom du site (qui est par ailleurs dans l’url). Mes pages ont toutes un contenu différent et je veux que mon h1 reflète ceci. C’est pour ça que ma page d’accueil a le logo comme h1, mais tous mes posts ont leur titre comme h1 (et le logo devient h2).

Le logo décrit le site, pas la page que l’on consulte actuellement. Après, il est possible de mettre deux h1, un pour le logo, un pour le titre du post par exemple. Mais cela voudrait dire que le premier h1 (celui du logo) affiche “bbxdesign”, et l’autre affiche “Un h1 pour le logo ou pas ?”. Pourquoi pas, mais je trouve que le second a davantage de poids et de légitimité que le premier. Et étant donné que l’on jusqu’à 6 niveaux hiérarchiques, pourquoi ne pas en tirer profit ?

Les titres : une question d’ordre ou de poids ?

Si le h1 n’est pas le logo, il se peut (et c’est mon cas) que le h1 ne soit pas le premier élément de la page, mais arrive après le header et la navigation. Est-ce que c’est problématique ? Je ne pense pas. Le W3C ne précise rien à ce sujet. Il faudrait plutôt se poser la question si les titres (h1,h2,h3…) sont davantage une question d’ordre ou de poids ?

A première vue, c’est surtout une question d’ordre. On a d’abord un h1, puis un h2, puis un ou plusieurs h3, puis peut-être un autre h2 suivi d’autres h3… A ce propos, il est interdit de “sauter” un niveau hiérarchique. On ne passe pas d’un h1 à un h3 sans avoir de h2. Il faut voir les h1-h6 comme des chapitres d’un livre.

Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

Pour le W3C c’est une question d’ordre. Mais il m’arrive de ne pas suivre cette règle à la lettre. Par exemple, dans une sidebar structurée, je mets des <h3> et des <ul> parce que c’est le poids que je leur donne par rapport au contenu de la page. Et mon post a lui aussi des h3-h6. Par conséquent, l’ordre de mes titres dans mon code peut passer du h6 au h3. Et ce n’est pas spécifique à la sidebar. Ca peut arriver lorsqu’il y a plusieurs zones dans la page avec un contenu différent.

Les titres h1-h6 restent des éléments assez mal utilisés (par moi d’abord), sans doute par manque de précisions de la part du W3C. En même temps, c’est peut-être têtu de s’obstiner autant. Parce qu’en ayant d’un côté le W3C (avec les soucis de standardisation et d’accessibilité) et de l’autre les moteurs de recherche (qui analysent minitieusement notre code), couplés à un flou autour de la définition de l’utilisation des titres, on se demande parfois si la solution est unique.

Billet

Le temps d’intégration

Je me suis posé la question de savoir combien était divisé mon temps pendant que j’intégrais. J’ai divisé en 5 parties ce temps (peut-être en oubliant des parties) et évalué grossièrement leur répartition. Je suis arrivé à ce graphique :

bbx-temps-d-integration

HTML : vers davantage de modularité

Je code toujours en XHTML 1.0 Strict, et ça m’a évité pas mal de problème de Quirksmode je me rends compte. J’utilise au maximum les balises sémantiques <p>,<ul>,<label>,<hn>,<strong>… mais je suis de moins en moins réticent à multiplier les <div> et <span>. D’un côté, c’est cool d’éviter la divite, c’est joli, c’est léger. Mais en pratique, et surtout pour les gros sites, il faut être très spécifique quant aux styles à appliquer à certains éléments. Donc je rajoute une ou deux div par ci par là pour améliorer ma productivité et surtout la flexibilité du code. Ca facilite grandement la différenciation. Et ça permet surtout de prévoir d’eventuelles évolutions de fonctionnalités, et avoir une approche plus modulaire.

A force de prôner la séparation HTML (contenu) / CSS (mise en page), on a peur de modifier le HTML, comme si c’était devenu interdit voire impossible. Je me dis que les développeurs ne sont pas bien méchants et que l’on peut leur demander des modifs HTML, avoir plusieurs classes sur un même élément au lieu de répéter son code CSS pour pas grand chose (voir plus bas).

CSS : une seule css, un reset et de moins en moins de contextualisation

C’est évidemment très lié au HTML utilisé. Depuis quelques temps, je me suis fait un fichier reset.css qui utilise le Reset CSS de Yahoo! . Par contre, ce n’est pas un fichier que j’importe à chaque fois mais un code que je copie-colle en créant ma CSS. Parce que oui, je préfère garder une seule CSS pour tout le site. Niveau lisibilité, je n’ai pas trop de problème à utiliser un seul fichier parce que j’écris chaque sélecteur CSS sur une seule ligne. Niveau productivité, répartir des propriétés sur plusieurs CSS c’est passer beaucoup de temps de l’une à l’autre, trouver où se trouve ce sélecteur, éviter les conflits… J’évite. Et le seul vrai avantage d’avoir plusieurs CSS, c’est d’en appeler certaines dans certains cas, et d’autres dans les autres cas. Je préfère mettre une class au body pour différencier les pages, c’est beaucoup mieux.

Les exceptions pour utiliser plusieurs CSS sont : un fichier pour ie6, un fichier par couleur (si il y a des thèmes par couleur) et un fichier pour le print.

Je fais encore pas mal de contextualisation (ex: .bloc table tbody td.direction ) parce que ça permet d’éviter les conflits. + de contextualisation = – de classes à créer

Appliquer le même style à des éléments HTML différents

Il y aussi le cas où vous voulez que plusieurs éléments HTML aient les mêmes propriétés CSS Dans ce cas, il y 3 choix :

  • copier-coller les mêmes propriétés pour la nouvelle classe (bouh, pas bien!)
    .maclasse { propriétés identiques }
    .monautrelement { propriétés identiques }
    .montroisieme { propriétés identiques }
  • mettre les éléments qui ont les mêmes propriétés à la suite
    .maclasse, .monautreelement, .montroisieme { propriétés identiques }
  • créer une nouvelle classe et rajouter cette classe dans le HTML
    .manouvelleclasse { propriétés identiques }

La première méthode est à éviter : si on veut changer une propriété (ex: la couleur d’une bordure), il faut le changer autant de fois que l’on a copié-collé.
La deuxième méthode est la plus propre : le HTML reste relativement léger (= non alourdi de classes) mais la CSS est plus longue à maintenir. C’est ce que je faisais avant.
La troisième méthode est plus “modulaire” je dirais. Un élément HTML aura par exemple : class=”.maclasse .manouvelleclasse”. On rajoute donc une classe aux éléments qui ont le même style. Mmmh. Est-ce que c’est bien ? Est-ce que l’on sépare bien la mise en page du contenu ? Plus ou moins je dirais. En fait, dans le HTML, on ajoute la classe à tous les éléments qui doivent appraître de la même façon. Et si on veut plus qu’un élément n’aie plus ces propriétés ? Il faut supprimer la classe dans le code HTML. Ah. C’est pas bien. On ne devrait plus avoir à toucher au code HTML. En théorie, c’est vrai. Mais en pratique, c’est, d’une part, très rare de vouloir changer le style d’un seul élément, et d’autre part, pourquoi n’aurait pas-t-on le droit de modifier le HTML ? Une fois livré, on ne peut plus rien faire (voir § sur le HTML) ?

Je dois préciser une chose importante : cette méthode modulaire, je l’utilise surtout pour les blocs et les gros éléments, pour les éléments qui structurent et divisent l’affichage. Il faudrait que j’envisage de faire un article avec des exemples plus éloquents. 🙂

IE6 : 40% de perte de temps

J’ai déjà parlé de ce que l’on pourrait faire si IE6 n’existait plus. En fait, rendre un site compatible IE6, c’est du débuggage pur et simple. On doit utiliser des overflow:hidden, position:relative, display:inline… pour aucune raison valable si ce n’est faire plaisir aux internautes du siècle dernier (ou presque). Sans compter tout ce que l’on est privé de faire. Bref, une calamité.

Nommer les class/id

Dans mon souci d’avoir un code lisible, pour moi et ceux qui retoucheront aux CSS, j’essaye d’avoir des noms de class/id simples mais efficaces. Simple, ça veut dire court. Avec 4 lettres, on peut faire pas mal de choses : .bloc, .nav, .main, .side… J’ai par exemple remplacé .pagination par .page. Ou mettre .srv au lieu de .service. C’est pas très méchant et ça permet d’avoir une CSS bien plus lisible (surtout si l’on contextualise ET que l’on met tout sur une ligne).

Et si je passe autant de temps, c’est aussi pour éviter d’appeler un élément “grillade” par exemple (alors que ça n’a rien à voir avec un barbecue). J’ai vérifié, elle y est encore.

Découper les images

Dernier point : découper le PSD. On voit directement si un PSD est fait par quelqu’un qui sait intégrer ou pas. J’ai de la chance, c’est souvent le cas. Mais lorsque ça ne l’est pas, il faut voir les effets de dégradés, les superpositions, les ombres qui dépassent… qui n’ont l’air de rien graphiquement, mais qui sont une calamité à intégrer. D’ailleurs, c’est une calamité à cause d’IE6! Parce que pour IE6, il faut tout aplatir! L’ombre doit aller avec l’élement qui la fait ET avec l’élément où elle se projette. N’est-ce pas logique ? Et bien non. Vive les PNG. C’est tout.

Conclusion

J’ai essayé de faire un rapide panorama de ce que doit faire un intégrateur. On se rend compte que le grand ennemi reste IE6. Les 40% cités correspondent au temps de débuggage, mais je suis sûr qu’on peut gagner du temps dans les autres domaines (découpage, css, html) si il n’y avait pas IE6. J’ai peut-être oublié des éléments, je ne sais pas. Vous avez des idées ? Des remarques ? Des critiques ?

Billet

Comment réaliser un bon formulaire HTML

webformdesign_medDepuis longtemps, je suis le passionant travail de Luke Wrobleski, le Senior Director of Product Ideation & Design chez Yahoo. En gros, il design des interfaces web, et notamment les formulaires. Ca n’a l’air de rien, mais cet élément fondamental du web est souvent négligé. Il a sorti un livre : Web Form Design: Filling in the Blanks que j’aurais acheté si je bossais encore dans le e-commerce.

Luke a fait une conférence le mois dernier au MIX 09. Elle est disponible en vidéo et c’est à partir de celle là que je rédige ce post.

10 bonnes pratiques pour réaliser un formulaire

  1. Aller droit au but (Path to completion)
  2. Alignement des labels (Label alignment)
  3. Aide et astuces (Help & tips)
  4. Validation (Inline validation)
  5. Actions primaires et secondaires (Primary & Secondary actions)
  6. Actions en cours (Actions in progress)
  7. Erreurs (Errors)
  8. Input inutiles (Unnecessary inputs)
  9. Organisation du formulaire (Form organization)
  10. Engagement graduel (Gradual engagement)

Préambule

Les formulaires, c’est chiant. C’est une barrière entre l’internaute et le site, entre l’utilisateur et l’outil, entre le client et l’entreprise. Il y en a pour tout : pour acheter en ligne, pour participer à des forums, pour utiliser une appli web… C’est pourquoi il faut en tenir compte pour les rendre plus agréable à remplir.

Je livre ici un résumé de la vidéo précédemment citée.

1. Aller droit au but

Avant de remplir un formulaire, l’internaute doit avoir un aperçu de ce qui l’attend. Visuellement, la page doit pouvoir être scannée rapidement. Si il y a plusieurs pages, il faut notifier des différentes étapes (présent, passé, futur). Il faut qu’à tout moment, l’internaute sache où il en est et ce qui lui reste à faire.

Mauvais exemple :
aller-au-but-mauvais

Bon exemple :
aller-au-but-bien

2. Alignement des labels

Il y a 3 manières d’aligner les labels :

  • en haut de l’input : c’est le plus rapide à scanner mais ça prend de la place en hauteur. A utiliser uniquement sur des formulaires courts.
  • aligner à droite : à utiliser si l’hauteur de la page est limitée parce que le formulaire est long. L’association label/input est rapide parce que les deux sont visuellement proches. Le seul problème avec ce type d’alignement est l’internationalisation : la largeur des labels varient alors que dans la page cette largeur est fixe.
  • aligner à gauche : facilite la lecture des labels. C’est donc à utiliser si les labels sont compliqués. L’inconvénient est que l’association label/input est moins évidente.
3 manières daligner les labels pour 3 situations différentes

Cas particulier : les labels à l’intérieur des inputs

label-dans-input
Si on met le label à l’intérieur de l’input, il faut bien notifier que le contenu actuel ne fait pas partie de la réponse à donner. Si il y a marqué “Mettez votre nom ici…”, il faut éviter que ce contenu soit validé.
Aussi, en remplissant l’input, le label disparaît. Donc à utiliser avec précaution.

3. Aide et astuces

L’aide est utile :

  • lorsque les informations à donner sont compliquées
  • pour accompagner l’utilisateur dans sa démarche
  • pour notifier les données optionnelles
  • pour expliquer à l’internaute pourquoi telle information est demandée

Il faut faire attention à ne pas surcharger l’utilisateur d’informations.

Plusieurs manières d’aider l’utilisateur :

  • afficher une aide uniquement sur l’input que l’on est en train de remplir : ça permet d’éviter de surcharger la page en ne donnant qu’une aide sur l’élément actif
  • afficher une aide au clic ou au hover : une aide optionnelle si l’utilisateur est perdu
  • afficher une popup : si un texte long est indispensable pour bien expliquer
  • utiliser une zone fixe où l’aide change au fur et à mesure du formulaire : ça permet d’avoir une zone dédiée à l’aide que l’utilisateur consultera si besoin est
Le formulaire de Digg offre une aide au fur et à mesure que l'on remplit les inputs.

4. Validation

Avec de l’Ajax et des notifications visuelles, on peut aider l’utilisateur à remplir correctement le formulaire, et du mieux possible.

La validation en “live” permet :

  • de gagner du temps : l’internaute n’a pas besoin d’aller/retour, de recharger la page, de revenir sur les inputs déjà remplis… On ne passe qu’une seule fois à travers le processus.
  • de donner une réponse correcte : par exemple, si vous voulez une nouvelle adresse mail, vous savez que beaucoup de pseudos sont déjà pris. La validation en “live” permet de tester rapidement les pseudos qui sont disponibles.
  • de fournir la meilleure réponse : il y a souvent plusieurs réponses correctes possibles. L’exemple le plus évident est le choix du mot de passe. Il y a de plus en plus souvent une barre qui fournit la “puissance” du mot de passe. Plus il est compliqué, plus il est puissant. C’est à double-tranchant, parce qu’il faut se souvenir du mot de passe. Mais ça reste un conseil utile.
La barre de progression pour le mot de passe s'est très répandue.

5. Actions primaires et secondaires

Luke avait posté un excellent post sur la manière de placer et distinguer les actions primaires (“Valider”, “Confirmer”, “Suivant”…) des actions secondaires (“Annuler”, “Effacer”, “Retour”…). Il avait réalisé des tests utilisateurs en leur proposant 6 mises en forme différentes.

La meilleure solution est :

  • d’éviter les actions secondaires si elles sont inutiles (un “Reset” est très rarement utilisé par l’internaute)
  • de bien distinguer l’action secondaire (si il y en a une). Ca a pour conséquence de rallonger légèrement la durée de remplissage du formulaire mais l’internaute est content d’être averti des différents choix possibles.
  • d’aligner l’action principale avec les inputs. La grande majorité du temps, l’internaute n’a qu’une seule envie, c’est d’aller au but, et un bon alignement est primordial pour la vitesse.
La meilleure solution est de distinguer visuellement les deux actions possibles.

6. Actions en cours

Il y a parfois des actions qui demandent du temps, par exemple, lorsqu’on rentre un numéro de carte de crédit et que le formulaire demande à la banque si les informations données sont correctes.
Dans ce cas, pour éviter les erreurs, la meilleure solution est de désactiver temporairement la validation du formulaire, parce que justement, on ne peut pas valider tant que la réponse de la banque n’a pas été fournie. Si l’internaute clique par malheure sur le bouton, il risque de compromettre la validation du formulaire et d’avoir à tout recommencer.

C’est le cas typique de la case à cocher “J’accepte les condtions de service”, qui est généralement décochée. L’internaute clique sur “valider” mais ça ne marche pas.

7. Erreurs

Les erreurs de formulaire dûes à des informations erronées données par l’internaute sont le principal obstacle à la validation du formulaire. Tant qu’il y a des erreurs, on ne peut terminer la validation. L’important est de notifier ces erreurs, et d’informer l’internaute.

Pour bien notifier l’erreur, il faut :

  • visuellement la marquer : en un coup d’oeil, l’internaute doit comprendre qu’il y a une erreur, et
  • expliquer comment corriger l’erreur : si les informations données n’étaient pas bonnes, c’est que l’aide (si il y en avait une), n’a pas marché. A ce moment là, il n’y a plus d’alternative : il faut expliquer clairement comment résoudre le problème.
  • doubler l’affichage : je me répète mais pour bien marquer l’erreur il faut une couleur différente, une taille de police différente (pour les déficients visuels qui ne voient pas les différences de couleur) et une icône
N'oubliez pas les déficients visuels : il faut non seulement une différence de couleur mais aussi une différence dans la police. Une icône est un plus.

8. Inputs inutiles

Il y a souvent des inputs inutiles dans un formulaire. Par exemple, il arrive souvent à l’inscription d’un site que ce dernier vous demande toutes vos informations : nom, prénom, adresse, sites préférés, hobbies, comment avez-vous connu le site, votre revenu annuel… alors que l’essentiel pour utiliser le site ne réside que dans le nom et l’email.
On voit ça souvent dans les sites communautaires (un forum par exemple) où on demande implicitement à l’inscription de remplir la page de profil alors qu’il est parfaitement possible de s’en occuper plus tard. “Pour l’instant, je veux juste poster ma question sur le forum. Je remplirai mes informations personnelles après”.

Si il est possible de retirer des inputs, il faut le faire.

9. Organisation du formulaire

Avant de s’attaquer à la création d’un formulaire, il faut se focaliser sur ces points :

  • objectif du formulaire : il faut bien se concentrer sur la raison même d’exister du formulaire, et ne pas s’en écarter.
  • questions à poser : un certains nombre d’informations sont indispensables, d’autres ne le sont pas.
  • discuter avec l’internaute : un bon vocabulaire peut aider l’internaute. Etre concis et naturel dans son langage est un plus.
  • songer à diviser le formulaire en plusieurs sections/pages, si les inputs peuvent être regroupés par thème (une section sur le nom/prénom/adresse, une sur le pseudo/mot de passe, une sur les infos bancaires…)
Ecrire "Day/Year" plutôt que "dd/yyyy" est bien plus naturel et compréhensible.

Le site Huffduffer propose un formulaire imbriqué dans une phrase.

10. Engagement progressif

Le but ultime d’un formulaire est de pouvoir s’en passer. Si un internaute peut commencer à utiliser un service web sans avoir à s’inscrire, alors il sera beaucoup moins réticent à s’inscrire par la suite. “Tiens, je n’ai pas besoin de m’inscrire pour tester cette appli.” Et quelques minutes de test plus tard : “Ah c’est vraiment super! Je m’inscris tout de suite!”

En arrivant sur netvibes, on peut déjà customiser sa page sans avoir à s'inscrire au préalable.

Si une inscription est inévitable, il faut faire en sorte de la rendre la moins laborieuse possible.

Par exemple, si je veux créer un blog :

  • sur Tumblr : je remplis 3 champs et c’est parti!
  • sur Blogger : j’ai 3 pages entières à remplir (créer un compte, nommer le blog, choisir un modèle… je le ferais après!)
Je veux juste créer un blog. Pourquoi remplir 3 pages alors que je n'ai que besoin de remplir 3 champs ?

Conclusion

Les formulaires resteront toujours un obstacle entre un site et l’internaute. Il faut à tout prix les raccourcir, jusqu’à les supprimer! Le plus gratifiant dans l’expérience que l’on a d’un service web c’est lorsque l’utilisation est instantanée. Il n’y a pas délai entre le moment où l’on arrive sur un site et le moment où l’on commence à s’en servir. L’inscription s’avère alors une formalité.

Est-ce qu’un bon formulaire peut faire gagner de l’argent ? Oui! Rappelez-vous le bouton à 300 millions de dollars : l’internaute n’était plus invité à “S’inscrire” mais plutôt à “Continuer” ses achats. Ce formulaire avait été redesigné par Luke Wroblewski lui-même.

Je vous invite donc fortement à regarder cette passionante et sympathique vidéo remplie d’exemples intéressants et drôles.

Billet

bbxpress : un thème WordPress gratuit

Depuis le temps que je voulais en faire un, voici bbxpress, un thème pour WordPress. C’est une première version, donc n’hésitez pas à faire des retours si vous l’utilisez.

bbxpress

Le but est d’offrir un thème passe-partout, facile à utiliser. Voici quelques caractéristiques :

  • sidebar avec widgets (très facile à gérer dans l’admin)
  • compatible IE6
  • onglets listant les pages WordPress
  • gravatar dans les commentaires
  • s’affiche correctement en 800×600
  • aucun plugin n’est nécessaire pour le faire fonctionner

Les icônes utilisées proviennent de Jonas Rask (un lien existe dans le footer). Pour l’instant, le thème est en anglais (une version française est envisagée, si besoin est).

Screenshots

bbxpress01

bbxpress02

bbxpress03

bbxpress04

bbxpress05

bbxpress06

Télécharger ou prévisualiser le thème

Vous pouvez prévisualiser le thème ou télécharger le thème bbxpress v1.0

Billet

iPhone ≠ iPod Shuffle + PSP + eeePC

L’iPhone est à la base un téléphone mobile. Mais les raisons de son succès (médiatique et économique) réside dans tout ce qu’il sait faire d’autre : Internet, Jeux, Musique.

Ayant acquis un iPhone il y a 1 mois, mais possédant déjà un iPod Shuffle, une PSP et un “eeePC ” (Medion Akoya Mini E1210), je pensais me passer progressivement de ces 3 objets. Oui et non.

iPhone = iPod plus classe mais moins pratique

L’interface d’un iPhone (ou iPod Touch) est tactile : elle est donc visuelle. Il faut quasi obligatoirement regarder l’écran pour écouter de la musique. En tant que baladeur mp3, il devient laborieux de changer de morceau ou d’éteindre la musique (il reste cependant la possibilité d’augmenter/baisser le volume mais ça reste rudimentaire).

Au contraire, un iPod Shuffle, sans écran (et donc, avec uniquement de véritables boutons physiques), demeure parfait pour une utilisation en transport. On pilote à l’aveugle, uniquement avec ses doigts. Vous me direz qu’il manque un écran pour au moins savoir quel artiste on écoute. Mais à titre personnel, je mets maximum 4 albums sur mon Shuffle, et justement en mode non shuffle (donc, à la suite). Je sais quasiment toujours qui j’écoute. Si vous mettez toute votre bibliothèque musicale, ça peut devenir pénible pour certains. Dans ce cas, je préfère encore un iPod Nano qui garde encore de vrais boutons.

iPhone = PSP différente

L’iPhone est avant tout, autre chose qu’une console de jeu, a priori. Mais la prolifération de jeux sur cette plateforme et l’arrivée de gros éditeurs (Konami par exemple avec Metal Gear Solid, Frogger et Silent Hill) font de facto de l’iPhone une console portable, concurrente des DS et PSP.

Concurrente, vraiment ?

Performances

Incontournables même si parfois secondaires, les performances brutes d’une console sont un point important, notamment pour la qualité graphique et la fluidité des jeux. Selon le président de SEGA America, l’iPhone est aussi puissant qu’une Dreamcast. Mieux qu’une DS (= Nintendo 64), mais moins bien qu’une PSP (= Playstation 2).

Catalogue de jeux

Oui, il y a des tonnes de jeux qui sortent toutes les semaines sur iPhone. Mais combien de bons jeux ? Pour l’instant, j’ai constaté une part énorme de jeux du type casual gaming dont la plupart sont (heureusement) gratuits. L’iPhone ne serait qu’une plateforme où l’on transfèrerait tous les jeux Flash du web ? Le comble!

Certains éditeurs pensent différement et tant mieux pour nous! Je pense à Sim City, Rolando (quasi-remake de LocoRco), Tap Tap, Payback (GTA 2 like), Crash Bandicoot Nitro Kart

Interface

L’iPhone est une console sans bouton! Il reste possible d’en simuler virtuellement (sur Real Football par exemple). Mais il n’y a pas la précision d’un vrai bouton digital, binaire (appuyé/pas appuyé). Je m’imagine très mal jouer à PES 2009 autrement qu’avec ma PSP.

Quoiqu’il en soit, l’iPhone a ses attraits. Tous les jeux à base de clic de souris se portent très bien sur iPhone, où le tapotage se substitue au clic. Je pense par exemple aux jeux de stratégie au tour à tour : Lux Touch (Risk dans ta poche!) ou Reign Of Swords. N’oublions pas les jeux de cartes et de réflexion.

Un autre atout : l’accélèromètre. Ou une toute nouvelle manière de jouer! Ca donne des jeux assez sympas : Labyrinth ou Super Monkey Ball.

iPhone = eeePC de poche

Le web joue un rôle essentiel dans la popularité de l’iPhone. De plus en plus d’applications web possèdent leur version iPhone, que ce soit une version optimisée pour le navigateur (Google Reader) ou bien une application à part entière (Facebook, WordPress).

Si l’on rajoute les applications basiques de type mail, agenda, prises de notes, messagerie, photos… on peut éventuellement se passer d’un pc portable ou d’un netbook. J’utilise de moins en moins mon Medion pour surfer sur le net. Et puis l’iPhone, en marge de la connection Wi-Fi, peut utiliser le réseau Edge ou 3G.

Mais il manque encore à l’iPhone l’étendue d’un véritable système d’exploitation que peut apporter Windows/Linux/Mac OS. Il semble évident qu’il est difficile pour un OS aussi jeune de concurrencer une plate-forme déjà présente depuis des années (avec son catalogue infini de logiciels tiers). Et c’est sans doute en demander trop! Mais je suis exigeant :).

Il ne faut pas oublier l’inexistence d’un clavier physique pour l’iPhone. Entre le tapotage à deux pouces et le tapotage à 10 doigts, je pense que la vitesse de frappe diffère du simple au quadruple.

Conclusion

J’utilise toujours autant mon iPod Shuffle, je n’emporte plus ma PSP dans les transports (le casual gaming de l’iPhone me convient) et j’utilise mon netbook comme avant (c’est à dire, au bureau ou chez des amis).

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

Le triangle passion-croissance-argent

Une question que l’on est amené à se poser de temps en temps : comment évaluer sa situation professionnelle ?

Difficile de répondre à une question qui fait rentrer en jeu d’innombrables critères. Jack Cheng a pourtant tenté le coup en apportant une approche graphique et synthétique du problème : Maxing out your Triangle. Il s’agit d’un triangle équilatéral où chaque médiane correspond à une échelle partant de zéro (au niveau du centre de gravité) pour aller au maximum (qui se trouve à chaque sommet). Et on obtient le love-growth-cash triangle. J’ai traduit ça par :

  • Passion : le plaisir de faire ce job
  • Croissance : l’opportunité d’apprendre de nouvelles choses
  • Argent : ce que ça nous rapporte financièrement

J’ai essayé d’analyser ma situation en utilisant cet outil, et j’ai obtenu :

Un job qui me passionne pas mal, j’apprends beaucoup de choses et le salaire est basique. Ce triangle peut varier au fil des mois mais c’est à peu près la moyenne. Je me rends compte qu’il y a encore beaucoup de zone à remplir, et que d’un côté c’est une bonne chose parce que ça permet de garder des objectifs et de rester motivé.

Je m’ennuie assez vite. C’est pour ça que j’aime démarrer de nouveaux projets (au travail et en dehors), même si je ne les termine pas tous au final. Je pense qu’en freelance on pourrait créer un tel triangle pour chaque travail auquel on s’affaire.

Entre autres, ce qui m’a plu dans cette approche, c’est qu’elle montre que d’avoir un job très bien payé (mais totalement inintéressant) avec des hobbies passionnants à côté est une solution peu fructueuse à terme. Il vaut mieux essayer de concilier les 3 aspects en un seul job : Love Growth Cash. N’est-ce pas là la problématique principale d’une carrière professionnelle, voire d’une vie ?

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. 😉