Lustige Freebie-Illustration und hilfreiche Tipps zur Optimierung der 404-Fehlerseite

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. Um deine Webseiten-Besucher trotz des kaputten Links bei Laune zu halten, kannst du die lustige 404 Fehlerseiten-Illustration auf deiner 404-Seite einbinden.

1. Das 404 Monster-Klassenzimmer

404 Error Page Freebie Illustration
Mit dieser lustigen Monster-Illustration kannst du deine Besucher bei Laune halten :-)

1. Die Skizzen-Vorlage

404 Error Page Freebie Illustration
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.

Download PNG (.zip, 820 KB)

Download PNG English (.zip 806 KB)

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:

  1. Informiere deine Besucher, in einem kurzen Text, warum es zu einem kaputten Link kommen kann.
  2. Integriere eine Such-Funktion.
  3. Behalte das Layout deiner Seite bei (Header, Navi, Sidebar etc.), so dass der Besucher sich wie gewohnt weiter navigieren kann.
  4. Biete einen Link zum Kontaktformular an, falls ein Besucher dich direkt kontaktieren möchte.
  5. Integriere einen Link zur Startseite oder zum Archiv deiner Webseite.
  6. Biete deinem Besucher alternativen Lesestoff, indem du z.B. eine Auflistung der neusten Blog-Artikel einbindest.
  7. Achte jedoch darauf, dass deine 404-Fehlerseite nicht zu viele Links und Infos enthält, und dadurch unübersichtlich wirkt.
  8. 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!

25 Kommentare zu “Lustige Freebie-Illustration und hilfreiche Tipps zur Optimierung der 404-Fehlerseite

  1. 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

  2. Charlotte

    süss!

    • Hallo Charlotte,

      vielen Dank für dein Feedback, freut mich, dass du die kleinen Fehler-Monster niedlich findest :-)

      Gruß Manuel

  3. 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/

  4. Ü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

  5. 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

  6. 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

  7. 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

  8. 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 :-)

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. Dank eurer Featured-Posts Spalte bin ich auf diesen „uralten“ Artikel gestoßen und habe auch bei mir mal die 404-Fehlerseite mit eurem niedlichen Monster-Klassenzimmer „aufgehübscht“. Passt ja thematisch auch etwas zu meiner Seite. Mir fiel auf, dass in den png-Dateien keine Infos sind, woher die Monster stammen. Ich hab’s händisch nachträglich eingefügt. :-)

    Beispiel gefällig? siehe: http://www.skolnet.de/ups.php

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *