Conception d’un site web support de formation avec exemples
…
5 Étapes
planification stratégique
identification des besoins de votre organisme
Conception paramètres concrets aboutissant à la rédaction d’un cahier des charges
production
Réalisation technique et artistique
Mise en ligne
Déploiement et lancement
exploitation
Maintenance et optimisation
…
Planifier
Fixer vos objectifs en se posant les bonnes questions
Comment mon institut s’insère dans la politique globale de l’université
Qu’est-ce que mon institut vend/a comme point fort?
Qu’est-ce que je veux faire de mon site web: plateforme d’échange? vitrine?
Quelles ressources ai-je pour créer / mettre à jour mon site?
Identifier le public cible
Qui sont mes clients ou visiteurs: étudiants? chercheurs? journalistes?
Viennent-ils souvent?
Vocabulaire de spécialistes ou public large?
Produire un cahier des charges
Quels sont les produits que je vais promouvoir
Quelles sont les fonctionnalités dont j’ai besoin: formulaires, base de données,...
Cerner le champ d’action: textes, formes, etc...
Fixer les délais
N’hésitez pas à aller voir ce que font vos concurrents ou partenaires.
Concevoir
Structurer: créer une arborescence cohérente
La base peut être crée sur papier ou avec des logiciels spécifiques
Importance de la persistence de la structure:
pour les moteurs de recherche
pour les visiteurs
Cette étape est cruciale: une bonne structure ne verra pas son premier niveau modifié dans les années qui suivent
Premier niveau:
5 à 7 entrées maximum
Entrées thématiques exclusives l’une de l’autre (auto ne côtoie pas voiture)
Termes clefs compréhensibles, pas de phrase dans les menus
Exemple de structure à l’aide d’un logiciel Mind Map
» 2. Concevoir
Exemple de structure
structuration des pages et modèles en zones technique des maquettes en fi ls de fer (wireframe)
permet de structurer le contenu
Force à la réfl exion
Facilite la lecture en créant une structure de la page ergonomie
Ne pas chercher à réinventer la roue
Rassurer le lecteur habitué à une présentation type
Faciliter la navigation: nav primaire, secondaire, fi l d’ariane (breadcrumbs)
Structurer et simplifi er
pas de codes compliqués: la page doit se comprendre en elle-même
» 2. ConCevoir
…
exemple de zones appliquées à la page d’accueil de l’uni
» 2. ConCevoir
Exemple de modèles en fils de fer
» 2. Concevoir
Exemple de modèles en fils de fer > version papiers collés
» 2. Concevoir
A vous de JOUER
L’institut de bananologie est experte dans le domaine de production des bananes de masse hors-sol.
Elle accueille chaque année plus de 500 étudiants dont la moitié proviennent de pays étrangers comme l’Allemagne, la France et les Etats-Unis. Ses cours sont donnés sur les sites de Miséricorde et Pérolles 2.
En marge de son activité académique, elle propose des cours d’été pour les experts dans le domaine. Ses chercheurs publient régulièrement sur le site des résultats et informent les médias à différentes occasions. Ils sont une carte de visite importante; plusieurs d’entre eux sont reconnus mondialement.
Les responsables de l’institut se sont réunis pour réfléchir à un site web. Ils ont eu l’occasion de faire un brainstorming pour sortir toutes les idées. Le voici en annexe.
A partir du brainstorming et des informations ci-dessus, proposez un concept de site web (base graphique = modèle unifr):
proposez une structure de site cohérente
indiquez le contenu que vous allez disposer sur le site
si nécessaire identifiez les technologies et outils utiles à la réalisation
prOduire et rÉdiger
identifi er et classifi ez les contenus
Quel contenu va dans quelle partie du site ou concerne quel public
Quel contenu vais-je mettre et dans quel format
(pDF, htMl, image, reprise d’une base de données, etc...)
planifi ez déjà la mise à jour: quel contenu, par qui et à quelle fréquence
eviter les redondances
Facilite la mise à jour
elimine les erreurs et incohérences
Ainsi les liens sont privilégiés (importance pour l’indexation)
rédiger pour le web et pour être lu > forme
pourquoi le web est différent: écran, lien, coup d’oeil
phrases brèves
Contenu structuré: titres, listes, etc...
Mots mis en évidence, sobriété des couleurs
rédiger pour le web et pour être lu > contenu
technique du journal: l’idée principale au début
Adaptez-vous au public-cible: attention au jargon interne ou spécialisé
Oubliez l’académique, écrivez pour être lu le lecteur abandonne après 3 hauteurs d’écran
epurez, épurez, épurez... revenez à la quintessence, pensez à ce que le lecteur doit savoir en quittant votre site et non à ce que vous aimeriez lui présenter
Si nécessaire, partagez votre contenu sur plusieurs pages liens plus aisés
» 3. proDUire et rÉDiGer
ecrire pour le web, recuil de liens
…
exemple avec pDF en téléchargement: pandemia.ch
» 3. proDUire et rÉDiGer
Mise en ligne
La mise en ligne est une étape importante. Avant d’effectuer cette dernière, il y a quelques points à respecter
Tester la navigation (et la compréhension) par un tiers externe
Faire relire le site avant de le lancer en publication
Si des liens ont été communiqués dans une brochure, sur une carte de visite, etc... les reproduire pour ne pas casser un lien
Prévoir une page d’erreur dans le site qui permette à l’internaute de remonter dans la hiérarchie des informations s’il vient d’un lien cassé
Vérifiez les outils comme les flux RSS etc..
Formez les rédacteurs web, désignez les responsables des différentes pages
Maintenir et optimiser
Le cycle d vie d’un site ne se termine pas par sa mise en ligne.
Il s’agit à présent de le maintenir à jour
Maintenance:
désignez les responsables de telle ou telle zone à mettre à jour
identifiez clairement les différentes fréquences et cycles: news chaque semaine, programme des cours chaque semestre
Politique de communication: planifiez des thèmes à mettre en évidence qui correspondent à vos produits, ayez une démarche pro-active orientée vers vos clients (outils, documents, rédaction, etc...)
Optimiser (normalement en amont)
Pour les lecteurs: accessibilité et utilisabilité
Pour les navigateurs: standards CSS
Pour les moteurs de recherche: SEO (Search Engine Optimization), contenus accessibles (pas de flash, interactif, etc...)
Google Tips
Google représente 90-95% des moteurs de recherche (données août 2009, Allemagne et Espagne )
Il est ainsi nécessaire d’optimiser ses pages en priorité pour Google.
Quelques astuces pour que votre site soit correctement indexé:
Utiliser des termes clefs et des phrases brèves dans les endroits pertinents
Mise en valeur des éléments <title>, <h1>, <h2>, etc...
Structurez votre page pour permettre la lisibilité par Google
Ne pas utiliser d’images ou de Flash à la place d’un texte, ni de formulaire de navigation sans alternative > Google ne lit pas le flash ou ne simule pas d’action
Javascript
Les meta n’augmentent pas votre chance d’indexation, par contre des termes
judicieux oui: Bienvenue sur notre site <> Chaire d’anthropologie sociale Université de Fribourg
» 5. Maintenir et optimiser
Google Tips, suite
Google a un mécanisme complexe assez proche du raisonnement humain.
Il tient compte de la notoriété et de la pertinence, ainsi que de l’indexabilité.
Indexabilité: le moteur peut parcourir le contenu
La pertinence est l’adéquation d’une page aux termes recherchés
La notoriété est le nombre de pages liés à la vôtre. (pondération des liens sortant -- annuaire)
Ne changez pas l’url d’une page: ancienneté = plus-value
Respectez les consignes de rédaction et formatez correctement votre texte
Soyez pertinents dans les termes utilisés, réfléchissez à la plus-value qu’offre votre institut ou à ses thèmes phares
Utilisez les standards web
Privilégiez les liens entrants avec les termes pertinents de votre site
Pour les liens, mettez le lien sur des termes précis, et non pas sur un petit bouton ‘lien’ à côté du texte.
Utilisez des outils standards comme des blogs et des CMS: ils incitent à un formatage correct limitant la tentation de créativité débordante mais improductive
» 5. Maintenir et optimiser
…
CHU Nicolas, Réussir un projet de site web, Eyrolles, Paris, 2003
Brainstorming – Institut de bananalogie
MOTS CLÉS
Etudiants
Etrangers
National
International
Allemagne
France
Etats-Unis
Université de Fribourg
Miséricorde
Pérolles 2
Professeurs
Collaborateurs
Assistants
Personnel administratif (secrétariat)
Etudes
Cours d’été
Activités
Fribourg
Horaires
Calendrier
Formation continue
Recherche
Projets
Publications
Téléchargements
Conférences
Mobilité
Collaborations
Partenaires
Médias
Conception d’un site web support de formation avec exemples
…
5 Étapes
planification stratégique
identification des besoins de votre organisme
Conception paramètres concrets aboutissant à la rédaction d’un cahier des charges
production
Réalisation technique et artistique
Mise en ligne
Déploiement et lancement
exploitation
Maintenance et optimisation
…
Planifier
Fixer vos objectifs en se posant les bonnes questions
Comment mon institut s’insère dans la politique globale de l’université
Qu’est-ce que mon institut vend/a comme point fort?
Qu’est-ce que je veux faire de mon site web: plateforme d’échange? vitrine?
Quelles ressources ai-je pour créer / mettre à jour mon site?
Identifier le public cible
Qui sont mes clients ou visiteurs: étudiants? chercheurs? journalistes?
Viennent-ils souvent?
Vocabulaire de spécialistes ou public large?
Produire un cahier des charges
Quels sont les produits que je vais promouvoir
Quelles sont les fonctionnalités dont j’ai besoin: formulaires, base de données,...
Cerner le champ d’action: textes, formes, etc...
Fixer les délais
N’hésitez pas à aller voir ce que font vos concurrents ou partenaires.
Concevoir
Structurer: créer une arborescence cohérente
La base peut être crée sur papier ou avec des logiciels spécifiques
Importance de la persistence de la structure:
pour les moteurs de recherche
pour les visiteurs
Cette étape est cruciale: une bonne structure ne verra pas son premier niveau modifié dans les années qui suivent
Premier niveau:
5 à 7 entrées maximum
Entrées thématiques exclusives l’une de l’autre (auto ne côtoie pas voiture)
Termes clefs compréhensibles, pas de phrase dans les menus
Exemple de structure à l’aide d’un logiciel Mind Map
» 2. Concevoir
Exemple de structure
structuration des pages et modèles en zones technique des maquettes en fi ls de fer (wireframe)
permet de structurer le contenu
Force à la réfl exion
Facilite la lecture en créant une structure de la page ergonomie
Ne pas chercher à réinventer la roue
Rassurer le lecteur habitué à une présentation type
Faciliter la navigation: nav primaire, secondaire, fi l d’ariane (breadcrumbs)
Structurer et simplifi er
pas de codes compliqués: la page doit se comprendre en elle-même
» 2. ConCevoir
…
exemple de zones appliquées à la page d’accueil de l’uni
» 2. ConCevoir
Exemple de modèles en fils de fer
» 2. Concevoir
Exemple de modèles en fils de fer > version papiers collés
» 2. Concevoir
A vous de JOUER
L’institut de bananologie est experte dans le domaine de production des bananes de masse hors-sol.
Elle accueille chaque année plus de 500 étudiants dont la moitié proviennent de pays étrangers comme l’Allemagne, la France et les Etats-Unis. Ses cours sont donnés sur les sites de Miséricorde et Pérolles 2.
En marge de son activité académique, elle propose des cours d’été pour les experts dans le domaine. Ses chercheurs publient régulièrement sur le site des résultats et informent les médias à différentes occasions. Ils sont une carte de visite importante; plusieurs d’entre eux sont reconnus mondialement.
Les responsables de l’institut se sont réunis pour réfléchir à un site web. Ils ont eu l’occasion de faire un brainstorming pour sortir toutes les idées. Le voici en annexe.
A partir du brainstorming et des informations ci-dessus, proposez un concept de site web (base graphique = modèle unifr):
proposez une structure de site cohérente
indiquez le contenu que vous allez disposer sur le site
si nécessaire identifiez les technologies et outils utiles à la réalisation
prOduire et rÉdiger
identifi er et classifi ez les contenus
Quel contenu va dans quelle partie du site ou concerne quel public
Quel contenu vais-je mettre et dans quel format
(pDF, htMl, image, reprise d’une base de données, etc...)
planifi ez déjà la mise à jour: quel contenu, par qui et à quelle fréquence
eviter les redondances
Facilite la mise à jour
elimine les erreurs et incohérences
Ainsi les liens sont privilégiés (importance pour l’indexation)
rédiger pour le web et pour être lu > forme
pourquoi le web est différent: écran, lien, coup d’oeil
phrases brèves
Contenu structuré: titres, listes, etc...
Mots mis en évidence, sobriété des couleurs
rédiger pour le web et pour être lu > contenu
technique du journal: l’idée principale au début
Adaptez-vous au public-cible: attention au jargon interne ou spécialisé
Oubliez l’académique, écrivez pour être lu le lecteur abandonne après 3 hauteurs d’écran
epurez, épurez, épurez... revenez à la quintessence, pensez à ce que le lecteur doit savoir en quittant votre site et non à ce que vous aimeriez lui présenter
Si nécessaire, partagez votre contenu sur plusieurs pages liens plus aisés
» 3. proDUire et rÉDiGer
ecrire pour le web, recuil de liens
…
exemple avec pDF en téléchargement: pandemia.ch
» 3. proDUire et rÉDiGer
Mise en ligne
La mise en ligne est une étape importante. Avant d’effectuer cette dernière, il y a quelques points à respecter
Tester la navigation (et la compréhension) par un tiers externe
Faire relire le site avant de le lancer en publication
Si des liens ont été communiqués dans une brochure, sur une carte de visite, etc... les reproduire pour ne pas casser un lien
Prévoir une page d’erreur dans le site qui permette à l’internaute de remonter dans la hiérarchie des informations s’il vient d’un lien cassé
Vérifiez les outils comme les flux RSS etc..
Formez les rédacteurs web, désignez les responsables des différentes pages
Maintenir et optimiser
Le cycle d vie d’un site ne se termine pas par sa mise en ligne.
Il s’agit à présent de le maintenir à jour
Maintenance:
désignez les responsables de telle ou telle zone à mettre à jour
identifiez clairement les différentes fréquences et cycles: news chaque semaine, programme des cours chaque semestre
Politique de communication: planifiez des thèmes à mettre en évidence qui correspondent à vos produits, ayez une démarche pro-active orientée vers vos clients (outils, documents, rédaction, etc...)
Optimiser (normalement en amont)
Pour les lecteurs: accessibilité et utilisabilité
Pour les navigateurs: standards CSS
Pour les moteurs de recherche: SEO (Search Engine Optimization), contenus accessibles (pas de flash, interactif, etc...)
Google Tips
Google représente 90-95% des moteurs de recherche (données août 2009, Allemagne et Espagne )
Il est ainsi nécessaire d’optimiser ses pages en priorité pour Google.
Quelques astuces pour que votre site soit correctement indexé:
Les meta n’augmentent pas votre chance d’indexation, par contre des termes
judicieux oui: Bienvenue sur notre site <> Chaire d’anthropologie sociale Université de Fribourg
» 5. Maintenir et optimiser
Google Tips, suite
Google a un mécanisme complexe assez proche du raisonnement humain.
Il tient compte de la notoriété et de la pertinence, ainsi que de l’indexabilité.
Indexabilité: le moteur peut parcourir le contenu
La pertinence est l’adéquation d’une page aux termes recherchés
La notoriété est le nombre de pages liés à la vôtre. (pondération des liens sortant -- annuaire)
Ne changez pas l’url d’une page: ancienneté = plus-value
Respectez les consignes de rédaction et formatez correctement votre texte
Soyez pertinents dans les termes utilisés, réfléchissez à la plus-value qu’offre votre institut ou à ses thèmes phares
Utilisez les standards web
Privilégiez les liens entrants avec les termes pertinents de votre site
Pour les liens, mettez le lien sur des termes précis, et non pas sur un petit bouton ‘lien’ à côté du texte.
Utilisez des outils standards comme des blogs et des CMS: ils incitent à un formatage correct limitant la tentation de créativité débordante mais improductive
» 5. Maintenir et optimiser
…
CHU Nicolas, Réussir un projet de site web, Eyrolles, Paris, 2003
