Bénin Horizons est un voyagiste fictif avec un seul objectif : transformer un visiteur en conversation WhatsApp. Pas de système de réservation, pas de comptes, pas de backend — juste une page rapide et pensée mobile d’abord, entièrement construite pour pousser quelqu’un à envoyer ce premier message, en français ou en anglais selon ce qu’il lit.
Ce qui fonctionne bien
- Aucune photo de banque d’images, nulle part. Chaque accent visuel — la galerie, les séparateurs, le héros — vient d’un seul motif wax dessiné à la main. La page entière charge en environ 38 Ko, instantanément, même sur une connexion lente.
- Le bouton WhatsApp ne casse jamais. Chaque lien fonctionne directement depuis le HTML, avant même qu’un script ne s’exécute — JavaScript ne fait qu’ajouter un message spécifique au circuit par-dessus. Si tout le reste de la page échoue, la seule chose qui compte fonctionne encore.
- Vérifié comme un visiteur le voit vraiment. Chaque couleur a été testée sur son rendu réel dans un navigateur, pas seulement sur les chiffres d’un fichier de design — trois étiquettes qui semblaient correctes sur le papier ont été repérées et corrigées avant le lancement.
Le design en un coup d’œil
- indigo · #182A4D
- indigo clair · #2C4372
- sable · #FBF6ED
- or · #E7A93E
- lagune · #1C8C86
- hibiscus · #D6396B
- Cartes de circuits — capture en attente
Conçu pour durer
- Charge presque instantanément — environ 38 Ko pour la page entière, même sur une connexion lente
- Utilisable au clavier seul, et se lit correctement avec un lecteur d’écran
- Aucun cookie, aucun suivi, aucune donnée collectée sur les visiteurs
- Le bouton WhatsApp continue de fonctionner même si un script échoue au chargement
Pour les développeurs — le détail technique complet
01. Zéro photographie, un motif dessiné à la main
- Problème
- Un voyagiste fictif n’a pas de vraies destinations à photographier, ni de budget même si c’était le cas.
- Choix
- Un seul motif SVG wax réutilisable et des dégradés CSS, tenant lieu de toutes les images de la page.
- Résultat
- Une identité distincte et une page d’environ 38 Ko — chargement instantané sur n’importe quelle connexion.
02. WhatsApp fonctionne sans JavaScript
- Problème
- Le seul chemin de conversion ne pouvait pas dépendre du chargement réussi d’un script.
- Choix
- Chaque lien WhatsApp est du vrai HTML dès le départ ; JavaScript ne fait qu’améliorer le lien avec un message spécifique au circuit.
- Résultat
- Le seul objectif de la page survit même quand presque tout le reste échoue.
03. Contraste vérifié sur le rendu réel
- Problème
- Des valeurs hexadécimales qui semblent correctes sur le papier ne correspondent pas toujours à ce qu’un navigateur affiche réellement.
- Choix
- Vérification de chaque paire texte/fond sur les styles calculés, pas sur les valeurs sources.
- Résultat
- Trois étiquettes en échec repérées et corrigées avant le lancement — des chiffres vrais, pas seulement documentés.
Accessibilité et performance
- Lien d’accès rapide au contenu, repères sémantiques, vrais anneaux de focus partout
prefers-reduced-motionrespecté- ~38 Ko au total, zéro dépendance au runtime
- Balise meta CSP, plus
rel="noopener"sur chaque lien externe - Les coordonnées de contact fictives utilisent le TLD
.exampledu RFC 2606 — ne peut jamais résoudre vers une vraie boîte mail
Ce que je ferais différemment
Héberger moi-même les trois familles de police, comme je l’ai fait plus tard sur Nova Home Care — Google Fonts est la seule requête externe restante sur une page par ailleurs entièrement autonome.
Stack
- HTML5
- CSS3 (custom properties, clamp(), Grid)
- JavaScript vanilla
- IntersectionObserver
- localStorage