Selon Seth Godin, et j’applaudis des deux mains, une page Web doit avoir un objectif unique pour accompagner l’internaute optimalement. Je publie ici la traduction d’une page du livre électronique gratuit de Seth Godin Knock knock.

“‘’A quoi sert une page Web ? A quoi sert celle-ci ?

Cela semble simple n’est-ce pas ? Pourtant ça ne l’est pas ! Ca ne l’est pas parce que de très nombreuses pages sont perverties par deux, trois ou des centaines d’objectifs. Le Web est un outil puissant mais en permanence mal utilisé par des gens qui pensent que parce qu’ils peuvent le faire, ils doivent le faire.

Alors mentez-moi pour un moment et prétendez que vous avez une page qui n’a qu’un seul objectif, qu’une seule action. Que celle-ci accompagne l’internaute vers une autre page. Et que souvent (le plus souvent possible), vos pages amènent cos visiteurs à effectuer les actions que vous avez souhaité et pour lesquelles vous avez créé votre site Web.'’”

Redoutable !

Chaque internaute possède un ordinateur et un écran. Chacun choisit son écran et sa résolution en fonction de son budget, de son confort ou de sa vue. Jusqu’ici nous ne vous avons rien appris. Pourtant, il s’agit des données essentielles qui permettent de comprendre les différents choix qui s’offrent à vous lors de la conception de votre site Web.

En effet, il convient tout d’abord de prendre en considération les statistiques mondiales : près de 35% des internautes utilisent un écran avec une résolution 800×600, il est donc nécessaire de ne pas se priver d’un tiers des internautes potentiels et puisque “qui peut le plus peut le moins”, le site s’appuiera sur cette définition pour définir son cadre principal (soit une largeur réelle de 780 pixels).

En conservant ce format, il existe trois grands styles de site Web : icy, liquid, fluid…

Icy : le site possède une taille figée de 780 pixels et il est calé à droite ou à gauche.

Liquid : Le site possède une taille figée de 780 pixels mais il est systèmatiquement placé au centre de la page (quel que soit le navigateur et sa taille)

Fluid : le site se redimenssionne automatiquement en fonction de la largeur du navigateur. Nous ne recommandons plus cette solution notamment à cause de l’avènement des écrans ‘wide’, c’est à dire au format allongé type 16/9e. En effet votre site prévu pour être lisible en 780 pixels de large est ‘étiré’ dans un navigateur de 1280 pixels de large, la création initiale est totalement faussée (sauf si elle prend en compte ce facteur) et la lisibilité du site en souffrira irrémédiablement.

En fonction des créations retenues, on privilégiera donc le format ‘icy’ ou ‘liquid’.

Pénurie de temps et surcharge d’informations à traiter font que nous lisons de moins en moins. Dans ces conditions il est nécessaire de prêter une grande attention à l’écriture Web pour développer la confiance d’un internaute jusqu’à un contact, une vente ou toute autre action interactive. Quelques clés permettent de baliser le chemin de la conception éditoriale d’un site et de l’écriture des pages.

Dans le monde de l’entreprise, nous ne lisons plus ! Les courriers sont parcourus en diagonale, les notes sont regardées du bout de l’oeil et ne parlons pas des mémos et e-mails qui partent à la corbeille (physique ou informatique) sans être ouverts. Pourquoi ? Parce que nous manquons tous de temps. Le temps de travail est en effet restreint par la polyvalence de plus en plus nécessaire au sein des entreprises (les RTT augmentent les risques d’indisponibilité des vos interlocuteurs et collaborateurs). Mais la cause principale réside dans la profusion de messages et d’interruptions que nous rencontrons tous au fil de la journée. Le temps file, s’échappe. Alors puisque le temps devient rare, il est précieux et la lecture d’un document en souffre, pourquoi perdre 5 minutes à lire ce document, quel sera mon bénéfice ?

Le phénomène s’aggrave encore dès lors que l’on passe sur le Web, la possibilité de compréhension par les visuels ou animations, l’instantanéité du média et (encore une fois), la profusion d’informations font que les pages Web sont lues en diagonale. Il ne faut pas oublier également que l’internaute a choisi de venir sur votre site mais qu’il est, pour lui, tout aussi simple de le quitter (”vous n’êtes qu’à un clic de vos concurrents”). Alors comment faut-il écrire pour le Web ?

Cette question primordiale est bien souvent oubliée pour deux raisons majeures : la méconnaissance du média entraîne la croyance que “c’est pareil que le papier” et le fait que l’attention soit bien souvent portée sur l’ergonomie et le design plus que sur le contenu. Or le contenu est une donnée primordiale (”content is king”). mais avant d’en aborder les mécanismes d’écriture, posons-nous une autre question fondamentale : qui lira cette page ?

Clé n°1 : Les lecteurs

Et il existe deux grands types de lecteurs : les humains et les robots. Il ne s’agit nullement de science-fiction, je parle des “spiders” des moteurs de recherche, ces programmes qui scrutent et indexent vos pages pour y référencer vos mots-clés. Ils sont les maîtres d’une partie de votre destin sur la toile, ils décideront de votre “classement” sur Google, Yahoo et consorts. Et l’un des facteurs de votre position dans la liste des résultats concernera le contenu de votre page. Alors oui, les robots lisent vos pages et à moins que vous ne souhaitiez pas être référencé dans les moteurs, il vaut mieux les prendre en compte.

Nota : Lorsque je parle ici de lecture de la page par les robots, je concentre mon propos sur le contenu éditorial (visible) de la page et je laisse - temporairement - de côté l’aspect technique du code. Lequel doit également être optimisé pour être accessible aux deux publics.

La même page sera donc lue à la fois par des internautes et des robots. Elle doit être conçue pour répondre aux impératifs de ces deux publics. C’est donc la première difficulté de l’écriture Web qui consiste à créer un équilibre éditorial.

Clé n°2 : La conception éditoriale

Définition : Conception éditoriale
‘’La conception éditoriale du site définit son cadre de communication, de quelle façon les contenus sont-ils découpés, en combien de pages, quel ton est retenu ? Comment le menu proposera-t-il d’accéder à tous ces contenus en 3 clics maximum ?

Le découpage des contenus répond à deux objectifs principaux : permettre à l’utilisateur d’appréhender au mieux les messages bien sûr mais aussi développer une structure de page qui optimise auprès des moteurs de recherche la pertinence des mots-clés choisis.'’

Retenons un élément particulier de cette définition : le découpage éditorial ou comment les contenus sont-ils répartis en plusieurs pages. Il m’arrive encore de rencontrer des offres de création Web “à la page” (Formule machin : x euros pour 10 pages). Outre le mauvais calcul en terme de rentabilité que représente une telle offre pour l’agence, cette vision obsolète continue de pervertir la conception d’un site Web puisque pour des raisons budgétaires, on réduit le nombre de pages tout en augmentant le contenu de chacune d’elle. Or c’est là oublier l’une des règles fondamentales de l’écriture Web et du développement de la confiance de l’internaute : une page doit avoir un objectif et un seul.

Il vaut mieux en effet augmenter le nombre de pages pour présenter des contenus lisibles et facilement “appropriables” par l’internaute plutôt qu’un maelstrom abscons et souvent peu appétissant. Attention à ne pas oublier que la multiplication des pages doit s’accompagner d’une recherche de continuité de la lecture. C’est à dire que les fins de pages devront inciter à découvrir les suivantes.

Mon propos sur le découpage des pages ne concerne évidemment pas les blogs qui s’appuient sur une structure organisationnelle particulière de l’information.

A venir dans un prochain billet :

Clé n°3 : Lecture et confiance, Acheter du temps. Clé n°4 : De l’air ! Clé n°5 : Les structures de pages.

La conception de sites Web est régie par des principes informatiques, les pages conçues sont hébergées sur des serveurs et interprétées ou « lues » par un navigateur.

Les premières difficultés sont rencontrées lorsque légitimement on souhaite que le site soit lu par tous de manière optimale avec les mêmes designs et les mêmes fonctionnalités. C’est l’internaute qui décide de son navigateur (Internet Explorer, Safari, Mozilla, Opera, Firefox…) et de son système d’exploitation (PC, Macintosh, Linux). Or chacun de ces logiciels propose des fonctionnalités et des rendus différents.

Que dire également des tailles d’écrans (29% des internautes visualisent leur écran en 800 x 600 pixels (janvier 2005), 50% en 1024×768 pixels) et des PDA ou Smartphones ? Faut-il développer autant de versions du site qu’il existe de possibilités de le lire ?

Dans le passé, la « guerre des navigateurs » et l’utilisation de certaines fonctionnalités spécifiques induisaient ces développements multiples. Aujourd’hui, l’avènement des standards reconnus permet de garantir une visibilité du site pour tous dès lors que l’on respecte certaines règles :

- séparation du contenu et de la forme - utilisation des standards du W3C et du CSS

Il est inconcevable de proposer un site Web qui se priverait de 30%, 50% ou 80% de ses internautes potentiels, pourtant, c’est le cas d’un grand nombre ! Que dire par exemple des sites Web développés pour des écrans 1024×768 (sous prétexte qu’ils concernent le majorité) qui obligent 30 à 35% des internautes à utiliser un ascenseur horizontal disgracieux et définitivement gênant…

Notons enfin que les versions des navigateurs évoluent en général beaucoup plus vite que les sites Web et vous comprendrez toute l’importance de garantir à vos pages un principe de compatibilité ascendante (c’est à dire fonctionnant aujourd’hui et demain).

Malheureusement souvent ignorés (et passés sous silence par les webdesigners peu expérimentés), ces principes fondamentaux sont pourtant un gage d’accessibilité des pages par les moteurs de recherche et donc du référencement de votre site. Les techniques existent pour permettre à un site même dynamique (URL rewriting) d’être convenablement référencé par Google et consorts, encore faut-il être conscient de l’importance d’un code « propre ». L’expérience du webdesigner ou de l’agence dans ce cas est un facteur crucial de réussite.

Nous sommes tous conscients, professionnels du Web et chefs d’entreprise, que la durée de vie d’un site Web est courte (2 à 3 ans en moyenne). Pourtant, cela ne suffit pas à garantir le bon fonctionnement du site pour tous les internautes durant ce laps de temps : nouveaux navigateurs, modifications radicales de certaines fonctionnalités sur des systèmes d’exploitation (Microsoft XP2 par exemple), développement des connexions hors ordinateurs (PDA, smartphones…) en sont les causes principales.

La technologie peut donc être un facteur de vieillissement prématuré de votre site Web. Face à cette situation les professionnels du Web réagissent de deux façons : développements en compatibilité ascendante ou descendante.

La compatibilité descendante consiste à développer des pages Web qui fonctionnent sur tous les navigateurs existants et antérieurs (jusqu’à la version 3 de Netscape ou 4 d’Internet Explorer). Si l’intention est louable, nous rapellerons cependant que ces navigateurs ne sont plus utilisés aujourd’hui qu’à 0,2 % (NN4) et généralement par des utilisateurs qui possèdent d’autres navigateurs plus récents. Développer sous ce principe induit des restrictions dans la conception, multiplie les développements (plusieurs versions du même site pour répondre à tous les impératifs techniques) et ne garantit pas du tout le bon fonctionnement du site dans le temps.

La compatibilité ascendante adopte une autre logique basée sur les standards du Web, l’utilisation de feuilles de style et la séparation du contenu et de la forme. Les mises à jour et modifications sont alors facilitées et les évolutions des navigateurs ainsi que le développement des connexions par PDA et smartphones ne seront pas des obstacles à la consultation du site. Bien sûr, le développement en compatibilité ascendante ne permet pas de produire un design identique sur les navigateurs d’ancienne génération (moins de 1% des utilisateurs) mais elle n’empêche pas l’affichage des contenus.

Pour résumer : la compatibilité descendante est une procédure lourde, coûteuse et si elle garantit le fonctionnement de navigateurs dépassés depuis plus de 5 ans, elle est problématique sur l’avenir ; la compatibilité ascendante quant à elle s’appuie sur des standards éprouvés et moteurs de l’évolution des navigateurs, la séparation du contenu et de la forme garantit la pérénité du site Web et facilite donc un meilleur retour sur investissement ?

En tant que chef d’entreprise, souhaitez-vous devoir refondre votre site Web dans 6 mois pour cause d’évolution technologique ?

La Webline exprime en quelques lignes (une ou deux phrases) le métier, le positionnement et les principales valeurs ajoutées de l’entreprise. Présente dès la page d’accueil, elle est une référence (incluant les mots-clés principaux) pour les moteurs de recherche.

Le terme de Webline vient de l’analogie avec la baseline d’un logo et d’une marque. Laquelle s’attache à positionner ou à souligner le positionnement de la marque. La webline a le même objectif mais cette fois tourné vers deux cibles aux perceptions distinctes : les internautes et les moteurs de recherche.

Finaliser une webline efficace vers ces deux publics est un exercice qui requiert une bonne analyse de l’entreprise, de son positionnement, de ses valeurs et de ses objectifs en ligne : tous les facteurs nécessaires à une conception réussie.

La conception éditoriale du site définit son cadre de communication, de quelle façon les contenus sont-ils découpés, en combien de pages, quel ton est retenu ? Comment le menu proposera-t-il d’accéder à tous ces contenus en 3 clics maximum ?

Le découpage des contenus répond à deux objectifs principaux : permettre à l’utilisateur d’appréhender au mieux les messages bien sûr, mais aussi développer une structure de page qui optimise auprès des moteurs de recherche la pertinence des mots-clés choisis.

Référence dans le domaine du design Web, Jeffrey Zeldman, auteur de A list Apart, voit son ouvrage “Design Web : utiliser les standards” publié en français. Je suis en pleine lecture et déjà je vous le conseille, que vous soyez webdesigner ou chef d’entreprise… J’y reviendrai.

A trouver et à acheter sur www.amazon.fr

Le Web étonne sans cesse pour ses possibilités créatives. Flash notamment, l’outil vedette de Macromedia permet l’utilisation d’animations de sons et de video (de plus en plus acceptés du fait de la généralisation des haut-débits). Voici une adresse qui chaque jour vous propose ce que l’on peut faire avec ce type d’outil.

Attention cependant, le design ne doit pas nuire au contenu et au référencement, l’utilisation de Flash est donc à étudier et à cadrer…

Favorite Web site awards