blogue /  2016-04-01

Les sites Web: comment c'est fait

Étant chargé de projets web chez les M/G, mon quotidien est une liste infinie de trucs reliés aux «Internets». Mon entourage me pose souvent la question: «Comment on fait ça, un site web?». Question très legit, surtout quand on sait, sources du CEFRIO à l’appui, que les internautes québécois passent en moyenne 22h par semaine à surfer sur le web. That’s a lot of time! Malgré ça, plusieurs ignorent encore comment tout ça est fabriqué.

Parce que le DIY c’est nice et surtout, question de faire ça short & sweet, voici comment fabriquer un site web en quatre étapes faciles.

Avant de commencer, voici le needlist de base:

  • Un ordinateur + une connexion Internet
  • Beaucoup de papier + un crayon de plomb
  • Un shitload de patience

Étape 1: Analyse & contenus

Peu importe le site, tu dois savoir de quoi on va parler. On commence avec des questions faciles à poser, mais souvent compliquées à répondre:

  • Qu’est-ce qu’on met sur le site?
  • Qui va visiter ledit site?
  • Comment le contenu du site va-t-il évoluer au fil du temps?

Y’a pas mal plus de questions à poser, mais comme on fait ça short & sweet et que c’est comme notre première date, on va s’en tenir à ça.

L’important, à cette étape, c'est de bien planifier l’ampleur du site. Pour bien faire ça, il faut lister les sujets principaux qui seront abordés dans le site. On monte le tronc du site. Ensuite, sans ordre précis, il faut lister tous les sujets secondaires. Enfin, ces sujets secondaires sont ordonnés selon leur importance et pertinence pour devenir des branches ou des sous-branches. Et là, on a une arborescence qui montre clairement la taille du site, soit le nombre de pages et de sous-pages.

Quand le client a approuvé l'arborescence, c'est le temps de passer à la rédaction des contenus. Et cette tâche ne doit surtout pas être négligée, parce qu'elle est essentielle pour continuer avec les prochaines étapes.

Étape 2: Conception

Quand l’arborescence et les contenus sont complétés, là, on peut s’amuser. Sors ta tablette pis ton crayon de plomb, on passe aux wireframes.

Les wireframes, c'est les croquis de base d'un site. C'est la structure. Pourquoi les faire avec un crayon de plomb? Parce que si t'as devant toi une palette de Crayola de 200 couleurs, ça va être beaucoup trop tentant de choisir ta couleur préférée et de commencer à dessiner un bouton «like».

Parce qu'à l'étape des wireframes, faut oublier l'artiste en soi. C'est une question de gros rectangles laids dans lesquels tu vas écrire «photo». C'est de disposer les éléments toujours en se fiant à l’arborescence créée à l'étape précédente. Ça prend toujours plusieurs essais avant d’arriver à des wireframes finaux. C’est pour ça qu’on y va grossièrement; on évite de travailler inutilement. Parce qu’au final, ça s’peut que le client en veule pas de bouton «like».

Ça semble enfantin de gribouiller, mais c’est important as fuck! Un peu comme l’œuf dans le gâteau. No eggs, no cake.

Quand chaque structure de page est déterminée, c’est le temps d’y mettre du beau et de la magie. C'est l'heure du design web. Ça, c'est tout un travail de précision. C'est de l'art, mais de l'art au pixel près. Et il faut toujours garder en tête la règle de base du design: la communication. Alors si l’artiste en soi juge que c’est joli de disposer des paragraphes à la verticale, faut pas l'écouter. Et faut s'arranger pour que le designer reprenne le dessus sur l'artiste.

Le design web, c'est le souci de la clarté de l’information. C'est de s’assurer que le but du site, qui est d’informer, soit atteint. Le contenu est roi. Toujours.

Étape 3: GEEK SQUAD / ROCKET SCIENCE

Ça, c'est l’étape un peu intimidante du processus. C’est le moment de la programmation. Bon, c’est certain que ça peut sembler compliqué, mais crois-moi, tout le monde peut programmer.

Dans le fond, la «prog», c'est de donner des commandes à ton ordi qui les exécute pour toi. C'est littéralement un langage. Donc, se lancer dans la programmation, c'est vraiment de réapprendre à lire et écrire.

Step by step, il faut commencer par l'alphabet. Viendront ensuite le vocabulaire, les règles de grammaire, etc. Le web t’offre une foule d’outils pratiques pour apprendre la programmation.

Comme quand on construit une maison, on commence par la fondation pour starter avec un frame solide. Page par page, la programmation donne vie au projet. Mais faut toujours se fier aux maquettes, parce que si c'est pas toi qui les as conçues, watch out! Si tu détruis son bébé, le designer web risque de ne pas mâcher ses mots pour te le dire.

Après ça, y'a le contrôle qualité. Parce qu'il existe un nombre pas possible de tailles d'écran (mobile, tablettes, laptops, etc.). Il faut donc s'assurer que le site va bien sortir dans tous les formats. Et parce que y'a encore des gens qui utilisent Windows 7 & Internet Explorer, il faut être certain que le site va bien s’ouvrir dans tous les navigateurs.

Le contrôle qualité, c'est aussi de s'assurer que la navigation dans le site se fait aisément. Le best, c'est de le faire tester par ta tante Ginette. Si elle trouve tout ce qu'elle cherche en moins de trois clics, t’es un chef. Congrats!

Étape 4: Hello, world!

Ton site est sick, t’es super fier et tu veux le montrer au monde entier.

Tu te sens comme Mark Zuckerberg. Mais avant de lancer le 2e Facebook, ça va te prendre deux choses: un hébergement web et un nom de domaine.

Habituellement, lorsque tu achètes l’hébergement, ça vient avec un nom de domaine moyennant un frais supplémentaire. Comme à l'hôtel: faut pas que tu t'attendes à ce que les p'tites bouteilles d'alcool dans ta chambre soient gratuites. Une fois que ton site est hébergé, il devient accessible sur le web. It’s a wrap.

C’est certain que mon article reste très en surface, mais c’est pour vous donner une idée du processus général web qu’on a chez Les Mauvais Garçons. Chaque étape est primordiale et est gérée par une ou plusieurs personnes. Parce que ça prend souvent plusieurs cerveaux dans l’équation pour arriver à des résultats intéressants.

Ce processus, qu’on appelle le workflow, est en perpétuelle évolution. Il est bien défini, mais il n’est pas rigide pour autant. Chaque projet et chaque client a ses caractéristiques et contraintes uniques qui nous demandent de s’adapter.

Le web évolue à une vitesse fulgurante et notre façon de travailler n'a pas le choix de suivre le rythme. Un peu comme les taxis qui sont restés «jamés» dans l’évolution. On n’a rien contre les taxis, mais disons que Uber a su suivre le rythme.

Chargé de projets web

Antoine