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 !
En toute transparence et pour éviter tout confusion, 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 de pages qui s’affichent sur des sites créatifs en cas d’erreur 404.
Ces exemples sont le fruit d’une veille et ont été découvertes ci et là 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 pac man a beau être géniale et créative, ce n’est en revanche pas la plus légère et plus optimisée pour la conversion. Elle a d’ailleurs depuis été remplacée par une page plus conventionnelle malheureusement…
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
La page 404 de la Peugeot 404…
URL : https://www.peugeot.fr/accueil404
Une page erreur 404 design
URL : http://sebostudio.com/404
La page 404 gourmande de Burger King
URL : https://www.burgerking.fr/404
Une page 404 au design agréable
Bien que très design, cette page 404 n’est pas du tout optimisée pour l’expérience utilisateur du fait de l’absence de menu et de liens cliquables.
URL : https://www.smile.eu/404#
Une page erreur 404 cosmique…
Même la Nasa s’y met !
URL : https://www.nasa.gov/404/
Une 404 à la fois design et fun pour un blog geek
URL : https://www.korben.info/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 bien optimisée pour l’UX de red by sfr
Dans notre sélection, celle de Red fait office de bon élève en matière d’expérience utilisateur puisqu’elle offre un accès rapide vers les sections les plus utiles de son site web.
URL : https://www.red-by-sfr.fr/404/
La 404 de Sosh
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 décalée d’une agence de communication
URL : https://www.labigcom.com/erreur404
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/
La page erreur 404 de Foot Direct
Ce site vous permet carrément de jouer à un jeu de foot directement depuis sa page 404. Si vous souhaitez tester, on vous recommandera de le faire depuis un ordinateur car l’expérience utilisateur sur mobile est plus limitée (impossible de scroller la page une fois sur le jeu).
URL : https://www.foot-direct.fr/erreur-404
La page 404 de CarWow
Sur le site Anglais carwow, les internautes peuvent jouer à un jeu similaire à celui du dinozaure sur Google Chrome lorsque vous n’avez plus de connexion internet sauf que dans leur cas, le jeu a été adapté pour qu’il soit lié à la thématique de leur site, à savoir, les voitures.
URL : https://www.carwow.co.uk/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 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 concerné par la modification : l’étape suivante suffira pour remplacer l’ancienne page 404 par la nouvelle personnalisée.
- A la racine du dossier, recherchez un fichier nommé .htaccess et téléchargez le sur votre bureau pour le modifier (vous pouvez utiliser la fonctionnaliter « Afficher/éditer » mais c’est plus risqué si vous ne maitrisez pas trop ce type de pratique.
- Nous vous conseillons de garder une copie du fichier .htaccess avant modification pour éviter tout problème par la suite. Une mauvaise manipulation peut rendre votre site inaccessible… (il s’agit d’un fichier très sensible)
- É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
Nous espérons que ces exemples de page 404 et ce tutoriel associé pour la remplacer vous aiderons à rendre votre page plus user friendly et agréable !
Tu souhaites recevoir nos meilleurs articles ?
En t’abonnant à la newsletter LEPTIDIGITAL, tu confirmes avoir pris connaissance de notre politique de confidentialité et de traitement des données (ton email ne sera jamais partagé et restera anonyme 😉 ).
