Was ist responsiv? { LEITFADEN }
eine Websites, drei Layouts
Die wohl größte aktuelle Herausforderung sind Websites, die sich automatisch an das Viewport des Browsers anpassen und dabei auch noch bestimmte Funktionen beinhalten.
Je nach Ausdehnung des Vieports werden die einzelnen Elemente angezeigt, alles passt, alles stimmt! Damit werden auch Ausgabegeräte unterstützt, die bisher nur schwer zu behandeln waren.
Der kleine Unterschied ....
Das Browserfenster (Vierport)
Nicht unwichtig ist folgender Sachverhalt: min-width basiert auf der Größe des Browserfensters, min-device-width auf der Bildschirmgröße.
Einige Browser und auch ältere Android-Browsers geben die Breite des Geräts falsch aus. Der Browser meldet die physische Bildschirmgröße in Pixeln anstatt des erwarteten Viewports.
Die Anforderungen:
ALLE Bilder sollen sich an die neue Viewportumgebung anpassen.
Texte umfließen die Bilder, je nach Platzangebot, in der Minimalversion steht der Text unter/ über dem Bild!
In der Regel werden das Banner und das Menü der Website an oberster Stelle positioniert, Menüs auch in der linken Seitenebene.
Das Schlüsselkonzept für eine adaptive/ responsive Websites ist die Flexibilität und Proportionalität, also das Gegenteil von Layouts mit fester Breite und dyn.( fester oder ewiglangen Höhe) . Die Verwendung relativer Einheiten (%, em, pt) trägt dazu bei, Layouts zu vereinfachen und zu verhindern, dass Komponenten zu groß für den Viewport sind.
(Unter)Menüs im Bereich LEFT ?
Menüs im 'LEFT"-Container sind bei einem adaptiven Layout nicht so einfach zu behandeln, der gesamte #MainBlock sollte für den Content zur Verfügung stehen. Das Layout für eine solche Website sollte dem Übersichtsbild entsprechen.
Untermenüs wie sonst im Bereich #LEFT oder #RIGHT werden in das Hauptmenü im Bannerbreich verlagert, dafür gibt es dann entsprechende Menüscripte, die Untermenüs ausklappen können!
Unter Umständen kann man auch per "Media Queries" die Steuerung zur Anzeige von Untermenüs steuern, indem entsprechend des Viewports die Menüscripte wechseln.
@media only screen and (max-width: 480px) { /* Hier werden die Eigenschaften definiert */ }
NO GO
div.content {
width: 980px;
margin-left: auto;
margin-right: auto;
}
Go Go
div.content {
width: 100%;
}
Darstellung einer Website auf mobilen Geräten
(Darstellungsbereiche)
Mobile Browser haben die "dumme" Angewohnheit, eine Webseite mit der Breite eines Desktopbildschirms darzustellen, ( 980 - 1024 pix).
Anschließend werden die Inhalte In Schriftgröße angepasst und die Inhalte skaliert, So dass der Bildschirm voll gefüllt ist. Die Benutzung ist häufig nur noch per Zoom möglich, Menüs lassen sich nicht anklicken, da zu klein .... etc.
Mit der Anweisung.
<meta name="viewport" content="width=device-width, initial-scale=1.0">wird der Browser angewiesen, die Breite des Bildschirms in geräteunabhängigen Pixeln zu nutzen. Das ermöglicht es der Webseite, den Content neu zu ordnen und sich an Bildschirmgröße anzupassen.
Mehr zum Nachlesen an dieser Stelle