Responsives und individuelles Frontend für TYPO3

Die Gestaltung für ein responsives und individuelles Frontend von Webseiten zielt heute vor allem auf ein Ziel ab: Alle möglichen Geräte abzudecken. Ob der Besucher an einem Rechner mit 30-Zoll Bildschirm und einer flotten Internetverbindung über Glasfaser sitzt, an einem Tablet PC mit 10 Zoll über WLAN oder irgendwo im Wald an einem Smartphone mit 5 Zoll – die Webseite soll überall möglichst schnell geladen sein und gut aussehen. Dies kommt zwar der Quadratur des Kreises nahe, ist aber ein durchaus zu beherrschendes Unterfangen. 

Wenn man das Frontend für eine neue Webseite konzipiert und die Ausrichtung auf die Vielfalt der Endgeräte bedenkt, kommt man relativ schnell zu einer Lösung, bei der man die Elemente für eine Webseite entsprechend der Größe beim Bildschirm des Besuchers steuert. Im einfachen Fall kann man dies über das Style Sheet steuern. Unsere Agentur hat sich dabei auf einige Standards spezialisiert, die bei Tausenden von Webseiten Anwendung finden. Dies sind TYPO3 und Wordpress als Content Management Systeme. Für die Gestaltung responsiver Frontends im CMS setzen wir auf das Framework Bootstrap.

Beispiele für CSS im Wiki unserer Agentur

Bootstrap als Standard

Mittlerweile hat sich jedoch das Bootstrap Framework als Standard bei der Gestaltung von Webseiten etabliert. Bootstrap bietet mit relativ geringem Aufwand die Möglichkeit, Elemente wie einen Header, eine Navigation, den Inhalt und den Fußbereich einer Webseite so zu gestalten, dass sich diese Elemente immer wie vom Webdesigner gewünscht anpassen. Auch Bilder können über das einfache Einfügen eines Styles stufenlos skaliert werden. 

Dies bietet den Vorteil, dass man die Webseite mit einem einfachen Gerüst an HTML-Elementen aufbauen kann. Zugleich reduziert diese Technik die Fehleranfälligkeit einer Webseite.

Navigation als Herausforderung

Als Nachteil kann man dabei sehen, dass sich die gestalterischen Möglichkeiten einer Webseite durch Bootstrap verringert haben. Gab es in den ersten Jahren des Internet eine Navigation mit einem bis in die fünfte Ebene aufgeklappte Menü der Webseite, so findet sich diese heute meist im Kopfbereich der Webseite und deckt nun nur noch zwei Ebenen ab. Dies ist der Navigation bei mobilen Endgeräten geschuldet. Hier zeigt sich der Ehrgeiz des Webdesigners, dem Benutzer auch bei größeren Webseiten eine Navigation anzubieten, bei der diese nicht nur weitere Seiten findet, sondern auch noch weiß, wo er sich gerade befindet. 

Die Internetagentur Irma Berscheid-Kimeridze hat im Jahr 2017 mehrere Webseiten gestartet, die auf der Basis von TYPO3 mit Bootstrap gestaltet sind. Dazu zählt diese Seite, auf der Sie sich gerade befinden. Diese Seiten haben wir mit den Jahren erweitert und dem aktuellen Stand der Technik angepasst, so kommt jetzt auf mehreren Webseiten Bootstrap 4 zum Einsatz. Dies ermöglicht den Aufbau eines Mega Menu, wie Sie es bei dieser Webseite finden.

CSS Lösungen zur Navigation mit Bootstrap:
 CSS für Navigation mit Bootstrap 3
 CSS für Navigation mit Bootstrap 4: Mega Menu