Aller au contenu

Emma Beko

Une artiste quitte WordPress pour un site fidèle au prototype

Emma Beko est une artiste de Montréal dont le site tourne sous WordPress (thème Avada). À partir d’un prototype déjà validé, nous avons bâti le site statique qui le remplacera, fidèle au pixel près et sans animation, qu’elle pourra mettre à jour elle-même, des spectacles aux photos.

Statut
Site terminé, mise en ligne en préparation
Site
emmabeko.com
Technologies
Eleventy · Nunjucks · JavaScript · Pages CMS · Cloudflare Workers
  • 30captures sur 32 identiques au prototype
  • 0animation, à la demande de l’artiste
  • 9formulaires pour modifier le contenu
  • 100Lighthouse en accessibilité et SEO, en test

Le contexte

Emma Beko est une artiste de Montréal. Son nouveau site réunit son album Cicada, ses spectacles, des souvenirs en photos et une page d’inscription à son infolettre, avec des liens vers ses plateformes d’écoute et sa boutique.

Son site actuel repose sur WordPress et le thème Avada. Un prototype, fait d’après la maquette annotée de l’artiste, avait déjà été validé. Il fallait en faire un vrai site, sans rien redessiner ; l’artiste a ensuite demandé de retirer toutes les animations.

Les défis

  • Passer d’un prototype d’une seule page à cinq vraies pages, sans changer un pixel.
  • Retirer toutes les animations, à la demande de l’artiste, sans toucher au reste du rendu.
  • Laisser l’artiste modifier son contenu sans code, sans risque de briser le site.
  • Garder les adresses de l’ancien site, pour ne rien perdre auprès de Google.

Ce que nous avons bâti.

  • Fidèle au prototype

    Chaque règle de style du prototype est reprise telle quelle, sauf celles qui animaient. Les captures du site, sur téléphone et sur ordinateur, sont comparées pixel par pixel aux 32 captures du prototype.

  • Une adresse par page

    Le prototype tenait en une seule page. Le site en a cinq, chacune avec son adresse, son titre et son image de partage. Les adresses de l’ancien site sont gardées, et l’album est décrit pour Google.

  • Aucune animation

    À la demande de l’artiste, rien ne bouge : un survol ou un clic change l’affichage d’un coup. Le site refuse de se construire si une animation revient dans le code.

  • Le contenu sans code

    Dans Pages CMS, neuf formulaires couvrent les spectacles, les photos, les textes, les liens et les redirections. L’artiste y sera invitée par courriel, sans compte GitHub à créer, et chaque enregistrement restera dans l’historique.

  • Des garde-fous

    Avant chaque mise à jour, un contrôle refuse un lien non sécurisé, une date impossible ou un nom trop large pour une ligne sur un téléphone de 320 px. La version en ligne reste alors en place.

  • Des photos au bon format

    Chaque photo est servie en AVIF ou en WebP, à la taille de l’écran ; celles hors de l’écran se chargent au besoin. Un original en haute résolution, déposé plus tard, prend le relais automatiquement.

Ce que l’artiste modifie elle-même

  • Les spectacles : dates, salles, villes et liens de billets
  • Les photos et leur description pour les lecteurs d’écran
  • La phrase sous son nom, qui change à chaque sortie
  • Le nom des pages et leur description pour Google
  • La liste de gauche, les liens et les icônes du bas
  • Les redirections des anciennes adresses

Les résultats

resultats.txt
  1. $ priam rapport --projet
  2. En test, 30 des 32 captures du site sont identiques au pixel près à celles du prototype ; les deux autres ne diffèrent que par un effet de mouvement retiré.
  3. En test sur cellulaire, Lighthouse donne 100 en accessibilité, bonnes pratiques et SEO sur les cinq pages, et de 99 à 100 en performance.
  4. Aucun témoin et aucun script d’un autre service : même les polices, que le prototype chargeait chez Google, sont hébergées sur le site.
  5. Une fois le nouveau site en ligne, plus de WordPress à mettre à jour ; l’hébergement est prévu dans le forfait gratuit de Cloudflare.

Les solutions utilisées

Autres études de cas

Parlons de votre projet.

Racontez-nous ce qui vous fait perdre du temps. Une première rencontre, sans engagement, suffit souvent à voir ce qui est possible.

Nous joindre1 888 697-7426

↑↓ naviguerEntrée ouvrir/ ou Ctrl K rechercher