= 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 [[http://www.technikum29.de/robotik|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 [[https://de.wikipedia.org/wiki/Responsive_Webdesign|Responsive Webdesign]] siehe auch [[http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/|Was ist Responsive Webdesign?]]. [[http://www.mediaevent.de/css/media-query.html|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: [[Image(breakpoints.png, width=100%)]] 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 [[http://getbootstrap.com/components/|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: [[Image(gt-1250.jpg, width=100%)]] 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: [[Image(max-1250.jpg, width=100%)]] 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: [[Image(lt-max-1250-gt-max-900-menu.jpg)]] 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: [[Image(max-940-top.jpg,width=100%)]] 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: [[Image(max-940-bottom.jpg)]] 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: [[Image(max-940-cropping.jpg)]] 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: [[Image(max-640-top.jpg)]] Wie man hier am Beispiel der [[http://www.technikum29.de/de/kommunikationstechnik/tontechnik|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: [[Image(max-640-bottom.jpg)]] 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 [[http://www.technikum29.de/robotik/|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: [[Image(minmax-spezial-robotik.jpg)]] 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 [[https://de.wikipedia.org/wiki/Google_Chrome|Chromium-Browser]] gemacht. Dieser zeigt die vorhandenen [[http://wiki.selfhtml.org/wiki/CSS/Media_Queries|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.