D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr

Anne Zourabichvili, chef de produitOlivier Roumieux, administrateur des sites

• 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

la Documentation française

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

• juin 2005 : un site entièrement conçu pour l’internaute

de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2005

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 importantedonné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 ?  (pop-up)

• 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…