L’intégration web, ce métier toujours sous-estimé en 2022

Depuis un peu plus de 10 ans, j’exerce le métier d’intégratrice web. Le titre de mon poste n’a pas toujours été celui-là. Dans mes expériences précédentes, j’ai été le plus souvent désignée comme développeuse front-end. Aujourd’hui, je suis fière d’avoir un contrat mentionnant le poste d’intégrateur web. Et pourtant, c’est un profil sous-estimé, souvent oublié et de moins en moins présent dans les entreprises.

Ces dernières années, les technologies front-end ont évolué à une vitesse folle, avec l’arrivée des framework JavaScript.

Pourtant, il y a une chose qui est restée constante : on produit toujours des pages HTML mises en page avec des feuilles de styles.

Ces 2 langages, qui sont la base du web, ont été mis de côté, car tout le monde les connaît, mais sans les maîtriser vraiment. C’est simple de penser qu’on va recruter un développeur « full stack » et qu’il s’occupera aussi du design, car après tout, “le CSS c’est facile”.

Sauf qu’aujourd’hui, le design d’un site web, c’est aussi la gestion du responsive design, des interfaces toujours plus riches, des animations, des contenus qui changent, la compatibilité navigateurs, l’assurance qualité, l’accessibilité, la maintenabilité, l’évolution des technologies, etc.

Quand j’ai commencé ce métier, les équipes n’étaient pas organisées comme maintenant. Le rôle de l’intégrateur web était positionné après la phase de design et avant la phase de développement back-end. Je produisais des intégrations statiques sur la base des maquettes (on appelait ça le montage HTML). J’envoyais ça ensuite aux développeurs, en priant pour qu’aucune classe ne soit oubliée pour que le design soit conforme à la sortie du site.

On avait à l’époque une vraie séparation des métiers, où chacun restait dans sa bulle sans vraiment se parler. Aujourd’hui, les méthodes de travail ont heureusement évolué, et je travaille conjointement avec d’un côté les équipes design, et de l’autre les développeurs back-end.

Je travaille aujourd’hui essentiellement sur les projets Drupal, en étroite collaboration avec les développeurs. Mon travail consiste à mettre en forme les templates qu’ils ont initiés.

Voici les étapes pour la création d’un composant ou d’une page :

  • Création des contenus de test dans le back office du projet, cela implique de bien connaître la solution ou le CMS utilisé.
  • Création de la structure HTML dans les fichiers twig (ou tout autre langage de templating) du thème. Il faut aussi créer les conditions d’affichage des différentes données, pour ne pas avoir de balise vide si la donnée n’existe pas. De plus, il est parfois nécessaire de savoir aller modifier des valeurs dans les fichiers PHP, pour envoyer une donnée supplémentaire par exemple.
  • Mise en forme CSS et responsive design. J’utilise le préprocesseur Sass, ainsi que des post processeurs (pour les préfixes navigateur par exemple). Cela demande des connaissances en graphisme pour interpréter correctement la maquette et savoir décliner le travail des designers pour le responsive qui n’est pas toujours à 100% maquetté.
  • Micro interactions, animations, création de composants JavaScript. Nous nous appuyons souvent sur les prototypes animés réalisés par les designers.
  • Gestion des librairies dans Drupal. Drupal nous permet grâce au fichier librairie de ne charger que les styles et scripts des éléments qui sont affichés dans la page. Cela demande un découpage logique des composants, et améliore les performances d’affichage du site.
  • Création des styles d’images pour tous les médias du site. Nous utilisons les styles d’images responsive pour améliorer les performances du site.
  • Tests d’affichage sur les différents navigateurs, mais aussi sur des écrans très petits, très larges, en dark mode, en lecture de droite à gauche, etc.
  • Tests de contribution, avec moins de contenus, plus de contenus, des textes plus longs, plus courts. Il faut avoir à l’esprit que le site ne restera pas statique. Comment est le rendu dans les autres langues ? La maquette indique 6 éléments de menus, comment s’affiche le menu avec 10 éléments ?

Le métier d’intégrateur web nécessite de solides compétences en matière de design et de création de sites web, ainsi qu’une bonne compréhension des principes de l’accessibilité, du SEO, et de l’expérience utilisateur. On doit évidemment être capable de travailler en équipe et de communiquer efficacement avec les clients et les collègues.

Il demande aussi une grande capacité d’adaptation pour travailler dans les différentes solutions ou CMS. Il est nécessaire aussi de comprendre les enjeux clients, qui peuvent parfois entraîner des conflits de vision ou des difficultés à concilier les souhaits du client et les contraintes techniques. Avec pédagogie, on doit être force de proposition pour trouver les solutions les plus adaptées.

Une grande rigueur est nécessaire pour respecter les maquettes et garantir la maintenabilité du produit. C’est aujourd’hui impossible de dire qu’on produit des sites “pixel perfect”, car ça nécessiterait des maquettes parfaites. L’intégrateur web doit savoir interpréter les maquettes de façon intelligente et logique, en gardant une cohérence dans tout le site.

L’arrivée de l’atomic design et des méthodologies comme BEM (Block-Element-Modifier), OOCSS (Object-Oriented CSS) ou ITCSS (Inverted Triangle CSS) nous a permis d’écrire du code de manière organisée et modulaire. Elles permettent de créer des composants et des pages plus faciles à maintenir et à réutiliser.

Ce qui rend ce métier aussi intéressant, c’est sa constante évolution. J’écris du CSS depuis un peu plus de 10 ans, et j’ai mis du temps avant de me présenter comme “senior” sur le sujet tant il est vaste. J’ai à peine essayé la moitié des nouvelles fonctionnalités sorties ces dernières années, et j’ai hâte d’en apprendre davantage les prochaines années.

--

--

👩‍💻 Intégratrice web au pixel près chez SQLI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store