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

Timestamp:

Jul 4, 2015, 1:25:12 PM (8 years ago)

Author:

sven

Comment:

--

Website/Responsive Design

@@ -34 +34 @@
 Hier erkennt man die "Guiding Principles" des technikum29-Layouts:
 
-  `1200px Seitenbreite` = `940px Seiteninhalt` + `260px Seitenleiste`
+  `1200px Seitenbreite` = `940px Seiteninhalt` + `260px Seitenleiste` \\
   wobei `940px Seiteninalt` = `860px real nutzbarer Inhalt` + `80px Abstand`
 
@@ -69 +69 @@
 Anmerkung: Tatsächlich sehen dieses Design tendenziell nur Tablets im Hochformat, da sie im Querformat genug Auflösung bieten um das `>900px`-Layout zu sehen.
 
-Es 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`:
+Es 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`, sodass hier analog zu Bildschirmen im Bereich zwischen `900px-1200px` die eigentlichen Textinhalte abgeschnitten werden, wenn der Bildschirm zu schmal ist. Der Benutzer muss horizontal scrollen:
 
 [[Image(max-940-cropping.jpg)]]
 
+Erst mit dem Mobile-Design wurde die inhaltliche Fixbreitenidee entgültig aufgegeben. Dieses Layout ist auch zeitlich noch später entstanden, da es einige radikale Änderungen des Seiteninhalts vornimmt.
+
+== Kleiner als 640px: Das Mobilgeräte/Smartphonedesign ==
+Auf senkrecht und waagerecht gehaltenen Mobilgeräten bekommt man, wenn sie nicht all zu groß sind, dieses Design angezeigt, welches in der Reihe der bisher gezeigten Varianten ein Unikum darstellt:
+
+[[Image(max-640-top.jpg)]]
+
+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.
+
+