8 CSS- und JS-Snippets zum Erstellen atemberaubender 403-Seiten

Webdesigner haben sich daran gewöhnt, Fehler in Chancen umzuwandeln. Es ist kein Geheimnis, dass der allgemeine, am weitesten verbreitete (und überraschend erkennbare) HTTP-Statuscode 404, auch bekannt als „Not Found“, von Entwicklern erzwungen wurde, um dem Projekt Vorteile zu bringen. In der Vergangenheit schreckte es Nutzer ab, zerstörte den Gesamteindruck und war ein Albtraum für Entwickler. Alle wollten, dass es ein für alle Mal verschwindet.

Heute ist es ein wesentliches Detail einer Website. WordPress hat dafür sogar ein speziell zugeordnetes Template. Die „404-Seite“ ist ein integraler Bestandteil der Benutzererfahrung. In den meisten Fällen hat es nicht nur ein schönes Design, sondern auch ein Thema, das zur gesamten Ästhetik einer Website beitragen soll.

Neben dem durchdachten Design, Interaktionen und sogar Animationen enthält es nützliche Links und Fluchtwege, die verlorenen Benutzern helfen, wieder auf Kurs zu kommen. Der „404“-Fehler im Webdesign ist jedoch wie Hipster in der realen Welt: Sie fallen immer noch mit ihren dümmlichen Brillen, „Vintage“-Shirts und Bärten auf, aber sie sind nichts Neues für uns. Der „403“-Fehler ist eine andere Geschichte. Es ist nicht so beliebt wie seine nächsten Verwandten, aber es kommt trotzdem vor und nicht einmal in einem blauen Mond.

Nur als Hintergrund, der HTTP-Statuscode 403, auch bekannt als „403 Forbidden“, bedeutet, dass Sie keine Berechtigung haben, auf die Seite zuzugreifen. Die Gründe können unterschiedlich sein, angefangen bei unangemessenen Ordnerberechtigungen bis hin zu einer banalen Anforderung von Anmeldeinformationen. Dennoch gilt die Faustregel: Jeder Fehler ist eine Chance für Verbesserungen. Warum also nicht die Dummy-„403-Seite“ in einen Ort verwandeln, der denselben Zweck erfüllen wird wie die „404-Seite“?

Betrachten wir ein Dutzend hervorragender Ansätze für diese Art von Fehlern. Sie dienen nicht nur als Inspirationsquelle, sondern auch als Quelle für gebrauchsfertige Lösungen.

Du darfst nicht passieren

„Du sollst nicht bestehen“ – sagte einmal einer der mächtigsten weißbärtigen Zauberer der fiktiven Welt (ich hoffe, alle Dumbledore-Fans verzeihen mir das). Der letzte Satz von Gandalf dem Grauen (beachte Grau, nicht Weiß) passt hier perfekt in den Kontext. Und Noah Rodenbeek, A van Hagen und Jhey zeigen dies in der Praxis. Ihre Code-Schnipsel sind mit dem Geist und dem Charme des Romans „Der Hobbit“ imprägniert. Während die ersten beiden Künstler Gandalf mit seinen Mitarbeitern nachbildeten, deutete letzterer die Szene nur an, aber recht erfolgreich.

HODOR 403

Wem die oben vorgestellten Motive aus Romanen nicht ausreichen, der sollte sich diesen Codeschnipsel von Yasio anschauen. Überraschenderweise ließ er sich von George RR Martins Reihe von Fantasy-Romanen inspirieren. Er hat eine Arbeit namens HODOR 403 entwickelt. Ich glaube, für die Mehrheit da draußen ist diese Lösung selbsterklärend. Im Übrigen empfehle ich, zu HBO zu wechseln und selbst zu sehen, warum diese fiktive Figur perfekt zu dieser Art von Fehler passt.

Verwendung von Illustration und Animation

Andere Lösungen in unserer Liste wurden von der Vorstellung geleitet, dass „403“ einen verbotenen Bereich symbolisiert, sodass animierte und statische CSS-Illustrationen genau mit dieser Idee im Hinterkopf nachgebildet wurden.

Error 403 – Forbidden by Aimie zeigt eine klassische Szene aus dem Märchen. Die animierten Fledermäuse, das Hexenhaus, die kahlen Bäume und die gruselige Typografie, die in den Stunden der Dunkelheit zu sehen sind, tun hier sicherlich ihren Dienst.

403 Forbidden by Dylan und 403 Forbidden by Visual Composer haben einen einzigartigen mittelalterlichen Charme. „Close the Gates“: Die Projekte rufen nämlich diese Assoziationen hervor. Das erste verfügt über das klassische hölzerne Wachtor, das sich vor Ihren Augen schließt; die zweite geht ebenfalls auf ein Wachtorthema ein und stellt einen Mechanismus mit Zahnrädern und Ketten dar, der das verbotene Zeichen enthüllt.

Arturo Wibawas Vision des verbotenen Gebiets wird durch eine wunderbare, hochdetaillierte und sogar teilweise animierte CSS-Illustration der berühmten chinesischen „The Purple Forbidden City“, heute bekannt als Palace Museum, präsentiert.

Es beobachtet dich

403 Forbidden Page von Mariana zeichnet sich durch eine skurrile, monsterähnliche Figur aus, die dank des richtungsbewussten Effekts Ihrem Mauszeiger überallhin folgt. Es erzeugt das Gefühl, die ganze Zeit beobachtet zu werden. Es imitiert auch eine schicke Feenwache, die kein Vorwärtskommen zulässt. Trotz des „bedrohlichen“ Aussehens des Maskottchens macht das Projekt Spaß.

Hartnäckig sein

Auch Gabriele Corti bietet eine Vision einer „403“-Fehlerseite. Sein Projekt „Persistence is a key“ beschreibt einen gesamten Prozess, bei dem der Zugriff zunächst verweigert und nach der richtigen Benutzeraktion gewährt wird. Die richtigen Aktionen beinhalten das Einführen eines Schlüssels in ein Schlüsselloch. Trotzdem können Sie dieses Konzept immer als Grundlage für einige fortgeschrittene Aktionen wie die Eingabe von Login und Passwort verwenden.

Halten Sie es einfach

403 von lsgrrd ist eine stark vereinfachte Version einer „403-Seite“, die durchaus eine Daseinsberechtigung hat. Es ist minimal, aber direkt auf den Punkt. Es hat eine gewisse digitale Qualität, die den Techno-Vibe ausstrahlt, der der Computersphäre innewohnt. Der blinkende Cursor am Ende erzeugt zusammen mit der digitalen Typographie einen fantastischen Effekt. Die Lösung ist sauber, elegant und unkompliziert.

Stehst Du auf der Liste?

Wir werden unsere Sammlung mit dem Projekt von Cassidy Williams beenden. Im Gegensatz zu den meisten hier vorgestellten Lösungen ist diese Lösung eine Metapher aus der realen Welt, die die typische Situation in einem beliebten Nachtclub veranschaulicht. Der Türsteher ist das Herz und die Seele dieses Code-Schnipsels. Der Charakter wurde sogar teilweise animiert, um alles lebensecht aussehen zu lassen.

Eine weitere Gelegenheit, Benutzer einzubinden

Um ehrlich zu sein, „403 Error“ ist nicht so weit verbreitet wie „404 Error“, noch ist es so beliebt und erkennbar. Trotzdem existiert es immer noch und tritt immer wieder auf. Dadurch entsteht ein Loch in einer Website, das die gesamte Benutzererfahrung beeinträchtigen kann. Ergreifen Sie also die Gelegenheit und verwandeln Sie sie in einen gültigen Teil des Projekts. Es wird zweifellos einige neue Besucher gewinnen und Sie davor bewahren, die alten zu verlieren.