Wie funktioniert Responsive Webdesign?

HTML5, CSS3 Media Queries bilden die Grundlage für ein Responsives Webdesign

Das Prinzip Inhalte für eine bestimmte Zielgruppe auszuliefern ist kein gänzlich neues Konzept, sondern fand auch bereits zu Zeiten von CSS 2.0 seine Anwendung. So konnte eine Website z.B. für die Zielgruppe „Screen“ oder als Druckversion ausgegeben werden, wie folgendes Beispiel veranschaulicht:

Optimierte Ausgabe der Website für den Bildschirn

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

Optimierte Ausgabe der Website für den Drucker

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

Mit Hilfe der in CSS3 eingeführten Media Queries lässt sich diese zielorientierte Ausgabe nun noch genauer bestimmen. So können z.B. für unterschiedliche Auflösungen und Bildschirmgrößen jeweils eigene CSS Dateien erstellt werden. Darüber hinaus können bestimmte Abschnitte im Quellcode der Website definiert werden, die ausschließlich für ein bestimmtes Gerät Gültigkeit besitzen. Dies ermöglicht es z.B. gezielt ein iPad im Hoch- oder Querformat anzusprechen. Auf welche Eigenschaften hin abgefragt werden kann veranschaulicht nachstehende Übersicht:


width / height
Breite / Höhe des Viewports (z.B. Größe des Browserfensters)

device-width / device-height
Breite / Höhe des physischen Ausgabemediums (z.B. Auflösung des Displays oder Bildschirms sowie Papiergröße)

orientation
portrait oder landscape (z.B. die Ausrichtung bei Smartphones und Tablets, wobei alles, was breiter als hoch ist, als landscape gilt)

aspect-ratio
Seitenverhältnis des Viewports

device-aspect-ratio
Seitenverhältnis des physischen Ausgabemediums

color
Farbtiefe in Bit pro Kanal

color-index
Absolute Anzahl der Farben in der Farbtabelle des Ausgabemediums

monochrome
Farbtiefe bei monochromen Ausgabegeräten in Bit pro Pixel

resolution
Auflösung, z.B. in dpi

scan
progressive oder interlace (nur für TV-Bildschirme)

grid
für Grid-basierte Ausgabegeräte wie TTY-Terminals


Die CSS Integration erfolgt wie üblich im Kopf Bereich der HTML Struktur. Die Media Features sind dabei auch kombinierbar, wie nachstenedes Code-Beispiel verdeutlicht:

<!-- Browser mit einem horizontal sichtbaren Bereich von mindestens 1024px -->
<link rel="stylesheet" media="screen and (min-width: 1024px)" />

<!-- Bildschirm mit einer horizontalen Auflösung von mindestens 1024px -->
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" />

<!-- Drucker mit einer maximalen Papierbreite von 15 cm -->
<link rel="stylesheet" media="print and (max-width: 15cm)" href="printsmall.css" />

Von der Theorie in die Praxis: Wir haben einige Beispiele zusammengefasst die die Thematik veranschaulicht und demonstriert. Hier geht es zu den Beispielen für responsives Webdesign.

 


Info

Sie haben weitere Fragen zum Thema Responsive Webdesign oder möchten Ihre Website responsiv für mobile Endgeräte wie z.B. Tablets und / oder Smartphones umsetzen? Wir freuen uns auf Ihre Nachricht. Ihr Quellwerke Team, professionelle Webagentur aus Eberbach bei Heidelberg.