Version 4 (modified by sven, 3 years ago) (diff)

--

Responsive und Mobile Design der technikum29-Website

Seit Juli 2015 ist dem Websitebetreiber Mobildesign nicht mehr egal. Doch auch schon vorher gab es seitens des Designs Konzessionen an die Realität. So aus einer E-Mail vom 29. Juni 2015:

Das Layout für die technikum29-Website, welches 2011 entstanden ist (vgl. Kommentiertes Design), war ja noch einem anderen Paradigma entstanden. "Feste Breite" war damals das Motto, nachdem sich die variable Breite vorher als inflexibel für deine Wünsche erwiesen hat. Alle Bildschirme kleiner als 1200 Pixel wurden damals außer Acht gelassen.

Dem habe ich einige Monate nach Veröffentlichung entgegengewirkt, in dem ich zumindest für Tablets das Menü nach unten gepackt habe. Eine gescheite Lösung, wo das Menü bei Tablets erscheint, gibt es bis heute noch nicht.

Für Handys hab ich dann erst im Laufe der Zeit eine Einspaltenlösung entwickelt, die dank der breiten Verwendung von Bildboxen ganz gut funktioniert.

Eine wirkliche Lösung dieses Problems fängt nicht dabei an, gerade auf der Robotik-Seite, die als einzige die Navigationsleiste alternativ nutzt, rumzubasteln. Stattdessen muss irgendetwas mit Aufklappmenü u.ä. her, über das ich noch nachdenken muss.

Diese Seite hier soll einen schnellen Einblick in die Breakpoints und Breiten des derzeitigen technikum29-Layouts bieten.

Da das technikum29-Layout von 2011 ("t29v6") nicht gemäß dem mobile first-Prinzip gemacht wurde, sondern mit der Idee einer festen Breite (siehe obige Mail), sind alle responsive-Anpassungen von dem eigentlich Ziellayout aus zu sehen: Einem sehr breiten Bildschirm mit 1250px Breite.

Größer als 1250px: Der große Computerbildschirm

Auf derzeitigen Computer- und Notebookdisplays ist mit einer Anzeige der Website in dieser Form zu rechnen:

Bildschirm größer als 1250px

Hier erkennt man die "Guiding Principles" des technikum29-Layouts:

1200px Seitenbreite = 940px Seiteninhalt + 260px Seitenleiste
wobei 940px Seiteninalt = 860px real nutzbarer Inhalt + 80px Abstand

Diese Konstante 860px Breite ist das Führungsprinzip des Layouts: Alle Bilder, um Bilder umgebrochene Texte, zweispaltige Texte usw. sind auf diese Breite optimiert. Dieses Prinzip steht konträr einem mobile First-Prinzip, wo sich alles an einer fundamentalen Spaltenbreite von zb. 300px orientieren würde und breite Bildschirme einfach so viele Spalten nebeneinander anzeigen, wie möglich.

Am Screenshot erkennt man auch, dass Bildschirmplatz jenseits der 1200px Breite ungenutzt bleibt und mit einer hübschen Hintegrundgrafik gefüllt wird. Die Media-Query ist hierbei auf max: 1250px gesetzt, sodass ca. 50px Puffer bleiben (ist nicht ganz exakt).

Zwischen 900px und 1250px: Der kleine Computerbildschirm

Bei nicht ganz so großen Bildschirmauflösungen verschwindet das Hintergrundbild außerhalb des eigentlichen Homepageinhaltes (#container oder Sheet genannt), ansonsten ändert sich am Seitenlayout aber (fast) nichst. Folgender Screenshot zeigt obiges und unteres Ende einer exemplarischen Seite von technikum29.de:

Bildschirmdarstellung nahe an  "max:1250px"

Man sieht, dass überall die hellgraue, fast weiße Hintergrundfarbe ist und kein blau-brauner Hintergrund mehr vorhanden ist.

Insbesondere sei aber darauf hingewiesen, dass alle Besucher, deren Bildschirm nicht die 1200px-Breite erreicht, horizontal scrollen müssen:

Menüdarstellung, wenn man kleiner als die Maximalbreite ist: Scrollen nötig

Das wurde absichtlich so konstruiert, um die fixe Inhaltsbreite zu gewährleisten. Das Argument war, dass das Menü nicht so wichtig ist und wenn man es braucht, kann man nach rechts zu ihm scrollen. Insbesondere hat an dieser Stelle 2011 das Responsive Design aufgehört, vor allem ein gesamtheitliches Responsiveness-Konzept. Alle schmaleren Bildschirme mussten also horizontal wie vertikal scrollen.

Zwar können Mobilbrowser mit solchen Seiten ganz gut umgehen (sie brechen den Text in der Regel auf ihre Bildschirmbreite um), aber dennoch hab ich dann irgendwann angefangen, Designanpassungen für kleinere Bildschirme in Eigenregie durchzuführen. Und so geht es weiter mit dem Tabletdesign.

Zwischen 640px und 900px: Das Tabletdesign

In diesem Bildschirmbreitenbereich lässt sich die fixe Idee eines 860px breiten Inhaltes immer noch aufrecht erhalten, in dem das Menü nicht mehr rechts neben dem Inhalt steht. Mit diesem Prinzip entsteht das Tabletdesign:

Tabletdesign: Maximalbreite 940px, obere Seitenhälfte

Das Menü kommt natürlicherweise nach unten und nutzt mehrspaltig den vorhandenen Platz in der Horizontalen aus:

Tabletdesign: Maximalbreite 940px, untere Seitenhälfte

Anzumerken ist, dass die Einbindung des Menüs ganz unten mich nie ganz zufriedengestellt hat. Entgegengewirkt hab ich mit dem Themen-Button, der ab <900px in der horizontalen Hauptnavigation erscheint (siehe erster Screenshot in diesem Abschnitt im Menü ganz rechts). Er führt direkt zum Menü am Seitenende. Dennoch stellt dieses Design die Menühierarchie in Frage: Das Hauptmenü gewinnt deutlich an Bedeutung, die es eigentlich nicht haben sollte. Ein Aufklappmenü wäre wohl die richtige Lösung für dieses Problem.

Anmerkung: Tatsächlich sehen dieses Design tendenziell nur Tablets im Hochformat, da sie im Querformat genug Auflösung bieten um das >900px-Layout zu sehen.

Es darf nicht vergessen werden, dass dieses Design immer noch den 860px breiten Inhalt aufrecht erhält. Dies tut es ohne Rücksicht auf Verluste bis zu einer Bildschirmbreite von 640px, sodass hier analog zu Bildschirmen im Bereich zwischen 900px-1200px die eigentlichen Textinhalte abgeschnitten werden, wenn der Bildschirm zu schmal ist. Der Benutzer muss horizontal scrollen:

Tabletdesign: Horizontales Scrollen nötig

Erst mit dem Mobile-Design wurde die inhaltliche Fixbreitenidee entgültig aufgegeben. Dieses Layout ist auch zeitlich noch später entstanden, da es einige radikale Änderungen des Seiteninhalts vornimmt.

Kleiner als 640px: Das Mobilgeräte/Smartphonedesign

Auf senkrecht und waagerecht gehaltenen Mobilgeräten bekommt man, wenn sie nicht all zu groß sind, dieses Design angezeigt, welches in der Reihe der bisher gezeigten Varianten ein Unikum darstellt:

Mobiledesign: obiger Seitenbereich

Wie man hier am Beispiel der Tonaufnahme und Wiedergabetechnik-Seite sieht, wird die Idee der 860px-fixen Textbreite vollends zugunsten einer variablen Breite aufgegeben. Das funktioniert überraschend gut, da mittlerweile Konzepte wie Bildboxen (Bilder, die rechts oder links von Text umflossen werden) oder mehrspaltiger Inhalt standarisiert per CSS so umgebrochen werden können, dass alles linear in einer einzigen Spalte untereinander erscheint. Auch werden alle Bilder mit width:100% auf volle Bildschirmbreite gesetzt und somit alle Probleme mit breiten Bildern vermieden.

Attachments (10)

Download all attachments as: .zip

© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License