Permettez-moi une embardée dans la vraie vie pour étudier un cas d'école qui pourrait aussi bien s'appliquer à un site Web : la remise à neuf des rames de métro de la ligne 13 à Paris. Un exemple typique de downgrade du produit. Je voudrais juste comprendre comment on en arrive là. Pourquoi avoir dégradé ce qui fonctionnait ? Pourquoi pourrir la vie des usagers ?

> Voir la suite

Traduction d'un schéma très rigolo publié en anglais sur le site monster-munch.com :

Dans la série, j'ai souvent eu à écouter les problèmes de Freebox de mon interlocuteur ("ah t'es dans l'informatique ? ça tombe bien...").

Un lecteur webmaster m'a consulté sur la manière d'optimiser un site professionnel pour le référencement. Il a, comme c'était expliqué dans les manuels de l'an 2000, défini tous les meta-tags mais son site ne sort pas dans les résultats de recherche. Et contrairement aux blogs qui intègrent dans leur moteur les règles de SEO (optimisation pour les moteurs de recherche), un site créé à la main va demander un grand nombre de modifications pour gagner en visibilité.

> Voir la suite

A l'heure de mettre en ligne une FAQ qui devra être mise à jour par un néophyte, je me suis posé la question suivante : comment concilier la souplesse de mise à jour avec le dynamisme de javascript ? Simple : créer le HTML d'abord, et laisser JQuery animer le tout.

> Voir la suite

Les spams dans les commentaires de blogs sont une plaie. Divers tests de Turing (aussi appelés Captchas) visent à séparer les robots des êtres humains, allant de l'image plus ou moins lisible au questions les plus absconses (« quel est le troisième chiffre dans la chaîne 012345 (en chiffres) ? »). Voici une méthode, simple et, d'après mon expérience, plutôt efficace pour tromper les spammeurs. Explications.

> Voir la suite

Même si leur usage a été banni dans la mise en forme de pages au profit des DIV, les tableaux sont un outil de choix dès qu'il s'agit d'afficher des données sous forme de lignes et de colonnes. Il reste cependant difficile de créer des tableaux lisibles et conformes aux standards. Voici un condensé de bonnes pratiques pour styler vos tableaux, qui n'a rien de révolutionnaire mais vous fera peut-être gagner du temps.

> Voir la suite

Concevoir une palette de couleurs est un exercice délicat. Pour ceux qui, comme moi, n'ont pas le talent inné d'associer les couleurs, cette liste de palettes issue des plus beaux sites du Web pourra fournir une source d'inspiration attrayante pour leurs designs Web.

> Voir la suite

Toujours à la pointe, Smashing magazine vous propose une collection de sites qui évaluent, analysent et décortiquent votre site Internet. Un peu comme le bon vieux "validateur" HTML du W3C, sauf que ceux-ci vont beaucoup plus loin en évaluant l'usabilité de vos pages, l'optimisation pour les moteurs de recherche (SEO ou Search Engine Optimization), leur PageRank Google, vos scores sur Alexa, Technorati et autres, les performances de votre site ou encore le profil de vos visiteurs (où l'on apprend que le Potlatch sera a priori visité à 59% par des mâles et 41% par des femelles, pour une tranche d'âge majoritaire de 18 à 24 ans). Tout cela est en anglais, mais rien d'insurmontable pour les metteurs en toile (webmasters) polyglottes que vous êtes.

L'article 10 designer checkpoints to be aware of

A mesure qu'il s'immisce dans tous les aspects de notre vie, le Web cesse d'être un joujou pour les technophiles et concerne de plus en plus des publics que l'informatique effraie, voire rebute. Il est de la responsabilité du designer de prendre en compte ces publics en repoussant l'aspect anxiogène des interfaces. Voici quelques pièges à éviter.

> Voir la suite

Petite annonce professionnelle, pour changer. Mon Matthieu préféré s'en va vivre de nouvelles aventures et il emporte avec lui toute une panoplie de compétences. Ce Matthieu là constituait avec moi-même une équipe de développement interne dans un grand groupe d'associations. Je cherche donc le mouton (ou la brebis) à deux têtes pour un CDI à La Plaine Saint-Denis (Stade de France).

> Voir la suite

A l'époque où le mot Ajax évoquait encore un produit d'entretien, où le DOM était un territoire d'outre Web, et où l'idée de faire des applications dynamiques sur le Web paraissait extrèmement utopique, Javascript avait l'allure d'un gadget peu fiable. Il ne me serait jamais venu à l'esprit que ce langage soit évolué, stable et puissant. Et que son apprentissage soit aussi semé d'embuches... Après des mois de pratique intensive et d'arrachage de cheveux, voici quelques-uns des trucs que j'ai appris.

1. La fonction $()
2. L'objet littéral
3. JSON
4. Yahoo UI (ou autre framework)
5. La capture d'évenements
6. Le Javascript gzippé
7. Les outils de débuggage

> Voir la suite

Il y a longtemps que ça me démangeait, j'ai donc décidé de dévoiler le musée de mes réalisations en matière de Web. La liste n'est pas complète mais c'est assez agréable de voir le chemin parcouru. Ça se visite ici.

Une étude passionnante nous révèle en une image les secrets des obsessions masculines inconscientes. L'article étudie le chemin parcouru par l'oeil du visiteur sur différents types de contenus (texte, images...) pour juger des zones "chaudes" et "froides". Et le résultat est assez édifiant.

> Voir la suite

On voit émerger une tendance diffuse dans l'évolution du développement Web. On dirait que ce domaine se convertit au développement durable. On doit déjà se prendre le chou avec les économies d'eau ou trier ses ordures, et il faudrait en plus faire des économies de Web ? Petit tour d'horizon.

> Voir la suite

Le site Interdépendances vient de sortir de nos fourneaux. En plus d'un design épuré et plutôt sexy, il va servir de terrain d'expérimentation auprès du grand public via l'usage de tags et autres techniques modernes de navigation.

> Voir la suite

Après plus d'un an de pérégrinations dans la même peau blafarde, le Potlatch se sentait un peu nu. Une injection de Botox Photoshop, une cure amincissante pour raffermir pour le logo, quelques mètres de tissus bigarrés, un bon coup de ciseaux CSS, et hop ! Une robe du soir toute neuve ! C'est quand même plus classe, un blog habillé.

> Voir la suite

Déçus des politiques ? LaConstituante.org vise à remettre le politique entre les mains des citoyens. Venez débattre des grands sujets de la Constitution française, pour faire émerger les valeurs partagées par les citoyens, et la réécrire de manière collaborative. Les débats vont bon train en attendant la première phase de rédaction sur certains sujets chauds dans les prochaines semaines. Venez avec vos idées !

> Voir la suite

La syntaxe du HTML a peu évolué depuis une dizaine d'années. On peut même constater depuis quelques temps un retour aux sources avec le balisage sémantique. A contrario, l'architecture des sites a profondément changé. Aujourd'hui, le webdesigner dispose de nombreuses options pour structurer son site sans s'arracher les cheveux à le maintenir et le faire évoluer. Je vais évoquer les méthodes les plus fréquentes.

> Voir la suite

J'ai longtemps cherché un moyen simple et efficace de déterminer si le nombre de résultats d'un moteur de recherche prenait un S. Et je crois avoir trouvé la méthode la plus condensée : ça tient en une ligne de code. Explications.

> Voir la suite

Tout webdesigner expérimenté a déjà vécu cette transformation douloureuse : au premier jour il élabore une délicate maquette aérée, taillée comme une pièce d’orfèvrerie. Et puis au fil du temps, elle s’enrichit et s’empâte, jusqu’à devenir ce capharnaüm exubérant au lancement du site. A force d'empiler les couleurs, les effets, les typos et les logos, le client obtiendra cette apparence de richesse qui lui fait plaisir, mais aura perdu toute la pertinence d'un design équilibré et efficace.

> Voir la suite

Internet Explorer 7 va sortir dans quelques jours. Il va falloir refaire de nombreux sites. Qui va payer la note ? Le client ? Le webdesigner ? Pourquoi pas Microsoft, au fait ?

> Voir la suite

A chaque fois que je présente Terato - le jeu en ligne - à quelqu'un, j'ai droit à un regard qui s'éclaire, à ce bref demi-sourire où suinte l'avidité, et la même interrogation : « et ça te rapporte de l'argent ? ». Réponse : non, et voici pourquoi...

> Voir la suite

J'ai des scrupules vis-à-vis du logiciel libre. J'en consomme des paquets, j'exploite et j'apprends grâce aux dons de cette communauté, mais je n'ai jamais réellement rendu la pareille. J'aimerais vraiment faire partager tous les projets sur lesquels je travaille, les ouvrir à tout le monde. Hélàs ça demande beaucoup de temps de rendre ses outils universels et compréhensibles. J'ai du pain sur la planche. En guise d'apéritif, voici ma petite contribution aux développeurs PHP, une série de fonctions que j'ai développé pour résoudre pas mal de problèmes qui se posent au quotidien. J'espère qu'elles seront utiles à d'autres que moi.

1. Trouver le nom d'un département à partir de son numéro

2. Trouver la région à laquelle appartient un département
3. Convertir une date SQL (YYYY-MM-DD) en date lisible
4. Vérifier une adresse e-mail saisie par un utilisateur
5. Couper un texte à 100 caractères sans couper un mot
6. Retourner une ou plusieurs lignes de la base de données en une seule instruction
7. Retourner une seule valeur dans une ligne de la base de données
8. Supprimer tous les accents d'une chaîne
9. Mettre en chaîne accentuée en majuscules
10. Faire un lien automatique sur les adresses e-mails en toutes lettres

> Voir la suite

Il y a longtemps que cette collection d'icônes est connue, mais je ne pouvais pas ne pas en parler. Le principe : des icônes dont la couleur est définie par la propriété background-color en CSS. C'est léger, pratique et visuellement attractif.

Sanscons, par Some Random Dude

Metteurs en toile modernes, fabricants de sites soucieux de produire du bon site, il existe un guide très complet des bonnes pratiques pour assurer la qualité des services en ligne. Si ce n'est déjà fait, consultez la liste des bonnes pratiques Opquast et testez votre site. Elaborée et réactualisée par une communauté active, cette liste est une étape majeure dans la mise en place d'un standard de qualité, dans un domaine où l'impact visuel prime souvent sur les questions d'usabilité et d'accès aux contenus.

Pour les développeurs d'applications en ligne amateurs d'usabilité, l'article Usability for Rich Internet Applications de Donna maurer fournit de bons exemples de design.

> Voir la suite

Un outil utile pour créer des chartes graphiques colorées, le color scheme generator.

Très sympa aussi, le Type Tester pour tester le rendu des polices de caractères et générer le style CSS.

Une vaste collection d'icones pour vos applications et vos sites Web : Silk Icons

A voir aussi, la page d'un des créateurs des icones Gnome et OpenOffice.org

Après avoir compris que les tailles en pixels appartenaient à l'Axe du Mal, j'ai longuement cherché la méthode la plus efficace pour dimensionner du texte avec des valeurs relatives (donc accessibles) sans trouver la formule idéale (simple et efficace). J'ai testé et approuvé celle proposée par ce blog : réduire la font-size du body à 62.5% (ou plus), puis utiliser des tailles en em pour toutes les balises, le paragraphe p étant à 1em, le h1 par exemple à 2em. Très efficace !

How to size text using ems | clagnut/blog

De très bons liens (en anglais) sur tout ce qui touche au design web : icones gratuites, ajax, formulaires, fontes, inspirations...

Vitaly Friedman | Blog: 25 Sites You Shouldn't Have Missed in 2005