Embed Size (px)
DESCRIPTION
Découvrez dans cette présentation des pistes (non exhaustives) pour assurer le succès de votre site Web avant sa mise en production.
Citation preview
LES BONNES PRATIQUES POUR AVOIR UN SITE EFFICACEMarine Tranquard
SOMMAIRE
L’ergonomie web Qu’est-ce que c’est ? Les règles d’or
L’intégration HTML HTML, c’est quoi ? Les tags à connaître
Comment optimiser son référencement naturel
Les bons réflexes Ressources utiles
L’ERGONOMIE WEB
UTILITE Répondre à un besoin
= Capter, les internautes viennent pour faire quelquechose
UTILISABILITE Faciliter la satisfaction du
besoin
= Prolonger, le site doit aider l’internaute à repondre à ce besoin le plus rapidement et le plus simplement possible
+
Il faut donc comprendre ses internautes, leur contexte et
fixer un objectif clair à son site
C’est un préalable avant de se lancer dans la conception et/ou l’intégration d’un site ou d’une page.
LES REGLES D’OR DE L’ERGONOMIE
1. Architecture du site propre et structurée
2. Organisation visuelle des pages propre et structurée
3. Information : le site informe l’internaute et lui répond
4. Compréhension des mots et des symboles
5. Assistance : le site aide et dirige l’internaute
6. Gestion des erreurs : le site prévoit que l’internaute se trompe
7. Rapidité : l’internaute ne perd pas son temps
8. Liberté : c’est l’internaute qui commande
9. Accessibilité : un site facile d’accès pour tous
10. Satisfaction de l’internaute
INTEGRATION HTML
HTML : C’EST QUOI ?
HTML : Hypertext Markup Language, ou « langage de marquage de l’hypertexte »
C’est un standard World Wide Web Consortium (W3C) Il décrit les documents et informe aux navigateurs comment
afficher la page Les instructions sont données grâce à des tags, balises,
étiquettes signalés par < > Le tag peut être écrit en minuscule comme en majuscule Ne pas mettre d’espace avant et après le nom du tag
<oui> vs < non > Les tags peuvent être imbriqués.
Ex : italique + gras Sauf exceptions, un tag s’ouvre <tag> et se referme </tag>
Ex : <p>Texte</p>
On fois que l’on s’est posé les bonnes questions sur son site ou sa page, on peut se lancer dans l’intégration HTML
HTML : LES TAGS OBLIGATOIRES
W3C Pour délimiter le document : <html>…</html> Pour délimiter l’entête du document : <head>…</head> Pour délimiter le corps du document : <body>…</body>
Dans une page, il y a des balises obligatoires.
HTML : LES TAGS A CONNAITRE
Délimiter le <h1>titre du document </h1> <h2>Sous-titre 1</h2>
<h3>Sous-titre 2</h3>
Délimiter un <p>paragraphe</p> Aligner un <p align=left>paragraphe à gauche </p> <i>Italique</i> * <strong>Gras</strong> * <u>Souligner</u> Mettre des puces
1. Mettre des puces numérotées Ajouter un <a href=«http://www.microsoft.com»>lien
hypertexte</a> Insérer une image Insérer un tableau A connaître :
Retour à la ligne <br /> La barre horizontale de séparation <hr />
COMMENT OPTIMISER SON RÉFÉRENCEMENT NATUREL
RÉFÉRENCEMENT NATUREL, C’EST QUOI ?
Stratégie d’indexation du site par les outils de recherche, qui permet de positionnement ce site sur les résultats naturels des outils de recherche lors d'une recherche faite par les internautes.
C’est gratuit
Mais ça demande du travail !
BONNES PRATIQUES DU RÉFÉRENCEMENT NATUREL Nom de domaine URL
Si on utilise de l’url rewriting, ne pas faire plus de 4 niveaux de profondeur
Title de la page (title) La taille max souhaitée pour le tag title est de 65 caractères en
moyenne La balise est à placer le plus haut possible dans votre page Positionnez vos mots clés à la suite par importance décroissante Positionnez vous sur la bonne conjugaison (Les moteur sont
sensibles au singulier/pluriel et masculin/féminin) Evitez les erreurs du style (Home, Accueil, bienvenue…) et (titre
identique sur toutes les pages) Balises de titre (H1,h2…) Texte en gras ou italique 1er mots, 1er paragraphes Alt image Cross-linking à l’interieur même du site : plan du site, liens vers
des pages intérieures, chemin de fer…
LES BONS REFLEXES
LES BONS REFLEXES A AVOIR
TOCer les pages (ou chemin de fer) Utiliser des tableaux pour structurer une page Mettre le « alt » et le « title » d’une image Utiliser les balises de titres
Donner des informations
Utiliser des mots clés dans les ancres Nommer le lien
Assurez-vous que le texte associé aux balises title et aux attributs alt est précis et descriptif
Construire des URLs avec des mots clés http://msdn.microsoft.com/fr-fr/msdn.coach.aspx http://mari-net.blogspot.com/2008/03/fiche-de-lecture-permission-marketing.html
Pour respecter les règles d’ergonomie mais aussi optimiser le référencement naturel !
CONCLUSION
1. D’abord penser à ce que l’on veut faire et pourquoi et comment on veut le faire
2. Réfléchir aux mots cléfs3. Commencer l’intégration en pensant au
référencement naturel4. Faire tester son site avant de le mettre en
production
Ca ne s’arrête pas là. Afin de s’assurer que le site fonctionne bien et plaise à la cible, il faut mesurer sa performance et ajuster si les résultats ne sont pas ceux escomptés.
Une fois le site en place, l’animation éditoriale joue un rôle important dans le succès d’un site : mises à jour régulières, exclusivités.
RESSOURCES UTILES
Livre - Ergonomie web, par Amélie boucher
http://www.ergonomie-sites-web.com/ Outil utile pour l’intégration : Expression Web
http://www.microsoft.com/france/expression/try-it/Default.aspx
Site du WAI http://www.w3.org/WAI/intro/wcag.php
Tableau des caractères spéciaux http://www.startyourdev.com/HTML/
TableauCaracteres.html Méthodologie d'optimisation d'une page web
http://methodologies.abondance.com/optimisation.html
