Changes between Version 4 and Version 5 of Website/Responsive Design

Timestamp:

Jul 4, 2015, 1:37:30 PM (8 years ago)

Author:

sven

Comment:

--

Website/Responsive Design

@@ -61 +61 @@
 [[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:
 
@@ -82 +84 @@
 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.
+
+== Ü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.