Effect.Labs
Guide Pratique
Astuces
Web Design
16 astuces expliquees simplement pour creer des sites web beaux, rapides et accessibles a tous
Design · Performance · Animations · CSS · Accessibilite · SEO
Sommaire
1 16 Astuces Web Design
01Guide l'oeil de ton visiteurDesignp.3
02Accelere le chargement de tes imagesPerformancep.3
03Rends tes animations fluidesAnimationsp.4
04Change toutes tes couleurs en une ligneCSSp.4
05Assure-toi que tout le monde peut lireAccessibilitep.5
06Rends tes boutons confortables au doigtDesignp.5
07Aide Google a comprendre ta pageSEOp.6
08Respecte ceux qui sont sensibles aux animationsAccessibilitep.6
09Affiche l'essentiel en premierPerformancep.7
10Adapte tes tailles a tous les ecransCSSp.7
11Montre que le clic a fonctionneDesignp.8
12Decris tes images pour ceux qui ne les voient pasSEOp.8
13Passe en mode sombre automatiquementCSSp.9
14Empeche ta page de sauterPerformancep.9
15Cree des formulaires que les gens aiment remplirDesignp.10
16Rends la navigation au clavier visibleAccessibilitep.10
2 Checklists avant mise en ligne
6 checklists imprimables + zone de notesp.11
3 Outils et ressources
8 outils gratuits + a propos d'Effect.Labsp.12
Ce guide est fait pour toi
🎯
Pour tous les niveaux
Que tu aies deja modifie du CSS ou jamais touche a du code, chaque astuce part du concret.
💡
Comprendre, pas juste copier
Un bloc "En clair" vulgarise chaque concept avec des analogies du quotidien.
⚙
A personnaliser
Chaque astuce te dit quelles valeurs modifier et ce que ca change concretement.
Conseil
Pas besoin de tout appliquer d'un coup. Essentiel = a faire absolument. Important = fortement conseille. Bonus = pour aller plus loin.
En clair : Pense a la une d'un journal. Le gros titre saute aux yeux, puis les sous-titres, puis le texte. Sur un site, c'est pareil. Tu utilises des tailles de texte differentes pour creer un chemin visuel. Le visiteur sait instinctivement ou regarder en premier, comme quand tu entres dans une piece et que tes yeux vont vers la lumiere la plus forte.
/* Titre principal — le plus grand, le plus gras */
h1 { font-size: 3rem; font-weight: 800; }
/* Sous-titre — un cran en dessous */
h2 { font-size: 2rem; font-weight: 700; }
/* Titre de section — encore plus discret */
h3 { font-size: 1.5rem; font-weight: 600; }
/* Texte courant — taille normale, interligne aere */
p { font-size: 1rem; line-height: 1.7; }
A personnaliser
Change les valeurs font-size pour ajuster l'echelle. L'important, c'est de garder un ecart net entre chaque niveau. Si ton h1 fait 3rem, ton h2 ne doit pas faire 2.8rem — trop proche, l'oeil ne voit pas la difference.
En clair : Les images sont les fichiers les plus lourds d'un site. C'est comme envoyer un colis de 10 kg alors qu'un de 500 g suffirait. Le format WebP (un format d'image plus leger que JPEG, cree par Google) reduit le poids sans perdre en qualite. Et avec loading="lazy", les images ne se chargent que quand le visiteur scrolle vers elles — pas besoin de tout telecharger d'un coup.
<!-- Image qui se charge seulement quand on scrolle vers elle -->
<img src="photo.webp" <!-- fichier au format WebP (plus leger) -->
loading="lazy" <!-- charge a la demande, pas tout de suite -->
decoding="async" <!-- ne bloque pas le reste de la page -->
width="800" height="450" <!-- reserve l'espace (evite les sauts) -->
alt="Description de l'image"> <!-- texte pour l'accessibilite -->
A personnaliser
Convertis tes images en WebP avec Squoosh (gratuit, voir p.12). Pour la premiere image visible de ta page (le "hero"), retire loading="lazy" — elle doit se charger tout de suite.
En clair : Ton navigateur a deux facons d'animer un element. La premiere utilise transform (la propriete qui deplace, agrandit ou fait tourner un element) et opacity (la transparence : 0 = invisible, 1 = visible). C'est comme une autoroute — la carte graphique (le composant qui gere l'affichage) s'en occupe, c'est rapide et fluide. La deuxieme facon utilise width, left, etc. Ca force le navigateur a recalculer toute la mise en page. C'est la route nationale en heure de pointe.
/* Fluide — la carte graphique gere, zero saccade */
.carte {
transform: translateY(-8px); /* monte de 8 pixels */
opacity: 0.9; /* legerement transparent */
}
/* Saccade — le navigateur recalcule tout a chaque image */
.carte { top: -8px; width: 102%; } /* a eviter */
A personnaliser
Remplace translateY(-8px) par la distance que tu veux. Valeur negative = monte, positive = descend. Pour un zoom, utilise scale(1.05) au lieu de changer la width.
En clair : Imagine que tu peins un appartement. Si tu ecris la reference de la couleur sur chaque mur, changer d'avis = tout repeindre. Mais si tu etiquettes un seul pot "couleur principale" et que tout le monde pioche dedans, il suffit de changer le pot. Les variables CSS fonctionnent exactement comme ca : tu definis tes couleurs une seule fois, et tout le site les utilise.
/* On definit les "pots de peinture" une seule fois */
:root {
--couleur-principale: #6366f1; /* violet — change ici, ca change partout */
--couleur-texte: #1a1a2e; /* texte fonce */
--arrondi: 12px; /* coins arrondis des boutons */
}
/* On pioche dans les pots partout dans le site */
.bouton { background: var(--couleur-principale); }
A personnaliser
Change #6366f1 par ta couleur de marque. Ajoute autant de variables que tu veux : --fond, --bordure, --espacement. L'idee, c'est de ne jamais ecrire une valeur en dur plus d'une fois.
En clair : Tu as deja essaye de lire un texto gris clair sur fond blanc en plein soleil ? Illisible. Le contraste, c'est la difference de luminosite entre le texte et le fond. Plus l'ecart est grand, plus c'est lisible. La regle : un ratio d'au moins 4.5. Plus le chiffre est haut, mieux c'est. En dessous de 4.5, c'est comme lire au crayon gris sur du papier gris. Ca concerne tout le monde : les personnes avec une vue reduite, mais aussi toi sur un ecran moyen en plein jour.
/* Bon contraste : blanc sur noir fonce (ratio 12.6) */
.texte-ok { color: #ffffff; background: #1a1a1a; }
/* Mauvais : gris sur gris (ratio 2.1) — illisible */
.texte-ko { color: #888; background: #666; }
/* Texte secondaire — le minimum acceptable */
.texte-muted { color: #52525b; } /* ratio 7.2 sur blanc */
A personnaliser
Verifie tes combinaisons avec WebAIM Contrast Checker (voir p.12). Colle ta couleur de texte et ta couleur de fond — l'outil te dit si c'est lisible. Vise un ratio au-dessus de 4.5 pour le texte courant.
En clair : Sur un telephone, on clique avec le doigt, pas avec une souris. La pulpe de ton index fait environ 44 pixels de large sur un ecran. Si un bouton est plus petit que ca, tu tapes a cote et tu t'enerves. C'est comme un interrupteur minuscule dans le noir — tu le rates a chaque fois. Apple et Google recommandent tous les deux un minimum de 44 pixels.
/* Bouton confortable pour le tactile */
.bouton {
min-height: 44px; /* hauteur minimum = taille d'un doigt */
min-width: 44px; /* largeur minimum */
padding: 12px 24px; /* espace interieur genereux */
font-size: 1rem; /* texte lisible sans zoomer */
cursor: pointer; /* le curseur change en main */
}
A personnaliser
Augmente le padding pour des boutons plus larges. 12px 24px = 12 pixels en haut/bas, 24 en gauche/droite. Pour des boutons carres (icones), utilise padding: 12px tout court.
En clair : Imagine un livre sans table des matieres, sans chapitres, sans titres. Impossible de s'y retrouver. Google lit ton site comme un livre. Les balises HTML (header, main, footer) sont tes chapitres. Elles disent : "ici c'est le menu", "ici c'est le contenu principal", "ici c'est le pied de page". Sans elles, Google voit une soupe de texte sans structure.
<header> <!-- En-tete : logo et menu de navigation -->
<nav>...</nav> <!-- nav = zone de navigation -->
</header>
<main> <!-- Contenu principal — un seul par page -->
<h1>Titre</h1> <!-- Un seul h1 par page, c'est le titre -->
<article>...</article> <!-- article = contenu autonome -->
</main>
<footer> <!-- Pied de page : mentions, liens, contact --></footer>
A personnaliser
Verifie que ta page a un seul <h1> et qu'il decrit le sujet principal. Les <h2> et <h3> doivent suivre dans l'ordre — pas de h3 avant un h2.
En clair : Certaines personnes ont des vertiges ou des migraines quand il y a trop de mouvements a l'ecran. Sur leur telephone ou ordinateur, elles activent un reglage appele prefers-reduced-motion (un reglage qui dit "je prefere moins de mouvement"). Avec 3 lignes de CSS, ton site detecte ce reglage et desactive les animations automatiquement. C'est comme baisser le son quand quelqu'un a mal a la tete.
/* Animation normale — un bouton qui apparait en glissant */
.bouton { animation: glisser 0.5s; } /* 0.5s = une demi-seconde */
/* Si l'utilisateur a active "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
.bouton { animation: none; } /* on desactive tout mouvement */
}
A personnaliser
Tu peux aussi remplacer animation: none par animation-duration: 0.01s si tu veux garder l'etat final de l'animation sans le mouvement. Applique cette media query a toutes tes animations.
En clair : C'est comme preparer les ingredients avant de cuisiner. Avec preload (une instruction qui dit au navigateur "prepare ce fichier en avance"), tu indiques quels fichiers sont prioritaires. La police de texte et l'image d'accueil se chargent en premier — le visiteur voit la page se construire vite, meme si le reste arrive apres en arriere-plan.
<!-- Dans le <head> de ta page, avant le reste -->
<!-- Precharge la police (s'affiche tout de suite) -->
<link rel="preload" href="police.woff2"
as="font" crossorigin>
<!-- Precharge l'image d'accueil (visible immediatement) -->
<link rel="preload" href="hero.webp"
as="image">
A personnaliser
Precharge uniquement 2-3 fichiers critiques (police + image hero). Trop de preload = aucun n'est prioritaire. Le crossorigin (un attribut technique obligatoire pour les polices) doit etre present, sinon ca ne marche pas.
En clair : Au lieu d'ecrire 10 regles differentes pour telephone, tablette et ordinateur, la fonction clamp() fait le travail toute seule. Tu lui donnes trois valeurs : un minimum, un ideal en vw (une unite qui represente un pourcentage de la largeur de l'ecran) et un maximum. C'est comme un thermostat : tu regles "pas en dessous de 18, ideal a 21, pas au-dessus de 24" — et il s'adapte tout seul selon la temperature dehors.
/* minimum ideal maximum */
h1 {
font-size: clamp(2rem, 5vw, 4rem); /* 5vw = 5% de la largeur ecran */
}
.section {
padding: clamp(20px, 5vw, 80px); /* marges qui s'adaptent */
}
/* Petit ecran = 2rem. Grand ecran = 4rem. Entre = s'adapte */
A personnaliser
Change les trois valeurs de clamp() : le premier nombre est le minimum (mobile), le dernier est le maximum (grand ecran). La valeur du milieu en vw controle la vitesse de transition. Plus le chiffre est grand, plus ca change vite.
En clair : Quand tu appuies sur le bouton d'un ascenseur, il s'allume pour te confirmer "c'est pris". Sur un site, c'est pareil. Un bouton doit reagir quand tu passes dessus, quand tu cliques, et pendant le chargement. Sans retour visuel, le visiteur pense "ca n'a pas marche" et clique 5 fois. La propriete transition rend le changement progressif au lieu d'un basculement brutal.
/* transition = changement en douceur sur 0.2s */
.bouton { transition: all 0.2s; } /* 0.2s = rapide et fluide */
.bouton:hover { /* quand la souris passe dessus */
transform: translateY(-2px); /* monte legerement */
}
.bouton:active { /* au moment du clic */
transform: scale(0.97); /* retrecit legerement = "pression" */
}
A personnaliser
Change 0.2s pour ajuster la vitesse : plus petit = plus vif, plus grand = plus doux. Change -2px pour un mouvement plus ou moins prononce. scale(0.97) = retrecit de 3% au clic — subtil mais efficace.
En clair : Le texte alternatif (l'attribut alt) decrit une image en mots. Trois personnes en ont besoin. Les personnes malvoyantes dont le logiciel lit l'ecran a voix haute. Les visiteurs avec une connexion lente qui voient le texte avant l'image. Et Google, qui ne "voit" pas les photos mais lit le texte pour comprendre de quoi parle ta page. Un bon alt = une phrase courte qui decrit ce qu'on voit, comme si tu le racontais au telephone.
<!-- Bon : decrit ce qu'on voit concretement -->
<img alt="Equipe de 5 developpeurs autour d'un ecran">
<!-- Mauvais : trop vague, ne decrit rien -->
<img alt="image"> <!-- inutile -->
<img alt="photo-equipe.jpg"> <!-- c'est le nom du fichier, pas une description -->
<!-- Image purement decorative (fond, bordure) : alt vide -->
<img alt=""> <!-- le lecteur d'ecran l'ignore -->
A personnaliser
Ecris tes alt comme si tu decrivais la photo a quelqu'un par telephone. Pas de "image de..." — commence directement par ce qu'on voit. Max 120 caracteres. Pour les images decoratives, laisse alt="" (vide, pas absent).
En clair : Beaucoup de gens activent le mode sombre le soir pour ne pas se fatiguer les yeux. Leur telephone ou ordinateur a un reglage appele prefers-color-scheme (un reglage qui dit "je prefere un fond sombre"). Si tu as deja mis en place des variables CSS (astuce 04), il te suffit de les modifier dans un bloc special. Ton site bascule automatiquement — comme un ecran qui s'adapte a la luminosite ambiante.
/* Couleurs par defaut (fond clair) */
:root { --fond: #ffffff; --texte: #1a1a1a; }
/* Si l'utilisateur prefere le mode sombre */
@media (prefers-color-scheme: dark) {
:root { --fond: #0a0a0f; --texte: #f0f0f0; }
}
/* Le body utilise les variables — il s'adapte tout seul */
body { background: var(--fond); color: var(--texte); }
A personnaliser
Change #0a0a0f par ton fond sombre prefere. Evite le noir pur #000000 — c'est trop agressif. Un gris tres fonce est plus confortable. Pense a verifier le contraste (astuce 05) dans les deux modes.
En clair : Tu as deja clique sur un lien et, au dernier moment, le contenu a bouge parce qu'une image a fini de charger ? Tu as clique au mauvais endroit. C'est comme une pile de feuilles sur un bureau : si tu en ajoutes une au milieu, tout le reste se decale. La solution : reserver l'espace de chaque image a l'avance avec aspect-ratio (le rapport largeur/hauteur), meme avant qu'elle soit chargee.
/* On reserve l'espace avec un ratio (16:9 = format video) */
.conteneur-image {
aspect-ratio: 16 / 9; /* reserve la bonne proportion */
background: #f0f0f5; /* couleur grise en attendant l'image */
}
.conteneur-image img {
width: 100%; height: 100%; /* remplit tout le conteneur */
object-fit: cover; /* recadre proprement si necessaire */
}
A personnaliser
Change le ratio selon tes images : 16 / 9 pour du video, 4 / 3 pour du photo classique, 1 / 1 pour du carre. La couleur #f0f0f5 est le placeholder — choisis un gris proche de ton fond.
En clair : Un bon formulaire est comme un bon vendeur : il guide sans frustrer. Chaque champ a une etiquette visible au-dessus (pas juste un texte gris qui disparait quand on clique). La validation est en temps reel — "email invalide" s'affiche tout de suite, pas apres avoir clique sur Envoyer. Et l'attribut autocomplete permet au navigateur de remplir les champs automatiquement, comme quand ton telephone propose ton adresse email.
<!-- Etiquette visible + champ avec aide automatique -->
<label for="email">Ton email</label> <!-- etiquette toujours visible -->
<input type="email" <!-- type email = clavier adapte sur mobile -->
id="email" <!-- lie au label par le meme id -->
required <!-- champ obligatoire -->
autocomplete="email" <!-- suggestion automatique -->
placeholder="toi@exemple.com"/> <!-- exemple en gris -->
A personnaliser
Change le type selon le champ : tel pour un telephone (clavier numerique sur mobile), password pour un mot de passe, url pour un lien. L'attribut autocomplete accepte aussi name, tel, address-line1.
En clair : Beaucoup de personnes naviguent au clavier : touche Tab pour passer d'un element au suivant, Entree pour cliquer. Elles doivent voir quel element est selectionne grace a un contour colore. Supprimer cet indicateur avec outline: none, c'est comme eteindre les feux de signalisation en pleine nuit. La propriete :focus-visible montre le contour uniquement quand on utilise le clavier — pas a la souris.
/* JAMAIS faire ca — ca supprime tout indicateur */
*:focus { outline: none; }
/* Bonne pratique : contour visible au clavier seulement */
:focus-visible {
outline: 2px solid #6366f1; /* contour violet de 2 pixels */
outline-offset: 2px; /* 2px d'espace entre l'element et le contour */
}
A personnaliser
Change #6366f1 par ta couleur de marque pour que le contour soit coherent avec ton design. Augmente outline-offset si le contour est trop colle a l'element. 3px ou 4px donnent plus d'air.
Checklists avant mise en ligne
Coche chaque point avant de mettre ton site en ligne
Design
Titres bien visibles et ordonnes
Espacements reguliers entre les blocs
Boutons qui reagissent au clic
Messages d'erreur clairs et humains
Vitesse
Images en WebP (plus legeres)
Chargement a la demande (lazy)
Fichiers CSS/JS compresses
Polices prechargees (preload)
Pas de sauts de page (aspect-ratio)
Accessibilite
Contraste texte/fond suffisant
Navigation au clavier possible
Images decrites (texte alt)
Etiquettes visibles sur les champs
Contour visible au focus clavier
Referencement
Un seul titre h1 par page
Description meta unique par page
Structure h1 > h2 > h3 respectee
Plan du site pour Google (sitemap)
Regles pour les moteurs de recherche (robots.txt)
Mobile
Teste sur un vrai telephone
Menu mobile qui fonctionne
Texte lisible sans zoomer
Pas de barre de scroll horizontale
Securite
HTTPS actif (cadenas dans la barre)
Formulaires proteges contre les soumissions frauduleuses
Donnees utilisateur filtrees
Outils gratuits
8 outils indispensables pour appliquer les astuces de ce guide
Web.dev
Le guide officiel de Google pour creer des sites rapides et bien faits. Plein de tutoriels gratuits.
web.dev
WebAIM Contrast Checker
Colle deux couleurs et verifie si le contraste est suffisant (voir astuce 05).
webaim.org/resources/contrastchecker
PageSpeed Insights
Entre l'adresse de ton site et obtiens un score de vitesse avec des conseils concrets.
pagespeed.web.dev
Squoosh
Compresse et convertis tes images en WebP dans le navigateur. Gratuit, sans inscription.
squoosh.app
Google Fonts
Des centaines de polices gratuites et optimisees. Copie-colle le code pour les integrer.
fonts.google.com
Can I Use
Verifie si une fonctionnalite marche sur tous les navigateurs (Chrome, Safari, Firefox...).
caniuse.com
WAVE
Scanne ton site pour trouver les problemes d'accessibilite automatiquement.
wave.webaim.org
Favicon Generator
Genere l'icone de ton site pour tous les appareils (onglet navigateur, favori...).
realfavicongenerator.net
Decouvre Effect.Labs
La bibliotheque d'effets CSS et JavaScript prets a copier-coller pour tes projets web
Essaie gratuitement
71 effets gratuits · Pas de carte bancaire · effect.labs
Effect.Labs — 2026 — Tous droits reserves. Ce guide est distribue gratuitement.