Je vous présente aujourd’hui mancreations.be ; un site web personnalisé pour mon frère aîné. Petit défi à la clé : il s’agit d’un one-page (une seule page) que j’ai tenté de réaliser en 24 heures de temps. Je repasse ici en revue les étapes et ma manière de travailler en vue de m’améliorer ou de vous proposer une méthode de travail que vous n’utiliseriez pas. Chaque titre correspond à une étape du projet. Je lance dès à présent le top chrono !
Avant de commencer
Avant de commencer un projet web, on s’accorde normalement sur le budget, les délais et les closes du contrat (droit d’auteur, remboursement en cas de non-paiement etc…) Il est évident qu’ici il n’en sera pas question. Il s’agit d’un projet perso gratuit et non-contractuel. Est-ce pour autant de foncer tête baissée ? Non. J’ai trois conseils à vous donner avant de commencer ; 1. On ne code pas, 2. On ne code pas. 3. On fait un dessin 😀 – on notes quelques idées, on réfléchi. Dans ce cas-ci, je réfléchis à la technologie que je vais utiliser, les outils externes éventuels ou fait-maison que je vais utiliser.
Je ne vais pas aller vers un CMS, mon frère n’a pas de contenu dynamique à enrichir et n’a donc pas besoin de plateforme d’administration. En revanche, je souhaiterais réaliser un site-web très désigné, accessible sur les différents navigateurs et sur les différentes tailles d’écrans de nos quotidiens. Soit, la panoplie standard d’un site-web complet sécurisé et étudié pour le référencement naturel.
Mais revenons à mes conseils : on ne code pas, on dessine. Je vais attaquer le style avec le logiciel Photoshop pour tenter de le coder à l’identique par la suite.
Le design – 2h30
Dans un premier temps, il me faut rassembler tout le matériel graphique avant de commencer le design du site. Il s’agit des couleurs, du logo éventuel et des fontes. J’y ajoute aussi des photos et je recherche des icônes qui iront bien avec le reste. Une fois le matériel design récolté, je peux commencer.
Ça y est, j’ai pu monter un Template en 2h30. J’y ai rassemblé une série de photos libres de droit et trouvé sur pixabay, avec lesquelles j’ai pu faire un fond graphique qui décrira l’ambiance générale du site. Il faut également que je convertisse la fonte principale pour qu’elle soit lue sur les différents navigateurs ou système d’exploitation. Pour ce faire, j’utilise https://transfonter.org. Enfin, je garde précieusement le code hexadécimal des couleurs principales sous la main.
Le dev – 9h30
Je pourrais déjà commencer à coder mon Template. Mais je pense que ce serait une erreur. En revoyant le Template réalisé la veille, je me rends compte de 2 choses. La première est que je manque cruellement de contenu. C’est d’ailleurs pour cette raison que le site ne fera qu’une page. Mais j’ai dès lors substitué ce vide par une série d’éléments web qui peuvent m’aider à le remplir. Par exemple ; en ajoutant une Google Map au formulaire de contact. Ou en ajoutant un filtre au Slider des différentes créations.
Au final, je rassemble pas mal de librairie qui annonce le second problème : je n’aurai sans doute pas le temps de terminé dans les délais convenu. Mais que cela ne tienne, essayons tout de même de jouer le jeu.
Avant de revoir une dernière fois le design, je peux préparer le terrain. Je décide de travailler avec mon Template fait maison : PumpSKin. J’y adapte le fichier de configuration, je modifie même le fichier htaccess, sitemap.xml et robots.txt pour gagner du temps ; je commence par le plus facile. Je prépare mon dossier image et fonts avant de coder mes fichiers SCSS/CSS. Comme j’ai un formulaire de contact qui enverra un email, j’installe php-mailer avec composer. Je peux donc commencer à coder le site pour un premier affichage à l’écran. Il est 20h45. Je travaille pendant 2heures et j’ai fait 2 sections de ma page qui en fait 8. J’avance donc assez bien.
Je travaille sur ManCréations un peu tous les jours à partir de maintenant. Cela fait maintenant 9h30 que je travaille sur le projet. Si je continue mon défi, cela voudrait dire qu’il me reste 14h30 pour terminer le site. Le site est composé de 8 sections qui m’ont pris 4h de temps à coder.
Là où j’ai perdu du temps, c’est clairement sur le coté design, dans la gestion des fonds de la page, qui s’adapte au scroll (plus on descend, plus le fond du site s’assombrit!). En revanche, mon Template PumpSkin m’a beaucoup aidé. J’ai d’ailleurs bien fait de séparer les fichiers du thème et du Template. Car lorsque j’estime que certains fichiers sont propres à PumpSkin (par exemple pour la structure), il me suffit d’ajouter le code dans les fichiers de PumpSkin et de mettre ce dernier régulièrement à jour.
J’ai par contre perdu pas mal de temps dans la mise en place de la Google Map et du Slider, qu’il fallait adapter. Je liste ce qu’il reste à faire avant de continuer et dans le but de me concentrer sur les priorités.
Ce que je n’avais pas calculer … – 8h
Ça y est, la surprise inattendue arrive. Il y en a chaque fois une, … Dans ce cas-ci, il s’agit des photos des réalisations. Elles sont nombreuses et très lourdes, et j’avais complètement oublié la durée du traitement de ces photos. Il faut pourtant y passer. Autre oubli : j’avais prévu un formulaire, mais je n’avais pas encore codé le backend de ce dernier avec PumpSkin. Il va falloir ajouter cela à la liste. Enfin, je souhaiterais intégrer wow.js pour réaliser des effets au scroll de la page. Je l’ai déjà mis en place à plusieurs reprises au travail et pour lintermediaire, mais il manquait également à PupmSkin. Je perds pas mal de temps avec tout cela.
Peaufiner le design avant d’attaquer le backend du formulaire me prend 8h. Il me reste 6h30 si je ne veux pas dépasser le temps imparti. Mais je n’y arriverai pas. Si je dois encore compter la mise en ligne, le travail SEO et l’achat du nom de domaine, je dépasserai sans doute ce laps de temps. De plus, je dois encore attaquer les animations.
Et pour terminer ManCreations.be – 6h
Je termine tout doucement le site. Et pourtant. Ces finitions comptent pour une journée de travail ! Au menu : la réservation du nom de domaine, la mise en ligne, la comptabilité des écrans et des navigateurs. Ces étapes ne prennent pas trop de temps, des outils me permettent de compiler et de compresser les fichiers pour rendre le site accessible à tous. En revanche, quelques librairies me donnent du fil à tordre ; Google Captcha et les tests du formulaire pour les spams et la Gallerie JS pour le diaporama des réalisations. Je dépasse donc de 2 heures.
Conclusion
Au final, je suis content du résultat. Le site donne bien et semble très complet malgré le peu de contenu reçu au départ. Le design respecte ce que j’avais dessiné au préalable et j’espère que le projet atteindra l’objectif de rendre le travail de ManCréations plus visible. Je suis tout de même étonné du nombre de services utilisés. Les voici :
- jquery
- slick js
- gallery js
- wow js
- phpmailer
- Google fonts
- Google map
- Google search console
- Google ReCaptcha
Là où j’ai clairement perdu du temps, c’est dans la manipulation des outils qui n’existaient pas encore avec PumpSkin.
Et dans le même temps, ce dernier m’a vraiment beaucoup aidé. Si je devais encore vous donner un dernier tuyau, je vous conseillerais de travailler avec une check-list pour la mise en ligne du projet. Voilà la mienne, avec les outils qui s’y rapportent :
Accessibilité
sécurité
.htaccess
SEO
robots.txt
sitemap.xml
favicon.png
google search console
Sémantique
Performance
Compression des images
Compatibilité navigateurs
Test taille écrans
Test rapidité
