LES BONNES PRATIQUES POUR AVOIR UN SITE EFFICACE Marine Tranquard
SOMMAIRE <ul><li>L’ergonomie web </li></ul><ul><ul><li>Qu’est-ce que c’est ? </li></ul></ul><ul><ul><li>Les règles d’or </...
L’ERGONOMIE WEB <ul><li>UTILITE </li></ul><ul><ul><li>Répondre à un besoin </li></ul></ul><ul><ul><li>= Capter, les intern...
LES REGLES D’OR DE L’ERGONOMIE <ul><li>Architecture du site propre et structurée </li></ul><ul><li>Organisation visuelle d...
INTEGRATION HTML
HTML : C’EST QUOI ? <ul><li>HTML : Hypertext Markup Language, ou « langage de marquage de l’hypertexte » </li></ul><ul><li...
HTML : LES TAGS OBLIGATOIRES <ul><li>W3C </li></ul><ul><li>Pour délimiter le document : <html>…</html> </li></ul><ul><li>P...
HTML : LES TAGS A CONNAITRE <ul><li>Délimiter le  <h1>titre du document </h1> </li></ul><ul><ul><li><h2>Sous-titre 1</h2> ...
COMMENT OPTIMISER SON  RÉFÉRENCEMENT NATUREL
RÉFÉRENCEMENT NATUREL, C’EST QUOI ? <ul><li>Stratégie d’indexation du site par les outils de recherche, qui permet de posi...
BONNES PRATIQUES DU RÉFÉRENCEMENT NATUREL <ul><li>Nom de domaine  </li></ul><ul><li>URL </li></ul><ul><ul><li>Si on utilis...
LES BONS REFLEXES
LES BONS REFLEXES A AVOIR <ul><li>TOCer les pages (ou chemin de fer) </li></ul><ul><li>Utiliser des tableaux pour structur...
CONCLUSION <ul><li>D’abord penser à ce que l’on veut faire et pourquoi et comment on veut le faire </li></ul><ul><li>Réflé...
RESSOURCES UTILES <ul><li>Livre - Ergonomie web,  par Amélie boucher </li></ul><ul><ul><li>http://www.ergonomie-sites-web....
Prochain SlideShare
Chargement dans…5
×

Les Bonnes Pratiques Pour Avoir Un Site Web Efficace

3 913 vues

Publié le

Découvrez dans cette présentation des pistes (non exhaustives) pour assurer le succès de votre site Web avant sa mise en production.

Publié dans : Business
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 913
Sur SlideShare
0
Issues des intégrations
0
Intégrations
34
Actions
Partages
0
Téléchargements
89
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Les Bonnes Pratiques Pour Avoir Un Site Web Efficace

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

    ×