Le guide du développement web

Depuis sa naissance dans les années 1990, le domaine du développement web a connu de nombreux changements. En pleine croissance, le métier de développeur web full stack, ou spécialisé comme un développeur front-end ou back-end, est également influencé par les exigences de plus en plus spécifiques des internautes.

Heureusement, les outils sont aussi de plus en plus nombreux et permettent de créer des sites interactifs et sur mesure, qui répondent de manière pertinente à la demande des utilisateurs.

• Le site web centralise un ensemble de pages web reliées entre elles. Il est accessible depuis internet. 
• L'adresse IP (Internet Protocol Address) est le numéro qui identifie de façon unique chaque équipement dans un réseau interne ou externe.
• Le protocole HTTP (Hypertext Transfer Protocol) assure la communication entre un navigateur et un serveur sur le World Wide Web. 
• Le code est le texte qui détaille les instructions d'un programme informatique, d'un logiciel ou d'une page web par exemple, dans un langage de programmation. 
• Les langages de programmation sont des langages qui permettent de décrire l'ensemble des actions qu'un ordinateur devra exécuter.
• Le développement front end est la conception par un développeur dédié, ou d'un développeur full stack, de l'interface graphique sur laquelle interagit l'utilisateur.
• Le développement back end consiste à mettre en place tout ce qui permet au site de fonctionner. De fait, le travail d'un développeur back-end s'articule autour de 3 axes : le serveur, la base de données, le site en lui-même.
• Le CMS (Content Management System) est un logiciel de gestion dont le but est de créer et mettre à jour facilement un site web.

1 - La planification du projet et la mise en place du cahier des charges

La planification d'un projet de développement web consiste à construire un plan de site. Celui-ci détermine la vision du site, utile à tous les développeurs qui seront amenés à intervenir sur le projet. Généralement appelé wireframe, le plan de site peut être schématisé sur un tableau, à la main, ou réalisé à partir d'outils tels que Invision.

Concrètement, le plan de site concentre toutes les attentes du commanditaire du site web ou de l'application mobile. Il matérialise le résultat final attendu, et se veut donc extrêmement utile pour les développeurs.

Voici quelques questions à vous poser au moment de créer votre plan de site. Elles vous aideront à formuler vos besoins et vos attentes :

• Quelles pages souhaitez-vous sur votre site (rubriques, thématiques à traiter) ?
• Quels contenus devront être produits pour ces pages ?
• Souhaitez-vous créer des catégories pour regrouper vos pages ?
• Comment s'articulent les différentes pages de votre site web ?
• Existe-t-il une hiérarchie entre les niveaux de pages ?

Si le plan de site ou wireframe n'est pas un document officiel, le cahier des charges tient, quant à lui, ce rôle essentiel. Il formalise les objectifs à atteindre à l'issue du projet tout en intégrant les contraintes techniques, esthétiques et fonctionnelles.

Le cahier des charges permet de définir différentes problématiques et de commencer à y répondre. Si vous souhaitez faire appel à une agence web pour le développement de votre site ou de votre application mobile, le cahier des charges vous permettra d'en mettre plusieurs en concurrence sur une demande exactement identique.

Quelles informations intégrer dans votre cahier des charges ? Tout d'abord, parlez de vous. Vos produits ou services, la nature de votre activité. Ce sont des données importantes pour votre futur prestataire. Précisez ensuite s'il s'agit d'une refonte ou d'une création, dans le cas du développement d'un site web. Il arrive que la frontière entre les deux soit très mince.

Réservez une partie de votre cahier des charges au type de site web que vous souhaitez : un site vitrine ? Une boutique e-commerce ? Un site institutionnel ? Enfin, ajoutez tous les éléments liés à votre identité visuelle : logo, charte graphique, polices d'écriture. Sans oublier les contenus à intégrer à votre site web : textes, photos, vidéos et illustrations.

2 - La conception de l'arborescence et des zonings

À partir de votre plan de site, vous avez toutes les cartes en main pour concevoir l'arborescence de votre futur site web. L'arborescence est tout simplement un schéma dont le rôle est de représenter visuellement les articulations entre les différentes pages de votre site web ou application mobile.

La page d'accueil se situe tout en haut, et les pages qui se situent en dessous découlent les unes des autres. Lors d'une refonte, l'arborescence est très pratique pour mettre en lumière des inégalités dans la répartition des pages. Il s'agit alors de confronter l'arborescence actuelle à une nouvelle, qui intègre ou supprime des niveaux de pages.

L'arborescence est l'un des outils essentiels de tout projet de développement web. Les développeurs doivent pouvoir s'y référer pendant la phase de codage pour avoir une vue rapide sur la hiérarchisation des pages. Ils commencent d'ailleurs généralement par développer la page d'accueil, puis les pages de niveau supérieur, pour aller de plus en plus en profondeur dans le site.

Les zonings viennent compléter la conception visuelle de l'organisation fonctionnelle du site. Il s'agit de schémas dont le but est de rendre compte du positionnement des blocs d'éléments (textes, bouton, menu, logo). À ce stade, aucune couleur ni élément graphique n'est intégré.

Réaliser des zonings permet donc de gagner un temps considérable en phase de développement. Les zonings définissent en effet l'aspect fonctionnel du site web sans prendre en compte son aspect graphique. La priorité est mise sur l'ergonomie, axe essentiel de la future expérience utilisateur. Il est donc possible de commencer à coder le site en HTML avant que les choix graphiques ne soient validés.

3 - La création des maquettes graphiques

Les maquettes graphiques sont créées dans la continuité des maquettes fonctionnelles (zonings et wireframes). Elles intègrent les aspects graphiques : polices de caractères, couleurs, arrondis, effets visuels etc. En somme, elles concrétisent le travail des UX designers sur la future interface.

Pour les développeurs, coder la maquette graphique à l'identique est rarement possible. Leur métier exige de prendre en compte la variabilité des écrans, et donc des rendus. Pour être exploitables, les maquettes graphiques doivent être réalisées sur un logiciel d'édition graphique comme Photoshop, ou bien à partir d'une portion de code simple en HTML et CSS.

4 - Le développement des pages

Le développement des pages en tant que tel consiste à rédiger du code, à partir de différents langages de programmation choisis en fonction des besoins du projet (back-end, front-end, interactivité). Certains langages sont plus courants que d'autres. La plupart sont capables de communiquer entre eux, que ce soit pour la création ou la gestion de votre site web.

Les développeurs web ont quasiment toujours recours à 3 langages : HTML, CSS et Javascript. Ce sont les langues de base du web, celles qui permettent de structurer les pages, puis de leur ajouter des éléments graphiques et un niveau d'interactivité basiques. Mais cela ne suffit pas pour développer un site web actuel, avec des fonctionnalités avancées. C'est la raison pour laquelle la majorité des développeurs web se spécialisent dans certains langages web, leur permettant ainsi de répondre à des projets divers.

Le développement des pages correspond à la partie front-end du développement web. Cela consiste à créer les éléments frontaux visibles par l'utilisateur, et à construire une interface agréable pour les internautes. Autrement appelé développement côté client, il fait appel à la fois à HTML, CSS et JavaScript. Les développeurs ont alors la main sur :

• Les polices de caractères.
• Le positionnement des blocs.
• L'expérience de navigation de l'internaute.
• La compatibilité du navigateur.

Dernièrement, une obsolescence du codage côté client est constatée. Les technologies pour développer un site web sans avoir recours aux langages de programmation sont de plus en plus nombreuses. De leur côté, les attentes des internautes sont de plus en plus spécifiques. Il est donc possible d'avoir recours à des outils pour vous aider dans la phase de développement front-end.

5 - La configuration de l'hébergement

Le développement front-end, même s'il concerne tout ce qui est vu par les utilisateurs, ne représente pas tout le travail d'un développeur web. La conception back-end est tout aussi importante pour garantir le bon fonctionnement du site. Le back-end comprend les serveurs ainsi que les bases de données. Chaque serveur représente un intermédiaire entre une base de données et le navigateur sur lequel l'internaute se connecte pour accéder au site web.

Lors de la création d'un site web, le développeur web est chargé de configurer son hébergement. Cela consiste à intervenir sur l'infrastructure du site et à déterminer qui sera l'hébergeur du site. Il a alors la possibilité de choisir un hébergeur web dont l'offre consiste à vendre des espaces de stockage pour sites web (le serveur est alors distant), ou bien héberger lui-même le site, s'il dispose d'un serveur local. Les services d'hébergement proposent généralement d'acheter un nom de domaine pour votre site web.

6 - La mise en ligne

La phase de mise en ligne débute lorsque toutes les étapes de développement back-end et front-end sont validées. Elle est possible dès que vous disposez d'un nom de domaine et d'un forfait d'hébergement adapté à la nature du site web. Vous aurez besoin d'un logiciel pour basculer les données de votre site web d'un espace de stockage local jusqu'au serveur distant que vous aurez sélectionné.

Bien entendu, la mise en ligne intervient après que l'ensemble des pages d'un site web aient été testées. Cette phase est appelée « recettage ». Dès que le site est prêt à rencontrer son audience, le site est partagé via une URL ou les réseaux sociaux. Mais, pour lui assurer une bonne visibilité, travailler sur la stratégie SEO est primordial. Avoir un site bien construit ne suffit pas, il faut faire en sorte que celui-ci soit vu.

7 - L'optimisation SEO

Réaliser un travail de référencement naturel est une condition essentielle pour rendre un site visible. L'avantage de l'optimisation SEO d'un nouveau site web, c'est que la marge de manœuvre est bien plus importante que sur un site qui a déjà vécu, et sur lequel il faut corriger des erreurs.

Pour maximiser les chances de voir vos pages web se positionner en haut des résultats des moteurs de recherche, concentrez-vous tout d'abord sur la valeur de vos contenus. Cela passe par une recherche de mots-clés. L'objectif : détenir une liste exhaustive des mots-clés et requêtes qui devront être intégrés dans vos textes. Les mots-clés doivent être liés de près à votre offre de service ou de produits.

Un bon référencement naturel passe également par une stratégie de liens qualitative. Lors de la mise en ligne de votre site internet, cherchez à multiplier les liens internes (maillage interne) et externes (partenariats avec des sites de haute autorité). Enfin, n'oubliez pas de renseigner les balises de métadonnées dès les premiers jours de vie de votre site web, sans oublier les balises des images.

8 - La maintenance du site

La mission d'un développeur web ne s'arrête pas à la mise en ligne du site. D'ailleurs, c'est lorsqu'un site web entre en communication avec l'extérieur que les obstacles rencontrés peuvent devenir plus difficiles à traiter. C'est pour cette raison qu'il est indispensable de souscrire un contrat de maintenance si vous travaillez en collaboration avec une agence web.

Réaliser des opérations de maintenance tout au long du cycle de vie d'un site est indispensable, pour une raison simple : un outil web est amené à évoluer, qu'il s'agisse de le migrer d'un hébergement à un autre, de changer le thème ou encore de faire le tri entre les fonctionnalités ajoutées depuis sa création.

La maintenance permet donc de garantir la stabilité d'un site web, et d'éviter qu'il ne devienne obsolète. Elle fait partie intégrante du métier de développeur web.

Les métiers du développement web

Le domaine du développement web comprend plusieurs métiers, qui interviennent aux différentes étapes de la conception du site web ou de l'application mobile. Chacun d'entre eux requiert de disposer de solides compétences techniques, et de bien connaître les langages web pour être capable de répondre à un besoin client précis.

Développeur web

Le développeur web est responsable de la conception et du développement de sites web ainsi que de leurs fonctionnalités. Il maîtrise les principaux langages de programmation, et peut également se spécialiser dans un langage en particulier pour répondre à des demandes clients spécifiques. Le développeur web doit aussi prendre en compte les contraintes du web, et l'ensemble des règles liées à l'expérience utilisateur et à l'ergonomie.

C'est un poste qui demande de prendre en charge l'ensemble d'un projet web, depuis l'estimation de la faisabilité technique à la livraison au client, tout en respectant un cahier des charges technique et fonctionnel.

Pour s'adapter aux tendances actuelles et aux nouvelles demandes des utilisateurs, le développeur web est de plus en plus amené à posséder des connaissances sur les frameworks et les CMS, en parallèle de ses savoirs techniques en langages web.

Développeur d'applications mobiles

Les tâches courantes du développeur mobile consistent à concevoir des applications pour les supports mobiles, c'est-à-dire les téléphones portables et tablettes. Il doit, pour cela, prendre en compte les spécificités des différents systèmes d'exploitation mobiles : Android et iOS.

Le développeur d'applications mobiles peut aussi travailler sur des missions d'adaptation de sites web en applications mobiles ou d'optimisation d'applications existantes. Ce métier demande une grande polyvalence ainsi que d'importantes compétences techniques.

Webmaster

Le rôle du webmaster est polyvalent. Il conçoit, développe et anime un site internet. À partir des contraintes définies dans le cahier des charges, il est en charge de l'animation éditoriale du site, via les réseaux sociaux ou le référencement naturel.

Un bon webmaster est à la fois un profil technique et stratège. Il connaît sur le bout des doigts les bonnes pratiques du web et des outils numériques, dispose d'un esprit créatif, sait gérer un projet de A à Z et mobiliser une équipe vers la réussite. La veille informationnelle et technologique fait partie de ses missions quotidiennes.

Chef de projet technique

Le chef de projet technique est un technicien expert, chargé de suivre l'évolution technique d'un projet web jusqu'à sa livraison. Ses fonctions vont de l'étude de la faisabilité technique d'un projet à la réalisation du cahier des charges technique en passant par la constitution d'une équipe projet.

Le chef de projet technique doit pouvoir se reposer sur une bonne connaissance des dispositifs techniques. Il doit aussi être force de proposition et faire preuve d'arbitrage lorsque cela est nécessaire.

À l'affût de l'actualité des technologies et des dispositifs, il est en veille constante sur l'évolution des pratiques et des usages du web. Enfin, son esprit de synthèse lui permet de communiquer facilement avec les clients sur l'avancement des projets.

Pour aller plus loin, télécharger cette checklist et ce modèle gratuit et découvrez comment améliorer votre taux de rebond.