Conseils pratiques en UX, performance, animations et accessibilite pour creer des sites web professionnels et efficaces.
Toutes les astuces de cette page en PDF. Checklists imprimables incluses.
Le guide complet pour construire un site de A a Z. 8 chapitres couvrant tout le necessaire.
Guidez l'oeil de vos visiteurs avec une hierarchie visuelle forte. Utilisez la taille, la couleur et l'espacement pour mettre en avant les elements importants.
/* Hierarchie typographique */ h1 { font-size: 3rem; font-weight: 800; } h2 { font-size: 2rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 600; } p { font-size: 1rem; line-height: 1.7; }
Les images representent souvent 50%+ du poids d'une page. Utilisez WebP, lazy loading et srcset pour des gains de performance significatifs.
<!-- Image optimisee avec lazy loading --> <img src="image.webp" loading="lazy" decoding="async" srcset="image-400.webp 400w, image-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" />
Privilegiez transform et opacity pour des animations fluides a 60fps. Evitez d'animer width, height, top, left qui declenchent un repaint couteux.
/* Bon - GPU accelere */ .element { transform: translateX(100px); opacity: 0.5; } /* Eviter - Repaint couteux */ .element { left: 100px; /* Non */ width: 200px; /* Non */ }
Centralisez vos couleurs, espacements et typographies avec des CSS custom properties. Facilitez la maintenance et permettez le theming.
:root { /* Couleurs */ --primary: #6366f1; --text: #ffffff; --bg: #0a0a0f; /* Espacements */ --space-sm: 8px; --space-md: 16px; --space-lg: 32px; /* Rayons */ --radius: 12px; }
Assurez un ratio de contraste minimum de 4.5:1 pour le texte normal et 3:1 pour le texte large. Utilisez des outils comme WebAIM pour verifier.
/* Bon contraste */ .text { color: #ffffff; /* Blanc */ background: #1a1a1a; /* Ratio: 12.6:1 ✓ */ } /* Mauvais contraste */ .text { color: #888888; /* Gris */ background: #666666; /* Ratio: 2.1:1 ✗ */ }
Sur mobile, les zones tactiles doivent faire au moins 44x44 pixels pour etre facilement cliquables. C'est une recommandation Apple et Google.
.button { min-height: 44px; min-width: 44px; padding: 12px 24px; } /* Pour les icones */ .icon-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
Utilisez les balises semantiques HTML5 (header, main, nav, article, section, footer) pour aider les moteurs de recherche a comprendre votre contenu.
<header> <nav>...</nav> </header> <main> <article> <h1>Titre principal</h1> <section>...</section> </article> </main> <footer>...</footer>
Certains utilisateurs sont sensibles aux animations. Desactivez ou reduisez les animations pour ceux qui ont active cette preference systeme.
/* Animations par defaut */ .element { animation: slideIn 0.5s ease; } /* Desactiver si demande */ @media (prefers-reduced-motion: reduce) { .element { animation: none; transition: none; } }
Utilisez preload pour charger en priorite les ressources essentielles comme les polices, le CSS critique et les images above-the-fold.
<!-- Dans le <head> --> <link rel="preload" href="font.woff2" as="font" crossorigin> <link rel="preload" href="critical.css" as="style"> <link rel="preload" href="hero.webp" as="image">
La fonction clamp() permet de definir des valeurs fluides avec un minimum et maximum. Parfait pour la typographie et les espacements responsive.
/* Typographie fluide */ h1 { /* min: 2rem, ideal: 5vw, max: 4rem */ font-size: clamp(2rem, 5vw, 4rem); } /* Espacement fluide */ .section { padding: clamp(40px, 8vw, 100px); } /* Largeur fluide */ .container { width: clamp(300px, 90%, 1200px); }
L'utilisateur doit toujours savoir que son action a ete prise en compte. Ajoutez des etats hover, active, loading et success a vos boutons.
.btn { transition: all 0.2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(0.98); } .btn.loading { opacity: 0.7; pointer-events: none; } .btn.success { background: #10b981; }
Chaque image informative doit avoir un alt text qui decrit son contenu. C'est essentiel pour l'accessibilite et le referencement.
<!-- Bon alt text --> <img src="team.jpg" alt="Equipe de 5 developpeurs travaillant ensemble"> <!-- Mauvais alt text --> <img src="team.jpg" alt="image"> <!-- Image decorative --> <img src="decoration.svg" alt="" role="presentation">
Utilisez prefers-color-scheme pour adapter automatiquement votre site aux preferences systeme de l'utilisateur.
:root { --bg: #ffffff; --text: #1a1a1a; } @media (prefers-color-scheme: dark) { :root { --bg: #0a0a0f; --text: #ffffff; } } body { background: var(--bg); color: var(--text); }
Le CLS degrade l'experience utilisateur. Reservez l'espace pour les images et contenus dynamiques pour eviter les sauts de page.
/* Reserver l'espace image */ .image-container { aspect-ratio: 16 / 9; background: #1a1a1a; } /* Ou avec padding hack */ .image-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ } .image-wrapper img { position: absolute; inset: 0; }
Simplifiez vos formulaires : un champ par ligne, labels visibles, validation en temps reel, et messages d'erreur clairs et utiles.
<label for="email">Email</label> <input type="email" id="email" required autocomplete="email" inputmode="email" placeholder="vous@exemple.com" /> <span class="error"> Veuillez entrer un email valide </span>
Ne supprimez jamais le outline de focus. Personnalisez-le pour qu'il soit visible tout en s'integrant a votre design.
/* Ne jamais faire */ *:focus { outline: none; } /* NON! */ /* Bonne pratique */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Masquer pour souris, garder pour clavier */ :focus:not(:focus-visible) { outline: none; }
Verifiez ces points essentiels avant de publier votre site
Outils et references pour aller plus loin
Guide officiel Google sur les Core Web Vitals et les bonnes pratiques web.
Visiter →Verifiez le ratio de contraste de vos couleurs pour l'accessibilite.
Visiter →Analysez la performance de votre site et obtenez des recommandations.
Visiter →Compressez et convertissez vos images en WebP directement dans le navigateur.
Visiter →Bibliotheque de polices gratuites et optimisees pour le web.
Visiter →Verifiez la compatibilite navigateur des fonctionnalites CSS et JS.
Visiter →Outil d'evaluation de l'accessibilite de vos pages web.
Visiter →Generez tous les formats de favicon pour tous les appareils.
Visiter →