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

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

2. 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

3. de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 1996 • premier site institutionnel qui présente les ressources à travers l’organisation

4. de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2000 • nouvelle page d’accueil, introduction du catalogue en ligne

5. de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2002 • réorganisation du site : 4 pôles transversaux

6. de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2004 • première enquête utilisateurs sur le site

7. de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2005 • juin 2005 : un site entièrement conçu pour l’internaute

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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…)

14. 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

15. Le concept d’accessibilité comme fondement de l’ergonomie d’un site

16. 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

17. 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

18. 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

19. … 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

20. quelques tableaux de mise en forme

21. 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)

22. des styles DIVers et CLASSes (2)

23. 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

24. 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

25. 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

26. 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

27. 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>)

28. un contenu qui a du style…

29. … même sans aucun style …

30. …ou avec un autre style

31. 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

32. 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

33. merci de votre attention…