La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Gérer votre site Web » Les écueils à un site Web

Atelier Webmaster



< Cours précédent - Sommaire du cours

Gérer votre site Web : Les écueils à un site Web

Tous les Webmasters vous le diront : sur son premier site Web on fait toujours pleins de bêtises. Sur son deuxième, on arrive parfois à faire pire, mais on fait souvent mieux. Certains Webmasters vont enchainer les sites pour ne faire plus que des erreurs acceptables. (au bout du centième essai bn_tongue) D'autres vont sans cesse concevoir des nouvelles versions de leur site jusqu'à ce qu'il soit... parfait ! Et il y a un troisième type de Webmasters : c'est vous ! Vous qui allez lire ce tutoriel et qui allez découvrir tous les écueils possibles et (in)imaginables à un site Web afin d'éviter les pièges qui vous guette mini_bn

Bon, je n'ai quand même pas la prétention de recenser toutes les bêtises Webmasteriques, mais j'espère que mes quelques expériences et réflexions pourront vous aider, débutant ou nous, à avancer toujours mieux et toujours plus vite bn_heureux

Pourquoi faire un site Web ?


Cela vous parait peut-être idiot, pourtant il est fondamental de vous poser cette question, enfin, disons que c'est mieux mini_bn En effet, en créant un site Web on peut avoir plusieurs buts (avoir le plus de visiteurs possible, gagner de l'argent, s'amuser, mettre ses connaissances à la disposition de tous, faire son travail de Webmaster) et la façon de travailler tout comme le contenu ou l'apparence d'un site varie énormément en fonction du but que l'on s'est fixé. On peut résumer cela ainsi :

Deux buts différents => Deux manières de fonctionner différentes


Je vous conseille de passer un petit peu de temps à réfléchir à cette question, parce qu'au final, si vous faites un site simplement pour vous amuser, alors tout vous est permis ! Mais si vous avez des projets plus précis, (un site sur les pandas par exemple) il sera surement plus intéressant de ne pas vous écarter, ni à droite, ni à gauche, de la voie que vous aviez prévu.
Pour vous aider, voici quelques questions-réponses qui pourraient vous traverser l'esprit mini_bn

Je veux faire un site, oui, mais pourquoi ?
  • Pour avoir un max de visiteurs ! C'est vraiment mon but... Je veux avoir des visiteurs, donc je trouve un thème qui conviendrait pour ça et enfin je créé un site.  Que ce soit par envie de gagner de l'argent ou pas, si je réussis, alors j'aurais surement de quoi subvenir financièrement aux besoins du site grâce à la publicité. Bref, Google, YouTube, Dailymotion ont commencé comme ça, pourquoi pas moi ?
  • Moi, c'est juste un site pour m'éclater... J'trouvais ça marrant de faire un design funky tout ça. Sur mon site, je parle de pleins de trucs, j'ai même mis un anim' flash un peu lourde. Bref, un peu comme ce boulet qui a créé la Bnbox, il s'est tellement diversifié qu'on se demande ce qu'il a pu penser lorsqu'il a créé tout ça bn_heureux Mais bon, ça à l'air de le faire marrer.
  • Pour mon boulot (ou mon association) on m'a demandé si je pouvais créer un site. J'ai quelques possibilités de libertés (ou non) mais bon, en règle général on me dit "fait ça", et moi bah... je "fais ça".  bn_hmm Cela dit, j'ai trouvé comment me venger : c'est moi qui code, donc je peux faire passer ma manière de penser là dedans bn_wink


Une autre question pour le moins importante que tout Webmestre qui se respecte devrait se poser. (disons que ça éviterai aux internautes que nous sommes de tomber sur des sites très pourris)
Qu'apporte mon site Web ? A ceux qui le visitent ou à moi... Qu'a-t-il d'original ? De mieux par rapport aux autres sites ?
A vrai dire, si je fais un site seulement pour moi ou quelques amis, le problème ne se pose pas : je suis libre comme le vent ! (ô joie) Mais bon, parfois il faut aussi penser à ses visiteurs... qu'est-ce qu'ils pensent du site ? Quelles pages visitent-ils le plus souvent ? D'où viennent-ils ? (un outil comme Google Analytics ou Xiti peut-être être très utile pour ça.) S'ils y sont accros peut-être qu'ils aimeraient que certaines choses changent, ou qu'il y ai des nouveautés... (d'où l'importance d'un livre d'or, d'un forum, des commentaires, d'un mini-tchat ou d'une adresse e-mail. (qui répond aux e-mails de ses visiteurs bn_tongue) C'est une mine d'or pour savoir ce que pensent ses visiteurs) Je peux me ficher totalement d'être original, mais bon, c'est toujours pas mal et puis, pourquoi faire comme tout le monde ? Et pourquoi se contenter de faire un site moins bien que les autres ? Pourquoi faire mon p'tit site à moi, c'est tout voilà ? (en appuyant bien sur les italiques !!!) Bigre, si d'autres on fait des super trucs, c'est que j'en suis capable aussi !!! Je pourrai rajouter cette fonctionnalité la à mon projet de départ, et puis ça, et puis...

A la fin de telles réflexions, on en arrive très souvent à vouloir faire quelque chose de génial ! Si bien qu'on en ressort avec une motivation décuplée et une vision bien plus nette de ce que l'on veut obtenir. Et si on se donne les moyens d'y arriver (et d'y réfléchir) on peut même aller au but. (et vous ferez des visiteurs heureux)
La Toile est un espace assez spéciale puisque tout le monde peut s'y exprimer, alors n'ayons pas peur d'explorer de nouveaux horizons et de sortir des bornes des limites. (bref, raz le bol des sites qui se ressemblent tous bn_big_smile)

J'espère vous avoir convaincu du bien fondé de ces questions préliminaires. (qu'il faut continuer à se poser même lorsque le site est en ligne) Maintenant, passons à ce qui fait le coeur d'un site Web : son contenu mini_bn

Le contenu d'un site Web


Eh oui, le coeur d'un site Web c'est son contenu ! C'est ça qui le fait vivre. "Contenu", c'est vague, et ça peut être plein de choses : article sur l'actualité dans le monde, cours de programmation, galeries de photos, ribambelle de designs, collection d'anecdotes ! Bref le contenu de votre site c'est ce pour quoi vous avez créé votre site.

Lorsqu'un Internaute surfe sur une page Web  pour en découvrir le contenu, si tout ce qui est autour est important, c'est néanmoins secondaire. En effet, si votre contenu est génial, on vous pardonnera tout le reste mini_bn (même un design orange et violet bn_tongue) Par contre votre "tout le reste" peut être génial, si votre contenu est nul, bah... vous n'aurez pas beaucoup de visiteurs bn_tongue

Je vous invite donc à réfléchir sur le mot-clef suivant :
VIDE

V comme Vide

document/atelier/web/chambre_vide.png
C'est l'une des plus grandes plaies des Webmasters ! On est tout feu tout flamme lorsque l'on créé son site, on a plein d'idées et puis au bout de quelques temps éh bien on abandonne ou on laisse trainer. Le résultat c'est que des tonnes de sites sur la toile se retrouvent avec des liens prometteurs "Cours d'XHTML", "Derniers jeux Nintendo", etc... qui ne mènent nulle part. En règle général, même si votre site est bien rempli par ailleurs, le visiteur lambda partira très rapidement quand même.
La Bnbox en est d'ailleurs un exemple concrêt puisque durant très longtemps les cours de programmation sont restés inachevés. La situation n'est toujours pas brillante, mais petit à petit... (enfin le pire c'est surtout la partie jeux vidéos pour l'instant bn_heureux)

Moralité : soyez modeste, créez un site à votre mesure. Ayez des idées folles, des élans de grandeurs certes, mais ne montrez aux visiteurs que des choses finis.
I comme Inutile

document/atelier/web/chambre_inutile.png
Les jeunes Webmasters sont toujours à la recherche du sujet accrocheur qui leur apportera plein de visiteurs. En général, ils choisissent un des thèmes suivants :
  • cours de programmation
  • tout sur Nintendo ! (ça fonctionne aussi pour les jeux vidéos en général)
  • tous les jeux en Flash !
  • Mangas mangas, j'aime les mangas !

La plupart du temps, le résultat est catastrophique car des tonnes de sites (très pourris pour la plupart^^) existent déjà à ce sujet. Le contenu du site devient alors inutile.

Je n'ai pas dit qu'il ne fallait pas faire de sites sur cette thématique. Simplement, si vous voulez vous lancer là dedans, il va falloir exceller mini_bn


Moralité : Trouver un thème qui vous plait, (comme ça vous éviterez le V bn_wink) si possible original et ciblé. (sauf si vous voulez faire comme moi et patauger dans les BN bn_hmm)
D comme Désuet

document/atelier/web/chambre_desue.png
Pensez à vérifier le plus souvent possible que les informations que vous communiquez sont véridiques et fraiches. On croise souvent des archives sur le net qui sont archifausses ! Les solutions consistent à préciser que c'est une archive ou à mettre à jour.

Moralité : Soyez attentif à la fraîcheur de votre site. ça se voit très rapidement quand le Webmestre n'a pas visité son site pendant 1 ou 2 mois, alors n'hésitez pas à créer des petits trucs pour montrer à vos visiteurs que le site est vivant. Ah oui et puis si vous faites perdurer votre site dans le temps, penser à corriger les fautes d'orthographe de votre jeunesse bn_wink



E comme Electrique

document/atelier/web/chambre_electrique.png

J'aurai aussi pu dire Agressif, mais ça commençait pas par E bn_tongue
Vous avez déjà visité des sites Web d'autrefois ? (d'y a 5 ans ça suffit) Fond blanc ou noir, avec du gros texte en rouge, des gifs multicolores de partout avec des effets javascript à s'arracher les cheveux... Bref si votre visiteur n'arrive pas à se concentrer sur votre contenu éh bien, on en revient au V bn_big_smile Le net a énormément évolué, il existe de nouveaux langages (notamment le XHTML/CSS) qui font que l'on peut créer très simplement de jolies sites et même de très jolies. (il suffit d'aller voir le Jardin Zen ou CSS Attitude)
De la même manière, les gifs clignotants et les pubs multicolores ne sont plus à la mode. Des annonceurs comme Google AdSense vous permettent d'afficher des pubs (vous rapportant de l'argent bn_wink) qui s'insèrent dans le design de votre site.

Je passe rapidement sur le phénomène "pub" car je compte y revenir un de ces quatre dans un autre cours. Je vous invite simplement à réfléchir à cet adage tout travail mérite salaire : la pub ne sert à rien si vous n'avez pas travaillé sur votre site mini_bn


Moralité : Pensez aux yeux de vos visiteurs car on ne revient qu'avec réticence sur un site agressif ! Couleurs, taille du texte, nombre et nature des images, pubs discrètes adaptez tout cela pour faire un ensemble harmonieux.


Vous avez désormais quelques pistes de réflexions pour améliorer le contenu de votre site, pensez au VIDE et votre site ne sera pas vide de visiteurs...
Hum... bref, suite à cette blague douteuse, passons à la suite.

Accessibilité


C'est un sujet extrêmement intéressant et vous trouverez sur le net de nombreuses pages abordant l'abordant en détails, vous prodiguant idées, conseils, réflexions... Pour ma part, je me contenterai de vous faire "méditer" sur 2 axes principaux : La sémantique et la navigation sur un site Web. (et si le coeur m'en dit, je ferai peut-être un autre article plus complet sur ce sujet)
Mais avant cela...
Qu'est ce que j'entends par Accessibilité ?

Lorsque l'on créé un site, il faut bien avoir en tête que nos visiteurs ne passent pas forcément leur vie sur Internet et que ce qui peut nous paraitre instinctif ne l'est pas pour eux. Il est aussi bon d'avoir une pensée (voir plus qu'une bn_wink) pour les personnes ayant un handicap et qui ont donc des difficultés pour surfer sur le Web. (Vous pouvez lire cet article d'Openweb. Mais pour donner un simple exemple, des aveugles vont sur Internet (c'est un outils bien pratique pour eux) mais puisqu'ils ne peuvent voir les pages, ils les écoutent à l'aide d'un lecteur d'écran comme JAWS. (vous pouvez télécharger une version gratuite de ce logiciel) Je vous laisse imaginer la difficulté de l'entreprise... pourtant vous pouvez leur simplifier la vie, éh oui.)
Mais l'accessibilité c'est aussi permettre à vos visiteurs d'avoir accès à tout votre site facilement. Ou encore de faciliter l'indexation de vos pages par les moteurs de recherche comme Google, Yahoo! ou encore Exalead.

Pour résumé l'accessibilité c'est être accessible par tous les types de visiteurs ce qui apporte en bonus track d'être accessible par les moteurs de recherche, donc d'être mieux indexés, donc d'être encore plus accessible, donc d'avoir plus de visiteurs... bn_wink

Maintenant, voyons comment être un peu plus accessible...
Sémantique => Accessibilité

Au début de mon cours sur la sémantique du XHTML/CSS (le XHTML/CSS est un langage de programmation.) j'ai mis la définition du Petit Larousse Illustré du mot "sémantique" :
Sémantique : n.f. (du grec semantikos qui signifie) Relatif au sens, à la signification des unités linguistiques.

Car c'est dans la manière de programmer votre site que vous allez pouvoir améliorer son accessibilité. Ce n'est pas de moi, c'est universellement reconnu et d'ailleurs Google a publié il y a quelques temps un document Conseils aux Webmasters qui est plus qu'intéressant ! (pensez donc ! C'est l'étude sur "comment sont codés les sites les mieux indexés" par le plus gros moteur de recherche du monde ! Google a fait beaucoup de constatations très intéressantes et qui montrent, entre autre, qu'un site bien codé est mieux référencé. Je vous invite très fortement à lire cet article.)
Oui mais voilà, qu'est-ce qu'un site bien codé ? Eh bien c'est un site qui est codé sémantiquement... Le langage le plus utilisé dans la programmation des sites Web est l'XHTML/CSS ou ses dérivés. (ancêtres ou progénitures bn_heureux) Or c'est un langage qui fonctionne avec des balises, et chaque balise a un sens bien précis, une signification, bref : une sémantique ! Bien sûr on pourrait utiliser ces balises n'importe comment, mais les utiliser convenablement, au bon endroit, pour les bonnes raisons, permet de rendre son site plus accessible :
  • Aux personnes avec des handicaps.
    Je parlais des aveugles tout à l'heure : les lecteurs d'écrans ne liront pas de la même manière un texte mis en gras (par la balise <strong></strong>) qu'un texte normal.
    Il existe aussi des logiciels permettant de naviguer à travers les titres (balises <hX></hX>) d'une page.
  • Aux moteurs de recherche.
    Ils peuvent avoir des informations précises sur votre site, et donner ainsi des résultats pertinents à leurs utilisateurs. C'est tout bénéf' pour vous bn_wink
  • A vos visiteurs "normaux".
    Si vous êtes prêt à travailler la sémantique de votre code, cela se ressentira forcément sur tout votre site Web. Et puis, en général, on arrive plus facilement à faire de beaux designs bn_heureux


Je vais vous donner quelques pistes pour bien coder votre site Web, mais sachez que vous retrouverez la plupart de ces idées sur le cours à propos de la sémantique du XHTML/CSS.
  • Un titre pertinent à chacune de tes pages tu donneras.
    Un titre qui retranscrit bien ce que les visiteurs pourront trouver sur chaque page. Vos visiteurs et les moteurs de recherche vous remercieront bn_wink
    Code :
    <!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Titre pertinent !</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
       </head>


  • Des balises à bon escient tu utiliseras.
    Je le dis, je le répète : chaque balise à un sens ! Il est idiot de mettre une balise :
    Code :
    <span class="important">Texte important</span>

    Alors qu'il existe une balise pour cela :
    Code :
    <strong>Texte important</strong>

    De même :
    Code :
    <!-- Exemple idiot voir stupide -->
    <p class="titre">Le titre de mon site !</p>
    <p class="titre_2">Le sous-titre</p>

    <!-- Exemple sémantique, correct si ce n'est intelligent -->
    <h1>Le titre de mon site !</h1>
    <h2>Le sous-titre</h2>

    Bref, un titre est un titre, un paragraphe un paragraphe, une liste une liste, etc. mini_bn

  • Un bonne utilisation des attributs alt="description de l'image" et title="description du lien/image" tu feras.
    Ces attributs guident vos visiteurs. (tout comme les moteurs de recherche)
    Lorsque vous utilisez title="" pour un lien, pensez à mettre le titre du lien puis sa description. (certains lecteurs d'écrans ne liront que l'attribut title="" et zapperont ce qu'il y a entre les balises <a></a>)
    Dans le cas de l'attribut alt="" (s'utilisant en général avec la balise <img />) sachez qu'il est lu par les lecteurs d'écrans et qu'il apparait à l'écran lorsque l'image ne veut pas s'afficher. (éh oui, des Internautes bloquant les images, ça existent encore... enfin plus trop quand même bn_tongue)
    Code :
    <!-- Exemple d'utilisation de title="" -->
    <a href="http://blouhibou.free.fr" title="Blouhibou - Un site perso bleu comme un hibou">
    Blouhibou</a>

    <!-- Exemple d'utilisation de alt="" et title="" -->
    <img src="http://la-bnbox.fr/document/exposition/2/militaire_bn.png" alt="Un BN militaire" title="Un BN militaire" />


    Ce qui nous donne :


  • Des recommandations du W3C (sur l'XHTML, le CSS, le RSS et pour les handicapés) compte tu tiendras.
    Encore une chose que j'aborde dans mon cours d'XHTML/CSS. Le W3C et l'organisme qui "dicte" les règles pour éviter que les navigateurs Web (ou les créateurs de langages) partent chacun de leur côté sans s'occuper des autres. C'est cet organisme qui fait que la Toile ne se déchire pas en 10 000 petits morceaux mini_bn Il publie des recommandations et surtout fixe les "standards du Web".
    Pour savoir si votre site est standard et pour le rendre standard, vous pouvez le faire tester automatiquement :
    - Validateur XHTML
    - Validateur CSS
    - Validateur RSS ou Atom
    - Validateur  WAI
    N'hésitez pas à demander de l'aide sur le forum.

  • Changer la taille du texte à tes visiteurs te permettras.
    Imaginez-vous dans votre vieille âge... Croyez-vous franchement que vous arriverez à lire la police Arial taille 10 de ces sites Web des années 2000 ? (je vous le souhaite bn_lol) Il est important de permettre à ses visiteurs d'augmenter ou de diminuer la taille du texte. Comment ça marche :
    Bnmaster a écrit :
    Vous pouvez agrandir ou rétrécir la taille du texte afin de l'adapter à votre vision. Pour cela, dans la barre de tâche de votre navigateur Web (Internet Explorer, Firefox, Opera ou un autre) cliquez sur Affichage (alt+A) puis Taille du texte et choisissez Plus grand ou Plus petit.
    Une autre solution consiste à simplement maintenir la touche Ctrl de votre clavier appuyée tout en jouant avec la molette de votre souris bn_wink Ce qui nous donne : Ctrl+Molette de souris

    Si vous possédez un navigateur récent (comme Firefox qui a pensé à tous les pauvres internautes qui avaient cassé leur molette de souris à force de joué avec... bn_sad) vous pouvez aussi faire Ctrl++ pour agrandir et Ctrl+- pour rétrécir. (sous Opera, il suffit simplement d'utiliser les touches + et -)
    Pour que vos visiteurs puissent faire cela, il suffit que vous mettiez la taille de votre texte en em ou en pourcentage. Le mieux c'est de la faire dans la propriété body du CSS.
    Code :
    /* Cette technique (avec cette valeur) fonctionne bien même avec IE. */
    body {
    font-size: 68.75%;
    }

    /* Ou bien */
    body {
    font-size: 1em;
    }

    Testez donc votre site avec différentes tailles de police pour vérifier que tout est lisible et accessible (surtout au niveau des liens), c'est bête, mais il faut y penser mini_bn

  • Ton site Web sans CSS tu testeras.
    Certaines personnes mal ou non-voyantes (ou autre) désactivent le CSS ou utilisent des navigateurs qui ne l'interprètent pas. Mais pourquoi ? Principalement afin d'obtenir une meilleur visibilité ou parce que le matériel qu'elles utilisent ne leur permet pas de faire autrement.
    Dans un autre domaine, la technologie permettant de surfer sur le Web à l'aide d'écrans très petit (Nintendo DS, PSP, portables, palms...) se développe de plus en plus. Or cette technologie interprète un peu différemment le CSS.
    Voilà pourquoi il faut tester son site Web sans CSS ou en émulant les petits écrans. (si vous utilisez Firefox, vous pouvez installer pour cela l'add-on Web Developer. Cette barre qui se place sous votre barre d'url, permet de faire plein d'autres choses, c'est extrêmement pratique et si vous êtes un webmaster "quotidien" vous vous en servirez surement... "quotidiennement" bn_heureux) Sur votre navigateur, en cliquant sur "Affichage" vous avez la possibilité de désactiver le CSS temporairement.
    En testant, vous vous apercevrez peut-être qu'il faut parfois faire défiler énormément la page avant d'arriver à ce qui est intéressant. D'où la nécessité des liens d'évitement dont nous parlerons bientôt ou mieux : de placer tout ce qui est "moins intéressant" à la fin du code, tout en gardant la même mise en page via le CSS bn_wink

  • Du Javascript (JS) point tu n'abuseras.
    11% des Internautes désactivent encore aujourd'hui le JS. (même si la montée en puissance d'AJAX tend à faire diminuer ce pourcentage) Mais vous imaginez bien les difficultés que peuvent avoir des personnes handicapés avec le JS. Et il faut aussi savoir que, pour l'instant les moteurs de recherches ne savent pas lire les liens entourés ou fait en JS. Embêtant n'est ce pas ?
    Donc utiliser le JS, c'est bien, mais il est conseillé de ne l'utiliser que pour des "gagdets", des choses non-nécessaires, et d'apporter si possible une alternative.

  • De Flash bon usage tu feras.
    Je passe rapidement la dessus, car, en fonction du site que vous voulez faire, Flash peut-être très utile (voir la seule technologie utilisée) ou très déconseillé. Une petite lecture et je n'en dirai pas plus bn_heureux



Voilà ! J'ai conscience d'être passé très très très vite sur de nombreux points mais mon but pour l'instant est d'être très global. Vous trouverez sur le net (cf : fin de l'article) de nombreux sites allant beaucoup plus dans les détails. Et puis n'oubliez pas que pour toute question, le forum est votre ami bn_wink


Navigation sur un site Web

Permettre à des visiteurs de naviguer simplement sur un site Web, voilà tout le travail d'un Webmaster. On pourait aussi dire : comment lutter contre le Je clic, je quitte des visiteurs. Et cela en pensant à tous les types de visiteurs, sans oublier ces chers moteurs de recherche. Bref : tout un programme !
Encore une fois, voici une ribambelle d'idées et de réflexions :
  • La règle des 3 clics.
    document/atelier/3_clics.png
    Une règle qu'on oublie trop souvent. Elle consiste à faire en sorte que, pour aller d'un endroit à un autre sur un site, un visiteur n'ai que 3 clics de souris à faire. C'est en général le nombre de clic qu'est prêt à faire le visiteur lambda pour trouver une information avant de... quitter bn_sad
    C'est une règle difficile à appliquer mais qui apporte pourtant beaucoup. Toutes les idées suivantes permettent (entre autre) de tendre vers la règle des trois clics.

  • L'importance du menu.
    C'est le meilleur des guides que vous pouvez donner à vos visiteurs. On le retrouve sur tous les sites, mais il n'en reste pas moins difficile à concevoir. En effet, peut-être rêvez-vous d'un magnifique menu qui pétille lors du passage de la souris, ou que sais-je encore... On a vu que les moteurs de recherches ne savaient pas encore lire le code JS (or le menu est l'une de leur plus grosse source d'information), et de la même manière la déco peut empêcher le visiteur de comprendre le menu, ou ne pas lui donner envi de cliquer.
    Le mieux c'est d'avoir un menu qui retrace toutes les parties principales de votre site, et pour ne pas perdre les visiteurs il vaut mieux qu'il n'y en ai pas plus de quatre. A vous de voir si vous voulez rajouter des sous-parties, et tant que ça reste lisible : n'hésitez pas ! (les addicts de votre site vous remercieront, même si vous courrez le risque de perdre un tout petit peu les nouveaux arrivant)

  • Raccourcis claviers.
    Ils permettent d'accèder aux pages imporantes du site (accueil, recherche, contact, plan du site...) via les touches du clavier. Pour cela il faut utiliser le lien suivant :
    Code :
    <a href="index.html" accesskey="numeroduracourci" title="Accueil - La Bnbox ! Créateur de sourires">Accueil</a>

    La bonne blague c'est que, pour y accéder il vous faut utiliser les touches de votre clavier : Alt+Shift+Numéro du raccourci clavier (visiblement les concepteurs de navigateurs n'ont pas réussi à trouver plus compliqué, désolé bn_hmm)
    Voici un article (assez critique bn_heureux) sur AlsacréationS sur les "normes" pour les numéros à utiliser.

  • Liens d'évitements.
    Ce sont des liens placés en haut de la page (en général) qui permettent d'aller directement au contenu du site, d'aller au menu, d'aller au bloc recherche. (et parfois de retourner à la page d'accueil) Très utile pour les malvoyants ou les utilisateurs de petits écrans. Le principe est de placer une ancre sur la page et de faire pointer un lien vers cet ancre. (#recherche ou #menu ...)
    On peut aussi placer des liens Retour en haut en bas de chaque page via les ancres. Ces liens sont peu utilisés mais indispensable pour les personnes ayant des difficultés à remonter tout en haut de la page.

    Un petit exemple :
    Code :
    <!-- J'en ai profité pour mettre des accesskey. Eh oui ça fonctionne aussi avec des ancres -->
    <a href="#contenu" title="Aller directement au contenu du site" accesskey="s" id="haut_page">Aller au contenu</a>
    |
    <a href="#menu" title="Aller directement au menu du site" accesskey="4">Aller au bloc recherche</a>

    <!-- Plus loin sur la page -->
    <div id="contenu">
      Contenu du site

      <div id="recherche">
        Bloc recherche
      </div>

      <a href="#haut_page" title="Retourner en haut de la page">Haut de la page</a>
    </div>


  • Navigation par tabulation.
    Sur les bons navigateurs (bn_roll) le visiteur a la possibilité de naviguer à travers les liens via la touche tab du clavier.
    Le mieux est de tester vous même votre site en essayant de ne pas utiliser votre souris. Vous pouvez numéroter l'ordre des liens à l'aide de l'attribut tabindex="" si c'est nécessaire. Comme ceci :
    Code :
    <a href="lien1.html" tabindex="1">Lien n°1</a>
    <a href="lien2.html" tabindex="2">Lien n°2</a>

    L'utilisation de cet attribut pour les liens prête à discussion. Si vous en avez vraiment besoin utilisez-le, sinon, éh bien ce n'est pas franchement nécessaire.
    Faites attention à ce qu'il n'y ait pas de conflit avec les tabindex="" que vous utilisez pour les formulaires. (indispensable eux par contre bn_heureux)


  • Fil d'Arianne.
    C'est un petit ajout bien utile et bien utilisé. En effet un fil d'Arianne permet aux visiteurs de se repérer sur le site ! (comme le "Vous êtes ici !" sur les cartes des villes bn_tongue) Voilà à quoi cela peut ressembler :
    document/atelier/arianne.png

    Avec ça, le visiteur peut naviguer facilement sur le site, et en plus ça lui donne envie de fouiller un peu : "mais quelle était donc la page qui menait vers celle-ci ?" bn_big_smile
    La conception d'un tel fil est un peu délicate. Soit vous le faite manuellement sur chaque page. (c'est un peu lourd, mais j'en connais qui l'ont fait... bn_rollbn_lol) Soit vous avez codé votre site en PHP (ou équivalent) et alors, éh bien... il suffit de réfléchir un peu, c'est délicat mais pas compliqué bn_wink (dans un prochain cours peut-être que...)

  • Liens de navigation rapide
    Tout comme le fil d'Arianne les liens de navigations rapides ont de multiples avantages : ils sont un repère pour le visiteur, ils l'incitent à visiter d'avantage le site, ils sont utilisés par les moteurs de recherche pour référencer les différentes pages d'un site.
    En général ce sont des liens du style : sommaire, article suivant, article précédent, un article au hasard.



Bon, éh bien rien qu'avec tout ça, vos visiteurs ont déjà moins de chance de se perdre. Mais souvenez vous du E de VIDE : électrique, agressif. Si vous en fait trop alors cela risque d'avoir l'effet inverse de celui escompté.
N'hésitez pas à donner vos idées à ce sujet si vous en avez.

Pour finir, voici une petite annexe avec plusieurs liens à propos de tout ce dont j'ai parlé. (je la complèterai au fil de mes découvertes bn_wink)

Annexe


En annexe voici une liste de liens parlant en particulier d'accessibilité et de standardisation. Bonne lecture bn_wink



Bon éh bien nous en avons fini avec tout ces écueils. Je vous souhaite de ne pas vous échouer bn_wink
Bien sûr tout n'a pas été dit ici, alors si vous avez des questions, des remarques des idées : commentez donc cet article, ou allez remplir le forum ! bn_tongue

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

heyy tergiverse : Bjrs Quelques secondes plus tôt via Résumé - Les Fourberies De ...

amin bafouille : Lol Hier, 21h11 via Résumé - Le Médecin Malgrè ...

nutellux bafouille : Bon Hier, 20h53 via Résumé scène par scène - Le...

yo bafouille : Tg Hier, 18h33 via Résumé : On ne badine pas a...

lol griffonne : Ook Le 04 décembre, 18h33 via Résumé - Les Fourberies De ...

Madson griffonne : Je m'appelle Mady Ouedraogo .je vous dit: nous devons accomplir nos devoirs.defendre nos droits fait partie de nos devoirs Le 04 décembre, 9h46

Pierre Corneille scribouille : Je m'appelle Pierre Corneille je suis mort le 2 décembre je meur avec la chimère Le 02 décembre, 13h49 via Résumé du livre : Le Cid de...

reptilause murmure : TG Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause scribouille : Salut bande
de BN
Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause tergiverse : Reptileuse Le 02 décembre, 13h47 via Résumé du livre : Le Cid de...

Xeno déclare : Ok on y gagne quoi Le 30 novembre, 16h38 via Texte intégral - L'Avare de...

bobo écrit : WTF le calcul !*
Des barres!
Le 28 novembre, 20h31 via Résumé : La Promesse de l'a...

bobo scribouille : Merci!
Ca va me servir!
Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

bobo s'exclame : Tchippppppppp Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

mimi déclame : Qui aime chica vampiro ou bien qui a deja vu chica vampiro Le 28 novembre, 12h24 via Résumé - Les Fourberies De ...

lol bafouille : Lol le calcul Le 27 novembre, 15h50 via Mémo de VHDL

jenpierrdecou écrit : Et les armes en diamant sur bo2 Le 26 novembre, 14h22 via Résumé : L'Avare

jenpierrdecou déclame : Ctrl+w et vous avez argent illimité sur gta Le 26 novembre, 14h21 via Résumé : L'Avare

jenpierrdecou bafouille : Lololollolol Le 26 novembre, 14h21 via Résumé : L'Avare

jen déclare : Oké Le 26 novembre, 14h20 via Résumé : L'Avare

123 gribouille : Slttttttt Le 26 novembre, 13h23 via Résumé : Le Mariage de Figa...

Bnmaster chuchote : @lali Le voici Les Fourberies de Scapin Le 24 novembre, 10h13 via Résumé - Les Fourberies De ...

lali écrit : S il vous plait est ce que vous pouvez me donner le resume de fourberie de scapin merci d avance Le 23 novembre, 13h29 via Fiches sur les personnages ...

lali griffonne : Bibi est ce que c est l histoire du fourberie de scapin? Le 23 novembre, 13h28 via Fiches sur les personnages ...

bibi dit : Yo bb Le 23 novembre, 11h40 via Fiches sur les personnages ...

Bnmaster proclame : @eddiegreatbanks Nope, désolé.N'hésite pas à me l'envoyer un si tu en écris un. Le 22 novembre, 9h50 via Accueil

Zefir scribouille : Coucou Celia Faure, je viens de terminer le tom 7 de Autre monde de Maxime Chattam. J'ai énormément apprécié ce livre et je te le conseille vivement, même si je ne connais pas tes goûts. Si tu veux d'autres conseils plus en détail, on peux me contacter par skype: zefir-0011, mail: Adresse emailm.
Très bonne journée à tous !
Le 20 novembre, 16h28

bakalaye écrit : Oee les gens Le 17 novembre, 22h01 via Résumé : Le Tartuffe de Mol...

cheick écrit : Tout seul Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick murmure : Personne Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick écrit : Vous Etes d acore Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick proclame : Aillllll Le 17 novembre, 20h24 via Résumé : La Promesse de l'a...

cheick proclame : Pogba ballon d or Le 17 novembre, 20h23 via Résumé : La Promesse de l'a...

cheick s'exclame : Je rigole Le 17 novembre, 20h23 via Résumé : La Promesse de l'a...

cheick dit : Aller voire Le 17 novembre, 20h22 via Résumé : La Promesse de l'a...

cheick chuchote : Hhh Le 17 novembre, 20h21 via Résumé : La Promesse de l'a...

Niainez gribouille : Weshhhh Le 17 novembre, 19h17 via Résumé : La Promesse de l'a...

sophie écrit : C'est trop facile Le 17 novembre, 14h12 via Texte intégral - Le Médecin...

k proclame : K Le 13 novembre, 19h33 via Romain Gary : La Promesse d...

@eddiegreatbanks dit : Est ce que vous avez un resume de nantas de zola? Le 09 novembre, 17h21 via Recherche

Bnmaster scribouille : @celia faure Il va falloir nous dire ce que tu préfères comme style pour qu'on puisse te conseiller : fiction, fantasy, historique, ... ? Le 09 novembre, 8h54 via Centrale PC 1997 - Exercice...

tgttttg écrit : Vt Le 09 novembre, 0h17 via Accueil

tgttttg dit : Vfev Le 09 novembre, 0h17 via Accueil

lola dit : Bruuuuuuuuuh Le 08 novembre, 17h41 via Fiches sur les personnages ...

kk scribouille : Salam Le 08 novembre, 15h22 via Les avantages et les risque...

quentin déclame : Littérature : Résumé : La Promesse de l'aube Le 07 novembre, 21h36 via Résumé : La Promesse de l'a...

-yu scribouille : -èuè Le 07 novembre, 14h31 via Résumé - Le Médecin Malgrè ...

$ chuchote : 7 Le 07 novembre, 7h45 via Le raisonnement par l'absur...

Bnmaster scribouille : Ok Le 06 novembre, 21h20 via Résumé du livre : Le Cid de...

celia faure dit : Personne ne repond sa devient un peu beaucoup soulant Le 06 novembre, 9h34

Publicité



Articles précédents

©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS