--- title: "Guide Vivre à Morlaix : du papier au web | Webdesign29" description: "Découvrez la réalisation du guide Vivre à Morlaix : identité web, liseuse interactive, feuilletage, zoom et lecture mobile." url: https://www.webdesign29.net/realisations/guide-morlaix lang: fr --- # Guide Vivre à Morlaix : du papier au web | Webdesign29 Site internet # Guide Vivre à Morlaix Du guide papier à la lecture en ligne : une identité fidèle à l’édition 2026/2027 et une liseuse de 64 pages, avec feuilletage, zoom et navigation adaptés à chaque écran. [Voir le site](https://guide-morlaix.bzh/)[Un projet similaire ?](https://www.webdesign29.net/devis) ![Guide Vivre à Morlaix](https://www.webdesign29.net/cases/morlaix/overview.jpg) ## Donner une seconde vie numérique au guide local Pour la publication **Vivre à Morlaix et ses Alentours** de l’Agence Bergame, nous avons conçu une interface web inspirée du guide et intégré une liseuse interactive. L’enjeu : conserver la richesse de la mise en page imprimée tout en donnant au lecteur des outils adaptés au web, du repérage d’une page à la lecture sur téléphone. Le site réunit la consultation de l’édition 2026/2027, les téléchargements PDF et l’accès à l’édition précédente. Les captures ci-dessous présentent le travail de design et les principaux usages de la liseuse. Publication Agence Bergame Édition en ligne 2026/2027 · 64 pages Notre intervention Site web et liseuse ## Retrouver l’esprit du guide dès le premier écran Vivre à Morlaix et ses Alentours rassemble les informations et bonnes adresses de la vie locale. Son édition papier possède une identité visuelle marquée. Le site la prolonge avec un fond bleu clair, des titres orange, des commandes violettes et le jaune vif de l’étiquette d’édition. Les bordures découpées évoquent la couverture. La navigation reste courte : consulter le guide actuel, retrouver l’édition précédente ou accéder à l’inscription. Le feuilletage prend place directement sur la page d’accueil. ****** guide-morlaix.bzh ![L’accueil et l’identité visuelle du guide 2026/2027](https://www.webdesign29.net/cases/morlaix/home-desktop.jpg) ## Feuilleter une publication, sur ordinateur comme sur téléphone Le lecteur retrouve le mouvement d’un livre : couverture, pages qui se tournent et doubles pages sur un écran suffisamment large. Sur téléphone, la liseuse présente une page à la fois pour garder une surface de lecture utile. Les boutons Précédent et Suivant, les gestes tactiles et le clavier donnent plusieurs façons d’avancer. Le plein écran agrandit la zone de consultation. Lorsque le système demande moins d’animations, les transitions s’adaptent à cette préférence. ![Une page du guide dans la liseuse sur téléphone](https://www.webdesign29.net/cases/morlaix/reader-mobile.jpg) **La même édition, un affichage adapté**Le contenu de la publication reste identique. C’est la présentation de la liseuse qui change selon l’écran. ![Le site Guide Morlaix sur ordinateur et la liseuse sur téléphone](https://www.webdesign29.net/cases/morlaix/overview.jpg) Captures du site en ligne : accueil sur ordinateur et lecture sur téléphone. ## Passer du feuilletage à la recherche d’un détail On ne consulte pas toujours un guide dans l’ordre. La grille de vignettes permet de repérer une rubrique visuellement ; le numéro de page donne un accès direct. La page ouverte est conservée dans l’adresse, pour partager un passage précis. Le zoom agit directement dans la liseuse. Les boutons ou la molette agrandissent le document, puis le lecteur le fait glisser pour examiner une adresse ou un petit texte. Un clic sur le pourcentage rétablit l’affichage initial. ****** guide-morlaix.bzh/#page=4 ![Lecture en double page](https://www.webdesign29.net/cases/morlaix/reader-desktop.jpg) ### Lire dans la continuité du papier La double page conserve la mise en page de la publication et les commandes restent à portée de main. ****** guide-morlaix.bzh ![Le navigateur de pages par vignettes](https://www.webdesign29.net/cases/morlaix/thumbnails-desktop.jpg) ### Repérer une page en un regard Une vue d’ensemble des 64 pages, avec accès direct à la page choisie. ****** guide-morlaix.bzh ![Le guide agrandi à 150 %](https://www.webdesign29.net/cases/morlaix/zoom-desktop.jpg) ### Agrandir sans changer de contexte Le zoom et le déplacement dans la page permettent d’examiner les détails tout en restant dans le guide. ![Le navigateur de pages sur téléphone](https://www.webdesign29.net/cases/morlaix/thumbnails-mobile.jpg) **Le repérage reste accessible sur mobile**Les vignettes s’organisent dans une grille adaptée à la largeur du téléphone. Captures réelles du 25 septembre 2026. Cliquez sur les vues bureau pour les agrandir. ## Charger le bon niveau de détail au bon moment Une publication de 64 pages ne doit pas imposer le téléchargement de toutes ses images haute définition avant de commencer à lire. La liseuse charge les images de lecture autour de la page ouverte, utilise des vignettes pour les pages éloignées et appelle les images plus détaillées lorsque le zoom le nécessite. Les visuels sont servis en WebP et le moteur de feuilletage est hébergé avec le site. Cette organisation accompagne la lecture sans imposer l’ouverture préalable du PDF complet. ## Garder le PDF et les éditions précédentes à portée de main La lecture en ligne complète les autres usages du guide. Le PDF original reste disponible pour être ouvert ou téléchargé ; une version en planches est également proposée. Le guide 2025/2026 reste accessible sur Calaméo. Le formulaire existant permet aux acteurs locaux de proposer une activité, une association ou un service. La publication et son contenu éditorial sont signés Agence Bergame ; notre travail concerne le site et l’expérience de lecture numérique. ## Les fonctions du guide numérique Une interface de consultation pensée pour les usages concrets d’une publication locale. ### Lire à son rythme - 64 pages à feuilleter en ligne - Page simple sur petit écran, double page lorsque la place le permet - Navigation tactile, boutons et raccourcis clavier - Plein écran pour se concentrer sur le guide ### Trouver une information - Vue d’ensemble des pages par vignettes - Accès direct par numéro de page - Adresse partageable conservant la page ouverte - Zoom progressif, déplacement dans la page et retour à 100 % ### Prolonger la consultation - PDF original à ouvrir ou télécharger - Version en planches disponible séparément - Accès au guide 2025/2026 sur Calaméo - Formulaire existant pour proposer une activité, une association ou un service ### Technologies utilisées ![PHP](https://www.webdesign29.net/tech/php.svg)PHP![JavaScript](https://www.webdesign29.net/tech/javascript.svg)JavaScript - **Site web** : PHP, HTML, CSS et JavaScript - **Liseuse** : StPageFlip - **Images** : WebP, chargement à la demande ## Pour un projet du même type [ExpertiseExpertise développement web](https://www.webdesign29.net/expertises/developpements-web)[ServiceCréation de site vitrine](https://www.webdesign29.net/services/site-internet-vitrine) [Voir le site du client](https://guide-morlaix.bzh/) Le site a pu évoluer depuis notre intervention. [https://www.webdesign29.net/realisations/gt-online-pieces-detachees-coaching-reparation-brest![GT Online : pièces détachées et coaching réparation à Brest](https://www.webdesign29.net/cases/gto/vitrine.jpg)← Réalisation précédenteGT Online : pièces détachées et coaching réparation à Brest[https://www.webdesign29.net/realisations/pdf-inkluraRéalisation suivante →Inklura PDF : caviardage local et assistant IA![Inklura PDF : caviardage local et assistant IA](https://www.webdesign29.net/cases/pdf-inklura/overview.jpg) ## Autres réalisations [Toutes les réalisations](https://www.webdesign29.net/realisations) [https://www.webdesign29.net/realisations/pdf-inklura******pdf.inklura.fr![Inklura PDF : caviardage local et assistant IA](https://www.webdesign29.net/cases/pdf-inklura/overview.jpg)Application sur mesure ### Inklura PDF : caviardage local et assistant IA [https://www.webdesign29.net/realisations/gt-online-pieces-detachees-coaching-reparation-brest******www.gtonline.fr![GT Online : pièces détachées et coaching réparation à Brest](https://www.webdesign29.net/cases/gto/vitrine.jpg)Site e-commerce ### GT Online : pièces détachées et coaching réparation à Brest [https://www.webdesign29.net/realisations/avivre-magazine******www.avivremagazine.fr![À Vivre Magazine : plateforme éditoriale architecture et design](https://www.webdesign29.net/cases/avivre/vitrine.jpg)Application sur mesure ### À Vivre Magazine : plateforme éditoriale architecture et design ## Un projet comparable ? Décrivez-le en quelques lignes, nous vous répondons sous 24 heures. [Demander un devis gratuit](https://www.webdesign29.net/devis)[Nous contacter](https://www.webdesign29.net/contact)