[{"data":1,"prerenderedAt":914},["ShallowReactive",2],{"site-nav":3,"article-animations-site-web-utiles-ou-nuisibles":109,"article-linked-animations-site-web-utiles-ou-nuisibles":744,"cta-service-webdesign-ux-ui-nantes":913},{"services":4,"rubriques":92},[5,13,20,27,34,41,47,55,61,67,74,80,86],{"path":6,"title":7,"navTitle":8,"summary":9,"color":10,"order":11,"category":12},"\u002Fservices\u002Fcreation-site-vitrine-nantes","Création de site vitrine à Nantes","Site vitrine","Un site sur mesure, rapide et accessible, qui présente votre activité et transforme les visites en demandes de contact.","jaune",1,"creation",{"path":14,"title":15,"navTitle":16,"summary":17,"color":18,"order":19,"category":12},"\u002Fservices\u002Fcreation-site-e-commerce-nantes","Création de site e-commerce à Nantes","Site e-commerce","Une boutique en ligne sur Shopify, WooCommerce ou PrestaShop, pensée pour vendre : catalogue, paiement, livraison et SEO.","vert",2,{"path":21,"title":22,"navTitle":23,"summary":24,"color":25,"order":26,"category":12},"\u002Fservices\u002Frefonte-site-internet-nantes","Refonte de site internet à Nantes","Refonte de site","Moderniser votre site sans perdre votre référencement : audit, plan de redirections, nouveau design et migration des contenus.","orange",3,{"path":28,"title":29,"navTitle":30,"summary":31,"color":32,"order":33,"category":12},"\u002Fservices\u002Fwebdesign-ux-ui-nantes","Agence UX\u002FUI design et webdesign à Nantes","Webdesign UX\u002FUI","Recherche utilisateur, parcours, maquettes, prototype testé et design system : des interfaces claires, accessibles et prêtes à développer.","rose",4,{"path":35,"title":36,"navTitle":37,"summary":38,"color":39,"order":40,"category":12},"\u002Fservices\u002Fdeveloppement-web-sur-mesure-nantes","Agence de développement web sur mesure à Nantes","Développement sur mesure","Applications métier, extranets, MVP SaaS, API et intégrations : du code sur mesure, testé, documenté et qui vous appartient.","chartreuse",5,{"path":42,"title":43,"navTitle":44,"summary":45,"color":18,"order":46,"category":12},"\u002Fservices\u002Feco-conception-web-nantes","Éco-conception de site web à Nantes","Éco-conception","Audit RGESN, pages allégées, compatibilité avec les anciens appareils et déclaration d’écoconception : un site plus sobre, mesuré, sans allégation invérifiable.",6,{"path":48,"title":49,"navTitle":50,"summary":51,"color":52,"order":53,"category":54},"\u002Fservices\u002Freferencement-naturel-seo-nantes","Agence SEO à Nantes : référencement naturel","Référencement SEO","Audit, contenus, maillage, référencement local et suivi Search Console : un SEO mesuré, sans promesse de position, pour être trouvé à Nantes et au-delà.","bleu",7,"visibilite",{"path":56,"title":57,"navTitle":58,"summary":59,"color":39,"order":60,"category":54},"\u002Fservices\u002Foptimisation-vitesse-site-web-nantes","Optimisation de la vitesse de site web à Nantes","Vitesse & Core Web Vitals","Mesure des Core Web Vitals, audit, plan d’action chiffré et correctifs sur votre technologie : des pages plus rapides, vérifiées sur les données réelles.",8,{"path":62,"title":63,"navTitle":64,"summary":65,"color":32,"order":66,"category":54},"\u002Fservices\u002Faccessibilite-numerique-nantes","Accessibilité numérique et audit RGAA à Nantes","Accessibilité (RGAA)","Audit RGAA, corrections, déclaration d’accessibilité et formation : rendre votre site utilisable par tous et répondre à vos obligations.",9,{"path":68,"title":69,"navTitle":70,"summary":71,"color":10,"order":72,"category":73},"\u002Fservices\u002Fmaintenance-site-internet-nantes","Maintenance de site internet à Nantes","Maintenance & hébergement","Mises à jour, sécurité, sauvegardes, hébergement en Europe et petites modifications : votre site reste rapide, sûr et à jour.",10,"exploitation",{"path":75,"title":76,"navTitle":77,"summary":78,"color":52,"order":79,"category":73},"\u002Fservices\u002Finfrastructure-cloud-nantes","Infrastructure cloud scalable à Nantes","Infrastructure cloud","Une architecture évolutive hébergée en Europe, décrite en code, qui monte en charge et se relève d’une panne : pour les boutiques et applications à fort trafic.",11,{"path":81,"title":82,"navTitle":83,"summary":84,"color":25,"order":85,"category":73},"\u002Fservices\u002Faudit-securite-site-web-nantes","Audit de sécurité de site web à Nantes","Audit de sécurité","HTTPS, extensions, comptes, sauvegardes et contrôles guidés par l’OWASP : un audit de sécurité priorisé, vérifié après corrections, et la remise en état d’un site piraté.",12,{"path":87,"title":88,"navTitle":89,"summary":90,"color":32,"order":91,"category":73},"\u002Fservices\u002Fautomatisation-processus-nantes","Agence d’automatisation des processus à Nantes","Automatisation & API","Vos outils reliés par des workflows n8n et des API — CRM, facturation, boutique, formulaires —, avec une IA qui propose et une personne qui valide.",13,[93,97,101,105],{"path":94,"title":95,"navTitle":96,"color":52,"order":11},"\u002Fjournal\u002Frubrique\u002Fseo-visibilite-locale","Être trouvé : SEO et visibilité locale","SEO & visibilité locale",{"path":98,"title":99,"navTitle":100,"color":32,"order":19},"\u002Fjournal\u002Frubrique\u002Fux-contenus-accessibilite","Être compris : UX, contenus et accessibilité","UX, contenus & accessibilité",{"path":102,"title":103,"navTitle":104,"color":18,"order":26},"\u002Fjournal\u002Frubrique\u002Fdesign-conversion-ecommerce","Être choisi : design, conversion et e-commerce","Design, conversion & e-commerce",{"path":106,"title":107,"navTitle":108,"color":10,"order":33},"\u002Fjournal\u002Frubrique\u002Fprojet-web-budget-methode","Durer : budget, méthode, performance et sécurité","Projet, sécurité & durée",{"id":110,"title":111,"author":112,"body":113,"cover":712,"coverAlt":712,"date":713,"dateModified":712,"description":714,"extension":715,"faq":716,"featured":729,"head":712,"keyword":730,"meta":731,"navigation":732,"ogImage":712,"path":733,"robots":712,"rubrique":734,"schemaOrg":712,"seo":735,"services":737,"sitemap":740,"stem":741,"summary":742,"__hash__":743},"journal\u002Fjournal\u002Fanimations-site-web-utiles-ou-nuisibles.md","Animations sur un site web : utiles ou nuisibles ?","equipe-fogg",{"type":114,"value":115,"toc":703},"minimark",[116,125,130,133,168,171,175,178,228,240,244,247,285,288,355,358,367,374,378,389,392,402,410,416,423,427,430,574,583,587,596,621,630,639,643,646,691],[117,118,119,120,124],"p",{},"Une animation sur un site web est utile quand elle aide le visiteur à comprendre ce qui se passe : confirmer un clic, montrer d’où sort un menu, signaler une erreur dans un formulaire. Elle devient nuisible quand elle décore au détriment de la vitesse, du confort ou de l’accessibilité : textes qui n’apparaissent qu’au défilement, parallaxe qui donne le vertige, carrousel qui tourne tout seul. Notre règle tient en trois points, pour nos clients comme pour notre propre site : animer seulement ce qui sert, le faire en CSS, et respecter le réglage « réduire les animations » de chaque visiteur. Ce guide complète ",[121,122,123],"a",{"href":98},"nos conseils pour des pages claires et accessibles",".",[126,127,129],"h2",{"id":128},"ce-quune-animation-apporte-au-visiteur","Ce qu’une animation apporte au visiteur",[117,131,132],{},"Bien employée, une animation remplit l’un de ces trois rôles :",[134,135,136,156,162],"ul",{},[137,138,139,143,144,150,151,155],"li",{},[140,141,142],"strong",{},"Confirmer une action."," Un bouton qui change d’aspect sous le doigt, un indicateur pendant l’envoi d’un formulaire, une coche quand le message est parti : le visiteur sait que son geste a été pris en compte. Encore faut-il que la réaction soit immédiate : selon le ",[121,145,149],{"href":146,"rel":147},"https:\u002F\u002Fweb.dev\u002Farticles\u002Frail",[148],"nofollow","modèle RAIL publié par Google",", une réponse en moins de 100 millisecondes est perçue comme instantanée. ",[121,152,154],{"href":153},"\u002Fglossaire#inp","L’INP, l’indicateur de réactivité de Google",", mesure ce délai entre le geste et la réaction à l’écran : il est jugé bon jusqu’à 200 millisecondes.",[137,157,158,161],{},[140,159,160],{},"Montrer d’où viennent les choses."," Un menu qui se déplie sous son bouton, un panneau qui glisse depuis le bord de l’écran, une réponse de FAQ qui s’ouvre sous sa question : le mouvement relie l’état d’avant à l’état d’après.",[137,163,164,167],{},[140,165,166],{},"Attirer l’œil sur un changement."," Un compteur de panier mis à jour, un message d’erreur à côté du champ concerné, une notification discrète. C’est le rôle le plus délicat : ce qui attire le regard le détourne aussi du reste de la page.",[117,169,170],{},"Hors de ces trois rôles, l’animation est décorative. Elle a sa place sur un site de marque ou un portfolio, si elle justifie son coût et s’efface quand le visiteur le demande.",[126,172,174],{"id":173},"ce-que-coûte-une-animation-chargement-réactivité-stabilité","Ce que coûte une animation : chargement, réactivité, stabilité",[117,176,177],{},"Une animation n’est jamais gratuite : bibliothèque JavaScript, vidéo ou image animée, elle se télécharge puis s’exécute sur l’appareil du visiteur, parfois un téléphone bien moins puissant que l’ordinateur de son concepteur. Les trois Core Web Vitals de Google en portent la trace :",[134,179,180,192,217],{},[137,181,182,185,186,191],{},[140,183,184],{},"Le LCP, pour l’affichage du contenu principal."," Pour le calculer, Chrome ignore les éléments dont l’opacité est nulle et ne retient un élément ",[121,187,190],{"href":188,"rel":189},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[148],"qu’une fois qu’il est affiché et visible"," : un titre qui attend un script ou un délai d’animation pour apparaître peut donc allonger le LCP d’autant. Un écran de chargement animé fait pire : il retarde l’affichage de toute la page.",[137,193,194,197,198,202,203,208,209,212,213,216],{},[140,195,196],{},"Le CLS, pour la stabilité visuelle."," Une animation de ",[199,200,201],"code",{},"transform"," ",[121,204,207],{"href":205,"rel":206},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcls",[148],"déplace un élément sans décaler la mise en page",", contrairement à une animation de ",[199,210,211],{},"top",", de ",[199,214,215],{},"left"," ou de la hauteur d’un bloc. Google tolère les décalages qui surviennent moins de 500 millisecondes après un clic, un toucher ou une frappe, comme à l’ouverture d’un accordéon ; au-delà, ils comptent de nouveau, et le défilement ne bénéficie d’aucune tolérance.",[137,218,219,222,223,124],{},[140,220,221],{},"L’INP, pour la réactivité."," Il peut souffrir des animations calculées image par image en JavaScript et des scripts qui suivent le défilement : ils occupent ",[121,224,227],{"href":225,"rel":226},"https:\u002F\u002Fweb.dev\u002Farticles\u002Finp",[148],"le fil principal du navigateur, celui qui traite aussi les clics",[117,229,230,231,235,236,239],{},"Pour les mesurer sur votre site, suivez ",[121,232,234],{"href":233},"\u002Fjournal\u002Fcore-web-vitals-lcp-inp-cls","notre guide des Core Web Vitals",". Et si des effets l’ont déjà alourdi, ",[121,237,238],{"href":56},"notre service d’optimisation de la vitesse"," commence par un audit, puis classe les corrections selon le gain attendu.",[126,241,243],{"id":242},"accessibilité-vertiges-distraction-et-crises-dépilepsie","Accessibilité : vertiges, distraction et crises d’épilepsie",[117,245,246],{},"Les règles internationales d’accessibilité du W3C, les WCAG, visent trois risques liés au mouvement :",[134,248,249,261,273],{},[137,250,251,254,255,260],{},[140,252,253],{},"Les vertiges."," Chez les personnes atteintes de troubles vestibulaires, c’est-à-dire de l’oreille interne, une animation peut provoquer ",[121,256,259],{"href":257,"rel":258},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fanimation-from-interactions.html",[148],"vertiges, nausées et maux de tête",". Le W3C cite la parallaxe, où l’arrière-plan défile à une autre vitesse que le premier plan, comme une animation souvent non essentielle, et vise aussi les pages dont les éléments bougent quand on les fait défiler.",[137,262,263,266,267,272],{},[140,264,265],{},"La distraction."," Un contenu en mouvement ",[121,268,271],{"href":269,"rel":270},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fpause-stop-hide.html",[148],"peut fortement distraire",", et ce qui clignote gêne particulièrement les personnes qui ont des troubles de l’attention. Il complique aussi la lecture pour celles qui suivent mal les objets en mouvement, et peut perturber les lecteurs d’écran.",[137,274,275,278,279,284],{},[140,276,277],{},"Les crises d’épilepsie."," Chez les personnes photosensibles, un contenu qui flashe à certaines fréquences peut ",[121,280,283],{"href":281,"rel":282},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fthree-flashes-or-below-threshold.html",[148],"déclencher une crise",", et le rouge est plus à risque que les autres couleurs.",[117,286,287],{},"Les WCAG y répondent notamment par trois critères, que le RGAA reprend en partie :",[289,290,291,310],"table",{},[292,293,294],"thead",{},[295,296,297,301,304,307],"tr",{},[298,299,300],"th",{},"Critère WCAG",[298,302,303],{},"Ce qu’il demande",[298,305,306],{},"Niveau",[298,308,309],{},"RGAA 4.1.2",[311,312,313,328,341],"tbody",{},[295,314,315,319,322,325],{},[316,317,318],"td",{},"2.2.2 Mettre en pause, arrêter, masquer",[316,320,321],{},"Un mouvement automatique de plus de cinq secondes, affiché avec d’autres contenus, peut être mis en pause, arrêté ou masqué, sauf s’il est essentiel",[316,323,324],{},"A",[316,326,327],{},"Critère 13.8",[295,329,330,333,336,338],{},[316,331,332],{},"2.3.1 Pas plus de trois flashs ou sous le seuil critique",[316,334,335],{},"Rien ne flashe plus de trois fois par seconde, sauf sous les seuils de flash général et de flash rouge",[316,337,324],{},[316,339,340],{},"Critère 13.7",[295,342,343,346,349,352],{},[316,344,345],{},"2.3.3 Animation résultant d’interactions",[316,347,348],{},"Le mouvement déclenché par une interaction peut être désactivé, sauf s’il est essentiel",[316,350,351],{},"AAA",[316,353,354],{},"Non exigé",[117,356,357],{},"Ces correspondances valent pour le RGAA 4.1.2, en vigueur ; sa version 5 est annoncée pour fin 2026.",[117,359,360,361,366],{},"Les deux premiers, de niveau A, s’appliquent selon le W3C à tous les contenus de la page, car un seul élément fautif peut gêner l’usage de toute la page. Le RGAA les traduit en tests. Son ",[121,362,365],{"href":363,"rel":364},"https:\u002F\u002Faccessibilite.numerique.gouv.fr\u002Fmethode\u002Fcriteres-et-tests\u002F#13.8",[148],"critère 13.8"," admet un mouvement automatique s’il dure cinq secondes au plus, si l’on peut l’arrêter et le relancer, le masquer, ou obtenir la même information sans lui ; une pause limitée au moment où l’élément a le focus ne suffit pas. Son critère 13.7 tolère un flash plus rapide si sa surface cumulée ne dépasse pas 21 824 pixels, soit un carré d’environ 148 pixels de côté.",[117,368,369,370,124],{},"Le troisième, de niveau AAA, n’est pas exigé par le RGAA, qui s’arrête au niveau AA. C’est pourtant lui qui protège le plus directement les personnes sensibles au mouvement, et il coûte peu à respecter quand il est prévu dès la conception. Pour de nombreuses boutiques en ligne, l’accessibilité n’est d’ailleurs plus une simple bonne pratique depuis juin 2025 et l’European Accessibility Act : voyez ",[121,371,373],{"href":372},"\u002Fjournal\u002Feuropean-accessibility-act-ce-qui-change-pour-votre-site","ce que la loi sur l’accessibilité numérique change pour les sites marchands",[126,375,377],{"id":376},"respecter-le-réglage-réduire-les-animations","Respecter le réglage « réduire les animations »",[117,379,380,381,388],{},"Tous les grands systèmes d’exploitation, d’Android à Windows, proposent un réglage pour limiter les animations, et tous les grands navigateurs le transmettent aux sites depuis janvier 2020 grâce à la requête média CSS ",[121,382,385],{"href":383,"rel":384},"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FAt-rules\u002F@media\u002Fprefers-reduced-motion",[148],[199,386,387],{},"prefers-reduced-motion",". Un site bien construit le lit, dans ses feuilles de style comme dans ses scripts, et réduit ses propres mouvements. Pour le W3C, c’est une technique suffisante, en CSS comme en JavaScript, pour satisfaire le critère 2.3.3.",[117,390,391],{},"Deux écritures sont possibles : retirer le mouvement quand le visiteur a demandé à le réduire, ou ne l’ajouter que s’il n’a rien demandé. Nous préférons la seconde, plus prudente, car un navigateur trop ancien pour lire ce réglage n’ajoute alors aucun mouvement :",[393,394,399],"pre",{"className":395,"code":397,"language":398},[396],"language-text","\u002F* Le fondu vaut pour tout le monde ; le glissement n’est\n   ajouté que si le visiteur n’a pas demandé à réduire les animations. *\u002F\n.menu {\n  transition: opacity 220ms ease-out;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .menu {\n    transition: opacity 220ms ease-out, transform 220ms ease-out;\n  }\n}\n","text",[199,400,397],{"__ignoreMap":401},"",[117,403,404,405,124],{},"Réduire ne veut pas dire tout supprimer. Pour le W3C, un changement de couleur ou d’opacité n’est pas une animation de mouvement : un fondu peut donc remplacer un glissement ou un zoom, ",[121,406,409],{"href":407,"rel":408},"https:\u002F\u002Fsupport.apple.com\u002Ffr-fr\u002F111781",[148],"comme le fait l’iPhone quand on active son réglage",[117,411,412,413,415],{},"Sur notre propre site, les transitions durent 140 ou 220 millisecondes : survol des boutons et des liens, ouverture du menu, dépliage des questions de la FAQ. Aucune bibliothèque d’animation n’est chargée. Le menu et la FAQ ne s’animent que si le visiteur n’a rien demandé. S’il a activé le réglage, nous allons plus loin : une règle générale coupe toutes les autres transitions, fondus compris. Seul le dépliage de la FAQ anime une hauteur plutôt que ",[199,414,201],{}," : comme il suit un clic et dure 220 millisecondes, il reste hors du calcul du CLS.",[417,418,420],"callout",{"type":419},"conseil",[117,421,422],{},"Activez ce réglage sur votre téléphone (la FAQ plus bas indique où le trouver), puis parcourez votre site. Tout ce qui glisse, zoome ou bouge encore mérite d’être revu en priorité.",[126,424,426],{"id":425},"parallaxe-défilement-imposé-carrousels-les-effets-à-risque","Parallaxe, défilement imposé, carrousels : les effets à risque",[117,428,429],{},"Voici, du plus sûr au plus risqué, ce que promettent les effets les plus courants, ce qu’ils coûtent et notre avis.",[289,431,432,448],{},[292,433,434],{},[295,435,436,439,442,445],{},[298,437,438],{},"Effet",[298,440,441],{},"Ce qu’il promet",[298,443,444],{},"Ce qu’il coûte",[298,446,447],{},"Notre avis",[311,449,450,464,477,491,505,519,533,547,560],{},[295,451,452,455,458,461],{},[316,453,454],{},"Survol, clic, ouverture d’un menu ou d’un accordéon",[316,456,457],{},"Confirmer l’action, montrer d’où vient le contenu",[316,459,460],{},"Presque rien s’il reste bref et écrit en CSS",[316,462,463],{},"Oui",[295,465,466,469,472,475],{},[316,467,468],{},"Indicateur de chargement après un clic",[316,470,471],{},"Faire patienter",[316,473,474],{},"Presque rien",[316,476,463],{},[295,478,479,482,485,488],{},[316,480,481],{},"Apparitions au défilement",[316,483,484],{},"Une page qui « vit »",[316,486,487],{},"LCP retardé si le premier écran attend l’effet ; contenu invisible si le script échoue",[316,489,490],{},"Avec parcimonie, jamais sur le premier écran",[295,492,493,496,499,502],{},[316,494,495],{},"Parallaxe",[316,497,498],{},"De la profondeur",[316,500,501],{},"Vertiges possibles ; scripts qui suivent le défilement",[316,503,504],{},"À éviter, ou à couper avec le réglage",[295,506,507,510,513,516],{},[316,508,509],{},"Défilement imposé (molette « lissée » par un script, défilement par sections)",[316,511,512],{},"Une mise en scène",[316,514,515],{},"Le visiteur ne maîtrise plus sa lecture ; scripts sur le fil principal",[316,517,518],{},"À éviter",[295,520,521,524,527,530],{},[316,522,523],{},"Carrousel automatique",[316,525,526],{},"Plusieurs messages au même endroit",[316,528,529],{},"On ne voit que la diapositive du moment ; pause obligatoire",[316,531,532],{},"Des blocs fixes, plutôt",[295,534,535,538,541,544],{},[316,536,537],{},"Bandeau défilant de logos ou d’actualités",[316,539,540],{},"Du mouvement en continu",[316,542,543],{},"Distraction ; pause obligatoire au-delà de cinq secondes",[316,545,546],{},"Une liste fixe",[295,548,549,552,555,558],{},[316,550,551],{},"Vidéo de fond en lecture automatique",[316,553,554],{},"Une ambiance",[316,556,557],{},"Poids ; pause obligatoire au-delà de cinq secondes",[316,559,518],{},[295,561,562,565,568,571],{},[316,563,564],{},"Écran de chargement animé",[316,566,567],{},"Habiller l’attente",[316,569,570],{},"Retarde l’affichage de toute la page",[316,572,573],{},"Non",[117,575,576,577,582],{},"Si un carrousel s’impose malgré tout, le guide du W3C pour ",[121,578,581],{"href":579,"rel":580},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Fcarousel\u002F",[148],"un carrousel accessible"," en fixe le minimum : des boutons pour afficher la diapositive précédente ou suivante, un bouton pour arrêter et relancer la rotation, un arrêt dès que la souris le survole, et un arrêt dès que le clavier y entre, sans reprise tant que le visiteur ne la demande pas. Pour la parallaxe et les apparitions au défilement, le réglage « réduire les animations » doit tout couper : le contenu reste alors à sa place, visible d’emblée.",[126,584,586],{"id":585},"animer-léger-le-css-dabord","Animer léger : le CSS d’abord",[117,588,589,590,595],{},"Pour la plupart des sites vitrines et des boutiques, le CSS suffit. La ",[121,591,594],{"href":592,"rel":593},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FPerformance\u002FGuides\u002FCSS_JavaScript_animation_performance",[148],"documentation de Mozilla sur la performance des animations"," le résume : mieux vaut écrire ses animations en CSS chaque fois que c’est possible, et réserver le JavaScript aux animations vraiment complexes.",[117,597,598,599,610,611,614,615,620],{},"Encore faut-il animer les bonnes propriétés. Google conseille de ",[121,600,603,604,606,607],{"href":601,"rel":602},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fanimations-guide",[148],"s’en tenir à ",[199,605,201],{}," et ",[199,608,609],{},"opacity",", que le navigateur anime sans recalculer la mise en page ni repeindre la page, et de n’employer ",[199,612,613],{},"will-change"," qu’avec parcimonie, en cas de problème avéré. Même les effets liés au défilement s’écrivent désormais en CSS et ",[121,616,619],{"href":617,"rel":618},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fcss-ui\u002Fscroll-driven-animations",[148],"peuvent s’exécuter hors du fil principal",", sans les saccades d’un script : c’est ainsi qu’est construite la barre de progression de nos articles, que les navigateurs qui ne gèrent pas cette technique ignorent simplement.",[117,622,623,624,629],{},"Pour les images animées, le GIF est un format lourd et peu efficace. Dans un exemple publié par Google, ",[121,625,628],{"href":626,"rel":627},"https:\u002F\u002Fweb.dev\u002Farticles\u002Freplace-gifs-with-videos",[148],"un GIF de 3,7 Mo ne pèse plus que 551 Ko une fois converti en vidéo MP4, et 341 Ko en WebM",". Une courte vidéo sans son, dotée de commandes, a un autre avantage : le visiteur peut l’arrêter.",[117,631,632,633,638],{},"Le ",[121,634,637],{"href":635,"rel":636},"https:\u002F\u002Fecoresponsable.numerique.gouv.fr\u002Fpublications\u002Freferentiel-general-ecoconception\u002F",[148],"référentiel général d’écoconception des services numériques"," (RGESN), publié en mai 2024 par l’Arcep et l’Arcom avec l’ADEME, va dans le même sens. Son critère 4.1 demande de désactiver la lecture automatique des animations, vidéos et sons, d’éviter les GIF animés et les vidéos de fond purement esthétiques, et de doter de commandes toute animation de plus de quatre secondes, un seuil plus strict que les cinq secondes des WCAG. Son critère 4.6 n’admet que les vidéos, sons et animations qui portent une information ou servent une fonction critique du service, et demande d’en justifier l’emploi dans la déclaration d’écoconception.",[126,640,642],{"id":641},"avant-danimer-la-grille-de-décision","Avant d’animer : la grille de décision",[117,644,645],{},"Avant d’ajouter un mouvement, posez ces six questions. Une seule réponse négative suffit à revoir l’effet, ou à y renoncer.",[647,648,649,655,661,673,679,685],"ol",{},[137,650,651,654],{},[140,652,653],{},"Aide-t-il le visiteur ?"," Il confirme une action, montre d’où vient un contenu ou signale un changement. Sinon, c’est une décoration, qui doit justifier son coût.",[137,656,657,660],{},[140,658,659],{},"La page reste-t-elle complète sans lui ?"," Le premier écran s’affiche sans attendre, le contenu reste visible si le script ne se charge pas, et rien d’essentiel ne se perd avec le réglage « réduire les animations ».",[137,662,663,672],{},[140,664,665,666,668,669,671],{},"Repose-t-il sur le CSS, avec ",[199,667,201],{}," ou ",[199,670,609],{}," ?"," Sinon, mesurez son effet sur l’INP et le CLS avant de le garder.",[137,674,675,678],{},[140,676,677],{},"Est-il bref et contrôlable ?"," La réaction commence tout de suite et se termine vite ; au-delà de quatre secondes, un mouvement automatique peut être mis en pause.",[137,680,681,684],{},[140,682,683],{},"Évite-t-il tout clignotement rapide ?"," Jamais plus de trois flashs par seconde.",[137,686,687,690],{},[140,688,689],{},"A-t-il été vérifié sur un téléphone modeste ?"," C’est là que les saccades apparaissent.",[117,692,693,694,698,699,702],{},"Ces questions se posent dès la conception : une animation se décide sur la maquette et se vérifie à ",[121,695,697],{"href":696},"\u002Fjournal\u002Fmaquette-prototype-design-system-etapes-du-webdesign","l’étape du prototype cliquable"," ; la consigne remise aux développeurs précise ensuite sa durée et ce qu’elle devient quand le visiteur réduit les animations. C’est ainsi que travaille ",[121,700,701],{"href":28},"notre équipe de design UX\u002FUI à Nantes"," : nous gardons les mouvements qui aident à comprendre, et chaque effet décoratif doit prouver qu’il vaut ce qu’il coûte.",{"title":401,"searchDepth":26,"depth":26,"links":704},[705,706,707,708,709,710,711],{"id":128,"depth":19,"text":129},{"id":173,"depth":19,"text":174},{"id":242,"depth":19,"text":243},{"id":376,"depth":19,"text":377},{"id":425,"depth":19,"text":426},{"id":585,"depth":19,"text":586},{"id":641,"depth":19,"text":642},null,"2026-11-04","Animation de site web : ce qu’elle apporte au visiteur, ce qu’elle coûte en vitesse (LCP, INP, CLS) et en accessibilité, et comment animer utile et léger.","md",[717,720,723,726],{"question":718,"answer":719},"Les animations sont-elles mauvaises pour le référencement ?","Pas en elles-mêmes. Les Core Web Vitals de Google mesurent le chargement, la réactivité et la stabilité visuelle de la page, et une animation mal construite peut dégrader les trois. Google indique que ces indicateurs sont utilisés par ses systèmes de classement, tout en précisant qu’il cherche toujours à afficher le contenu le plus pertinent, même quand l’expérience de la page est moins bonne. Mieux vaut donc des animations sobres, qui servent la lecture.",{"question":721,"answer":722},"Comment réduire les animations sur son téléphone ou son ordinateur ?","Sur iPhone comme sur Mac, activez « Réduire les animations » dans les réglages d’accessibilité. Sur Android, l’option s’appelle « Supprimer les animations » (Accessibilité, puis Couleur et mouvement, selon les modèles) ; sous Windows 11, « Effets d’animation » (Accessibilité, puis Effets visuels). Les sites bien conçus détectent ce choix et réduisent leurs propres mouvements.",{"question":724,"answer":725},"Combien de temps doit durer une animation sur un site ?","Aucune durée ne convient à tous les cas, mais quelques repères aident. La réaction à un geste doit commencer tout de suite et rester brève : sur notre site, aucune transition ne dépasse un quart de seconde. Un mouvement qui démarre seul doit pouvoir être mis en pause au-delà de cinq secondes selon les règles d’accessibilité, et même de quatre selon le référentiel d’écoconception RGESN. Une exception : selon le W3C, l’animation d’attente affichée seule pendant un chargement n’a pas besoin de bouton pause, même si elle dépasse cinq secondes sur une connexion lente.",{"question":727,"answer":728},"Un site sans animations paraît-il daté ?","Pas forcément. L’impression de modernité tient surtout à la clarté de la mise en page, à la typographie, à la qualité des images et à la réactivité. Quelques transitions soignées sur les boutons, les menus et les formulaires suffisent à rendre une interface vivante ; les effets spectaculaires, eux, suivent des modes et vieillissent avec elles.",false,"animation site web",{},true,"\u002Fjournal\u002Fanimations-site-web-utiles-ou-nuisibles","ux-contenus-accessibilite",{"title":736,"description":714},"Animations de site web : utiles ou nuisibles ?",[738,739],"webdesign-ux-ui-nantes","optimisation-vitesse-site-web-nantes",{"loc":733,"lastmod":713},"journal\u002Fanimations-site-web-utiles-ou-nuisibles","Certaines animations guident vos visiteurs, d’autres ralentissent la page, les distraient ou leur donnent le vertige. Voici nos critères pour faire le tri, les règles d’accessibilité à connaître et la façon d’animer sans alourdir votre site.","AVUiNgKWaTtr_bAcTF_4ltDdSGd22zQZTOcTDcjAT4Q",{"rubrique":745,"author":747,"articles":757,"surround":909},{"path":98,"title":99,"navTitle":100,"color":32,"promise":746,"service":738},"Des pages claires pour tout le monde, comprises en cinq secondes, sur tous les écrans.",{"id":748,"avatar":712,"bio":749,"extension":750,"kind":751,"linkedin":712,"meta":752,"name":753,"role":754,"stem":755,"__hash__":756},"auteurs\u002Fauteurs\u002Fequipe-fogg.yml","Nous concevons, développons et référençons des sites internet dans notre studio à Nantes : le design, le code et le SEO sont faits par la même équipe. Dans notre journal, nous partageons ce que nos projets nous apprennent, sans jargon ni recette miracle.","yml","Organization",{},"L’équipe FOGG","Designers et développeurs web à Nantes","auteurs\u002Fequipe-fogg","meeZrKeERqL_z9wDxs9-KEBQVU-S_fJG72JEtKhFKbQ",[758,760,766,774,779,786,794,798,805,811,816,821,826,832,838,844,850,856,862,868,873,879,885,891,897,903],{"path":733,"title":111,"summary":742,"date":713,"rubrique":734,"services":759},[738,739],{"path":761,"title":762,"summary":763,"date":713,"rubrique":734,"services":764},"\u002Fjournal\u002Farborescence-site-web-methode-et-exemples","Arborescence d’un site web : la méthode, avec des exemples","Avant de dessiner la moindre page, il faut décider lesquelles existent et comment elles s’emboîtent. Voici notre méthode pour construire l’arborescence d’un site, avec trois exemples commentés et deux façons simples de la tester.",[738,765],"creation-site-vitrine-nantes",{"path":767,"title":768,"summary":769,"date":713,"rubrique":770,"services":771},"\u002Fjournal\u002Fbaisse-de-trafic-google-trouver-la-cause","Baisse de trafic sur Google : comment en trouver la cause","Mesure faussée, erreur technique, mise à jour de Google, Aperçus IA ou simple saisonnalité : voici comment trouver la cause d’une baisse de trafic Google, dans l’ordre, et quoi faire ensuite.","seo-visibilite-locale",[772,773],"referencement-naturel-seo-nantes","maintenance-site-internet-nantes",{"path":775,"title":776,"summary":777,"date":713,"rubrique":734,"services":778},"\u002Fjournal\u002Fbandeau-cookies-regles-cnil","Bandeau cookies : les règles de la CNIL à respecter en 2026","Refuser aussi simplement qu’accepter, expliquer les finalités, conserver le choix : voici ce que la CNIL attend d’un bandeau cookies en 2026, ce qui a changé cette année et comment le rendre accessible sans ralentir votre site.",[773,738],{"path":780,"title":781,"summary":782,"date":713,"rubrique":783,"services":784},"\u002Fjournal\u002Fbouton-de-retractation-obligatoire","Bouton de rétractation obligatoire : ce qui change depuis le 19 juin 2026","Depuis le 19 juin 2026, une boutique en ligne doit permettre à ses clients particuliers d’exercer leur droit de rétractation depuis le site, par un bouton « renoncer au contrat ici ». Voici ce que disent les textes, qui est concerné et comment l’intégrer sans alourdir votre parcours.","design-conversion-ecommerce",[785,773],"creation-site-e-commerce-nantes",{"path":787,"title":788,"summary":789,"date":713,"rubrique":790,"services":791},"\u002Fjournal\u002Fci-cd-pipeline-de-deploiement","CI\u002FCD, c’est quoi ? Le pipeline de déploiement expliqué","Intégration continue, livraison ou déploiement continus : ce que recouvre la CI\u002FCD, à quoi ressemble un pipeline pour un site ou une application, ce que votre entreprise y gagne et comment le sécuriser.","projet-web-budget-methode",[792,793],"infrastructure-cloud-nantes","developpement-web-sur-mesure-nantes",{"path":233,"title":795,"summary":796,"date":713,"rubrique":770,"services":797},"Core Web Vitals : LCP, INP et CLS expliqués simplement","La page s’affiche-t-elle vite, réagit-elle tout de suite, reste-t-elle stable ? Le LCP, l’INP et le CLS répondent à ces trois questions : voici comment Google les mesure, comment les tester et par où commencer pour les améliorer.",[739,772],{"path":799,"title":800,"summary":801,"date":713,"rubrique":790,"services":802},"\u002Fjournal\u002Feco-conception-web-rgesn","Éco-conception web : ce que demande le RGESN","Le référentiel officiel de l’éco-conception web compte 78 critères, mais aucune loi n’oblige une entreprise à l’appliquer. Voici ce qu’il demande vraiment à un site vitrine ou à une boutique, et comment fixer un budget de poids, mesurer sans se tromper et publier sa déclaration.",[803,804],"eco-conception-web-nantes","refonte-site-internet-nantes",{"path":806,"title":807,"summary":808,"date":713,"rubrique":790,"services":809},"\u002Fjournal\u002Fn8n-make-zapier-quel-outil-d-automatisation","n8n, Make ou Zapier : quel outil pour automatiser vos tâches ?","Zapier pour démarrer sans technicien, Make pour les flux qui se ramifient, n8n pour garder la main sur vos données : ce qui distingue vraiment ces trois outils, de la facturation à la maintenance, prix relevés le 4 novembre 2026.",[810,793],"automatisation-processus-nantes",{"path":812,"title":813,"summary":814,"date":713,"rubrique":770,"services":815},"\u002Fjournal\u002Fpourquoi-mon-site-n-apparait-pas-sur-google","Pourquoi mon site n’apparaît pas sur Google ? Causes et solutions","Site trop récent, réglage qui bloque Google, page explorée mais non retenue, classement trop faible : voici comment trouver la cause avec deux outils gratuits, puis la corriger.",[772,765],{"path":817,"title":818,"summary":819,"date":713,"rubrique":790,"services":820},"\u002Fjournal\u002Fpreparer-son-site-au-black-friday","Préparer son site au Black Friday : tenir le pic de trafic","Estimer le pic, le simuler, mettre en cache, prévoir la montée en charge et organiser le jour J : la méthode pour que votre boutique tienne au moment où elle vend le plus, avec un plan sur trois semaines.",[792,785],{"path":822,"title":823,"summary":824,"date":713,"rubrique":783,"services":825},"\u002Fjournal\u002Fsite-vitrine-ou-site-e-commerce","Site vitrine ou site e-commerce : comment choisir ?","Un site vitrine prépare la vente, une boutique en ligne la conclut. Voici comment choisir selon votre offre, votre budget et votre temps, et quelles solutions existent entre les deux.",[765,785],{"path":827,"title":828,"summary":829,"date":713,"rubrique":790,"services":830},"\u002Fjournal\u002Fsite-wordpress-pirate-que-faire","Site WordPress piraté : que faire dans les premières heures ?","Redirections, pages de spam, alerte de Google : quand un site WordPress est piraté, les premières heures comptent. Voici quoi faire, dans l’ordre, et ce qu’il ne faut surtout pas effacer.",[831,773],"audit-securite-site-web-nantes",{"path":833,"title":834,"summary":835,"date":836,"rubrique":790,"services":837},"\u002Fjournal\u002Fchoisir-son-agence-web-a-nantes","Choisir son agence web à Nantes : 12 questions à poser avant de signer","Portfolio, prix, bon contact : ces critères ne suffisent pas. Douze questions révèlent comment une agence travaille vraiment et ce que vous posséderez à la fin.","2026-10-29",[765],{"path":839,"title":840,"summary":841,"date":842,"rubrique":783,"services":843},"\u002Fjournal\u002Fshopify-woocommerce-prestashop-quelle-solution-choisir","Shopify, WooCommerce ou PrestaShop : quelle solution choisir ?","Trois solutions sérieuses, trois logiques différentes : voici comment comparer coûts, souplesse et propriété des données pour choisir la vôtre sans regret.","2026-10-27",[785],{"path":845,"title":846,"summary":847,"date":848,"rubrique":734,"services":849},"\u002Fjournal\u002Frediger-les-textes-de-son-site-internet","Rédiger le contenu d’un site internet : être compris en cinq secondes","Un visiteur décide en quelques secondes s’il reste sur votre page. Voici la méthode que nous suivons pour écrire des textes de site clairs, utiles et bien référencés, avec un exemple avant\u002Faprès.","2026-10-24",[738,765],{"path":851,"title":852,"summary":853,"date":854,"rubrique":770,"services":855},"\u002Fjournal\u002Freferencement-local-nantes-google-business-profile","Référencement local à Nantes : guide pour apparaître dans Google Maps","Pertinence, distance, notoriété : Google classe les entreprises locales selon trois critères. Voici comment les travailler quand vos clients sont à Nantes.","2026-10-22",[772],{"path":857,"title":858,"summary":859,"date":860,"rubrique":790,"services":861},"\u002Fjournal\u002Fdevis-site-internet-comparer-deux-propositions","Devis de site internet : comment comparer deux propositions","Deux devis pour le même site, deux montants qui vont du simple au double : avant de choisir le moins cher, vérifiez qu’ils décrivent bien le même projet.","2026-10-20",[765,804],{"path":863,"title":864,"summary":865,"date":866,"rubrique":783,"services":867},"\u002Fjournal\u002Fsite-vitrine-elements-indispensables","Site vitrine efficace : les 10 éléments qui transforment une visite en contact","Un site vitrine n’a qu’une mission : donner envie de vous contacter. Voici les dix éléments qui font la différence, et comment vérifier ceux de votre site.","2026-10-17",[765,738],{"path":696,"title":869,"summary":870,"date":871,"rubrique":734,"services":872},"Zoning, wireframe, maquette de site web, prototype : les étapes du webdesign","Entre la première réunion et la mise en ligne, un site passe par plusieurs états : zoning, maquettes, prototype, design system. À quoi sert chaque étape, que validez-vous, et pourquoi c’est là que se font les vraies économies.","2026-10-15",[738],{"path":874,"title":875,"summary":876,"date":877,"rubrique":770,"services":878},"\u002Fjournal\u002Fseo-ia-etre-cite-par-les-moteurs-de-reponse","SEO et IA : comment apparaître dans ChatGPT et les Aperçus IA","Aperçus IA, Mode IA, ChatGPT ou Perplexity citent leurs sources. Voici ce qui aide vraiment un site à en faire partie, documentation officielle à l’appui.","2026-10-13",[772],{"path":880,"title":881,"summary":882,"date":883,"rubrique":790,"services":884},"\u002Fjournal\u002Fmaintenance-site-internet-que-prevoir","Maintenance de site internet : que prévoir après la mise en ligne ?","Un site n’est pas terminé le jour de sa mise en ligne. Voici ce qu’il faut prévoir pour qu’il reste sûr, rapide et bien référencé, et comment s’organiser.","2026-10-10",[773],{"path":372,"title":886,"summary":887,"date":888,"rubrique":734,"services":889},"European Accessibility Act : ce que la loi sur l’accessibilité numérique change pour votre site","Depuis le 28 juin 2025, l’accessibilité est obligatoire pour de nombreux services en ligne, à commencer par la vente aux particuliers. Qui est concerné, quelles règles appliquer, quels risques, et par où commencer.","2026-10-08",[890,785],"accessibilite-numerique-nantes",{"path":892,"title":893,"summary":894,"date":895,"rubrique":790,"services":896},"\u002Fjournal\u002Fcahier-des-charges-site-internet-en-une-page","Cahier des charges de site internet : un modèle en une page","Inutile d’écrire quarante pages : un cahier des charges d’une seule page, honnête et précis, suffit à cadrer un site vitrine et à obtenir des devis comparables.","2026-10-06",[765,793],{"path":898,"title":899,"summary":900,"date":901,"rubrique":783,"services":902},"\u002Fjournal\u002Ffiche-produit-e-commerce-qui-vend","Fiche produit e-commerce : l’anatomie d’une page qui vend","Titre, photos, prix, avis, bouton d’achat : chaque bloc d’une fiche produit répond à une question de l’acheteur. Voici comment les assembler pour qu’elle vende.","2026-10-03",[785,738],{"path":904,"title":905,"summary":906,"date":907,"rubrique":770,"services":908},"\u002Fjournal\u002Frefonte-site-sans-perdre-son-referencement","Refonte de site et SEO : comment ne pas perdre son référencement","Une refonte mal préparée peut faire perdre une bonne partie du trafic venu de Google. Inventaire, redirections, préproduction, suivi : la méthode pour l’éviter.","2026-10-01",[804,772],[712,910],{"title":762,"path":761,"stem":911,"description":912,"children":-1},"journal\u002Farborescence-site-web-methode-et-exemples","Arborescence d’un site web : organisez vos pages à partir des questions de vos clients, en trois niveaux au plus. La méthode, avec trois exemples commentés.",{"path":28,"title":29,"summary":31,"color":32},1793879329105]