Dieser Blogeintrag entstand "aus gegebenem Anlass" wie es im schönen Amtsdeutsch heisst, denn erstens erstelle ich gerade hier eine eigene error.php für unser Template. Neugierig? Hier ist sie!
Zweitens ist mir neulich was passiert: Ich war auf einem Shop und kam irgendwie auf die Fehlerseite. Nur, diese war nicht gleich als solche zu erkennen. Irgendwo stand unauffällig: "Sie haben einen falschen Link verwendet, bitte suchen Sie was anderes" - gefolgt von einer riesigen Sitemap. Das war's für diesen Shop! Es gibt ja genug andere!
Erst danach habe ich mir überlegt, weshalb ich da so verärgert war, schließlich war es nicht das erste Mal, dass ich auf einen broken Link gestoßen bin. Die Ursache war: Diese Seite gab mir das Gefühl, ich hätte etwas falsch gemacht. Es war ein riesiger Vorwurf an den Benutzer. "Streng dich gefälligst an, wenn du hier was suchst!"
Stiefkind Fehlerseite?
Ein Template erstellen ist etwas Kreatives und gleichzeitig technisch interessant, es erfordert gestalterische und technische Fähigkeiten. Dafür ist in jedem Projekt ein großes Budget und viel Zeit eingeplant. Alle Seiten werden penibel durchgestyled bis zum letzten Button – nur die Fehlerseite wird häufig vergessen und am Ende lieblos hingeklatscht.
Die Fehlerseite ist wichtig!
Man könnte sagen: es ist doch egal. Soll der Besucher eben einen richtigen Link eingeben! Aber das stimmt so nicht.
Eine gute Fehlerseite lässt den Besucher vergessen, dass er gerade ein negatives Ergebnis von einer Seite bekommen hat. Ob er schuld dran ist oder nicht, spielt keine Rolle. Sicher, vielleicht hat er sich vertippt oder einen alten Link verwendet. Aber das ist egal. Er soll lachen oder lächeln, staunen, vielleicht erst mal nicht verstehen und nochmal schauen, er soll dann auf die Seite zurückgehen und dort weiterarbeiten – aber keinesfalls soll er ein negatives Gefühl gegen die Seite behalten und einfach abspringen. Das ist der Sinn der Sache. Eine Seite mit Informationen die unverzichtbar sind, braucht sich da keine Gedanken zu machen - aber wie viele davon gibt es schon? Das Finanzamt ...
Lass dich inspirieren!
Nicht jeder ist ein begnadeter Designer mit umwerfend innovativen Ideen. In den zahllosen "best of 404" Sammlungen gibt es wirklich schöne und aufwendige Fehlerseiten zur Inspiration, jedoch hat nicht jeder genug Zeit, Wissen (und Budget) um so etwas umzusetzen.
Ich will mich also auf ein "normaleres" Niveau begeben. Als ich das hier geschrieben habe, habe ich bei einigen meiner oft besuchten Seiten einen 404 provoziert und geschaut was ich davon übernehmen könnte. Ein paar persönliche Meinungen:
tn3: Ein animiertes gif. Junge Männer springen in die Luft. Nervig. Und ich zumindest verstehe den Witz nicht.
Github: Eine ganz leichte parallaktische Verschiebung. Das Bild ist liebenswürdig und folgt dem Kindchenschema, da kann man einfach nicht böse werden.
Siemens: Langweilig - und ich bin nicht sicher ob dieses schnell flimmernde Muster links oben nicht in die Kategorie "Epilepsie auslösend" gehört.
DVEE: Eine Joomla! error.php, nur mit einer passenden Grafik versehen. Die Module mit Links zu wichtigen Seiten lassen den Benutzer hier leicht auf die Seite zurück finden.
Bitbucket: Irgendwie verstehe ich die Anspielung auf die Stromversorgung nicht. Immerhin kann bitbucket davon ausgehen, dass die Leute, die hier klicken, vom Fach sind und das zu interpretieren wissen.
Deutsche Bahn: Finde ich gut. Wirkt seriös und informativ, bisschen langweilig, aber das ist hier egal. Hier wäre ein Versuch, witzig zu sein, falsch. Denn Reisende haben es oft eilig und wollen lieber schnell ein Ziel finden als unterhalten werden.
Süddeutsche Zeitung: Hier ein Beispiel das ich persönlich verabscheue. Statt eine error-Seite auszugeben wird der Benutzer einfach zur Startseite geführt, ob er will oder nicht. Porsche macht es genau so. Das ist in meinen Augen eine Bevormundung.
Auch bei der Fehlerseite - die Zielgruppe entscheidet
404 Seiten dürfen überraschen und mit einem Augenzwinkern daher kommen. Selbst bei ganz seriösen Seiten. Das Niveau muss aber stimmen - auch die Schrift und die Farben sollen sich der Seite anpassen. Also Vorsicht bei "witzig". Geschmäcker sind verschieden - was der eine witzig findet ist für den anderen im schlimmsten Fall eine Beleidigung und unpassend.
Eine Webseite, die für Webdesigner gemacht ist, braucht wirklich nicht mehr als ein großes 404 auf der Fehlerseite. Aber, auch wenn es unsereinem nicht mehr bewusst ist: Viele Benutzer verbinden nichts mit unserem "404". Ganz auf einen Erklärungstext zu verzichten ist daher auf Seiten ausserhalb des IT-Umfelds nicht richtig. Nur - der Text muss nicht so im Amtsdeutsch abgefasst sein wie etwa der Standardtext bei Joomla!. Man kann hier sehr gut mit den Sprachoverrides arbeiten!
Eine Fehlerseite braucht ein Konzept, genau wie die Startseite
Die Error-Page muss zur Homepage passen. Eine Anwaltskanzlei braucht eine andere Fehlerseite als eine Shisha-Bar oder eine Grundschule, das leuchtet unmittelbar ein. Die 404-Seite sollte sich aber deutlich von der "normalen" Seite abheben und sofort als Ausnahme erkennbar sein.
Was brauchen wir nun:
- Logo und Name des Unternehmens
- Eine Information, dass ein 404-Fehler vorliegt. Im Joomla! Standard sind ausführliche Text-Meldungen enthalten, was die mögliche Ursache des Fehlers ist- es kann aber auch interessanter und charmanter sein. Hier sind Texter gefragt!
- Einen Link zurück zur Startseite.
- Besser: mehrere Links zu wichtgen Seiten.
- Links zu Impressum / Datenschutz, sicher ist sicher.
- Oft findet man auch ein Suchmodul - aber Hand aufs Herz: Hast du das schon einmal verwendet?
- Das ganze mehrsprachig, falls die Seite mehrsprachig angelegt ist.
- Responsive natürlich. Soll heissen: Dekorative Bilder braucht es auf dem Handy nicht, dort sollte der Text reichen.
templates/meinTemplate/error.php
Wir wollen uns nun die 404-Seite von Joomla! vornehmen. Die Datei templates/system/error.php gibt einen Rahmen vor, den man als Grundlage verwenden kann. Oft reicht schon ein Bild und ein Override der Sprachdateien um eine individuelle Fehlerseite zu bekommen.
Nehmen wir an, du hast ein ganz eigenes und komplexeres Template erstellt. Am einfachsten nimmst du dann die index.php des Template als Grundlage. Die index.php muss man zuerst entkernen. Heraus kommt auf jeden Fall alles was mit <jdoc::include.. / > eingebunden ist. Und alles, was du auf der Error-Seite nicht brauchst und nicht willst. Vergleiche auch die error.php des Template protostar.
<head> tag ergänzen
Wenn man die index.php des Templates als Basis verwendet dann fällt auch de Zeile <jdoc::include.. head /> heraus. Einen head braucht man aber.
<?php
<head>
<meta charset="<?php echo $this->getCharset(); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no">
<title><?php echo $this->title; ?></title>
<link href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.min.css" rel="stylesheet" />
</head>
So sieht der head-tag dann in der error.php aus.
ModuleHelper::renderModules() ist das Zauberwort
Eigentlich ist eine Error-page eine völlig normale Joomla! Seite - der einzige Unterschied - du verwendest nicht <jdoc:include. Du hast aber alles was du brauchst - und dein wichtigster Helfer ist die Methode ModuleHelper::renderModules(). Damit bringst du deine Module auf die Error-Page. Denn viele Seiten haben ihre wichtigsten weiterführenden Links in Modulen, gerne im Footer-Bereich der Seite. Du kannst sogar die ganze Error-Page auf diese Art nach deinen Wünschen und mit eignen Modulen gestalten.
So bringst du Module in die error.php:
<?php
// Verwende das neue Namespace-Konzept ab Joomla! 3.7
use Joomla\CMS\Helper\ModuleHelper;
.. [] ....
<?php
// Hole alle Module auf einer bestimmten Position
$modules = ModuleHelper::getModules('deine_position');
// Falls welche gefunden wurden: Mach einen Container, z.B. wie auf der index.php
if (count($modules) > 0): ?>
<div class="..">
// Lass nun alle gefundenen Module an dieser Position rendern.
<?php foreach ($modules as $module): ?>
<?php echo ModuleHelper::renderModule($module); ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
Ein Beispiel siehst du auf unserer Error-Seite . Hier ist das Menü im Kopfbereich und das Modul im Footer-Bereich auf diese Art erzeugt.
Hier eine Korrektur und vielen Dank an einen aufmerksamen Leser für diesen Hinweis!
Wenn die Seite ein jQuery Element verwendet - das "Hamburger" Menü zum Beispiel - müssen auch jQuery und die entsprechenden .js Dateien im <head> eingebunden werden.
Einfach ein 404 Beitrag oder eigene error.php?
Es gibt eine bekannte Methode, anstelle einer eigenen error.php einfach auf einen schön gestalteten Joomla-Beitrag zu verweisen. Für die Benutzer ist das ebenso gut, für den Webdesigner ist es sehr einfach.
Die Methode hat aber einen Nachteil:
Die Suchmaschine kommt auf einen Link, der eigentlich einen 404-Fehler erzeugen sollte. Statt dessen wird der Seitenaufruf umgeleitet. Damit ist auch keine Umleitung mittels der Joomla! eigenen Umleitungs-Komponente möglich und man verschenkt die Chance der gezielten Umleitung von geänderten links. Das kann sich SEO mäßig ungünstig auswirken.