Intégrateur web : passé, présent, futur.

Un peu d’histoire

La préhistoire

De l’apparition du web jusqu’au milieu des années 2000, l’intégration web ne correspondait pas réellement à un métier nommé (ni même nommable) comme a pu l’être très rapidement celui de développeur par exemple, celui de webdesigner aussi, ou encore celui de webmaster.

La naissance

Vers la fin des années 2000, l’intégration web a vécu une combinaison d’énormes tournants qui l’ont poussée à sortir de l’oeuf 🐣.

Cher intégrateur, qui es-tu réellement ?

Si le métier d’intégrateur web s’est imposé petit à petit dans l’écosystème de la production web, il lui a fallu du talent 😎 et de la persévérance 💪 pour démontrer toute son utilité et la valeur de son travail à la production web.

Que fais-tu ?

Le périmètre d’intervention de l’intégrateur dépend de plusieurs paramètres :

  • son profil
  • son expérience
  • ses envies ou affinités personnelles avec des langages, outils ou technos spécifiques,
  • l’entité dans laquelle il travaille, ainsi que la taille et surtout de l’organisation de celle-ci.
  • Découpage des maquettes sous Photoshop / Sketch / Adobe XD : échanges préalables avec le webdesigner, création de font icons ou symbols svg, création des images utilisée dans la charte, récupération des fonts texte et couleurs projet
  • Construction du HTML : respect de la sémantique, hiérarchisation cohérente du document, préparation logique du HTML en vue des styles et de l’animation
  • Styles CSS : utilisation du préprocesseur (ou pas, ça dépend), nomenclature (OOCSS, ITCSS ou encore BEM)
  • Responsive / Fluid design : prise en compte de tous les devices, media queries, mobile first
  • Animation web : keyframes CSS, JavaScript, librairies JS dédiées, WebGL
  • Compatibilité navigateurs : autoprefix selon les règles en vigueur, tests visuels ou automatisés
  • Création de thèmes complets pour CMS Wordpress
  • Automatisation de tâches de build et d’optimisation via Grunt, Gulp ou Webpack
  • Création de templates d’email : intégration, tests de compatibilité, tests de délivrabilité
  • Création et évolution de kits et starters avec nos bonnes pratiques pour démarrer rapidement un projet : kit css, kit javascript, kit config (linter, packages, gulpfile…), starter WordPress.

Des compétences techniques, mais pas seulement…

Des tâches transverses

L’amplitude des compétences techniques demandées pour être un intégrateur solide est assez large. Mais il faut également prendre en compte des notions plus globales et transverses que les tâches techniques citées ci-dessus.

  • L’accessibilité : organisation et hiérarchie des contenus, sémantique des balises HTML, navigation au clavier, prise en compte de la synthèse vocale (standard ARIA)
  • La performance : production de code organisé, découpé, propre, logique et léger
  • Le SEO : respect des bonnes pratiques pour favoriser un bon référencement naturel
  • La modularité et la maintenabilité de son code : organisation du code en composants, code tourné réutilisabilité

En bonus

S’il faut des compétences bien évidemment, quelques petites pincées des qualités citées ci-dessous ne sont que bienvenues :

  • La rigueur : pour soi-même (si on travaille seul.e) ou pour l’ensemble des membres de l’équipe dans laquelle on travaille, l’intégrateur se doit d’avoir et de suivre des règles, des conventions, des bonnes pratiques, qui facilitent la pérennité, la maintenabilité et éventuellement une passation facilitée et sereine de son code à un autre intégrateur
  • L’adaptabilité / La flexibilité : Quel que soit le type de projet, le travail de l’intégrateur doit prendre en compte et souvent anticiper à la fois les besoins et contraintes du client et ceux de l’utilisateur final du produit. Dans un environnement technique qui en découle et très souvent différent (Symfony, Angular et WordPress chez Biig), l’intégrateur doit avoir une bonne compréhension des langages utilisés par ces outils (PHP, Twig, JavaScript, Typescript pour les outils cités plus haut). Le contexte d’intégration change ainsi régulièrement, les contraintes qui lui sont liées également, obligeant l’intégrateur à s’adapter sans cesse.
  • La créativité / “L’oeil graphique” : L’intégrateur a pour mission de construire et mettre à disposition du navigateur ce qu’a conçu et imaginé le webdesigner. Expliquée et décortiquée sous toutes les coutures par le webdesigner, la maquette laisse toutefois systématiquement une part d’interprétation au moment de la coder, notamment au niveau des effets liés à l’interaction utilisateur (hover, focus, click, drag & drop, scroll… et autres interactions ‘tap’ sur appareils mobiles). C’est ce que l’on va appeler l’animation d’interface. L’animation n’est pas (et ne doit pas être) une surcouche optionnelle de l’intégration. L’animation fait partie du design, c’est un outil du design. C’est d’ailleurs le langage commun du binôme intégrateur/webdesigner, ce qui lie leur travail respectif.

Pour résumer

Un intégrateur n’est pas à la base du design d’un site web ou d’une webapp. Il doit toutefois et dans l’idéal collaborer avec le webdesigner pour construire l’expérience utilisateur et élaborer la charte graphique. Comment ? Tout simplement en apportant à cette construction ses compétences techniques, sa connaissance de la “faisabilité” technique des idées du webdesigner avec qui il échange tout au long du projet.

Dans ma boule de cristal, je vois…

Né dans le passé, devenu légitime récemment (on parle bien du début/milieu des années 2010), le métier d’intégrateur suit actuellement encore l’évolution des langages dont il dépend. Il est donc en évolution permanente avec un avenir prometteur devant lui. En voici les raisons :

Le CSS, du bourgeon à la fleur

Si certains langages sont installés et ont les reins solides depuis longtemps (le PHP côté backend par exemple, ou encore le JavaScript qui vit actuellement une seconde jeunesse côté frontend), ça n’est pas encore le cas du CSS qui a déjà tellement changé depuis son apparition et qui continue de grandir actuellement sous nos yeux à vitesse grand V.

Des sous-branches qui poussent

Les navigateurs, les utilisateurs et l’intégrateur d’aujourd’hui ne sont plus les mêmes que ceux d’il y a 10 ans, et ne seront certainement pas les mêmes dans 10 ans.

  1. L’accessibilité : S’il est bien de créer des sites/apps et ses contenus, il est encore mieux, voire indispensable, de le rendre accessible à tous, c’est-à-dire de prendre en compte les facultés et difficultés éventuelles des internautes (situation de handicap, daltonisme par exemple…), ou encore leur mode de consultation (navigation au clavier, lecteur d’écran pour ne citer qu’eux). On est d’accord, l’accessibilité n’est pas censée être une spécialisation mais bien au coeur de tous les métiers de la production web. Pourtant, ça n’est pas encore toujours le cas. A ce jour, seuls quelques irréductibles (de plus en plus toutefois) en font leur cheval de bataille (et ils ont raison), en attendant que tous soient convertis, de gré ou de force.
  2. La qualité : Après l’éclosion d’Internet où les sites ont poussé comme des champignons, il est l’heure pour ce média de se structurer et se rationaliser un peu. La qualité web est une notion un peu plus large et transverse que l’accessibilité. Elle regroupe non seulement les principales règles d’accessibilité, mais aussi des bonnes pratiques d’ergonomie, de navigation, d’utilisation, de qualité des contenus, de performance… En France, la problématique de qualité web est mise en avant et portée depuis déjà une dizaine d’années par l’organisme Opquast et la certification “Maîtrise de la qualité web en projet web” qu’il propose. Une certification “must-have” pour un intégrateur.
  3. L’animation 2D / 3D : Avec un retour en grâce du JavaScript, l’utilisation croissante du format d’image SVG, et la solidification du standard WebGL, le CSS est en train de devenir un outil puissant du design et de l’interaction utilisateur. La combinaison de tous ces langages/formats tente de répondre à une problématique à laquelle a répondu Flash pendant plusieurs années : l’animation et la fluidification de la lecture des contenus. Après un trou de 10 années sur le sujet (oui la mort de flash c’était il y a déjà longtemps), ça y est ! Tout est enfin mûr pour s’y remettre. Animons le web !

Conclusion

Appelé historiquement “Monteur HTML,” puis “Intégrateur web”, la question se pose alors de la pertinence du nom historique de ce métier, sacrément ancré dans le passé, et dont le sens n’est pas très explicite de prime abord.

  • Frontend Designer
    Appellation la plus logique.
    Ce terme permet d’illustrer au plus juste la position de l’intégrateur. On en revient au concept de “mi-chemin entre design et développement”.
  • Frontend” rappelle sur quel aspect du projet web l’intégrateur web travaille : le front, la partie visible par l’utilisateur.
  • “Designer” rappelle sa proximité avec le webdesigner et l’intérêt pour les 2 métiers de travailler et échanger régulièrement.
  • UI Developer
    Appellation la + technique.
  • UI” rappelle l’interface utilisateur et directement ce sur quoi porte le travail de l’intégrateur. Par association, rappel également de son binôme UX (expérience utilisateur), ce qui crée un lien direct avec le webdesigner.
  • Developer” : parce que l’intégrateur est un technicien qui code toute la journée, dans des langages qui évoluent et se rapprochent de plus en plus de la logique de développement pur.

Lectures complémentaires 🧐

--

--

UI & WordPress theme developer @be_api, Paris, France. https://francoisthibaud.me

Love podcasts or audiobooks? Learn on the go with our new app.

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