Eigene Seite endlich mobil!

Endlich hatte ich mal Zeit und Muße, meine eigene Seite für das neue mobile Zeitalter anzupassen.

Um das responsive Design für meine eigene Webseite zu verwirklichen, habe ich

1. das Framework und das Grid von Contao genutzt und
2. das wunderbare Buch Flexible Boxes von Peter Müller auswendig gelernt.

Dabei musste ich wieder einmal feststellen, dass es mitunter schwieriger und langwieriger ist, eine bestehende Seite anzupassen, als eine Seite völlig neu aufzubauen.

Viele Probleme treten auf (scheinbar willkürliche Abstände, Verschiebungen, Ränder etc.), deren Ursachen mit Hilfe von Firebug mühsam in den vorhandenen CSS-Dateien gefunden werden müssen. Gute Kommentare erleichtern hier einiges! Und man kann nicht so konsequent das Prinzip mobile first (oder auch desktop first) umsetzen, wenn man schon ein fertiges Layout hat.

Ich habe für den Inhaltsbereich vollständig auf rechte und linke Spalten verzichtet und dafür das 12-Spalten-Grid von Contao verwendet. Das hat – wie alles im Leben – Vor- und Nachteile. Vorteile sind sicherlich die größere Flexibilität und sehr einfache Handhabung. Nachteile sind z.B.: der Inhalt rutscht auf schmalen Viewports nicht automatisch an die oberste Stelle (wie beim Holy-Grail-Layout), sondern die Spalten werden sozusagen von links nach rechts abgearbeitet. Das muss man beim Aufbau der Seiten unbedingt beachten, sonst hat man im Smartphone u. U. oben unwichtige Menüs oder Überschriften und der Nutzer muss sich erst mühsam durch diese nach unten zum wichtigen Inhalt scrollen.

Außerdem habe ich noch keine Lösung gefunden, was man macht, wenn man eine Spalte im Grid leer lassen will: Z.B. Soll die Hauptüberschrift erst mit Grid4 anfangen, weil in Grid1-3 eine Zeile darunter ein Menü steht. Natürlich könnte man tricksen (weiße Schrift auf weißem Grund etc.), aber erstens bin ich für saubere Programmierung und zweitens hätte man dann eine Lücke in schmaleren Viewports, wo alles untereinander angeordnet wird. Also habe ich in diesen Fällen die Menüs nach rechts gesetzt.

In einigen Fällen ist es günstig, mehrere Inhaltselemente zusammenzufassen und diese mit einem div-tag und der entsprechenden Grid-Klasse einzurahmen (Inhaltselement html: zu Beginn: <div class="grid[xxx]"> und am Ende der Reihe: </div>.

Für die mobile Navigation habe ich die Erweiterung dk-mmenu von Dirk Klemmt benutzt, die inzwischen auch für Contao 3.2 angepasst wurde. Es handelt sich um ein Slidermenu, dass je nach Einstellung unten, oben, rechts oder links erscheint. Man muss ein eigenes mobiles Layout erstellen, das dk-mmenu als Modul einbinden und in den Seiteneinstellungen dieses Layout als mobiles Layout zuweisen.

Die Bearbeitung habe ich gleich dazu genutzt, das Design ein wenig aufzufrischen, ich hoffe, es gefällt!