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


Ignore:
Timestamp:
Jul 4, 2015, 1:19:38 PM (4 years ago)
Author:
sven
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Website/Responsive Design

    v2 v3  
    2727Da 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.
    2828
    29 == 1250px: Der Computerbildschirm ==
     29== Größer als 1250px: Der große Computerbildschirm ==
    3030Auf derzeitigen Computer- und Notebookdisplays ist mit einer Anzeige der Website in dieser Form zu rechnen:
    3131
     
    3434Hier erkennt man die "Guiding Principles" des technikum29-Layouts:
    3535
    36   *
     36  `1200px Seitenbreite` = `940px Seiteninhalt` + `260px Seitenleiste`
     37  wobei `940px Seiteninalt` = `860px real nutzbarer Inhalt` + `80px Abstand`
     38
     39Diese 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.
     40
     41Am 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).
     42
     43== Zwischen 900px und 1250px: Der kleine Computerbildschirm ==
     44Bei 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:
     45
     46[[Image(max-1250.jpg, width=100%)]]
     47
     48Man sieht, dass überall die hellgraue, fast weiße Hintergrundfarbe ist und kein blau-brauner Hintergrund mehr vorhanden ist.
     49
     50Insbesondere sei aber darauf hingewiesen, dass alle Besucher, deren Bildschirm nicht die 1200px-Breite erreicht, horizontal scrollen müssen:
     51
     52[[Image(lt-max-1250-gt-max-900-menu.jpg)]]
     53
     54Das 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.
     55
     56Zwar 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.
     57
     58== Zwischen 640px und 900px: Das Tabletdesign ==
     59In 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:
     60
     61[[Image(max-940-top.jpg,width=100%)]]
     62
     63Das Menü kommt natürlicherweise nach unten und nutzt mehrspaltig den vorhandenen Platz in der Horizontalen aus:
     64
     65[[Image(max-940-bottom.jpg)]]
     66
     67Anzumerken 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.
     68
     69Anmerkung: Tatsächlich sehen dieses Design tendenziell nur Tablets im Hochformat, da sie im Querformat genug Auflösung bieten um das `>900px`-Layout zu sehen.
     70
     71Es 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`:
     72
     73[[Image(max-940-cropping.jpg)]]
     74
© 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