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

Timestamp:

Jul 4, 2015, 1:47:29 PM (8 years ago)

Author:

sven

Comment:

--

Website/Responsive Design

@@ -92 +92 @@
 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.