D

1
Dun 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 lorganisation

4
de www.ladocfrancaise.gouv.fr à
www.ladocumentationfrancaise.fr 2000

• nouvelle page daccueil, 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
  linternaute

8
2 axes principaux dans le changement

• favoriser lappropriation immédiate du site par
  le public
• valoriser loffre commerciale, fluidifier le
  passage du gratuit au payant

9
dune page daccueil à lautre la page actuelle
une place trop importantedonnée à la marque
des intitulés peu compréhensibles
pas de vision concrète de loffre
10
dune page daccueil à lautre les solutions
apportées
optimiser lespace de la page
faciliter lentrée dans le site
clarifier les intitulés
afficher loffre, 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 loffre

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 daccueil
• 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
  loffre
• des contenus gratuits qui incitent à lachat
• créer le besoin en associant une sélection
  commentée à valeur ajoutée
• inciter à lachat en colonne droite, de façon
  contextuelle
• mettre en valeur les derniers numéros pour les
  revues
• afficher toutes les possibilités dachat
  (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
  douverture vers lextérieur
• des couleurs chaudes non associées à
  ladministration

15
Le concept daccessibilité comme fondement de
lergonomie dun site
16
léquipe de ladministration 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 (ltTABLEgt)
  pour poser et fixer les principaux blocs des
  pages
• le standard de développement est le HTML 4.01
  Transitional

19
qui prépare lavenir

• les gabarits développés sont typés à laide 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 à lapplication dune 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
  nutiliser 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 laccessibilité

• 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 linformation
• présentation de linformation
• 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 ?  (ltnoscriptgt)

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 daccessibilité
  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