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


Ignore:
Timestamp:
Jul 4, 2015, 1:37:30 PM (3 years ago)
Author:
sven
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Website/Responsive Design

    v4 v5  
    6161[[Image(max-940-top.jpg,width=100%)]]
    6262
     63Zu 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.
     64
    6365Das Menü kommt natürlicherweise nach unten und nutzt mehrspaltig den vorhandenen Platz in der Horizontalen aus:
    6466
     
    8284Wie 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.
    8385
     86Im 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.
    8487
     88Auch das Menü wird im Gegensatz zum Tabletdesign einspaltig:
     89
     90[[Image(max-640-bottom.jpg)]]
     91
     92Es 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.
     93
     94== Über diese Screenshots ==
     95Die 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