Es kommt immer wieder vor, dass ein Besucher deiner Webseite auf einen kaputten Link deiner Seite geleitet wird. Passiert dies, erscheint automatisch die 404-Fehlerseite. Kaputte Links können leicht entstehen, wenn du z.B. nach einem Redesign die Permalinks eines Artikels oder einer Seite geändert hast, oder ein alter Artikel gelöscht wurde. Um deine Webseiten-Besucher trotz Fehlermeldung bei Laune zu halten, habe ich eine lustige 404 Fehlerseiten-Illustration gestaltet, die du auf deiner eigenen 404-Seite, neben zusätzlichen Suchtipps und Infos für deine Besucher einsetzen kannst.
1. Das 404 Monster-Klassenzimmer
Mit dieser lustigen Monster-Illustration kannst du deine Besucher bei Laune halten :-)
1. Die Skizzen-Vorlage
Mit dieser schnellen Skizze habe ich die Idee für die 404-Schulklasse entwickelt.
404 Fehlerseiten-Illustration downloaden
Du kannst dir die Illustration als transparentes PNG für deine eigene Webseite herunterladen. Ich habe 3 verschiedene Größen in den ZIP-Ordner vorbereitet (850px, 600px und 450px breit). So hast du genug Optionen, die Illustration in der passenden Größe auf auf deiner 404-Seite einzubinden. Du kannst dir die Elmastudio 404-Fehlerseite als Beispiel anschauen.
2. Nützliche Tipps für die 404-Fehlerseite
Neben einer Illustration auf der 404-Fehlerseite, kannst du deinen Lesern weitere Tipps geben, wie sie auf die passende Info auf deiner Seite finden können. Hier einige Inspirationen:
- Informiere deine Besucher, in einem kurzen Text, warum es zu einem kaputten Link kommen kann.
- Integriere eine Such-Funktion.
- Behalte das Layout deiner Seite bei (Header, Navi, Sidebar etc.), so dass der Besucher sich wie gewohnt weiter navigieren kann.
- Biete einen Link zum Kontaktformular an, falls ein Besucher dich direkt kontaktieren möchte.
- Integriere einen Link zur Startseite oder zum Archiv deiner Webseite.
- Biete deinem Besucher alternativen Lesestoff, indem du z.B. eine Auflistung der neusten Blog-Artikel einbindest.
- Achte jedoch darauf, dass deine 404-Fehlerseite nicht zu viele Links und Infos enthält, und dadurch unübersichtlich wirkt.
- Bring deine Besucher mit Humor zum schmunzeln, so dass sie nicht zu enttäuscht oder verärgert über den kaputten Link sind.
3. Die 404-Fehlerseite in WordPress
In den meisten Fällen enthält ein WordPress-Theme eine 404.php Datei. In dieser Theme-Datei kannst du deine 404-Seite anpassen. Um die Freebie-Illustration auf der 404-Seite zu integrieren, kannst du z.B. folgenden Code innerhalb des Content-DIVs einfügen.
<div class="error-404"> <img src="IMAGE URL" alt="404 Error" width="850" height="700" /> </div> <!--error page illustration-->
Eine weitere hilfreiche Option (falls nicht bereits in deinem Theme integriert) ist es, die Suche zu integrieren. Dazu kannst du folgenden Code in die 404.php Datei einfügen:
<p>Schau doch einmal in der Suche, ob du die passende Information finden kannst.</p> <?php get_search_form(); ?>
Eine ausführliche Dokumentation zur Erstellung und Anpassung der 404-Fehlerseite in WordPress findest du im WordPress Codex.
4. Jede Menge kreative 404-Inspirationen
Es gibt zahlreiche Blogs und Webseiten, die sich mit der individuellen Gestaltung ihrer 404 Error Page sehr viel Mühe gegeben haben. Dort findest du tolle Inspirationen für deine eigene 404-Fehlerseite. Außerdem kannst du dir anschauen, welche Informationen und Links diese Webseiten ihren Besuchern im Falle eines kaputten Links geben.
Über 50 schöne Beispiele findest du z.B. im Artikel »54 Cool Examples of Custom Error Pages« von Dzine-Blog.
Ebenfalls kreative Beispiele bietet der Artikel »Beautiful and Useful 404 Error Pages for Inspiration« bei Six Revisions.
Ich hoffe, dir gefällt die 404 Monster-Illustration, und du findest die Tipps und Tricks zum Thema 404-Fehlerseiten ebenfalls hilfreich. Über dein Feedback und weitere Tipps freue ich mich sehr!
Lieber Manuel,
das ist ja mal eine witzige Idee. Ich habe das - passend zu meinem Blog - etwas anders umgesetzt: http://www.leben-lernen-lieben.de/fehler
Liebe Grüße,
Jürgen
Hallo Jürgen,
vielen Dank für dein Feedback. Es freut mich, dass dir die 404 Monster-Illustration gefällt. Deine Umsetzung ist aber auch echt genial, ein toller Text und das Video ist auch wunderschön :-)
Viele Grüße,
Manuel
süss!
Hallo Charlotte,
vielen Dank für dein Feedback, freut mich, dass du die kleinen Fehler-Monster niedlich findest :-)
Gruß Manuel
Ein recht umfangreicher Artikel zu 404-Fehlerseiten ist auch auf der folgenden Seite zu lesen: http://www.onextrapixel.com/2010/07/21/essential-guidelines-for-wordpress-404-error-pages/
Übrigens, tolles Bild, werde es bei Bedarf einsetzen. Danke!
@jtoth: Vielen Dank für dein Feedback zur Illustration und den tollen Tipp zum Artikel von One Extra Pixel. Da sind ja auch super Tipps und Beispiele dabei :-)
Viele Grüße
Manuel
Hallo Manuel,
vielen Dank für die lustige Illustration. Da meine Seite immer noch im Entstehen ist, habe ich meine Fehlerseite gleich damit aufgepeppt.
Viele Grüße
Thomas
Hallo Thomas,
freut mich riesig, dass die lustigen Fehler-Monsterchen schon zum Einsatz gekommen sind :-) Sie scheinen sich da auch richtig wohl zu fühlen, sieht klasse aus ;-)
Viele Grüße und einen schönen Abend
Manuel
Hihi, diese Illustration ist ja sooo süss :) Ich kann nicht oft genug wiederholen, wie sehr ich dein Talent bewundere, Manuel. Einfach klasse!
Hallo Barbara,
Herzlichen Dank für dein tolles Feedback :-)
Die kleinen Fehlermonster müssen brav das 404-Gedicht auswendig lernen :-) Das ist nämlich gar nicht so einfach für die Kleinen.
Viele Grüße und einen schönen Abend
Manuel
Danke für dieses schöne Bild, habe damit gleich mal meine standard-404-Seite von meinem Server aufgepeppt. Auf das Bild habe ich diesen Artikel verlinkt, ich hoffe das ist in Ordnung :-)
Hallo Felix,
Vielen Dank für deinen Kommentar. Es freut mich riesig, dass dir das 404-Freebie gefällt :-) und dass die Monster-Klasse auch schon gleich zum Einsatz kommt.
Super, dass du diesen Artikel verlinkt hast, das geht natürlich klar.
Viele Grüße und ein schönes WE
Manuel
Hallo Manuel,
deine Illustrationen gefallen mir ganz ausgezeichnet und
auch euere ganze Homepage.
Wau, ist die Umfangreich…danke für die ganzen Informationen.
Beste Grüße, Sabine
Hallo Sabine,
Freut mich riesig, dass dir die Illustration gefällt und vielen herzlichen Dank für dein positives Feedback :-)
Viele Grüße
Manuel und die 404-Monsterchen :-)
Hallo Manuel,
Dank eurer Tipps bin ich mit der Neugestaltung meines Blogs früher als erwartet fertig geworden, naja ganz fertig nicht, aber es gibt immer was zu tun bei solchen sachen.
Das 404-Klassenzimmer ist echt Cool, habe ich bei mir gleich eingebaut: http://blog.kintaro.ch/error aber ich finde meinen Text dazu zu ernst, denn muss ich die Tage mal ändern. Ich habe euch auch in meinem Letzten Post erwähnt ;) in den Danksagungen.
Grüsse Raphi / Kintaro
Hallo Raphi,
Vielen Dank für dein tolles Feedback. Es freut uns natürlich riesig, dass du unseren Blog hilfreich findest :)
Das finde ich echt klasse, dass du die 404-Monsterchen auf deiner Seite eingebaut hast und es sieht aus, als würden sie sich schon wie zu Hause fühlen :-)
Viele Grüße und einen guten Start in die Woche,
Manuel
Klasse Grafik und super Idee werde ich gleich in meine 404.php einbauen mir fiel eh nichts ein wie ich die gestalten solllte.
Hallo Kevin,
vielen Dank für dein tolles Feedback. Klasse, dass du die Illu gleich bei dir eingebaut hast, das freut mich sehr :-)
Gruß,
Manuel
Hey, vielen Dank für den tollen Beitrag erstmal!
Ich wollte nur sagen, dass ich deine hübsche Grafik in einem derzeitigen Projekt von mir nun auch verwenden werde.
Ich hoffe das ist in Ordnung.
MfG henry
Hallo Henry,
vielen Dank für deinen Kommentar. Es freut mich sehr, dass dir die 404 Fehlermonster-Illustration so gut gefällt. Klar, kannst du sie verwenden, das freut mich riesig :-)
Viele Grüße,
Manuel
Hallo Manuel,
vielen Daaaaank für das Bild, ist ja echt super, seine 404 Page so auf zu peppen, http://www.rund-ums-netz.de/fds « noch nicht fertig, da ich mit der Sidebar hier Probleme habe, die will nicht rein aber mit dem Bild sieht schon mal echt super aus.
Vielen Dank.
Frank
Hallo Frank,
es freut mich, dass dir das 404-Errorbild gefällt. Inzwischen hast du es auch mit der Sidebar hinbekommen, oder? Sieht super aus auf deinem Blog :-)
Gruß, Manuel
Hi Marcel,
ja sieht es super aus, ne leider nicht, auch das mit dem CSS haut nicht so wirklich hin, wenn ich einen Link einbinde aber hab jetzt was dazu geschrieben und mit dem Bild eigentlich ne super Lösung. ;-)
So werde mich mal hier um schauen, werde bestimmt noch was nettes finden bei euch.
Vielen Dank