Transcript D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr Anne Zourabichvili, chef de produit Olivier Roumieux, administrateur des sites.

D’un site institutionnel à un site marchand :
ladocumentationfrancaise.fr
Anne Zourabichvili, chef de produit
Olivier Roumieux, administrateur des sites
la Documentation française
• une administration centrale qui dépend des services
du Premier ministre
• 3 activités
 édition et diffusion, un catalogue de 6 000 titres
 gestion de ressources documentaires, un centre de
documentation internationale
 information du public sur internet, 3 sites service-public.fr,
vie-public.fr, ladocumentationfrancaise.fr
• une administration pionnière dans les nouvelles
technologies
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr : 1996
• premier site institutionnel qui présente les ressources à travers
l’organisation
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr : 2000
• nouvelle page d’accueil, introduction du catalogue en ligne
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr : 2002
• réorganisation du site : 4 pôles transversaux
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr : 2004
• première enquête utilisateurs sur le site
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr : 2005
• juin 2005 : un site entièrement conçu pour l’internaute
2 axes principaux dans le changement
• favoriser l’appropriation immédiate du site par le
public
• valoriser l’offre commerciale, fluidifier le passage du
gratuit au payant
d’une page d’accueil à l’autre : la page actuelle
une place trop importante
donnée à la marque
des intitulés peu compréhensibles
pas de vision concrète de l’offre
d’une page d’accueil à l’autre : les solutions
apportées
optimiser l’espace de la page
faciliter l’entrée dans le site
clarifier les intitulés
afficher l’offre, pas la structure institutionnelle
un site conçu pour le public
•
•
•
•
•
•
•
des libellés simples
un moteur de recherche sur tout le site
des accès thématiques transversaux
une navigation clairement identifiée
complémentarité des rubriques clairement exprimée
un module de démonstration du fonctionnement du
catalogue
mise en valeur de la diversité de l’offre
une offre commerciale valorisée
• présence du panier dans le bandeau haut de toutes
les pages
• listes des meilleures ventes, à paraître, nouveautés
dès la page d’accueil
• présence systématique du bouton « ajouter au
panier » à côté des ouvrages valorisés
• bandeau publicitaire en haut de page
un passage fluide du gratuit au payant
• des accès thématiques et des résultats de recherche
qui affichent les deux aspects de l’offre
• des contenus gratuits qui incitent à l’achat
 créer le besoin en associant une sélection commentée à
valeur ajoutée
 inciter à l’achat en colonne droite, de façon contextuelle
 mettre en valeur les derniers numéros pour les revues
 afficher toutes les possibilités d’achat (abonnement, liste des
librairies, des kiosques…)
une nouvelle image pour un public plus large
• un graphisme moderne et dynamique
• un graphisme souple dans sa ligne pour une image
d’ouverture vers l’extérieur
• des couleurs chaudes non associées à
l’administration
Le concept d’accessibilité comme fondement de
l’ergonomie d’un site
l’équipe de l’administration des sites
• 3 personnes interviennent sur les 3 sites
• production des pages statiques
• création de modèles
• suivi de la fréquentation des sites
• suivi du bon fonctionnement des sites
contexte et contraintes
• une cinquantaine de contributeurs
• des contenus nombreux aux formes assez
hétérogènes : environ 2 500 pages (hors BDD)
• un outil de développement : Dreamweaver
• des évolutions technologiques à appréhender grâce à
un effort de formation
une version de transition…
• la production de la majorité des pages demeure
statique
• introduction de zones textuelles dynamiques (ex :
nouveautés alimentées par le service Promotion)
• nous continuons à utiliser des tableaux (<TABLE>)
pour poser et fixer les principaux blocs des pages
• le standard de développement est le HTML 4.01
Transitional
… qui prépare l’avenir
• les gabarits développés sont typés à l’aide de
commentaires et de DIV
• facilite le passage à la gestion de contenus
• utilisation avancée des feuilles de style
(positionnement)
• toutes les pages du site font désormais référence au
même standard HTML
quelques tableaux de mise en forme
des styles DIVers et CLASSes (1)
• non à la « classite » : éviter le recours systématique
à l’application d’une classe dans le code
• découpage de la page en blocs fonctionnels






en-tête
navigation
progression (= barre de progression)
contextuel (= menu gauche récurrent)
principal (= corps de page)
complement (= ressources complémentaires)
des styles DIVers et CLASSes (2)
des styles DIVers et CLASSes (3)
• privilégier les styles contextuels pour n’utiliser les
classes que dans des cas ponctuels
• nommer les styles de manière fonctionnelle et non
topographique
des styles DIVers et CLASSes (4)
• déplacer au maximum la mise en forme dans les
•
•
•
•
feuilles de style externes
optimiser la lisibilité
mieux figer les gabarits dans leur forme et permettre
ainsi aux contributeurs de se concentrer sur la
production des textes
meilleure exploitation dans Dreamweaver
conserver aux classes leur fonction première de
styler les contenus dans les circonstances non
prédictibles
sous le signe de l’accessibilité
• Accessiweb : grille de 92 critères établie « à partir
des recommandations internationales WCAG 1.0 du
W3C/WAI et sur la base de 300 évaluations de sites
par BrailleNet depuis 1998 »
• choix du niveau Bronze dès le début du projet : 55
critères
les grands thèmes
•
•
•
•
•
•
•
•
•
•
•
•
•
éléments graphiques
cadres (frames)
couleurs
multimédia
tableaux
liens
scripts
éléments obligatoires (doctype, lang, title…)
structuration de l’information
présentation de l’information
formulaires
aide à la navigation
contenus accessibles
quelques points délicats
• l'intitulé des liens fait-il moins de 80 caractères ?
• chaque intitulé de lien identique amène t-il vers la
•
•
même destination ?
y a-t-il une alternative équivalente au script qui
déclenche l'ouverture de nouvelles fenêtres ? (popup)
si un script nécessite une alternative pour être
accessible, l'information donnée par cette alternative
est-elle équivalente à l'information fournie par le
script ? (<noscript>)
un contenu qui a du style…
… même sans aucun style …
…ou avec un autre style
calendrier du projet
• nov. 2003 – jan. 2004 : tests utilisateurs
• sept. 2004 : conception de 12 gabarits
• nov. 2004 : formation CSS + Accessibilité
• mars – mai 2005 : production de 2 500 pages par
une équipe de 3 personnes (dont 1 expert
Accessiweb)
• juin 2005 : ouverture
perspectives sur nos sites
• diffuser les bonnes pratiques d’accessibilité
progressivement sur les trois sites
• 2005 : vie-publique.fr
 entièrement en CSS-P
 globalement conforme au niveau Bronze
• 2006 : service-public.fr conforme aux
recommandations ADAE
merci de votre attention…