Pages Erreur 404 : une Sélection des plus Originales et Créatives de 2023

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 toute 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 est 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/404

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

La page erreur 404 de Cacolac

Dans un tout autre secteur, celui de l’alimentaire, on peut aussi faire preuve d’originalité et sortir une page 404 qui sort de l’ordinaire, voici l’exemple sympa de Cacolac !

URL : https://www.cacolac.fr/404

La page d’erreur 404 de Conforama

Il ne s’agit pas de la page d’erreur la plus compliquée de l’histoire, mais la simplicité peut aussi être une force. Une simple illustration d’un personnage qui semble chercher une page manquante est efficace.

URL : https://www.conforama.fr/404

La page erreur 404 de Lego

Le Lego est le jeu pour enfant créatif par excellence. On n’en attendait pas moins en ce qui concerne leur site web. Sur l’image, il s’agit de la dernière page erreur en ligne sur le site, au moment où cet article est rédigé. Lego nous redirige vers le site en nous prévenant que malgré cette erreur tout est « encore super génial ». Auparavant, leur page erreur 404 était contenait 3 petits personnages Lego policiers qui partaient à la recherche de la page manquante.

URL : https://www.lego.com/fr-fr/404

La page erreur 404 de Nexity

Ici aussi, c’est une illustration qui fait la différence. En effet, la voiture dessinée semble s’être perdu dans le désert (pour symboliser que l’utilisateur s’est perdu) et tombe face à un panneau qui lui propose d’en sortir. On observe alors du côté de ce panneau les solutions : utiliser le moteur de recherche, se rendre dans les menus, signaler un problème aux administrateurs du site. L’illustration n’a pas grand chose à voir avec le marché de Nexity, mais elle a le mérite de bien symboliser la situation.

URL : https://www.nexity.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://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.
• À la racine du dossier, recherchez un fichier nommé .htaccess et téléchargez-le sur votre bureau pour le modifier (vous pouvez utiliser la fonctionnalité « 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 !

FAQ : Que devez-vous savoir sur les erreurs 404 ?

Qu’est-ce qu’une page d’erreur 404 ?

Une page d’erreur 404 est un code d’erreur qui est envoyé au navigateur Web d’un utilisateur lorsque celui-ci tente d’accéder à une page Web ou à une ressource sur Internet qui ne peut être trouvée. En général, ce code déclenche l’affichage d’une page Web spécifique chez l’utilisateur, connue sous le nom de page « 404 Not Found ».

Cette page contient généralement des informations sur le problème, en expliquant d’une manière ou d’une autre pourquoi il n’a pas pu être localisé sur le serveur.

Dans certains cas, elle peut contenir des liens pour aider les utilisateurs à trouver ce qu’ils recherchent ou même suggérer des ressources similaires qui pourraient exister.

L’objectif de ces pages est d’aider à communiquer avec les utilisateurs et de faire en sorte qu’ils ne soient pas frustrés lorsqu’ils naviguent en ligne.

Comment résoudre une erreur 404 ?

Lorsque les utilisateurs rencontrent une erreur 404, ils doivent d’abord identifier la cause du problème. Il s’agit généralement d’un lien brisé ou d’une page manquante.

Une fois ce problème identifié, la meilleure façon de le résoudre est de mettre à jour le lien ou de créer une nouvelle page portant le même nom que l’ancienne. Il y a également l’utilisation de redirections 301 pour ajouter une couche supplémentaire de protection pour les liens qui sont souvent déplacés peut aider à prévenir l’apparition d’erreurs 404 à l’avenir.

Si les utilisateurs n’ont pas accès à la mise à jour de leur site ou à la création de nouvelles pages, une autre option consiste à contacter le propriétaire du site Web et à lui signaler les liens cassés ou manquants afin qu’il prenne des mesures.

Qu’est-ce qu’une page 404 de qualité ?

Une page 404 réussi doit être informative, mais aussi divertissante. Elle doit :

• Afficher un message qui reconnaît le problème de l’utilisateur et fournit des informations ou des ressources utiles pour le résoudre
• Présenter une interface facile à naviguer, permettant à l’utilisateur d’accéder facilement à toute autre partie du site Web.
• Veillez à inclure des informations de contact claires, comme un numéro de téléphone ou une adresse électronique, afin que les utilisateurs puissent obtenir de l’aide si nécessaire
• Bonus : des éléments humoristiques tels que des illustrations amusantes ou des messages pleins d’esprit en rapport avec le thème du site

Cela permettra d’atténuer la frustration de l’utilisateur qui ne trouve pas ce qu’il cherche, tout en lui fournissant suffisamment d’informations utiles pour le remettre sur la bonne voie.

À partir de quand les erreurs 404 deviennent-elles problématiques ?

Les erreurs 404 sont assez courantes et ne posent généralement pas de problème.

Toutefois, il peut devenir problématique si des problèmes de serveur surviennent régulièrement ou si les liens brisés sont présents sur votre site depuis longtemps.

Les liens vers les pages importantes doivent toujours être vérifiés régulièrement pour s’assurer qu’ils fonctionnent correctement, de même que tous les liens externes qui pourraient être liés à votre site Web.

Il est également important de prendre note de tout changement soudain dans le trafic, car cela pourrait indiquer des problèmes potentiels avec les erreurs 404 qui doivent être traitées rapidement.

En prenant ces mesures de manière proactive, vous vous assurerez que les erreurs 404 ne deviennent pas problématiques à l’avenir.

Avant de se quitter…

Si cet article sur Ies pages 404 vous a plu, n’hésitez pas à le partager sur les réseaux sociaux et à vous abonner à notre newsletter digitale pour recevoir nos prochains articles.

Vous pouvez également suivre nos meilleurs articles via notre flux RSS : https://www.leptidigital.fr/tag/newsletter-digitale/feed/ (il vous suffit de l’insérer dans votre lecteur de flux RSS préféré (ex : Feedly)).

Nous sommes aussi actifs sur Linkedin, Twitter, Facebook et YouTube. On s’y retrouve ?

Pour toute question associée à cet article, n’hésitez pas à utiliser la section « commentaires » pour nous faire part de votre remarque, nous vous répondrons dans les meilleurs délais (avec plaisir).