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.

Breakpoints

Diese Seite hier soll einen schnellen Einblick in die Breakpoints und Breiten des derzeitigen technikum29-Layouts bieten. Zum Thema Responsive Webdesign siehe auch Was ist Responsive Webdesign?. Wobei es sich bei dem Begriff ''Breakpoints'' handelt, soll hier anhand des mobile first-Prinzips erläutert werden.

Bei Mobile first entwickelt man alle Inhalte so, dass sie auf einem Handy gut aussehen. Dann bedient man sich oft einem Spaltensystem, um die Inhalte auf größeren Bildschirmen (etwa ganzzahligen Vielfachen der Handybreite) sinnvoll aussehen zu lassen. So werden Inhalte dann nebeneinander dargestellt:

Breakpoint-Grafik als einbindbares Bild, von http://www.mediaevent.de/css/media-query.html

So ein Design funktioniert nur, wenn man sich an ein strenges Prinzip hält, in welcher Form Inhalte präsentiert werden. So muss es wiederverwertbare Container für bestimmte Typen, zB Bilder mit Text oder Zitaten aus Büchern geben. Ein Beispiel für solche Komponenten sind zB. die Bootstrap Components, die sich als Baukasten für Webseitenentwicklung eignen.

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. Das mit 1200px damals sehr breite Layout erklärte sich so, dass ein (immer noch recht großer) Bildschirm mit 1000px Breite den gesamten Inhalt (also Text, ohne Navigationsleiste) sieht. Dies schien damals als guter Kompromiss, um Computerbildschirme mit einem Fixbreitenlayout möglichst gut auszunutzen.

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

Zu sehen ist hier, dass das Hauptmenü einen zentralen Platz bekommen hat und auch einen Rahmen + Hintergrundfarbe, die es auf größeren Bildschirmen nicht hatte. Durch das Menü wird der Header (Logo + Sprachauswahl) von dem Inhalt getrennt. Auf größeren Bildschirmen ist dies durch eine ähnlich dicke einzige Linie umgesetzt.

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.

Im Bereich der oberen Seite musste eine Lösung für Sprachauswahl und Seitensuche gefunden werden. Hier ist derzeit, wie im obigen Bild zu sehen, dieser Bereich (er nennt sich nav.top) unterhalb der horzintalen Hauptnavigation eingebunden. Damit ist er sehr zentral sichtbar, was eigentlich nicht seiner Bedeutung entspricht. Er wäre besser am Seitenende aufgehoben, das geht aber nur mit JavaScript. Alle auf Basis von Mediaqueries entwickelten Anpassungen sind aber pure CSS-Anpassungen.

Auch das Menü wird im Gegensatz zum Tabletdesign einspaltig:

Mobiledesign: unterer Seitenbereich

Es gibt beim <600px-Design derzeit keine Mindesbreite, auf der der Text stehen bleibt, sodass horizontal gescrollt werden müsste. Das Mobile-Layout ist auch am weitesten experimentell, da die Unterstützung durch den Websiteinhalt nie sichergestellt werden kann. Das bedeutet etwa, wenn wieder einmal speziell angepasste Elemente eingebaut werden, ist nicht sichergestellt, dass sie im Mobilelayout gescheit aussehen.

Spezialanpassungen für Einzelseiten

Wie mit den obigen Mediaqueries klar geworden sein müsste, bedarf es vieler Anpassungen, um ein fluides Webdesign zu erstellen, welches auf verschiedenen Endgeräten gut aussieht. So wurde zB auf der Robotik-Seite die Seitennavigation (section.sidebar) durch Bilder und Text ersetzt. Das sieht auch auf dem Mobilelayout gut aus, da die einspaltige Struktur der Seitenleiste dort erhalten bleibt. Lediglich im speziellen Bereich zwischen 600-940px, in dem die Seitenleiste sehr breit unterhalb des Inhalts dargestellt wird, sehen einspaltige Inhalte blöd aus. Daher wurde eine Mehrspalten-Technik entwickelt, um dem ein bisschen entgegenzuwirken:

Speziallösung für Navigationsmenü-Inhalte, die zB [[http://www.technikum29.de/robotik/|auf der Robotik-Seite]] die normale Navigation ersetzen

Wie man im Screenshot sieht, greifen diese Änderungen nur in dem grünen Balken, der den Seitenbreitenbereich zwischen 600px und 940px darstellt. Sobald die Seite schmaler als 600px ist, werden die Inhalte wieder untereinander dargestellt.

An diesem Spezialfall lässt sich das Dilemma des Webseitenlayouts sehen, welches keine Spaltenframeworks oder ähnliches verwendet: Es ist kaum möglich, eine standarisierte Form zu erlangen, mit der Inhalte auf allen Breiten gut aussehen. So ist die Lösung der Inhaltsdarstellung auf der Robotikseite ein Kompromiss, um Benutzern, die ihr Tablet vertikal halten ein brauchbares Webseitenlayout darzustellen.

Über diese Screenshots

Die Bilder wurden mit dem Mobil device mode vom Chromium-Browser gemacht. Dieser zeigt die vorhandenen Media Queries an (blaue Balken in den Screenshots) und erlaubt das Testen verschiedener Bildschirmgrößen. Das besondere dabei ist, dass die angezeigten Pixeln nicht den Realen entsprechen, sodass man auch erheblich größere Bildschirme als man gerade besitzt testen kann, oder beim Testen von winzigen Bildschirmen einen Zoom erhält, der der physikalischen Realität (verschiedene Pixeldichten) eher entspricht.

Last modified 2 years ago Last modified on Jul 4, 2015, 7:51:07 PM

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