Changes between Version 2 and Version 3 of Website/Responsive Design

Timestamp:

Jul 4, 2015, 1:19:38 PM (8 years ago)

Author:

sven

Comment:

--

Website/Responsive Design

@@ -27 +27 @@
 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.
 
-== 1250px: Der Computerbildschirm ==
+== Größer als 1250px: Der große Computerbildschirm ==
 Auf derzeitigen Computer- und Notebookdisplays ist mit einer Anzeige der Website in dieser Form zu rechnen:
 
@@ -34 +34 @@
 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%)]]
+
+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`:
+
+[[Image(max-940-cropping.jpg)]]
+