4 points importants dans un projet web

Une bonne compréhension et une bonne communication sont généralement les clés d’un projet à succès. Et la communication c’est surtout rendre explicite ce que nous pensons être implicite. Voici un article listant certains éléments implicites qu’il est utile de rappeler.. L’article ne se veut pas exhaustif mais représente des questions communes.

1. Les environnements de développement, le site en production et le staging

Chez Antistatique et dans les bonnes agences, nous travaillons avec plusieurs environnements. Le premier, la production, est le site en ligne, celui que vos clients verront. Le deuxième n’est pas visible et nous permet de tester le site ou l’application dans les conditions (configuration du serveur) réelles. Ce deuxième environnement s’appelle le staging.

Quand nous développons un site ou une application web, nous donnons un accès sécurisé à notre client sur le serveur de staging. Dès qu’une partie du site est validée et prête à être publié, le travail réalisé est publié sur la production, le site en ligne.

Etant donné que ces environnements sont isolés, chacun a un rôle bien précis. Le staging est un espace de test, la production est le site en ligne contenant le bon contenu. En d’autres termes, si vous changez un contenu sur le staging, vous ne verrez pas le changement sur le site en production.

Toutes personnes ayant à faire à ce type de projets doivent bien comprendre cette mécanique.

2. Les formats et tailles d’images à respecter

Les images sont essentielles pour donner vie au site et lui conférer une identité propre. Cet objectif est important et nous le savons bien. Cependant, l’aspect visuel n’est pas le seul paramètre des images à prendre en compte dans la réalisation d’un site Internet.

En effet, une image adaptée au web se doit d’avoir une bonne balance entre qualité et poids. La résolution de l’image, soit la densité de pixel par pouces (ou dpi) est un point important. Si la résolution des écrans a beaucoup évolué ces dernières années (écrans retina jusqu’à 240dpi), nous recommandons d’insérer des images à 72dpi dans une taille suffisante pour être redimensionnées par le système de gestion du site (CMS). Des performances moins bonnes, résultant d’images trop lourdes, auront raison des utilisateurs, lesquels ne sont pas connus pour être très patients.

Deuxièmement, une image est également un contenu, elle doit être lisible pour les personnes malvoyantes et les robots de Google qui indexent votre site Internet (référencement, appelé également SEO). Une image doit toujours être accompagnée d’un nom de fichier clair (MaMarque-presentation-produit-vx.jpg et non DSC00036.jpg) ainsi que d’une description alternative (destinée aux personnes malvoyantes) à ajouter au CMS.

Une image adaptée au web se doit d’avoir une bonne balance entre qualité et poids.

3. Documentation des bugs pour mieux les résoudre

Lors du développement frontend (code qui permet de développer la partie visuelle du site, code exécuté par votre navigateur) ou backend (il s’agit ici de la partie non-visible, le code exécuté sur le serveur), des tests sont nécessaires afin d’assurer le bon fonctionnement du site. Les bugs sont bien souvent inévitables et plus la documentation de ceux-ci est riche, plus il sera simple de les résoudre.

Il est essentiel de pouvoir reproduire le bug pour pouvoir le résoudre. En effet, comment être sûr de l’avoir résolu si on ne peut pas le tester? “Le menu ne marche pas chez moi” ne nous permet pas de savoir ce qui ne fonctionne pas et dans quelles conditions il ne fonctionne pas. Nous avons besoin de plus d’informations sur le bug en question afin de le reproduire et le résoudre. Les causes d’un bug sont multiples et peuvent venir de partout.

Afin d’avoir un maximum d’informations, voici un modèle de reporting que nous utilisons :

  • Titre du bug (Mobile - Menu ouvert bug - Chrome mobile)
  • Reproduire le bug (Sur mobile, depuis la page d’accueil, afficher le menu, le menu s’ouvre, les marges ne sont plus respectées)
  • Comportement attendu (les marges sont les mêmes que sur le reste du contenu)
  • Système (Android 6, Sony Xperia 5, Chrome Mobile)
  • Lien de la page (concerne toutes les pages)
  • Image (voir annexe.jpg)

Les bugs sont bien souvent inévitables et plus la documentation de ceux-ci est riche, plus il sera simple de les résoudre. 

4. Le contenu est roi, surtout au début d’un projet

Le contenu est le coeur de votre site. Nous avons d’ores et déjà parlé des images mais pas du contenu texte. Celui-ci est important pour plusieurs raisons: il façonne qui vous êtes auprès de vos clients et il permet d’être correctement indexé par Google.

Lors des premières étapes d’un projet web, nous passons par une phase de conception. Les termes/livrables relatifs à celle-ci sont “zonings” et “wireframes”. Ils définissent en effet la structure, l’architecture de votre site. En connaissant plus ou moins exactement ce qu’il y aura sur le site Internet, notre proposition de structure peut radicalement changer.

Le contenu façonne qui vous êtes auprès de vos clients et il permet d’être correctement indexé par Google.

Et voilà la fin de cet article. Nous espérons que ces 4 premiers conseils vous aideront dans vos projets personnels et professionnels. A l’avenir, nous essayerons de régulièrement alimenter le blog avec de nouveaux conseils afin de mieux vous aider dans l’aventure sans fin qu’est le web.