Responsive Webdesign

Flexibel angepasst

Ein neuer Trend im Webdesign ist das Responsive Design: Webdesigns, die auf die unterschiedlichen Bildschirmgrößen und sonstigen Beschaffenheiten der Ausgabegeräte reagieren.

  1. Flexibel angepasst
  2. Anordnung der Elemente
internet, webdesign, responsive webdesign, css3, media queries

© Internet Magazin

Flexibel angepasst

Bei Responsive Webdesign, frei übersetzt vielleicht mit "reagierendes Webdesign", geht es um ein flexibles Design, das sich an das Medium anpasst, in dem es dargestellt wird. Die Notwendigkeit für Responsive Webdesign ergibt sich dadurch, dass Webseiten auf immer unterschiedlicheren Geräten betrachtet werden - vom riesigen Desktop-Monitor, den Netbooks über iPads bis hin zu Smartphones. Besonders Letztere sind ein wichtiges Thema: Immer mehr Kunden wollen Webseiten, die eben auch auf Smartphones eine gute Figur machen.Für den mobilen Zugriff können Sie auch eigene Subdomains einrichten, über die Sie dann spezielle Inhalte ausliefern. Damit hat man aber natürlich nicht das Problem der so unterschiedlichen Browserfenster bei Desktop-Rechnern gelöst. Und auch nicht bei allen Projekten ist der Aufwand einer eigenen Subdomain angebracht. Genau hier setzt das Responsive Webdesign an, das darauf basiert, dass ein und derselbe Inhalt je nach Beschaffenheit des Ausgabemediums anders aufbereitet wird.

Media Queries

internet, webdesign, responsive webdesign, css3, media queries

© Internet Magazin

Das 1140-Grid-Framework erleichtert den Einstieg in anpassbare Designs. Es passt sich dem Bildschirm an.

Über CSS3 Media Queries können Sie gesonderte CSS-Angaben machen, je nachdem, welche Größe das Browserfenster hat; also bei viel Platz beispielsweise die Inhalte als Vierspalter anzeigen lassen, bei weniger Platz untereinander. Durch folgende Zeile wird für Bildschirme mit einem Browserfenster, das nicht breiter als 600 Pixel ist, das Stylesheet klein.css eingebunden:

<link rel="stylesheet" href="klein.
css" media="screen and (max-width: 600px)" />

Sie sehen, hier steht eine detailliertere Angabe hinter media, als man es aus CSS 2.1 gewohnt ist. Um HTTP-Requests zu sparen, empfiehlt sich die @media-Regel, die innerhalb des Stylesheets steht.

@media screen and (max-width: 600px)
{}

Neben max-width können Sie auch min-width benutzen und dazu gibt es natürlich die umgekehrten Entsprechungen max-height und min-height.Ebenfalls häufig eingesetzt werden max-device-width oder min-device-width. Damit lassen sich eigene Formatierungen je nach Breite des Ausgabegeräts vornehmen. Bei einem Desktoprechner bezieht sich max-device-width auf die Auflösung des Monitors, max-width hingegen auf die Breite des Browserfensters.

Nicht ohne mein Meta-Tag

Bei Smartphones funktioniert es ein bisschen anders. Smartphones stellen viele Webseiten dar, die eigentlich nicht für diese Geräte optimiert sind. Sie behelfen sich, indem sie die Webseiten so stark verkleinern, dass sie in ihrer Gesamtheit auf den Smartphone-Bildschirm passen.Wenn der Benutzer etwas genauer sehen möchte, kann er einen Bereich zoomen. Die Breite, die Smartphones anzeigen können, nennt man auch den Viewport. Er ist unterschiedlich groß, bewegt sich zwischen 800 Pixel (Android) und 960 Pixeln (iPhone). Auf diesen Viewport beziehen sich die max-width- beziehungsweise min-width-Angaben in Media Queries. Deswegen verwendet ein Smartphone nicht die Styles, die über @media screen and (max-width: 600px) {} spezifiziert sind. Schließlich hat das Smartphone ja einen Viewport von über 800 Pixeln.Um das zu ändern, müssen Sie ein Meta-Tag in Ihre Webseite einfügen, das folgendermaßen lautet:

<meta name="viewport" content="width=
device-width,initial-scale=1" />

Damit wird der Viewport optimal verkleinert. Mit dieser Meta-Angabe interpretiert jetzt das Smartphone die Style-Angaben, die innerhalb von @media screen and (max-width: 600px){} stehen.Noch einen weiteren Vorteil hat das Meta-Element: Dadurch ist der anfängliche Zoom deaktiviert und Smartphones zeigen die Seite nicht mehr so verkleinert an - und genau das ist gewünscht bei einer Seite, die für kleine Bildschirme optimiert ist. Wenn man das oben erwähnte Meta-Tag einfügt, können folgende - von Peter-Paul Koch vorgeschlagene - Media Queries eine sinnvolle Basis für unterschiedliche Formatierungen sein:

/* Grundlegende allgemeine
Formatierungen */
@media all and (max-width: 600px) {
/* Angaben fuer Smartphones und kleine
Bildschirme */
}
@media all and (min-width: 600px) {
/* Formatierungen fuer groessere
Bildschirme */
}

Zuerst schreiben Sie die allgemeinen CSS-Angaben, die unabhängig vom verfügbaren Platz sind. Dann kommen innerhalb von Media Queries die Viewport-spezifischen Angaben: Zuerst die für Smartphones und kleine Browserfenster, dann die für Desktop-Rechner mit größerem Browserfenster.

width oder device-width?

Eine andere Methode, um gesonderte Stylesheets für Smartphones zu definieren, setzt auf device-width, also beispielsweise so:

@media screen and (min-device-width:
320px) and (max-device-width: 480px) {
}

Damit werden die Formatierungen nur angewandt, wenn die Größe des Bildschirms (nicht des Viewports) zwischen 320 und 480 Pixeln liegt. Damit erreicht man nur Smartphones und lässt alle Desktoprechner mit kleinem Browserfenster außen vor. Das funktioniert wunderbar für iPhones, aber nicht auf allen Android-Smartphones, die teilweise eine wesentlich größere Displaygröße angeben und damit das angegebene Style-sheet nicht laden.Shi Chuan (www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/ ) schlägt vor, diese Angabe zu erweitern, um mehr Android-Smartphones anzusprechen:

@media only screen and (min-device-
width: 320px) and (max-device-width: 569px) {}

Nach unseren Tests ist dieser Wert für max-device-width allerdings nicht immer ausreichend. Zuverlässiger erscheint hingegen die Abfrage nach max-width in Kombination mit der oben beschriebenen Meta-Angabe.

internet, webdesign, responsive webdesign, css3, media queries

© Internet Magazin

Das Layout der 320-and-Up-Projektvorlage passt sich dann aber auch an mittlere oder automatisch an größere Browserfenster an.

Diese Lösung wird von verschiedenen renommierten Seiten empfohlen, beispielsweise bei der Projektvorlage 320 ans Up oder aber auch beim Template Mobile Boilerplate.Außerdem bietet die Variante mit max-width den Vorteil, dass sie ebenfalls auf kleinen Browserfenstern auf dem Desktoprechner funktioniert und sich einfacher erstellen lässt, weil man die verschiedenen Versionen auf einem Desktop-Rechner testen kann.Media Queries funktionieren in allen modernen Browsern und selbstverständlich auch auf den Webkit-Derivaten, die auf iPhones und Android-Smartphones zum Einsatz kommen. Der Internet Explorer unterstützt Media Queries ab Version 9. Für ältere IEs gibt es Abhilfe über JavaScript.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".