La favicon

Qu’est-ce qu’une favicon ?

La favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites. Elle apparaît également dans le menu des favoris / marques-pages. Enfin, pour les utilisateurs d’onglets, elle apparaît sur chaque onglets.

Exemple d'une favicon devant l'URL d'un site, dans la barre d'adresseLa favicon dans la barre d’adresse – Elle participe ainsi à l’identité visuel du site et contribue donc à sa mémorisation et son identification
Exemple d'une favicon dans la liste des favorisLa favicon dans la liste des favoris
Exemple de favicon sur les onglets de navigationLa favicon dans les onglets – La favicon est un repère particulièrement agréable dans l’utilisation des onglets. Elle permet de rapidement retrouver le site que l’on recherche (visuelement identique aux autres autrement)

Pourquoi avoir une favicon sur son site ?

La favicon est un élément supplémentaire qui va participer à l’identité du site. Elle est un facteur supplémentaire qui fait qu’on identifie et mémorise le site ; un peu comme un mini-logo.

Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste (les favoris, ou les onglets notamment).

Enfin, d’un point de vue purement pratique, avoir une favicon permet de limiter les logs d’erreur : en effet, certains navigateurs la recherche automatiquement à la visite d’un site ; c’est autant d’erreurs 404 créées.

Comment fabriquer une favicon ?

Afin de pouvoir s’adapter, une favicon doit être créée au moins au format 32 x32 pixels, d’après la Bonne Pratique Opquast n°30. Mais c’est au format 16×16 pixels qu’elle s’affiche la pluspart du temps. Il faut donc prévoir que l’icône soit toujours “lisible” et que l’image soit propre dans ces deux tailles. Une favicon peut également être prévue en 48 x 48 pixels.

Une favicon peut être une image de différents formats : jpg, gif, png, bmp, mng, xbm et ico. Parmis ces formats, seul le .ico n’est pas reconnu par les standards. Néanmoins, il reste nécéssaire car … c’est le seul compris par Internet Explorer ! Les navigateurs standards comprennent l’ensemble des formats.

Il est à noter que certains de ces formats permettent une animation (voir sont un format vidéo !). L’icône peut donc ne pas être figée. Il faut pourtant en user avec parcimonie : en effet, les animations en boucles peuvent être désagréables et perturber la lecture d’un site ; elles peuvent agacer.

Pour créer l’image de chacun de ces formats, vous pouvez utiliser votre éditeur graphique habituel. Néanmoins, pour le .ico, il existe des outils en ligne très pratiques, comme le très bon FavIcon from Pics. Il suffit de préparer une image au format gif, jpg, png, ico ou bmp (en 32 x 32 pixels) et l’outil génère une icône multi-format (32 x 32 et 16 x 16 pixels).

Le code pour insérer une favicon

Pour insérer votre favicon, vous devez :

  • placer l’image à la racine de votre site ;
  • placer le code d’appel à l’image sur votre page index.

Là encore, il y a le code standard compris par les navigateurs standard … et le code pour Internet Explorer. Ainsi, si vous voulez insérer les deux cas, utilisez le code ci-dessous :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!-- pour IE -->
<link rel="icon" type="image/png" href="/favicon.png" /><!-- pour les navigateurs standards -->
Internet Explorer lit la première déclaration et l’applique. Il ne tient pas compte de la deuxième qu’il ne comprend pas. Les navigateurs standards vont lire et comprendre la première déclaration, puis la deuxième. Ils appliqueront celle qui arrive en dernier.

A lire :

Concevoir un plan de site

L’utilité du plan de site.

Le plan du site comme aide à la navigation

La toute première fonction d’un plan du site est d’aider le visiteur dans sa navigation.
Cela peut, par exemple, être un visiteur qui recherche un type d’information précis et n’arrive pas à le trouver dans le menu, ni dans les pages. Si le site n’a pas de module de recherche, ou si l’internaute ne souhaite pas y faire appel, il peut alors utiliser le plan du site.

Mais l’internaute peut tout aussi bien avoir consulter le plan du site sans avoir fait une seule recherche dans les rubriques du menu ou en navigant. Il se peut très bien que le plan soit le premier lien auquel il ait recours. Soit qu’il recherche une information pointue et estime qu’il la trouvera plus facilement en ayant accès aux sous-rubriques et autres niveaux directement. Soit, tout simplement, pour se donner une idée de la prestation d’un site et des domaines couverts.

Des mot-clés et des liens pertinents

Le plan du site, par sa fonction même, va reprendre les mots importants du site : le titre des pages.

Mais la plus grande force encore du plan du site vient du fait que c’est un véritable réseau de liens sur le site.
D’abord, en listant la totalité des pages du site (ou des pages principales), on s’assure que le robot des moteurs de recherche trouvera chacune d’entre-elles. C’est donc une page que le spider doit facilement trouver.

Comment faire ?

Emplacement

On a vu que le réseau de lien que représente le plan du site est un avantage pour le référencement. Cet avantage est réellement efficace si de nombreuses pages pointent vers le plan du site. Mais de toute façon, d’un point de vue ergonomique, la présence d’un lien vers le plan du site sur chaque page est indispensable. En effet, on ne peut savoir d’avance à quel moment un visiteur va en avoir besoin. Et comme c’est un outil d’aide à la navigation… il doit facilement être trouvable !

Par habitude, on s’attend à trouver un lien vers le plan du site au moins en bas de page.

Présentation

Un plan de site peut-avoir un aspect très différent selon que le site est composé de quelques pages ou de plusieurs centaines ! Il n’y a pas une façon de faire un plan mais il faut savoir s’adapter à la situation.

Dans le cas d’un site à beaucoup de pages, vous n’allez pas lister dans votre plan la totalité (ou en utilisant une solution faisant apparaître des sections, par exemple). Vous pouvez très bien, également, faire un plan sur plusieurs pages. Gardez d’ailleurs à l’esprit que Google déconseille d’avoir plus de 100 liens dans une page et que les règles d’accessibilité préconisent 40 liens maximum.

Au contraire, pour le plan d’un site ayant peu de pages, vous pouvez vous permettre un plus grand niveau de détails. Vous pouvez même aller jusqu’à une description succincte de la page derrière chaque lien, pour mieux aiguiller l’internaute (et glisser quelques mot-clés !)

Pour que votre plan soit vraiment utile à l’internaute, pensez à bien l’organiser. Hiérarchisez les rubriques, les pages.
Les marges, les couleurs peuvent vous aider à créer des zones. N’oubliez pas que si votre plan est agréable à consulter, cela pourrait insciter l’internaute à le regarder dans le détail et, peut-être, à voir des pages qu’il n’aurait pas pensé à chercher autrement.

Code

Un plan, ce n’est rien d’autre que la liste des pages du site. Il faut donc utiliser les balises <ul> <li> (dans certains cas <ol> <li>). Vous aurez certainement à imbriquer ces listes.

La syntaxe est la suivante :

<ul>
        <li>Rubrique 1
                <ul>
                        <li>Sous-rubrique 1</li>
                        <li>Sous-rubrique 2</li>
                </ul>
        </li>
        <li>Rubrique 2</li>
</ul>

Pour que votre référencement soit vraiment optimisé, n’oubliez pas d’utiliser l’attribut title sur vos liens.

La page 404

Votre site devrait contenir une page 404 personnalisée. Si un internaute arrive dessus, c’est soit qu’il y a une erreur dans l’URL qu’il a tapée.

Soit il identifie et corrige son erreur immédiatement, soit la page n’existe plus ou tout autre situation. Il faut alors aider votre visiteur et quoi de mieux que le plan du site ?!

Il est donc utile de prévoir, si on le peut, le plan du site dans un include qui serait appelé depuis la page plan du site et depuis la page 404.

Des exemples

Un exemple sur www.service-public.fr www.service-public.fr/aide/plan.htmlPour ce site aux nombreuses pages, en plus des rubriques déjà présentes, le plan a été découpé en trois espaces thématiques.
Un exemple sur http://pourpre.com http://pourpre.com/pied/plan.phpPour ce site très riche autour d’un thème unique, la courte description a côté des rubriques et des sous-rubrique apporte une aide en plus.

Les bases du référencement naturel

Le contenu

La première règle du référencement naturel est à la fois la plus simple et la plus efficace : privilégier le contenu ! Un site développé dans le soucis de son lecteur fera un site optimisé pour le référencement naturel. Cela implique de penser à l’accessibilité, à la rédaction, à l’ergonomie, même.

Afin de bien préparer le contenu et le référencement d’un page, il faut avoir listé les mots-clés, les expression que l’on souhaite optimiser. Viennent s’y ajouter les mots et expressions faisant parti du champs lexical traité, les synonymes, les anglicismes, etc. Cette base est à garder en tête tout au long de la conception et de la réalisation de la page.

Au coeur de ce contenu, la présence et la densité des mots-clé joue un rôle dans la pertinence de votre page. Attention tout de fois à ne jamais exagérer ! 50 occurrences d’un même mot

dans une page de 100 mots n’est pas une bonne méthode. Si vous vous posez la question de la limite à ne pas dépasser … pensez à l’utilisateur, à ce que vous feriez si le référencement naturel n’avait aucune importance pour vous !

Pour placer vos mots-clé dans le contenu de la page, vous pouvez utiliser l’attribut alt des images. Cet attribut, obligatoire pour des raisons d’accessibilité, doit avant tout donner un renseignement sur l’image ; il ne s’agit pas de détourner sa fonction. Mais il peut être également l’occasion de placer une occurrence d’un mot clé ou d’un synonyme.

Toujours en respectant la fonctionnalité du code, les libellés de liens, les attributs title des liens et des images permettent d’optimiser la page.

Si l’on a, au moment de la conception de la page, bien à l’esprit le sujet de la page, les mots importants, les sujets connexes, cette présence des mots-clés dans les différents bouts de code devrait se faire naturellement.

L’autre avantage, c’est que chaque page du site est ainsi ciblée par rapport à sa propre thématique (il ne s’agit pas de cibler la thématique générale du site). Vous obtenez ainsi un site aux pages ayant leur propre titre (la balise <title>), leur propre description, leurs propres mot-clés, etc. Là encore, vous privilégiez l’internaute qui s’y retrouve mieux dans des pages personnalisées et cohérentes et les moteurs de recherche qui découvre un site riche et sans répétitions douteuses.

Le respect du code HTML et notamment de l’utilisation des balises est encore un point bénéfique. Le robot, qui ne “voit” pas le site mais lit le code, est sensible à un code précis.

L’utilisation des balises <h1> à <h6> hiérarchise la page, les informations et renseigne le moteur de recherche, une nouvelle fois, sur les mots importants de la page. Dans une moindre mesure, les balises <strong> et <em> jouent le même rôle.

La mise à jour

Un site mis à jour régulièrement augmente aussi ses chances d’être bien référencé : parce qu’il apparaît ainsi comme un site vivant et intéressant pour les internautes et parce que les moteurs d’indexation reviennent plus souvent sur un site qui change. C’est un critère qui peut vous avantager.

Les liens

Il faut particulièrement veiller à la qualité des liens, qu’ils soient entrants ou sortants.

Les liens bénéfiques au référencement sont ceux qui pointent sur ou qui viennent de pages au sujet analogue.

Bien sûr, un lien venant d’un site de qualité, au code soigné, au référencement optimisé, a un poids plus positif pour votre propre référencement. Et, dans la logique, plus votre site est lui même soigné et pertinent, plus un site de qualité aura envie de vous citer. Là encore, la solution est donc encore de privilégier l’internaute, le contenu.

Attention, certains webmasters étant peu scrupuleux ou très joueurs avec le référencement, Google a appris à ce méfier des pages de lien et conseille maintenant de ne pas dépasser une 100aine de liens par page. Cela peut, dans certains cas, être un critère pénalisant. Pour information, les critères Accessiweb déconseillent, de toute façon, de dépasser 40 liens par page.

Les informations “extérieures”

La présence de mots-clé dans l’URL peut être un avantage. Pensez-y au moment de créer un nouveau sous-domaie, un nouveau répertoire ou un nouveau fichier. Dans chacun de ces choix, utilisez des séparateurs de mot, tel que le tiret “-” et non, par exemple, le underscore “_” afin d’éviter que Google amalgame votre nom en une seule expression. Pour l’utilisateur aussi, cela peut être un petit “plus” : s’il copie l’URL pour la conserver, pour l’envoyer à quelqu’un, etc. Une URL significative rend donc, encore une fois, service à l’internaute comme au référencement naturel.

Les deux balises meta “description” et “keywords” si elles sont de plus en plus dépréciées ne sont pas à placer sur le même plan. En effet, la description est encore utilisée parfois dans les résultats de recherche des moteurs. C’est donc un allier précieux pour inciter un internaute à venir trouver ce qu’il cherche sur notre site.

Réussir ses liens

L’apparence

Pour que votre site soit fonctionnel, les liens doivent être immédiatement reconnus comme tels. Ils doivent donc impérativement se différencier du texte normal. L’usage veut que le lien soit souligné et bleu. Si la majorité des sites s’affranchissent du bleu (créant ainsi un apprentissage de l’internaute), le soulignement reste encore un repère utile. Il est d’ailleurs fortement déconseillé d’utiliser le soulignement pour autre chose que les liens hypertextes. L’effet en est TRES perturbateur.

Si on décide de se passer du soulignement, il faut lui substituer un autre repère visuel. C’est le cas, par exemple, des menus qui sotn souvent présentés de telle sorte qu’ils n’ont pas besoin d’être souligné. C’est aussi le cas des boutons dans lesquels on reconnaît immédiatement une action à faire.

Pour plus de fonctionnalité, les CSS peuvent vous aider à donner des repères supplémentaires en fonction des actions (survol du lien, liens déjà vus, etc).

Le libellé

Il faut le soigner à plusieurs niveaux. D’abord, parce que c’est ce qui va -ou non- insciter l’internaut à cliqurer. Vos liens mis en valeur comme vu dans le paragraphe “L’apparence”, il est possible que l’oeil de l’internaute ballaye le page, entre autres, de liens en liens.

Le libelé doit donc être clair et explicite. Evitez les liens trop génériques et, si vous optez quand même pour un lien type “En savoir plus”, n’oubliez pas de préciser de quoi vous parler : “En savoir plus sur le livre L’ignorance de Milan Kundera”.

Les moteurs d’indexation sont également très sensibles aux libelés des liens. Si vous pensez à rédiger un lien parlant, il auta de grandes chances de contenir des mots-clé, très utiles pour votre référencement naturel.

Pour un lien d’action, utilisez un berbe à l’infinitif qui décrit bien l’effet induit par le clic. Exemple : “Valider mon choix”.

Attention, par contre, à éviter les libelés trop longs. Le lien doit être explicite en lui-même. Pour qu’il puisse être un bon repère pour l’internaute, il est préférable qu’il ne fasse que quelques mots.

De plus, les règles d’accessibilité préconisent moins de 80 caractères par liens.

L’attribut “title”

Il n’est pas un élément obligatoire, mais il apporte plusieurs avantages.

En premier lieu, il vous permet de (et il doit) donner des information supplémentaires à l’internaute. Sur le type d’ouverture (“Nouvelle fenêtre”), sur le poid à charger (“format .pdf – 53k) ou des renseignements plus précis (“Lire la fiche de lecture : Le Petit Prince d’Antoine de Saint-Exupéry” sur un lien “Le Petit Prince”), etc.

Cela peut être l’occasion de renforcer votre référencement naturel : densité des mots-clé ou couverture du champ lexical.

Pour finir, ces informations supplémentaires sont également très utiles en terme d’accessibilité. Là aussi, il ne faut pas dépasser 80 caractères.

Le lien entrant

Avoir d’autres sites qui font un lien vers le votre est une très bonne chose (surtout si la page qui vous cite traîte d’un sujet connexe). Cela augmente, bien sûr, vos chances d’être trouvé par l’internaute et c’est bon pour le référencement naturel. Si vous ne pouvez agir que rarement sur l’apparence des liens chez un site partenaire qui fait un lien vers vous, veille par contre à la qualité du libelé et à la présence de l’attribut “title”.

Dans le cas d’un partenariat rémunéré, un repère modifie l’URL afin de savoir que le lien a été cliqué. Certaines méthodes sont mauvaises pour le référencement car elles empêchent les robots d’indexation d’enregistrer correctement le lien. C’est donc également un aspect à surveiller lors d’un partenariat.

Les liens, par leur rôle spécifiques au web – et par leur importance dans le référencement naturel – méritent la plus grande attention. pour un Internet plus riche et plus pertinent.

L’expérience utilisateur

I. Qu’est-ce que l’expérience utilisateur

Lorsqu’un internaute visite un site, il enregistre des impressions, des informations – plus ou moins consciemment. Ce ressenti est composé de nombreux éléments : l’esthétique générale de la page, la facilité de navigation, la compréhension des textes, la présence ou l’absence d’information, l’efficacité des icônes, la présentation des produits, etc.

Chacun de ces aspects peut être très bon ou très mauvais, indépendamment les uns des autres et de façon disparate. Pourtant, c’est à partir de ces éléments que l’internaute va se construire une impression générale du site et de ses services.

C’est ce ressenti global que l’on appelle l’expérience utilisateur. Il peut être négatif, si une majorité des aspects de la visite sont perçus comme mauvais par le visiteur, ou positif, si l’ensemble lui a, au contraire, donné une bonne impression.

II. L’importance de l’expérience utilisateur

Qu’elle soit positive ou négative, l’expérience utilisateur a, concrètement, des conséquences pour le site.

Un utilisateur qui a eu une expérience négative ne souhaite pas revenir, ne parle pas du site ou en parler en mal et, bien sûr, il n’est pas enclin à acheter ou a profiter des services du site.

Tout au contraire, celui qui a eu une expérience positive se souvient du site pour une prochaine utilisation, peut en parler et le conseiller et est dans un contexte favorable à l’achat des produits et services proposés par le site.

Une expérience utilisateur positive c’est donc :

  • la fidélisation du client
  • un canal d’acquisition
  • la contribution à une bonne image de marque
  • une augmentation du taux de transformation

Le tout pour un coût modique voir nul puisque c’est la qualité de la conception et du développement du site qui prend en compte tous les aspects influant sur l’expérience utilisateur. Et que cette réalisation de qualité est alors relayée par la satisfaction du visiteur et le bouche-à-oreille.

III. Les facettes de l’expérience utilisateur

Pour qu’une visite soit transformée en une expérience utilisateur positive, le site doit être conçu de sorte à optimiser aux maximum tous les différents aspects qui constituent une expérience utilisateur.

Ces aspects ont été détaillés par Peter Morville, architecte informationnel renommé dont la présentation en hexagones est une référence.

P. Morville distingue sept axes à prendre en compte : l’utilité, l’utilisabilité, la trouvabilité, la crédibilité, l’accessibilité, la désirabilité, la valeur.

L’utilité :

Le site doit répondre aux besoins, à la recherche de l’internaute.

Ou encore il lui apporte des renseignements, des fonctionnalités qu’il ne cherchait pas forcément mais qui lui ont été utiles.

L’utilisabilité :

L’information, le renseignement, même très utile à l’internaute, est inefficace s’il n’est pas pratique à comprendre, à utiliser.

La trouvabilité :

Cela implique deux notions :

  1. le site doit être trouvé facilement par les internautes auxquels il s’adresse ;
  2. l’information doit être trouvé facilement à l’intérieur même du site

La crédibilité :

L’ensemble du site doit convaincre l’internaute qu’il est dans un climat de confiance : offres sérieuses, interlocuteur respectueux, outils fiables, etc.

L’accessibilité :

L’internaute doit pouvoir accéder à l’information quelles que soit sa condition physique ou son installation matérielle

La désirabilité :

Le site doit “donner envie”, séduire. Il doit offrir un contexte visuel confortable ou attrayant incitant ainsi l’internaute à s’y sentir bien, à y rester pour y trouver information et service.

Bien sûr, tous ces différents aspects influent les uns sur les autres et peuvent même parfois agir au détriment les uns des autres. Par exemple, un site au design innovant et très soigné, peut servir la désirabilité mais perdre l’internaute (et l’utilisabilité) dans des boutons graphiques séduisants, parfaitement intégrés au design et … ne correspondant plus à ce que l’internaute connaît et reconnaît comme étant un bouton !

Transformer une visite en une expérience utilisateur positive est donc tout un jeu d’équilibre à respecter.

IV. Les implications sur la conception et la réalisation

Pour qu’un site réponde à chacun des impératifs de l’expérience utilisateur sans en léser aucun, il y a donc de nombreux points à prendre en compte lors de la conception et de la réalisation du site.

Les différents acteurs de cette phase de création travaillent et réfléchissent ensemble à l’optimisation des différents points, utilisant leurs différentes compétences de façon croisée.

Quelques exemples de l’interaction d’une compétence sur les facettes de l’expérience utilisateur :

La rédaction des textes doit faciliter l’utilisation du site sans alourdir le design. Les textes doivent être riches en informations et compréhensibles.

Ils peuvent participer à l’appréhension de la navigation, de l’utilisation d’un outil mais aussi à la séduction, à l’attraction.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité, désirabilité

Le design doit servir la séduction mais également la facilité d’utilisation du site, la compréhension des différentes zones, des fonctions, des actions, etc.

Il participe aussi à la compréhension de la navigation, fournit des repères “géographiques”, informe l’internaute sur la hiérarchisation des éléments d’une page.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, désirabilité

Le code source optimise les pages de sorte qu’elles soient plus facilement trouvables sur Internet (référencement naturel), apporte des fonctionnalités supplémentaires de compréhension, organise et hiérarchise les types de renseignements donnés.

Il assure également une présentation correcte sur tout type de supports, garantissant ainsi une fiabilité de l’outil (présentation et utilisation)

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité

Le projet de la page ou du site vise à fournir à l’internaute les information ou les outils qu’il lui manquait, optimise leurs fonctionnalités de sorte à être toujours plus utile et à répondre aux attentes des clients.

Une réflexion de la page dans son contexte permet de soigner sa cohérence avec l’ensemble du site (design, rédaction) favorisant ainsi la navigation dans le site, le confort de l’utilisateur, l’utilisation des repères, etc.

  • Bénéfices : utilité, utilisabilité, trouvabilité, crédibilité, désirabilité

Les différents métiers interviennent ainsi sur plusieurs aspects chacun et doivent le faire en collaboration les uns avec les autres afin de prioriser et harmoniser tout ces points importants et afin d’optimiser les pages et les outils de sorte à transformer toute visite en une expérience utilisateur positive.

Qu’est-ce que le référencement ?

Si des milliards de sites web se trouvent sur la toile, il faut bien qu’ils se fassent connaître. Soit l’internaute tape directement l’adresse d’un site, soit il doit trouver ce site en naviguant. Là encore, deux solutions : soit il suit un lien depuis un autre site, soit il trouve son site dans les résultats de recherche d’un moteur.

Le référencement, c’est l’ensemble des actions et des éléments qui vont permettre à ce site d’être trouvé.

Il existe plusieurs types de référencement :

  • le référencement hors-ligne (publicités papier et autres) ;
  • les liens depuis les autres sites ;
  • les inscriptions dans les annuaires ,génériques et spécialisés ;
  • l’achat de mots-clé ;
  • les publicités en ligne ;
  • le référencement naturel.

Le référencement hors-ligne

Le référencement hors-ligne est peut-être le plus hasardeux car il implique que le visiteur potentiel retienne l’information d’un média à l’autre et retape l’URL du site.

Exemple d'un article de journal invitant ses lecteurs à en découvrir plus sur leur siteUn journal papier invite ses lecteurs à en découvrir plus sur son site

Les liens

Les liens ont une très grande importance dans le référencement car ils déterminent la popularité du site. Plus la popularité est importante, mieux le site est référencé dans les moteurs. Les liens ont plus de poids s’ils sont dans un contexte qui correspond au sujet du site (présence des mots-clé, champ lexical).

Exemple d'un ''title'' de lienUn lien depuis un site traitant du même thème, avec son “title”

Les annuaires

Les inscriptions dans les annuaires sont autant de liens pointant vers un site. Ils sont souvent l’occasion d’insérer son lien dans le contexte sémantique du sujet du site : titre, description, choix de la catégorie, spécialisation de l’annuaire.

Exemple d'un annuaire spécialisé avec une catégorisation affinéeUne inscription dans un annuaire spécialisé permet d’affiner la catégorie autour du thème du site

L’achat de mot-clé

L’achat de mot-clé consiste à payer un moteur de recherche pour qu’il fasse apparaître, dans les résultats commerciaux, un site précis quand des mots déterminés sont recherchés.

Exemple d'un résultat dans la zone des liens payants de GoogleL’achat de mots-clé sur un moteur de recherche permet de faire apparaître son site, quelle que soit son indexation dans le moteur

La publicité

Les publicités sont nombreuses sur Internet. Il faut savoir que les liens textes, même publicitaires, reçoivent souvent plus de clics qu’une bannière (image fixe ou animée). Ce type de lien, faisant l’objet d’un partenariat financier, nécessite un “traceur” (pour rétribuer, par exemple, un éditeur en fonction du nombre de visites reçues depuis son site). Il faut alors veiller à ce que le lien reste utile au référencement naturel.

Exemples de formats de publicité : 468x60 ; 88x31 ; lien textePlusieurs formats de publicités possibles … parmi de nombreux autres !

Le référencement naturel

Le référencement naturel est un référencement qui va se faire, essentiellement, à l’aide du code des pages web. Il s’oppose au référencement apporté par les publicités, les achats de mots-clé, les inscriptions dans les moteurs. Il est dit “naturel” car il ne découle, en principe, d’aucune action volontairement destinée au référencement. Il y a beaucoup à dire sur le référencement naturel et il fera bientôt l’objet d’un article.

Si vous lancez votre site web et que vous voulez le référencer, vous n’êtes pas obligé d’appliquer toutes ses méthodes. Soignez par contre votre référencement naturel (il est gratuit et se fait dans le même temps que l’intégration des pages). Inscrivez-vous dans les annuaires et tout particulièrement les annuaires spécialisés. Enfin, développez tant que possible un réseau de liens avec votre communauté.

Ne confondons plus “alt” et “title”

L’attribut alt

L’attribut alt est fait pour accueillir un contenu alternatif. Il sera utilisé par le navigateur, par l’agent utilisateur en général, au cas où il ne pourrait pas lire l’élément, une image par exemple.

Dans une page web, un certains nombre d’éléments peuvent ne pas être accessible au navigateur, à l’agent utilisateur. Les images, par exemple, ne sont bien évidement pas “lues” par un navigateur vocal ou si un internaute, en bas débit par exemple, a décidé de désactiver les images. Cela peut-être le cas des applets, des objets, des images ; en fait, de tous les éléments graphiques.

Pour que les internautes ne perdent pas pour autant l’information, on fournit à l’agent utilisateur une alternative textuelle. Elle a pour but d’indiquer à l’internaute le contenu de l’applet, de l’objet, de l’image.

Exemple [1] : <img src="images/logo.gif" alt="Logo de Game On Net" />

Tous les objets graphiques doivent fournir une information alternative. Dans le cas d’une image purement décorative, l’attribut alt peut être laissé vide, mais doit être présent.

Exemple : <img src="images/decor-rubrique.jpg" alt="" />

Le contenu du alt doit faire 60 caractères maximum (un caractère encodé vaut pour un).

Si l’objet, par contre, fournit de nombreuses informations, qu’il est impossible ou réducteur de le résumer dans un alt, on utilise alors en complément l’attribut longdesc qui fait appel à un fichier de description plus complet.

Exemple : <img src="images/graphique.gif" alt="Statistiques du site" longdesc="graphique.txt" />

L’attribut title

L’attribut title (non la balise title contenue dans le head et qui apparaît dans la barre de titre du navigateur) est le titre d’un élément.

Il peut être présent pour une image.

Exemple : <img src="images/ventes-2005.jpg" alt="Graphique" title="Evolution des ventes de 2005" longdesc="ventes2005.txt" />

Il est également attendu sur les liens pour fournir une information en plus de celles du libellé.

Exemple : <a href="http://www.site.com/accessibilite.html" title="Lire l'article sur l'accessibilité sur Site">L'accessibilité</a>

Si nous reprennons l’exemple du logo, nous pourrions avoir : <a href="index.html" title="Game On Net - Accueil"><img src="images/logo.gif" alt="Logo Game On Net" /></a>

L’information données par l’attribut title est destinée à tous les types de navigateurs et fournis dons un texte visible par tous. Le texte d’un title apparaît donc dans les navigateurs classiques dans une petite info-bulle, au survol de l’élément.

En cas d’absence de title mais de présence de alt, Internet Explorer affiche le contenu du alt dans l’info-bulle. Et c’est probablement de là qu’est née une partie de la confusion entre ces deux éléments et qui a fait que l’on trouve encore beaucoup de alt dans des balises a (ce qui n’a pas de sens au vu de la fonction du alt). Si les deux attributs sont présents, Internet Explorer utilise le title en priorité pour son info-bulle.

L’attribut title autorise 80 carctères maximum (un caractère encodé vaut pour un).

Pourquoi l’accessibilité ?

L’accessibilité, c’est rendre un site navigable par tous, quelque soit le matériel utilisé (lecteur vocaux, par exemple), quelque soit le handicap (moteur, par exemple), quelques soient les choix du visiteur (javascript désactivé, par exemple).
D’un point de vue social et éthique, c’est déjà beaucoup, mais l’accessibilité apporte d’autres avantages encore. En terme de développement, l’accessibilité représente quelques lignes de codes en plus, quelques infos utiles, l’utilisation de la balise adéquate… Le « coût » est faible et les gains sont variés et ne profitent pas qu’aux seuls internautes handicapés.

En Février 2005, la Loi sur l’Accessibilité Numérique laissait aux quelques 5000 sites publics français jusqu’à 3 ans pour être accessible à tous. Plusieurs sites privés, pourtant non concernés par cette obligation, ont d’ores et déjà fait le choix de l’accessibilité. On peut penser qu’ils ont anticipé une généralisation de la loi, aux sites commerciaux, par exemple, et se sont alignés. Mais le premier impact pour eux, en plus de s’ouvrir à une part supplémentaire de la population, est, bien sûr, l’image de marque, l’impression donnée qui va de l’ouverture d’esprit au respect du visiteur.

Et le nombre de visiteurs à bénéficier de ces efforts est bien plus important qu’on ne se l’imagine. Il y a d’abord, bien sûr, les non-voyants, les handicapés moteurs. Mais les obstacles que l’accessibilité abat concernent aussi les personnes âgées, malvoyantes, les handicapés mentaux… En tout, 30% de la population française déclare rencontrer des difficultés, plus ou moins importante*. 30% de la population qui bénéficient directement des mesures d’accessibilité. Car indirectement, nous en profitons tous. En veillant à des impératifs d’accessibilité, on met à la disposition de chaque visiteur des infos pratiques en plus, on veille à avoir une navigation fluide, on laisse beaucoup de liberté à chacun quand à l’affichage.

Non seulement le site y a gagné en ouverture vers ses visiteurs, mais il y gagne aussi en qualité de code et toutes ses considérations optimisent son référencement. Il ne s’agit pas de miracle ou de techniques pointues propres aux référenceurs, mais de détails auxquels les moteurs de recherche seront sensibles : des titres de liens renseignés, des balises sommary et caption détaillées, l’attribut longdesc utilisé à bon escient… sont autant d’informations données aux moteurs de recherche, cernant ainsi mieux votre page et votre site.

Le développement d’un site en considérant les points d’accessibilité vous permet donc d’obtenir un code plus propre, plus efficace, ergonomique et ouvert à tous. Des articles à venir vous détaillerons, de manière pratique, comment faire. Pour les plus curieux, voici quelques liens utiles :

Les propriétés raccourcies (CSS)

En CSS, un certains nombres de propriétés peuvent être regroupées sous une seule déclaration. On utilise pour cela les propriétés raccourcies.

Par exemple :

p {
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold
}

peut s’écrire :

p {
font: italic bold 1.2em "Times New Roman", Times, serif
}

Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de “l’horloge” ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :

div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}

Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :

div {margin:20px 10px}

Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :

div {padding:3em 1em 2em}

Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :

  • background : color, image, repeat, attachement, position (vertical, horizontal)
  • border : epaisseur, style, couleur
  • border-top : epaisseur, style, couleur
  • border-right : epaisseur, style, couleur
  • border-bottom : epaisseur, style, couleur
  • border-left : epaisseur, style, couleur
  • border-color : couleurs dans le sens de “l’horloge”
  • border-style : style dans le sens de “l’horloge”
  • border-width : valeurs dans le sens de “l’horloge”
  • font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
  • list-style : type, position, image
  • margin : valeurs dans le sens de “l’horloge”
  • padding : valeurs dans le sens de “l’horloge”