Webmarketing

Pages Erreur 404 : Les 404 personnalisées les plus créatives de 2017 !

exemples pages erreur 404

Vous souhaitez découvrir des exemples de pages 404 modernes, drôles, décalées et créatives ? Voici une sélection des meilleures pages erreurs 404 du moment !

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

erreur 404 pacman

Attention, cette page 404 a beau être géniale, ce n’est pas la plus discrète…

URL : http://www.bluefountainmedia.com/404

La 404 de Madmoizelle

404 madmoizelle

Quand on parle de page 404 créative et décalée

URL : http://www.madmoizelle.com/404

La page erreur 404 de Hot Dot

page 404 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 : http://hotdot.pro/en/404/

La page 404 d’Angry Birds

404 angry birds
URL : https://www.angrybirds.com/erreur-404

Une 404 décalée peut faire son petit effet

erreur 404 retard zone
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 : http://retardzone.com/404

La 404 de Star Wars

page 404 star wars
On en attendait pas moins de Star Wars…

URL : http://www.starwars.com/erreur-404

La 404 de Ridley

erreur 404 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

404 frandroid
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 : http://www.frandroid.com/404

La page 404 de Rushy

404 serveur en ligne

Les 404 dans le domaine du jeu vidéo sont généralement une très bonne source d’inspiration.

URL : http://rushy.fr/404/

Une page 404 originale dans le prêt à porter

page 404 reversible
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

404 escy
Une page 404 non conformiste pour un établissement scolaire catholique.

URL : http://www.escy.net/404

La page 404 de Chuck… Web Alliance

404 Chuck Norris

Si vous êtes en manque d’inspiration, Chuck Norris reste une valeur sûre qui fera son petit effet sur les internautes.

URL : http://www.web-alliance.fr/404-2/

La page 404 d’Innocent

404 innocent
En gros, leur page erreur 404 est pas mal.

URL : http://www.innocent.fr/erreur-404

La page 404 de Golden Moustache

erreur 404 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 : http://www.goldenmoustache.com/dsdvdsq

La 404 de Louis Vuitton

erreur 404 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 : http://fr.louisvuitton.com/fra-fr/homepage:CDVQDV

La 404 version Airbnb

404 airbnb

URL : https://www.airbnb.fr/VFSSQV

La page 404 de Nintendo

page 404 nintendo

URL : https://www.nintendo.fr/erreur-404

L’erreur 404 de Vins d’Alsace

erreur 404 vins 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 : http://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
  • http://www.sudouest.fr/404.php
  • http://www.ateliercompote.fr/404
  • https://yieldmo.com/404
  • https://www.trocathlon.fr/404/
  • http://www.cocktails-faciles.fr/404
  • http://www.6play.fr/404
  • http://www.magnt.com/404/
  • http://bluegg.co.uk/404
  • http://mailchimp.com/dvfs
  • https://www.dacloud.me/404/
  • http://www.carrefour.fr/erreur404
  • http://www.shamballajewels.com/404
  • http://tigresdegarges.com/404
  • https://www.lego.com/fr-frdvasvszqa
  • http://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
Pages Erreur 404 : Les 404 personnalisées les plus créatives de 2017 !
4.79 - 19 votes

7 Commentaires

7 Comments

  1. 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 : http://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

  2. 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 : http://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… 😉

  3. 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 ! 🙂

  4. 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 http://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 !

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Up