Practical tips on UX, performance, animations and accessibility to create professional and effective websites.
All the tips from this page in PDF. Printable checklists included.
The complete guide to build a website from A to Z. 8 chapters covering everything you need.
Guide your visitors' eyes with a strong visual hierarchy. Use size, color, and spacing to highlight important elements.
/* Typography hierarchy */ 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; }
Images often represent 50%+ of a page's weight. Use WebP, lazy loading, and srcset for significant performance gains.
<!-- Optimized image with 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" />
Prioritize transform and opacity for smooth 60fps animations. Avoid animating width, height, top, left which trigger costly repaints.
/* Good - GPU accelerated */ .element { transform: translateX(100px); opacity: 0.5; } /* Avoid - Costly repaint */ .element { left: 100px; /* Non */ width: 200px; /* Non */ }
Centralize your colors, spacing, and typography with CSS custom properties. Simplify maintenance and enable theming.
:root { /* Colors */ --primary: #6366f1; --text: #ffffff; --bg: #0a0a0f; /* Spacing */ --space-sm: 8px; --space-md: 16px; --space-lg: 32px; /* Radii */ --radius: 12px; }
Ensure a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use tools like WebAIM to verify.
/* Good contrast */ .text { color: #ffffff; /* White */ background: #1a1a1a; /* Ratio: 12.6:1 ✓ */ } /* Poor contrast */ .text { color: #888888; /* Gray */ background: #666666; /* Ratio: 2.1:1 ✗ */ }
On mobile, touch targets must be at least 44x44 pixels to be easily clickable. This is a recommendation from Apple and Google.
.button { min-height: 44px; min-width: 44px; padding: 12px 24px; } /* For icons */ .icon-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
Use semantic HTML5 tags (header, main, nav, article, section, footer) to help search engines understand your content.
<header> <nav>...</nav> </header> <main> <article> <h1>Main title</h1> <section>...</section> </article> </main> <footer>...</footer>
Some users are sensitive to animations. Disable or reduce animations for those who enabled this system preference.
/* Default animations */ .element { animation: slideIn 0.5s ease; } /* Disable if requested */ @media (prefers-reduced-motion: reduce) { .element { animation: none; transition: none; } }
Use preload to prioritize loading essential resources like fonts, critical CSS, and above-the-fold images.
<!-- In the <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">
The clamp() function lets you define fluid values with minimum and maximum. Perfect for responsive typography and spacing.
/* Fluid typography */ h1 { /* min: 2rem, ideal: 5vw, max: 4rem */ font-size: clamp(2rem, 5vw, 4rem); } /* Fluid spacing */ .section { padding: clamp(40px, 8vw, 100px); } /* Fluid width */ .container { width: clamp(300px, 90%, 1200px); }
Users must always know their action was received. Add hover, active, loading, and success states to your buttons.
.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; }
Every informative image should have alt text describing its content. It's essential for accessibility and SEO.
<!-- Good alt text --> <img src="team.jpg" alt="Equipe de 5 developpeurs travaillant ensemble"> <!-- Poor alt text --> <img src="team.jpg" alt="image"> <!-- Decorative image --> <img src="decoration.svg" alt="" role="presentation">
Use prefers-color-scheme to automatically adapt your site to the user's system preferences.
:root { --bg: #ffffff; --text: #1a1a1a; } @media (prefers-color-scheme: dark) { :root { --bg: #0a0a0f; --text: #ffffff; } } body { background: var(--bg); color: var(--text); }
CLS degrades user experience. Reserve space for images and dynamic content to avoid layout shifts.
/* Reserve image space */ .image-container { aspect-ratio: 16 / 9; background: #1a1a1a; } /* Or with padding hack */ .image-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ } .image-wrapper img { position: absolute; inset: 0; }
Simplify your forms: one field per line, visible labels, real-time validation, and clear, helpful error messages.
<label for="email">Email</label> <input type="email" id="email" required autocomplete="email" inputmode="email" placeholder="you@example.com" /> <span class="error"> Please enter a valid email </span>
Never remove the focus outline. Customize it to be visible while integrating with your design.
/* Never do this */ *:focus { outline: none; } /* NO! */ /* Best practice */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Hide for mouse, keep for keyboard */ :focus:not(:focus-visible) { outline: none; }
Check these essential points before publishing your site
Tools and references to go further
Google's official guide to Core Web Vitals and web best practices.
Visit →Check the contrast ratio of your colors for accessibility.
Visit →Analyze your site's performance and get recommendations.
Visit →Compress and convert your images to WebP directly in the browser.
Visit →Free and web-optimized font library.
Visit →Check browser compatibility for CSS and JS features.
Visit →Web page accessibility evaluation tool.
Visit →Generate all favicon formats for all devices.
Visit →