Blog
5 erreurs fréquentes en intégration web et comment les éviter

5 erreurs fréquentes en intégration web et comment les éviter

02 juillet 2025
Guillaume Ducuing, Développeur front-endGuillaume Ducuing

Intégrer un site, c’est donner vie à un design. Mais malgré les outils modernes, certaines erreurs reviennent souvent. Voici 5 pièges courants à éviter pour une intégration propre et efficace.

a computer screen with a keyboard and a box with a logo

Les erreurs fréquentes

1. Ne pas penser au responsive dès le début

L’erreur : intégrer uniquement en desktop, puis “casser” l’existant pour adapter au mobile. Résultat : hacks CSS, bugs, et perte de temps.

La bonne approche : penser “mobile-first” ou, au minimum, intégrer en parallèle desktop & mobile. Utiliser des breakpoints clairs et logiques dès le départ, avec un système de grille cohérent.

Même si vous souhaitez quand même commencer en desktop, vous devez, avant de vous lancer corps et âmes dans l'intégration, regarder comment est conçu le responsive. Cela va vous donner des indications sur comment construire le desktop et éventuellement relever des erreurs en design (parfois nos amis designers font des choses trop différentes entre desktop et mobile par exemple).

2. Ignorer les performances web

L’erreur : charger des images non optimisées, importer 4 polices Google Fonts, ajouter des scripts inutiles... Et boum : PageSpeed s’écroule.

Ce qu’il faut faire :

  • Utiliser next/image ou un équivalent pour optimiser les médias. (sur Prismic par exemple, il existe <PrismicNextImage> qui est déjà optimisé
  • Précharger les polices ou limiter leur poids. (je vous conseille de creer un dossier assets>fonts sur votre projet dans lequel vous mettez vos polices).
  • Charger uniquement le JS nécessaire
  • Vérifier régulièrement votre package.json pour s'assurer que tous les packages installés sont utiles. (Penser aussi à vérifier leur poids, si un package se mesure en méga octet => 💩)
  • Vérifier son site avec PageSpeed Insights ou Lighthouse
black laptop computer turned on near black and white electronic devicesSource: unsplash

3. Une hiérarchie HTML mal pensée (et peu accessible)

L’erreur : utiliser des <div> à outrance, négliger les balises sémantiques (<header>, <main>, <section>, etc.), oublier les alt sur les images…

Bonne pratique :

  • Respecter une structure HTML logique
  • Utiliser les bons niveaux de titres (<h1> → <h6>)
  • Ajouter des attributs aria si nécessaire
  • Penser accessibilité même sur des projets simples : tout le monde y gagne, y compris le SEO.

Pour construire votre HTML je vous déconseille fortement d'utiliser l'IA, c'est le meilleur moyen de se retrouver avec une structure qui ne vous appartient pas, que vous n'avez pas en tête. Je préfère utiliser l'IA pour des fonctions JS ou pour débugger.

closeup photo of computer code screengrabSource: unsplash

4. Écrire un CSS désorganisé

L’erreur : du style inline, des classes ultra spécifiques, pas de logique de nommage, aucune réutilisabilité.

À faire :

  • Adopter une convention (BEM, utility-first, etc.)
  • Utiliser des composants (avec Tailwind, Sass ou CSS Modules)
  • Garder le style prévisible et maintenable
  • Centraliser les variables (taille, couleur, typo…)

Perso, j’utilise Tailwind + composants React : structure claire et CSS réduit.
Sur certains projets j'utilise également SCSS.

5. Ne pas tester son intégration

L’erreur : ne pas vérifier le rendu sur plusieurs navigateurs, tailles d’écran ou interactions utilisateur.

Tester, c’est essentiel :

  • Chrome, Firefox, Safari (mobile & desktop)
  • Résolutions diverses : iPhone SE, iPad, desktop 4K
  • Comportements : focus clavier, scroll, menu burger, animations

Un bon test utilisateur vaut souvent mieux que 50 lignes de code.

black flat screen computer monitor turned on beside black computer keyboardSource: unsplash

Pour terminer, je ne l'ai pas mis en point mais si vous devez livrer des clients pour des projets, il faut que vous proposiez absolument un CMS pour qu'ils soient autonomes. En 2025, je ne conçois pas de livrer mes projets web sans fournir de solution pour permettre à mes clients de faire leurs modifications seules sans avoir besoin d'un développeur pour changer le contenu.

Si vous avez lu mes autres articles, vous savez que je propose Prismic car c'est un CMS headless que je trouve flexible et performant mais faites vous votre avis en testant d'autre solutions sur le marché comme Contentful, Strapi ou Sanity par exemple

Commentaires

Connectez-vous pour ajouter un commentaire

Se connecter avec Google