e-criture est un nouveau blog (il a démarré il y a un mois) consacré à l’écriture pour le web. Pour l’instant il y a encore peu d’articles mais on peut espérer que les auteurs de ce blog parleront non seulement de rédaction mais développeront également tout ce qui concerne l’analyse et la structuration de l’information.

Ceci est l’occasion pour revenir sur quelques sites intéressants à lire sur cette question :

• redaction.be : explique comment les internautes se comporte devant les pages web, ce qui permet d’en tirer quelques règles pour mieux présenter l’information
• 60questions.net : un blog sur l’écriture web et plus généralement des questions d’ergonomie et de design web
• Rédiger pour le web : un document résumant les principes généraux et qui peut être très utile pour l’initiation des nouveaux rédacteurs, par exemple.
• écrire pour le web : blog consacré à la question
• deux articles à lire sur uZine : Présenter des textes longs à l’écran et Petit guide typographique à l’usage de l’internet
• le série d’articles Ecrire pour les blogs à lire sur expressions.be

Le blog Ergonline nous fait part d’un jeu proposé par reussiteweb. Il s’agit de retrouver 10 erreurs dans un site fictif.

J’en ai trouvé environ la moitié mais j’ai regardé un peu vite, sans même jeter un coup d’œil au code (je viens quand même de zieuter et bah, oui, c’est un peu lourd...).

Je trouve aussi que certaines pages quasiment vides sont sans intérêt : la page "cadeaux", par exemple, qui, de plus, donne des conseils que l’on ne peut pas suivre. Ainsi on peut lire "veuillez nous rejoindre". Ah oui, mais comment ? Il n’y a pas de lien. Les boutons du menu ne réagissent pas au survol de la souris : seul le curseur change de forme. Il me semble pourtant qu’il est préférable de montrer qu’il y a là un lien, en faisant réagir le bouton.

Je n'ai pas vu s’il y avait des fautes d’orthographe dans le texte parce qu’il est écrit beaucoup trop petit pour qu’on ait envie de le lire ;-)

Pour être dans le ton aujourd'hui il semblerait qu’il soit préférable d’utiliser certaines couleurs (avec un certain penchant pour les mélanges de rose bonbon et d’orange ou de cyan et vert prairie), de ne pas lésiner sur les ombrages, les reflets, les fines rayures et toute la panoplie dont on trouve moult tutoriels, comme par exemple dans cet article, intitulé tout simplement web 2.0 webdesign tutorial. Ce n’est pas moi qui irais m'en plaindre, je trouve ça en général assez joli. (Sauf si on a la mauvaise idée d'écrire en vert clair sur blanc).

Mais à force de voir toujours la même chose, on va peut-être finir par s’en lasser et je me demande s’il est encore judicieux de faire de nouveaux sites en reprenant toutes ces ficelles. Il paraît d’ailleurs que cela va bientôt changer et que d’ici quelques années (ou peut-être avant ?) on devrait voir apparaître beaucoup plus de sites comme celui-ci. Je dois avouer que je ne trouve pas ça très joli mais comme je ne suis pas graphiste, je n’ai peut-être simplement pas compris...

C’est le titre d'un billet de Fred Cavazza consacré au formulaire d’inscription à remember the milk et que je viens de retrouver parce que le formulaire d’inscription à Jamendo me donnait une impression de déjà-vu.

En y regardant de plus près, le formulaire de Jamendo me paraît cependant encore plus se rapprocher de la perfection :

Lire la suite

Voici un outil pratique pour tester le rendu d’un texte avec différentes configurations, afin de choisir au mieux ce qu’il conviendra de mettre dans sa feuille de style : http://typetester.maratz.com/. On peut cliquer sur "Get CSS" pour avoir le code tout cuit à mettre dans son fichier css. Le problème, c’est qu’on ne peut tester qu’avec les fontes installées sur son système ce qui limite un peu le choix.

Pour compléter, le site présente aussi un tableau comparatif des polices les plus fréquemment utilisées sur le web : http://webdesign.maratz.com/lab/fonts_table/ à ouvrir dans différents navigateurs pour voir les différences qu’il peut y avoir. Là aussi, les images de ladite page affichée par différents navigateurs auraient été bienvenues.

Heureusement que www.codestyle.org y a pensé ! Dans l’article Combined font survey results, il fait le point sur la question. On peut, en un coup d’œil, voir quelles sont les polices les plus répandues, quel que soit le système utilisé.

Et comme c’est toujours utile de les avoir sous la main, voilà la liste des caractères de la norme ISO 10646-1.

Je n’avais pas pu assister aux conférences qui ont eu lieu à Paris le 14 novembre (mais pourquoi donc ne l’ai-je pas vu dans l’agenda de l’ENST ?), mais grâce aux merveilles de la technique, il est possible d’y assister presque comme si on y était sur le site de http://www.simpleweb.fr/

Dans son article Typographie web : gérer la taille du texte avec les « em », Alsacréation explique comment utiliser cette unité, qui est la seule permettant un redimensionnement du texte, quel que soit le navigateur.

Cela paraît compliqué de prime abord mais il suffit simplement de connaître les règles.

Lire la suite

• Color Palette Generator est un site qui permet d'extraire les principales couleurs d'une photos. Intéressant pour faire les couleurs d'un site à partir des couleurs d'une photo qu'on mettra en fond de page ou dans l'entête. A noter que l'outil propose deux versions des couleurs, une palette vive et une palette plus terne. L'image doit déjà être en ligne (il faut donner son URL) et on ne peut pas télécharger de photo à analyser. C'est un peu dommage.
• Sur le même site www.degraeve.com, on trouve d'autres outils intéressants : Crop Your Image (pour redimensionner ses images en ligne), Img2txt (pour faire une image dans le style ASCII-art), la table des caractères ASCII, des caractères spéciaux et des caractères spéciaux dans les URL.

Vu sur Modern Life is Rubbish un article sur les dernières tendances du design web : fonds blancs ou très clair, fines diagonales, fontes larges, effets de reflets, dégradés, nom de domaine, tags et personnalisation.
Un autre article, résumé en français sur barbablog nous apprend qu'en plus des fonds blancs ou neutres, des ombres, des dégradés, effets 3D et jolies icônes, la tendance est à la mise en page fixe et centrée sur la page, et à deux colonnes, pas plus. Ouf, j'ai bon :-)

Les couleurs flashy, par contre, ça me plaît un peu moins. Par exemple spark-angels.com, à première vue, c'est vif, c'est frais, mais les caractères en vert sur fond blanc, ce n'est pas très lisible. Et si on est daltonien, ça peut même être presque illisible.

Travaux pratiques

Quelques idées de réalisation pour être dans l'air du temps :

• réaliser un titre dans le style "web 2.0" :

• Et encore un autre

• faire des reflets en javascript :

• la palette de couleur du web 2.0 (source: Modern Life is Rubbish:

Ce tutoriel de nubiumgraphik.com explique comment afficher une bulle d'aide à la manière web 2.0