Dies ist eine alte Version des Dokuments!
Responsive Webdesign - Medientypen
Einleitung
Der Zugriff auf das Internet ist vielseitiger geworden, weil nicht nur mit einem Desktop-PC oder Laptop Webseiten betrachtet werden. Heute weitere Geräte wie Tablets, Smartphones, E-Book-Reader, Spielekonsolen oder Fernsehgeräte hinzugekommen. Daraus ergibt sich die Herausforderung, dass die Bildschirmgröße und die Bildschirmauflösung enorm variieren.<br/> Das Erscheinungsbild einer Webseite hängt deshalb stark vom verwendeten Endgerät ab, mit dem diese betrachtet wird. Beispielsweise ist die Standardauflösungen für Smartphones 320 bis 480 Pixel, für Tablets 768 bis 1.024 Pixel und für Desktop-PCs häufig über 1.024 Pixel.
Was ist Responsive Webdesign?
Anstatt unzählige Layoutversionen für dieselbe Webseite zu erstellen und zu warten, wird das
Responsive Webdesign
(was so viel wie *reagierend* oder *reaktionsfähig* bedeutet – also reaktionsfähiges Webdesign meint) eingesetzt. Dazu werden die Eigenschaften des Endgeräts berücksichtigt, um die Webseite auf das Endgerät optimale und benutzerfreundliche Darstellung zu erreichen. Das Hauptkriterium für ein solches angepasstes Layout ist die Bildschirmgröße (meistens Breite) des Geräts und eventuell auch die vorhandenen Eingabemethoden (Maus oder Touchscreen). Bei
Responsive Webdesign
(oder auch
Responsive Layout
) passt sich also die Webseite dem Bildschirm des Nutzers an.
Was ist der Viewport?
Der Viewport ist der sichtbare Bereich des Webbrowsers ohne Menü- und Scrollleiste, in dem die Webseite angezeigt wird. Mehr dazu anhand eines Anwendungsbeispiel, welches später folgt.
Responsive Webdesign umsetzen
Wie wird eine Webanwendung nun *responsive*? Eine einfache Lösung bietet CSS (zuerst mit Version 2 und anschliessend mit Version 3 dargelegt), welche nachfolgend anhand von Beispielen illustriert wird.
Medientypen verwenden
Schon bei CSS Level 2 gab es <mark>medienspezifische Stylesheets für bestimmte Ausgabegeräte</mark>. Dazu werden separate Stylesheets für die unterschiedliche Ausgabemedien (z. B. den Bildschirm
media="screen"
oder den Drucker
media="print"
) zur Verfügung gestellt.
Zuerst eine Übersicht über die medienspezifischen Ausgabegeräte für Stylesheets, die dem Attribut
media
zugewiesen werden können:
Medientypen - Übersicht
Es können mehrere Werte mit Kommata getrennt zugewiesen werden. Es wird der Attributwert
all
verwendet, wenn kein Attributwert angegeben wird (unabhängig vom verwendeten Ausgabemedium).
| Attributwert | Ausgabegerät |
|---|---|
| all | alle Ausgabegeräte |
| aural | Ausgabe für Sprachsynthesizer (Screenreader); der Wert galt als veraltet in CSS 2.1 und wurde mit CSS3 wiederbelebt. |
| braille | für Braille-Zeilen-basierte Ausgabegeräte, wie sie von blinden Benutzern verwendet werden |
| embossed | für Braille-basierte Drucker, die Blindenschrift ausdrucken können |
| handheld | für Mobilfunkgeräte mit kleinen Bildschirmen und geringer Bandbreite |
| Drucker | |
| projection | für Projektoren und andere Geräte, die zur Präsentation an Leinwänden verwendet werden können |
| screen | bildschirmorientierte Ausgabegeräte |
| speech | Siehe Attributwert aural; der Wert wurde mit CSS 2.1 eingeführt, weil aural als veraltet erklärt wurde. |
| tty | Computerterminals, die keine speziellen Grafiken anzeigen können und bei denen auch keine Formatierungen der Schriften möglich sind |
| tv | für TV-Geräte und andere bildschirmorientierte Ausgabegeräte |
Medientypen - Beispiel
Nachfolgend ein weiteres Beispiel, wobei deren Ausgabe auf dem Bildschrim resp. auf dem Drucker abgebildet sind, um die Auswirkungen bildlich darzustellen.
Die dazu entsprechenden CSS-Styles für die
- Bildschirm-Ausgabe (
screen
) →
style.css
- und für die Drucker-Ausgabe (
print
) →
print.css
sind unten aufgeführt.
<figure> <figcaption>Abb-01: Mit
screen.css
und
media="screen"
ist die Webseite für den Bildschirm gestylt.</figcaption> <img class=„large“ src=„themen/css/responsive/img/media_screen.png“/> </figure>
<figure> <figcaption>Abb-02: Mit
print.css
und
media="print"
ist die Webseite für die Druckerausgabe gestylt.</figcaption> <img class=„large“ src=„themen/css/responsive/img/media_print.png“/> </figure>
Der entsprechende Quellcode (index.html, screen.css, print.css) ist nachfolgend aufgeführt: <figure> <figcaption>Code-01: HTML-Seite</figcaption> <iframe class=„example“ onload=„resizeIframe(this)“ src=„view_code2.php?file=themen/css/responsive/bsp/medientypen.html“> <p>Your browser does not support iframes.</p></iframe></figure>
<figure> <figcaption>Code-02: screen.css</figcaption> <iframe class=„example“ onload=„resizeIframe(this)“ src=„view_code2.php?file=themen/css/responsive/bsp/style/screen.css&browser=no“> <p>Your browser does not support iframes.</p></iframe></figure>
<figure> <figcaption>Code-03: print.css</figcaption> <iframe class=„example“ onload=„resizeIframe(this)“ src=„view_code2.php?file=themen/css/responsive/bsp/style/print.css&browser=no“> <p>Your browser does not support iframes.</p></iframe></figure>