Un calendrier de l’avent

Accueil / Articles / Un calendrier de l’avent
Un calendrier de l'avent

Article publié le 1er décembre 2016  Mot(s) clé :   Référencement  e-commerce  Enregistrer au format PDF   Version PDF

Le calendrier de l’Avent est un bon moyen pour garder le contact avec vos clients chaque jour pendant presque un mois. Ce projet a également été pour moi un bon entrainement à certains concepts importants dans le web actuel, ainsi qu’aux bonnes pratiques Opquast.

Le principe

Regardez à quoi ressemble mon calendrier de l’Avent
L’idée est simple : tous les jours, on « ouvre une porte », et derrière, il y a un cadeau. Cela permet de communiquer un peu tous les jours, de faire des cadeaux, de créer du lien.
J’ai pas mal cherché des choses existantes, certaines très graphiques avec des vraies portes qui s’ouvrent, avec du javascript, du Jquery, etc, mais rien ne me plaisait vraiment, ou demandait des compétences que je n’ai pas. Je suis donc parti sur une page php simple, avec un test sur la date du jour : si on est le jour indiqué, ou plus tard, le lien est actif, et vous arrivez sur la page où se trouve la cadeau. D’où un code tout simple :

<?php
$date = new DateTime();
?>
<ul>
<li>
<?php
$lancement  = new DateTime('01-12-2106');
if ($lancement<=$date)
{echo '<a href="1.php">1</a>';}
else
{echo "1";};
?>
</li>

Le graphisme et l’ergonomie

Ce calendrier de l’Avent était également un bon laboratoire pour mettre en place certains principes pertinents en terme de référencement, de conception, et d’expérience utilisateur.

Mobile First

Le graphisme de la page est conçu fluide, avec trois colonnes en pied de page. J’aurais juste à modifier ces trois colonnes par Media Queries, et c’est tout. Mon adaptation aux mobiles se fait toute seule.

JPEG - 118.5 ko
adaptation du site sur différents écrans

Test Google

Un rapide test sur https://testmysite.thinkwithgoogle.com/ donne la réponse suivante :

Il reste encore des points à améliorer sur la vitesse d’affichage des pages, mais l’adaptation aux mobiles est bonne. Ce qui est un gage de bon référencement.

PNG - 164.2 ko
De bons résultats aux tests d’adaptations aux écrans de Google

Tout en CSS

J’utilise deux images dans ma page d’accueil : le logo et le bandeau avec les petites maisons. Les carrés sont obtenus en CSS.

Les bonnes pratiques du web

Je suis en train de travailler sur les bonnes pratiques du web Opquast, afin d’en préparer la certification. Parmi celles que j’ai pu mettre en place, voici celles qui m’ont posé le plus de problème :

-  Bonne Pratique 17 : le codage de caractère est en UTF-8
Ce ne fut pas très simple, car plusieurs de mes fichiers textes n’étaient pas en UTF-8
-  Bonnes Pratiques 32 et 33 : Le titre de chaque page permet d’identifier le site et le titre de chaque page permet d’identifier son contenu
Comme toutes les pages sont codées « à la main », sans utiliser de CMS, ce fut l’un des points à vérifier (Avec un CMS, entre autre Spip, ces questions sont automatisées)
-  Bonne Pratique 125 : Le code source de chaque page contient une métadonnée qui en décrit le contenu.
Là encore, rien d’automatisé.
-  Bonne Pratique 124 : La racine du site contient des instructions pour les robots d’indexation.
J’ai mis mon fichier robots.txt, avec presque rien dedans, si ce n’est l’adresse du fichier Sitemap.
-  Bonne Pratique 128 : Le site propose un fichier sitemap indiquant les contenus à explorer.
Là aussi, créé à la main, et non automatiquement comme avec Spip

Il en reste d’autres à mettre en place, j’en conviens. Il y en a certaines que j’ai oubliées, et que je vais essayer de régler au plus vite.

Une opération de communication

On comprend qu’il ne suffit pas de mettre en ligne ce type de calendrier pour que les gens le trouvent, le regardent, et que cela crée du lien avec votre site principal et vos clients (ou vos futurs clients). Il est important de relayer l’information chaque jour sur les réseaux sociaux, pour donner envie aux visiteurs de revenir, ou pour intéresser chaque jour de nouvelles personnes.

Pour cela, je crée grâce à Canva un post Facebook, tous avec le même graphisme, et une image nouvelle en fonction de la surprise qui se trouve derrière la porte. Ces posts sont publiés quotidiennement. La taille réelle de ces images est de 950 px

En plus de cela, une newsletter informe mes clients de l’existence de ce calendrier, et les encourage à aimer la page Facebook des Editions Blanche de Peuterey pour être informé chaque jour de la nouvelle porte ouverte.

D’autres calendriers de l’Avent

Il existe d’autres calendriers de l’Avent, en voici quelques-uns parmi ceux que j’ai pu trouver.

Pour fabriquer son calendrier de l’Avent


- Un calendrier de l’Avent en Javascript http://www.hongkiat.com/blog/advent-calendar-javascript/
- A little Advent Calendar, par Nicolas Hoening https://www.nicolashoening.de/?takeaways&nr=63
- David Frohlich : Calendrier de l’Avent en css3 et php https://github.com/semperhilaris/css3adventcalendar

Des calendriers de l’Avent autour du monde du Web


- http://www.24joursdeweb.fr/
(Même si cette année la formule est légèrement modifiée)
- https://24ways.org/ Web design and development articles and tutorials for advent
- Un superbe calendrier de l’Avent de Cozy Cloud https://www.myadvent.net/calendars/?id=60a3f8cf02141a43ec6efbd8a76a02a6
- 10 advent calendars for web designers and devs http://www.creativebloq.com/web-design/advent-calendars-designers-developers-12125924
- https://gathercontent.com/advent-calendar?utm_content=buffer68103&utm_medium=social&utm_source=plus.google.com&utm_campaign=buffer
Un calendrier de l’Avent sur la stratégie de contenu. Une vidéo par jour.

D’autres calendriers de l’Avent


- http://nrjrce.wixsite.com/calendriergrenoble (Mais, bon, il n’y a pas de contrôle des dates, les portes s’ouvrent n’importe quand)
- Le calendrier de l’Avent du domaine public http://www.aventdudomainepublic.org/?date=2016-12-31

Ces articles peuvent vous intéresser