Details · Hintergründe · Technologie

Case Study: Goldener Hahn

In diesem Blogpost stelle ich meine Herangehensweise anhand einer kürzlich erstellten Website vor. Welche Technologien verwendet werden, auf was besonders Wert gelegt wird, und natürlich wie die Bearbeitung der Inhalte aussieht.

Der Header, oder auch Kopfbereich, beinhaltet die Navigation der Website, das Logo und schnelle Kontaktmöglichkeiten.

Diese werden aufgeräumt und übersichtlich dargestellt:


Um die Kontaktmöglichkeiten jederzeit platzsparend darzustellen minimiert sich der Header beim Herunterscrollen automatisch. Die Navigation bleibt jedoch in einem Hamburger-Menü erhalten.

So bleibt die Website auch bei kleineren, bzw. weniger hohen Bildschirmen bedienbar und lesbar:


Schnelle, intuitive und vor allem frustfreie Bedienung liegt mir besonders am Herzen. Die relativ umfangreiche Navigation wird horizontal dargestellt, wobei die Unterpunkte sich unterhalb der ersten Ebene befinden.

Damit diese Unternavigation auch bei langen Mausfahrten offen bleibt, kommen unsichtbare Hover-Helfer zum Einsatz. Da dies recht schwer zu erklären ist, habe ich die Helferlein im folgenden Video sichtbar gemacht:


Für Familie Gruber ist es besonders wichtig, schnell reagieren zu können und die Besucher der Website über Angebote und Stornierungen einfach und effektiv informieren zu können. Hierzu wurde ein Benachrichtigungsbanner entwickelt, welches auf jeder Seite eingeblendet werden kann.

Natürlich sollte man solche Stör-Elemente nicht zu oft einsetzen und jederzeit leicht ausblenden können:


Die Anzahl der Besucher welche über Tablet- oder Smartphone-Browser auf die Website zugreifen, ist meist mindestens genauso groß wie der Anteil an Besuchern mit herkömmlichen Desktop-Geräten. Gerade in der Urlaubsplanung setzt man sich lieber auf das Sofa als ins Büro.

Somit ist klar, dass die Mobilversion der Website mindestens genauso gut durchdacht und einfach bedienbar sein muss wie die Desktop-Version. Die Navigation mit Unterebenen funktioniert auf dem kleinsten Bildschirm genauso einfach wie auf dem größten:

Auch kritische Elemente, wie die Slideshow, werden mobil ideal aufbereitet. Auf den meisten Websites wird das Desktop-Bild ganz einfach proportional verkleinert. Dies sorgt jedoch dafür, dass bei weniger breiten Bildschirmen nur ein schmaler Streifen übrig bleibt. Mit dem HTML5 Picture-Element können mehrere Zuschnitte des gleichen Bildes für verschiedene Endgeräte bereitgestellt werden.

Außerdem wird die bei Desktop-Geräten über dem Bild dargestellte Bildunterschrift ideal untergebracht:

Damit nicht für jede Bildgröße eine spezielle Datei in einem Bildbearbeitungsprogramm erstellt werden muss, kommt ein Fokuspunkt-Feld zum Einsatz. Mit dem definierten Mittelpunkt werden die verschiedenen Bildgrößen automatisch erstellt – und keine wichtigen Teile abgeschnitten:


Trotz komplexer Funktionen bleibt die Bearbeitung mit dem Content-Management-System Kirby besonders einfach. Texte bearbeiten, Bilder hinzufügen, Slideshows ordnen – alles ruck zuck erledigt.

Durch eigene Plugins und Fields, welche besonders auf Bedienerfreundlichkeit ausgelegt sind, bedarf es in den meisten Fällen nicht einmal einer Schulung. Alles selbsterklärend: