Besoin d’inspiration pour créer une page erreur 404 qui sorte du lot ? Voici des exemples de pages 404 créatives, originales, décalées, drôles en provenance de sites Francophones et Anglophones variés !
Que les choses soient claires dès le départ, cette liste de pages 404 n’est pas un classement (il serait trop dur de choisir), nous vous présentons donc ici uniquement des exemples créatifs d’erreurs 404 découvertes à droite et à gauche, sur des sites francophones et anglophones. Ces designs originaux pourront vous inspirer pour créer la vôtre ou repenser votre page 404 traditionnelle actuelle. Nous avons tout de même glissé dans cette liste quelques pages avec un design orienté pour une cible un peu plus pro.
Il d’ailleurs intéressant de garder à l’esprit qu’outre le design, une page erreur 404 doit, si possible, avoir un réel intérêt pour l’internaute qui s’y perd. Si vous pouvez réaliser une page 404 à la fois belle graphiquement, décalée et optimisée pour la conversion, vous serez gagnants à 200% !
La page 404 qui vous fait jouer à Pac-Man
Attention, cette page 404 a beau être géniale, ce n’est pas la plus discrète…
URL : https://www.bluefountainmedia.com/404
La 404 de Madmoizelle
Quand on parle de page 404 créative et décalée…
URL : https://www.madmoizelle.com/404
La page erreur 404 de Hot Dot
Cette page erreur 404 créative a le mérite d’aller avec le nom du site internet « hot dot » (point chaud).
URL : https://hotdot.pro/en/404/
La page 404 d’Angry Birds
URL : https://www.angrybirds.com/erreur-404
Une 404 décalée peut faire son petit effet
Créer une 404 originale et décalée, c’est bien, l’accompagner d’un texte qui l’est tout autant, c’est encore mieux ! (Si la cible s’y prête bien entendu)
URL : https://retardzone.com/404
La 404 de Star Wars
On en attendait pas moins de Star Wars…
URL : https://www.starwars.com/erreur-404
La 404 de Ridley
Cette page 404 a le mérite d’être cohérente avec l’activité de l’entreprise : fabricant de vélos.
URL : https://www.ridley-bikes.com/fr/nl/404
La page 404 pour les amateurs d’Android
Si vous êtes un adepte des smartphones sous Android, il y a de fortes chances que ce site vous dise quelque chose. Le moins que l’on puisse dire, c’est que leur page 404 est cohérente avec le thème du site !
URL : https://www.frandroid.com/404
La page 404 de Rushy
Les 404 dans le domaine du jeu vidéo sont généralement une très bonne source d’inspiration.
URL : https://rushy.fr/404/
Une page 404 originale dans le prêt à porter
On peut difficilement admettre que cette page 404 ne soit pas originale. En revanche, dommage de ne pas avoir repris le header du site, cela pourrait être la page 404 de n’importe quel site de prêt à porter…
URL : https://www.reversible.fr/404
L’erreur 404 de l’ESCY
Une page 404 non conformiste pour un établissement scolaire catholique.
URL : https://www.escy.net/404
La page 404 de Chuck… Web Alliance
Si vous êtes en manque d’inspiration, Chuck Norris reste une valeur sûre qui fera son petit effet sur les internautes.
URL : https://www.web-alliance.fr/404-2/
La page 404 d’Innocent
En gros, leur page erreur 404 est pas mal.
URL : https://www.innocent.fr/erreur-404
La page 404 de Golden Moustache
Golden Moustache a intégré un Gif sur sa 404, le moins que l’on puisse dire, c’est que c’est dans l’air du temps.
URL : https://www.goldenmoustache.com/dsdvdsq
La 404 de Louis Vuitton
Les marques de luxe peuvent également réaliser des 404 à leur image, c’est le cas de celle de Louis Vuitton qui est très réussie.
URL : https://fr.louisvuitton.com/fra-fr/homepage:CDVQDV
La 404 version Airbnb
URL : https://www.airbnb.fr/VFSSQV
La page 404 de Nintendo
URL : https://www.nintendo.fr/erreur-404
L’erreur 404 de Vins d’Alsace
Parfois, il ne suffit pas de grand chose pour transformer une erreur 404 classique en quelque chose d’un peu plus créatif. C’est le cas de ce site qui a opté pour une illustration sympa en lien avec son activité.
URL : https://www.vinsalsace.com/fr/404/
D’autres pages erreur 404 créatives à découvrir
Nous pourrions vous en présenter une centaine. En voici d’autres qui valent le détour :
- https://http.cat/404
- https://moz.com/404
- https://www.sudouest.fr/404.php
- https://www.ateliercompote.fr/404
- https://yieldmo.com/404
- https://www.trocathlon.fr/404/
- https://www.cocktails-faciles.fr/404
- https://www.6play.fr/404
- https://www.magnt.com/404/
- https://bluegg.co.uk/404
- https://mailchimp.com/dvfs
- https://www.dacloud.me/404/
- https://www.carrefour.fr/erreur404
- https://www.shamballajewels.com/404
- https://tigresdegarges.com/404
- https://www.lego.com/fr-frdvasvszqa
- https://audiko.net/404
- https://klout.com/erreur-404
- https://wearespry.com/404
Si vous connaissez d’autres pages 404 créatives ou originales, n’hésitez pas à les partager dans les commentaires ci-dessous.
Comment mettre en ligne une nouvelle page erreur 404 personnalisée ?
Maintenant que vous avez l’inspiration nécessaire pour créer une page erreur 404 personnalisée pour vous différencier, comment faire en sorte que cette nouvelle page 404 remonte lorsqu’un internaute arrive sur un code 404 ? La procédure est simple mais elle requiert un accès au serveur qui héberge votre site internet via FTP :
- Si ce n’est pas déjà fait, passez en ligne votre nouvelle page 404 et récupérer son URL finale (vous en aurez besoin pour la suite)
- Connectez-vous ensuite au FTP de votre hébergement mutualisé ou dédié qui héberge le site dont vous avez optimisé la page erreur 404
- Rendez-vous dans le dossier précis du site avec la page 404 de base à remplacer par la nouvelle personnalisée
- A la racine du dossier, recherchez un fichier nommé .htaccess et le télécharger sur votre bureau
- Faites une copie dans un autre dossier de ce fichier au cas ou vous feriez une mauvaise manipulation qui rende inaccessible le site (oui c’est possible)
- Éditez ensuite le fichier .htaccess avec un éditeur de texte comme Notepad ou un logiciel plus avancé comme Dreamweaver, SublimeText, Notepad++, …
- Recherchez la mention « ErrorDocument 404 » dans votre fichier .htaccess :
– Si aucune mention n’est ajoutée, il vous suffira alors d’ajouter ceci à votre fichier « ErrorDocument 404 /url-de-votre-404-en-ligne.html » (votre URL peut se terminer par .html, .php, .jsp ou autre chose, veillez à garder uniquement ce qui se trouver après votre nom de domaine en ajoutant bien le « / » au début).
– Si une mention « ErrorDocument 404 » est détectée, il suffira juste de remplacer la page 404 actuelle par la nouvelle en suivant la même procédure que ci-dessus. - Une fois la mention « ErrorDocument 404 » remplacée dans votre fichier .htaccess, il ne suffira plus qu’à l’enregistrer et l’uploader à nouveau sur votre serveur. Votre FTP vous demandera alors si vous souhaitez remplacer votre fichier actuel, vous n’aurez qu’à dire oui.
- Une fois cette dernière manipulation terminée, vous n’aurez plus qu’à tester votre nouvelle page 404 en vous rendant en navigation privée sur votre site internet et en tapant une fausse URL à votre convenance. Ex: wwww.mondomaine.com/jeveuxtestermanouvellepage404.html
Damien
20 septembre 2016 à 11 h 35 min
Bonjour Vincent,
Sympa l’article. certains font vraiment des efforts pour créer une page qui ne sera vue qu’en cas d’erreur, donc théoriquement très rarement affichée.
Voici ce que j’ai pris le temps de réaliser il y a déjà quelques mois pour un hôtel aux Sables d’Olonne : https://www.lhotelducommerce.fr/404
Quelques mois auparavant, un énorme bateau s’était échoué sur la grande plage des Sables d’Olonne, suite à une tempête.
Damien
Vincent Brossas
21 septembre 2016 à 7 h 38 min
Bonjour Damien,
Merci pour ta contribution 🙂 Je me rappelle bien de cette actualité, sympa ton idée de 404 !
Bonne continuation,
Vincent
Fred ewill
21 septembre 2016 à 7 h 45 min
Bonjour,
Article sympa sur des 404 personalisées, nous avons d’ailleurs sorti notre 404 personnalisé hier avec du webGL, c’est par ici : https://404.ewill.fr
Vincent Brossas
23 septembre 2016 à 8 h 33 min
Vraiment sympa, bien joué ! Par contre, la redirection vers votre sous domaine quand une 404 est détectée, ce n’est pas le plus optimisé SEO… 😉
José
27 septembre 2016 à 11 h 26 min
Mortels ces exemples de pages 404 ! Ça va me donner pas mal d’idées pour mes futurs projets ! 🙂
Audrey
27 septembre 2016 à 14 h 30 min
Bonjour à tous,
Merci pour ces 404 bien sympas! Voici la 404 réalisée « en douce » par un de nos geek https://www.rubedo-project.org/fr/404
Vincent Brossas
27 septembre 2016 à 20 h 27 min
Bonjour Audrey,
Pas mal votre 404 personnalisée par un de vos « geek » haha !