Créer une page 404

Qu'est-ce qu'une page 404 ?

A partir du moment ou votre site devient opérationnel, votre souhait lorsque vous le mettez en ligne est généralement que vos visiteurs naviguent sur les pages que vous avez prévu pour eux. Vous allez donc orienter leur navigation à l'aide de votre navbar, mais aussi de boutons placés à cet effet, tout ça dans le but de rendre l'expérience de vos utilisateurs la plus agréable possible.

Seulement voilà, vous remarquerez rapidement que vos visiteurs sont particulièrement inventifs pour s'écarter des sentiers battus. Une faute d'orthographe dans un lien tapé, un lien mort sur votre site, une page supprimée, ou tout simplement une simple envie de tester votre site ... Les occasions sont nombreuses pour aller se perdre sur une URL que vous n'aviez pas envisagée. Et lorsque cela arrive, l'utilisateur va tomber sur un écran tout blanc, avec juste votre navbar et votre footer si vous en avez mis.

Vous vous en doutez, ce n'est pas une expérience très sympa pour vos visiteurs, qui ne savent pas trop ce qui se passe. Et un visiteur décontenancé, c'est un utilisateur qui risque de partir à tout moment. Il faut donc prévoir une page spécifique qui explique que l'utilisateur s'est perdu, et qui le redirige vers la page d'accueil. C'est le rôle de la page 404.

Pourquoi ce code, "404" ?

Dans le langage web, une erreur 404 signifie que l'url entrée ne renvoie vers rien. Ce code permet d'identifier plus facilement à quel type d'erreur on a affaire. Pour en savoir plus sur les codes d'erreur, consultez le guide dédié.

Comment créer une page 404 avec Oxygen ?

Encore une fois, Oxygen nous facilite la vie sur ce coup-là, car il prévoie une section spécifique pour toutes les erreurs 404. Pour cela, nous allons créer un template. Si vous ne savez pas ce qu'est un template, n'hésitez pas à consulter le guide dédié :

• Dans le panneau de contrôle, sélectionnez l'onglet Oxygen, puis Template
• Cliquez sur le bouton Add new Template

Vous arrivez ensuite sur la page de configuration de votre template :

• Commencez par donner un titre à votre template (exemple : 404)
• Dans INHERIT DESIGN FORM OTHER TEMPLATE, sélectionnez main
  • Ou le template que vous avez sélectionné comme principal
• Dans WHERE DOES THIS TEMPLATE APPLY, Cliquez sur Other, puis sur 404
• Cliquez enfin sur le bouton publier sur la droite de la page.

Vous avez maintenant créé un modèle de page qui s'appliquera sur toutes les pages 404. Il nous faut maintenant l'éditer :

• Cliquez sur le bouton Edit with Oxygen pour ouvrir l'interface du template
• Cliquez sur le conteneur Inner content dans le panneau de structure (à droite) et ajoutez une div
  • Bouton + en haut à gauche
  • Dans l'onglet Basics, cliquer sur div
• Renommez la div si vous le souhaitez
  • Cliquez sur l'icône de crayon au survol de la div
  • Cliquez sur Rename

• En gardant la div sélectionnée, dirigez-vous sur la barre d'édition (à gauche) et cliquez sur l'onglet Size et spacing (le 2e).
• Entrez une Width, accomapgné d'une Margin ou d'un Padding pour donner de la marge à votre section
  • Consultez le guide dédié pour plus d'info à ce sujet

• En gardant le conteneur sélectionné (ici, section principale), Ajoutez un titre, par exemple "erreur 404"
  • Appuyez sur la touche h ou utilisez le + et cliquez sur l'onglet Heading
• Entrez un Titre
  • Barre d'édition (à gauche), onglet Primary, à l'emplacement Text content

• Ajoutez un sous-titre, par exemple "Page non trouvée"
  • Même chose que pour le titre, Mais en changeant le Tag h1 en h2, vu qu'on est sur un sous-titre. Consultez le guide dédié pour plus d'infos.

• Eventuellement, ajoutez une image pour ajouter un peu de vie à la page
  • Touche i en sélectionnant le conteneur, ou cliquez sur le + en haut à droite
  • Dans la barre d'édition, onglet Primary, cliquez sur Browse et ajouter l'image que vous souhaitez

• Dimensionnez l'image en utilisant l'onglet Size & spacing

• Repositionnez l'image entre le titre et le sous-titre
  • Saisissez l'élément avec la souris et positionnez entre les deux titres dans le panneau de structure

• A présent, mettons les éléments en forme en les centrant et en ajoutant de la marge entre chaque
  • Pour centrer tout les éléments, cliquez sur le conteneur dans le panneau de structure (ici, section principale) et dans Horizontal Alignement, cliquez sur center
  • Pour ajouter de la marge, cliquez sur un élément dans le panneau de structure, puis cliquez sur l'onglet Size & spacing dans la barre d'édition pour ajouter des marge top et bottom

• Pour terminer, ajoutons un bouton, soit en l'ajoutant via le Reusable, soit en le créant de 0
  • N'oubliez pas de sélectionner d'abord le conteneur parent (ici, section principale) pour ajouter le bouton
  • Si vous ajoutez le bouton via le reusable, n'oubliez pas de changer le lien du bouton en cliquant sur l'icône de maillon en haut à droite (généralement vers la page d'accueil)

Votre page 404 est maintenant prête ! Comme pour toutes les autres pages, profitez-en pour la tester sous toute les coutures, et adaptez si besoin les tailles et marges d'éléments en fonction des formats d'écran.