![Page 1: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/1.jpg)
D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr
Anne Zourabichvili, chef de produitOlivier Roumieux, administrateur des sites
![Page 2: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/2.jpg)
• 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
![Page 3: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/3.jpg)
de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 1996
• premier site institutionnel qui présente les ressources à travers l’organisation
![Page 4: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/4.jpg)
de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2000
• nouvelle page d’accueil, introduction du catalogue en ligne
![Page 5: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/5.jpg)
de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2002
• réorganisation du site : 4 pôles transversaux
![Page 6: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/6.jpg)
de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2004
• première enquête utilisateurs sur le site
![Page 7: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/7.jpg)
• juin 2005 : un site entièrement conçu pour l’internaute
de www.ladocfrancaise.gouv.fr à www.ladocumentationfrancaise.fr : 2005
![Page 8: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/8.jpg)
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
![Page 9: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/9.jpg)
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
![Page 10: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/10.jpg)
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
![Page 11: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/11.jpg)
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
![Page 12: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/12.jpg)
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
![Page 13: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/13.jpg)
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…)
![Page 14: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/14.jpg)
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
![Page 15: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/15.jpg)
Le concept d’accessibilité comme fondement de l’ergonomie d’un site
![Page 16: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/16.jpg)
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
![Page 17: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/17.jpg)
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
![Page 18: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/18.jpg)
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
![Page 19: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/19.jpg)
… 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
![Page 20: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/20.jpg)
quelques tableaux de mise en forme
![Page 21: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/21.jpg)
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)
![Page 22: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/22.jpg)
des styles DIVers et CLASSes (2)
![Page 23: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/23.jpg)
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
![Page 24: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/24.jpg)
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
![Page 25: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/25.jpg)
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
![Page 26: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/26.jpg)
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
![Page 27: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/27.jpg)
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>)
![Page 28: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/28.jpg)
un contenu qui a du style…
![Page 29: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/29.jpg)
… même sans aucun style …
![Page 30: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/30.jpg)
…ou avec un autre style
![Page 31: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/31.jpg)
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
![Page 32: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/32.jpg)
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
![Page 33: D’un site institutionnel à un site marchand : ladocumentationfrancaise.fr](https://reader035.vdocuments.us/reader035/viewer/2022062305/568150af550346895dbecb78/html5/thumbnails/33.jpg)
merci de votre attention…