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


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

--

Legend:

Unmodified
Added
Removed
Modified
  • Website/Responsive Design

    v5 v6  
    9292Es 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.
    9393
     94== Spezialanpassungen für Einzelseiten ==
     95Wie 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:
     96
     97[[Image(minmax-spezial-robotik.jpg)]]
     98
     99Wie 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.
     100
     101An 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.
     102
    94103== Über diese Screenshots ==
    95104Die 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.
© 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