Les offres d'intégrateur web demandent HTML5, CSS3, Sass ou Tailwind, l'intégration depuis Figma, le responsive et souvent l'accessibilité RGAA. On y trouve aussi des gabarits de CMS (Twig, Nunjucks, WordPress), des e-mails HTML et un peu de JavaScript pour les menus, les onglets et les formulaires. Attention à l'intitulé : sur certains sites d'offres, « intégrateur web » désigne aussi le déploiement d'applications Java sur Tomcat ou WildFly, un tout autre métier.
Les écarts entre candidats se voient vite sur le CSS. Un profil formé uniquement sur un framework pose des classes utilitaires sans difficulté, mais cale sur la cascade, la spécificité ou une grille qui casse à 360 pixels. L'accessibilité sépare aussi les profils : beaucoup citent le RGAA sans avoir jamais testé une page au clavier ou avec un lecteur d'écran.
Demandez un lien vers une intégration en ligne et ouvrez-la ensemble, outils de développement ouverts, en réduisant la fenêtre. Le PDF regroupe 30 questions sur six axes, un cas de 20 minutes et une grille de 1 à 4.
HTML, CSS et outils de l'intégration web
HTML5 sémantique
Les balises qui donnent un sens à la page : en-tête, navigation, titres hiérarchisés, listes, boutons, formulaires avec leurs libellés. Un HTML juste rend la page compréhensible par un lecteur d'écran et par les moteurs de recherche avant même la première ligne de CSS. C'est le premier point à regarder dans le code d'un intégrateur.
CSS moderne : Grid, Flexbox, variables
Flexbox aligne sur un axe, Grid gère la mise en page en deux dimensions, les variables CSS portent couleurs et espacements. Les navigateurs récents gèrent aussi les container queries, le sélecteur :has() et l'imbrication native. Un intégrateur à jour s'en sert au lieu de bricoler en JavaScript.
Sass et BEM
Sass ajoute variables, mixins et découpage en fichiers ; depuis Dart Sass 1.80, @import est déprécié au profit de @use et @forward. BEM est une convention de nommage des classes qui limite les conflits sur un gros projet. Demandez comment la personne range ses fichiers et nomme ses classes.
Tailwind CSS
Un framework de classes utilitaires posées directement dans le HTML. La version 4, sortie en janvier 2025, se configure en CSS avec @theme, sans fichier tailwind.config.js. Il accélère la production mais ne dispense pas de comprendre la cascade et la spécificité.
Figma
L'outil où les designers livrent maquettes, composants et variables. Le mode développeur donne les mesures, les couleurs et les exports d'images. Un bon intégrateur repère ce que la maquette ne montre pas : états de survol et de focus, textes longs, largeurs intermédiaires.
Accessibilité RGAA
Le référentiel français d'accessibilité, en version 4.1.2 avec 106 critères ; une version 5 est en cours de rédaction. Il s'applique aux sites publics et à certaines entreprises, et l'European Accessibility Act s'applique depuis juin 2025. L'intégrateur en porte une grande part : structure, contrastes, focus, formulaires, alternatives aux images.
E-mails HTML
Une intégration à part, en tableaux et styles en ligne, parce que les clients de messagerie gèrent mal le CSS moderne. Outlook classique pour Windows affiche le HTML avec le moteur de Word. MJML ou l'éditeur d'un outil d'e-mailing aident, mais il faut tester dans plusieurs clients avant l'envoi.
Images et Core Web Vitals
Formats WebP et AVIF, attributs srcset et sizes, chargement différé, dimensions déclarées pour éviter que la page saute. Ces choix pèsent directement sur les Core Web Vitals (LCP, CLS, INP) que Google mesure.
Le poste se situe entre le designer et le développeur. Selon les cas, l'intégrateur produit des pages et des e-mails sur des gabarits de CMS (WordPress, Drupal, Twig, Nunjucks), ou intègre dans des composants React, Vue ou Angular écrits par une équipe de développement. Le JavaScript attendu va d'un menu accessible à des composants complets ; au-delà, le poste se rapproche de celui de développeur front-end. Précisez dans l'offre la part d'e-mailing, le framework CSS utilisé et l'exigence RGAA, puis construisez l'entretien en conséquence.
Les compétences d'intégration à contrôler en entretien
- HTML sémantique et formulaires
- CSS : cascade, Grid et Flexbox
- Responsive et mobile first
- Accessibilité RGAA
- Intégration d'e-mails HTML
- Performance des pages et compatibilité navigateurs
Questions pour un intégrateur web, de la cascade CSS aux e-mails
Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.
Question 1 · junior à confirmé
Votre règle CSS ne s'applique pas alors que la feuille est bien chargée. Comment trouvez-vous pourquoi ?
Une bonne réponseDans les outils de développement du navigateur, l'onglet des styles montre la règle barrée et celle qui l'emporte. La cause tient à la spécificité (un id, un sélecteur plus long), à l'ordre des feuilles, à un !important ailleurs ou à une couche @layer prioritaire. Elle corrige en baissant la spécificité ou en réorganisant les couches, pas en ajoutant un !important.
Signal d'alerteAjouter !important ou un id jusqu'à ce que la règle passe.
Question 2 · junior à confirmé
Un bouton « Ajouter au panier » est codé avec un <div> et un écouteur de clic en JavaScript. Qu'est-ce qui ne va pas ?
Une bonne réponseLe div n'est pas atteignable au clavier, ne réagit ni à Entrée ni à Espace et n'est pas annoncé comme un bouton par un lecteur d'écran. La correction est un vrai <button type="button">, stylé en CSS, qui apporte tout cela sans code supplémentaire. La personne distingue aussi le bouton, qui déclenche une action, du lien, qui mène à une autre page.
Signal d'alerteAjouter tabindex et role="button" en pensant que c'est équivalent, sans gérer le clavier, ou « ça marche à la souris ».
Question 3 · confirmé
La maquette Figma n'existe qu'en 1440 et en 375 pixels de large. Comment intégrez-vous les largeurs intermédiaires ?
Une bonne réponseEn mobile first, avec des mises en page fluides (Grid, Flexbox, unités relatives, clamp() pour les tailles de texte) et des points de rupture placés là où le contenu casse, pas sur des modèles d'appareils. Elle teste en étirant la fenêtre et signale au designer les cas que la maquette ne couvre pas, comme un menu trop long à 800 pixels. Les container queries servent quand un composant doit changer selon la place dont il dispose.
Signal d'alerteTrois media queries copiées d'un framework et des largeurs fixes en pixels.
Question 4 · confirmé
Comment vérifiez-vous vous-même l'accessibilité d'une page que vous venez d'intégrer, avant tout audit ?
Une bonne réponseUne navigation complète au clavier (ordre logique, focus visible, aucun piège), un passage avec un lecteur d'écran comme NVDA ou VoiceOver, le contrôle des contrastes, le zoom à 200 %, la structure des titres et des zones. Un outil automatique (axe, WAVE) vient en complément. Elle sait qu'un outil automatique ne détecte qu'une partie des erreurs.
Signal d'alerte« Lighthouse me donne 100 » comme seule preuve.
Question 5 · confirmé
Un e-mail s'affiche bien dans Gmail et se casse dans Outlook pour Windows. Pourquoi, et que faites-vous ?
Une bonne réponseOutlook classique pour Windows rend le HTML avec le moteur de Word : pas de flexbox ni de grid, marges et images de fond mal gérées. L'intégration repose sur des tableaux, des styles en ligne, des largeurs en attributs et des commentaires conditionnels pour Outlook, parfois du VML pour un fond ou un bouton. Elle teste dans un outil de prévisualisation multi-clients (Litmus, Email on Acid) avant l'envoi.
Signal d'alerte« Plus personne n'utilise Outlook », ou un e-mail en flexbox repris d'une page web.
Recevez la fiche d'entretien complète en PDF
La fiche pour mener l'entretien de bout en bout, prête à imprimer ou à partager avec le manager.
- 30 questions sur 6 axes, avec la bonne réponse, le signal d'alerte et la relance
- Le niveau visé pour chaque question
- Une mise en situation de 20 minutes et ce qu'on attend du candidat
- La grille d'évaluation de 1 à 4, axe par axe
Questions fréquentes sur le recrutement d'un intégrateur web
Quelle différence entre un intégrateur web et un développeur front-end ?
L'intégrateur se concentre sur le HTML, le CSS, l'accessibilité et le rendu fidèle à la maquette, avec un JavaScript limité aux interactions d'interface. Le développeur front-end construit l'application elle-même : état, appels d'API, routage, tests, souvent dans React, Vue ou Angular. Les deux postes se recoupent sur les composants. Si votre besoin inclut un framework JavaScript au quotidien, publiez plutôt une offre de développeur front-end et vérifiez quand même le niveau en CSS.
Quel test technique pour un intégrateur web ?
Une petite maquette à intégrer en une heure à une heure et demie, en direct ou sur un temps court : une carte produit, un formulaire et un menu, en deux largeurs. Regardez ensuite le résultat avec la personne : HTML, comportement au clavier, largeurs intermédiaires, organisation du CSS. Ajoutez un extrait d'e-mail si le poste en comporte. Évitez le gros projet à rendre, qui montre le résultat mais rien de la façon de travailler.
Faut-il exiger Tailwind, Bootstrap ou Sass ?
Rarement comme condition. Un intégrateur qui maîtrise la cascade, Grid et Flexbox passe d'un outil à l'autre en peu de temps. Tailwind demande surtout d'apprendre ses conventions et sa configuration, Sass son système de modules. Exigez l'outil seulement si le poste démarre sur un code existant volumineux qui l'utilise. Méfiez-vous davantage d'un profil qui ne sait plus écrire de CSS sans framework.
Un intégrateur web doit-il connaître le RGAA ?
Pour un site public ou soumis à une obligation d'accessibilité, oui, et il doit savoir le mettre en pratique. Beaucoup de critères dépendent directement de l'intégration : structure des titres, formulaires, contrastes, focus, alternatives aux images. Demandez comment la personne teste une page et quelles erreurs elle a corrigées après un audit. Connaître le nombre de critères compte moins que savoir naviguer au clavier et utiliser un lecteur d'écran.
Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.
