Größe und Auflösung der Displays moderner Ausgabegeräte (Laptops, Desktop-PCs, Tablets, Smartphones, etc.) können erheblich variieren.
Damit werden sowohl das Erscheinungsbild als auch die Bedienung einer Website stark vom Endgerät abhängig.
Der Aufbau „responsiver“ Webseiten muss sich deshalb nach den Anforderungen des jeweiligen Endgerätes richten, mit dem die Website betrachtet wird.
Dies betrifft die Anordnung und Darstellung einzelner Elemente, wie Navigation, Seitenspalten und Texte aber auch die Nutzung unterschiedlicher Eingabemethoden wie Maus oder Touchscreen.
Technische Basis für solche Lösungen bieten die neueren Webstandards HTML5, CSS3 (hier insbesondere bei den Media Queries) und JavaScript.
Viewport benutzen …
Mobile Geräte (vom Handy bis zum Tablet) verfügen heute teilweise über sehr hohe Bildschirmauflösungen.
Ohne entsprechende Angaben würde eine Webseite mit der maximal verfügbaren Zahl an Pixel angezeigt. Dies sind schnell mehr als 1.000 Pixel, wodurch der Inhalt unlesbar wird.
Abhilfe schafft hier die Definition eines Viewports im Head- oder Style-Bereich des HTML-Dokumentes.
Das Viewport Meta Tag teilt dem Browser mit, wie er mit den verschiedenen Bildschirmgrößen und Skalierungen umgehen soll.
Die Anweisung „width=device-width“ bedeutet, dass die Breite der Webseite der Screen-Breite des verwendeten Geräts entsprechen soll.
Mit „initial-scale=1.0“ ist der anfängliche Zoom-Level, mit der Webseite zunächst im Browser geladen wird, gemeint.
Das gewünschte Ergebnis kann auch erreicht werden, indem für jeden Anwendungsbereich ein eigenes Erscheinungsbild, programmiert wird. Dies gegebenfalls auch mit unterschiedlichen Inhalten.
Durch eine Media-Query-Abfrage wird beim Seitenaufruf geprüft, um welches Anzeigemedium es sich handelt und das jeweilige Stylesheet gewählt.
Ein in der Regel programmtechnisch sehr aufwändiges Verfahren. Experten empfehlen, die Erarbeitung mit den kleinsten Inhalten zu beginnen.
Wegen der nahezu unbegrenzten Möglichkeiten können an dieser Stelle nur wenige und allgemeine Hinweise erfolgen.
variable Schriftgröße …
Ein normaler Desktop-Monitor verträgt eine andere Schriftgröße als ein Smartphone.
Zwischen diesen beiden Geräten liegen üblicherweise die Bildschirme von Laptops und Tablets.
Speziell bei Tablets und Smartphones ist nochmals zwischen der Anwendung im Hoch- oder Querformat zu unterscheiden.
Auf einem Desktop ist eine Schriftgröße von 16 px durchaus leserlich; beim Hochformat eines Smartphones kann die Schriftgröße z. B. auf 12 px verkleinert werden.
Schriftgröße mittels Breakpoints
Es werden für verschiedene Bildschirmgrößen (Breiten)entsprechende Schriftgrößen definiert. Bei Über- bzw. Unterschreiten der Bildschirmgröße wechselt die Größe der Schriftart.
Beschreibung:
Code:
Schriftgröße je nach Bildschirm
@media only screen and (max-width:415px) { body { font-size:12px; } }
@media only screen and (min-width:416px) { body { font-size:14px; } }
@media only screen and (min-width:825px) { body { font-size:16px; } }
font: 12 px
font: 14 px
font: 16 px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Schriftgröße mit automatischer Anpassung
Eine relativ elegante Form der Schriftgrößenanpassung kann auch mit der CSS-Funktion clamp() erzielt werden.
Hierbei werden Minimum und Maximum der Anzeigebreite sowie die zu verwendenden Schriftgrößen (Min. und Max.) angegeben.
Wird die Standardschriftgröße festgelegt und Variation hiervon als ein Vielfaches definiert, so sind Größenanpassungen mit minimalem Aufwand zu realisieren.