Intégrateur Web Freelance, développement front-end.

Entre le mockup et le développement front-end, l'Intégration Web Freelance permet de poser les premières lignes de codes et de structurer le site internet.

L’intégrateur web est la première étape clé nécessaire à la mise en ligne d’un site internet. Il est le traducteur du designer pour les navigateurs web et pose les premières pierres du SEO du site internet.

Qu’est-ce que l’intégration web ?

L’intégrateur web transpose la maquette graphique réalisée par le web designer en code informatique. C’est au travers de langage comme le HTML, CSS et Javascript que le développeur front-end donne vie à chaque page maquettée par les équipes de design puis validé par le client. Chaque choix graphique du designer sera transformé en ligne de code grâce à un éditeur de texte. Le travail du développeur web est alors de traduire le langage graphique en langage internet.

Une intégration réussite est un travail d’équipe. Le designer doit comprendre les contraintes métier du développeur, de même que le développeur doit comprendre la réflexion du designer. L’étape de l’intégration étant clef dans la réalisation d’un site internet, une bonne communication et connaissance des contraintes métiers du designer et du développeur est essentiel.

Quels sont les étapes d’intégration web réussite ?

Pré-requis: Du wireframe au mockup

L’UX designer réalise les wireframes permettant de réaliser un prototype basse définition du site internet. Elles permettent de vérifier que la navigation est comprise par l’utilisateur final du site internet ou de l’application. Une fois validées, les wireframes sont des documents de référence pour le(s) designer(s) et le(s) développeur(s). Elles permettront aux développeurs de visualiser l’arborescence et déterminer l’organisation des contenus (textes, photos, vidéos, …).

Les wireframes passent ensuite entre les mains d’un UI designer. Celui-ci laisse parler son imagination pour donner une identité visuelle au site internet grâce à des logiciels comme Sketch. Si les wireframes représentent un cadre pour lui, il peut être amené à en revoir la structure si elles ne tiennent pas compte des contraintes graphiques. La maquette haute définition ainsi obtenu servira de support à l’intégrateur web.

L’intégration des maquettes graphiques

De part mes connaissances en design et de développement web, je liste pour chaque projet web les spécifications techniques correspondant au design choisis. A la façon d’un tour de table entre un designer, un développeur et un chef de projet, je réfléchis avec précision à la faisabilité technique du design et de la démarche à suivre pour en optimiser l’intégration.

Ensuite, je prépare la structure du développement web à venir. Ceci en définissant les différents dossiers dans lesquels seront enregistrés les fichiers nécessaires au projet (images, vidéos, html, styles…). A la suite de quoi commence le travail de développement sur mon éditeur de texte (Sublime Text) en créant les variables correspondant aux couleurs, niveaux de titres, boutons, polices etc définis dans la charte graphique réalisé par le designer. Ensuite, page par page, je reprends et code les éléments à intégrer du haut vers le bas en HTML5. J’utilise les feuilles de style au format CSS3 et en complète certaines actions ou effets visuels avec du Javascript (ou jQuery). Pour visualiser ce qui se passe sur l’écran du développeur front-end, il faut reprendre le film Matrix et cette image de lignes de code par milliers sur fond noir. Difficile pour un non initié de comprendre ce qui se cache derrière toutes ces lignes.

Après avoir réalisé l’intégration de la vue ordinateur, je transpose les maquettes spécifiques aux smartphones et interprète le design intermédiaire pour que le site internet s’adapte aux différentes tailles d’écrans (ordinateurs, tablettes, smartphones). C’est ce qu’on appelle le responsive design.

Enfin, après s’être assuré de la compatibilité sur toutes les tailles d’écran, l’attention est mise sur la compatibilité du site internet sur les différents navigateurs : Chrome, Firefox, Safari, Internet Explorer, etc… En effet, les différents navigateurs ont des contraintes et spécificités qu’il est essentiel de prendre en compte pour un rendu uniforme. A ce stade, le projet ne contient que des données factices (appelées «lorem»). L’intégrateur web aura donc produit, sous forme de code, à l’identique le squelette visuel et fonctionnel créer par le’UX/UI designer, avant que le développeur web ne le connecte aux API et/ou serveurs web.

Le développeur web va utiliser la maquette fonctionnelle réalisée par l’intégrateur web comme squelette visuel. Il va remplacer les données factices par les contenus réels et les fonctionnalités nécessaires au projet. Le contenu est généralement stocké dans une base de données. En séparant le code fonctionnel d’un site internet de ses contenus, on peut ainsi modifier les contenus sans modifier le code. Pour créer, modifier et supprimer du contenu facilement de la base de données sans savoir à coder, il est régulièrement fait le choix de passer par un CMS (Content Manager System), comme Drupal ou WordPress. L’intégrateur web, à l’image d’un développeur web peu, lui-même, être amené à relier la maquette fonctionnelle au CMS ou au serveur.

Quels sont les missions de l’intégrateur web ?

Un code organisé et réutilisable

Produire un code propre, organisé et réutilisable est une obligation pour l’intégrateur web. En effet, son code servant de base aux autres développements, il doit pouvoir être facilement modifiable par un autre développeur qui répondra au besoin de mise à jour et d’innovation. Pour gagner en efficacité dans son intégration, l’intégrateur choisir un framework front-end comme Bootstrap ou Foundation pour démarrer son projet.

Une intégration responsive design

Ordinateurs, tablettes et smartphones sont autant de points d’entré pour un site internet. Mais représentent aussi l’une des plus grosses contraintes de développement. Cette contrainte de développement se répercute sur le travail de l’intégrateur web qui produira un code et une structure de site qui puissent s’adapter aux différentes tailles d’écrans, c’est le responsive design. Une autre option technique peut être adoptée selon le cahier des charges initial. Cette version consiste à réaliser deux versions du site, l’une pour les écrans d’ordinateur et une seconde pour les mobiles et tablettes.

Un site «SEO friendly»

Sans être un expert en SEO, l’intégrateur web devra appliquer toutes les bonnes pratiques de code pour optimiser l’accès à l’information aux moteurs de recherche. C’est ce qu’on appelle le Search Engine Optimization. Pour cela, il pourra s’appuyer sur un cahier des charges transmis par un freelance ou une agence spécialisée en SEO. En respectant ainsi ces contraintes le site internet profitera le plus naturellement possible d’un trafic depuis les moteurs de recherche.

Un affichage multi-navigateur

Chrome, Firefox, Safari, Internet Explorer, … Tous ces navigateurs internet ont leurs spécifités et apportent leurs lots de contraintes pour une intégration de site internet réussie. Le rôle de l’intégrateur web est alors de garantir que le code qu’il produit procure une expérience identique sur les plans visuel et fonctionnel à tous les utilisateurs du site internet ou de l’application quel que soit son navigateur web. Cette contrainte méconnue du grand public est la conséquence de l’interprétation irrégulière par les navigateurs du HTML5, CSS3 et javascript, les langages servant à la programmation front-end. Même si les différences tendent à se réduire entre les différents navigateurs internet, et que les navigateurs trop vieux ne sont plus pris en compte pour les tests, cette étape de test d’intégration s’avère parfois longue et fastidieuse. Les framework front-end comme Bootstrap permettent d’atténuer fortement ces différences et de gagner du temps précieux en développement.

L’accessibilité du site

Le développement des intélligences artificielles comme Google Home ou Amazon Alexa, ainsi que des assistants personnels pour les mals-voyants, oblige l’intégrateur web à porter une attention particulière sur le code produit. Le code devra permettre une accessibilité et une lisibilité sans faille par ces assistants. Une excellente connaissance du HTML5 et des richsnipetsest alors de mise. Cette attention portée sur l’accessibilité du site internet aura également un impact positif à long terme sur son SEO et donc son bon positionnement dans les moteurs de recherche.

Envie d'en savoir plus ?

Vous avez déjà le design de votre site internet ou application pour votre futur startup, votre PME ou activité de freelance ? Commençons mainetant à étudier ensemble votre projet. Demander un devis