FAQ Responsive Webdesign

Als Responsive Webdesign bezeichnet man die Fähigkeit einer Website sich dynamisch an ein bestimmtes Ausgabegerät anzupassen. Die Website erkennt beim Aufruf, mit welchem Gerät ein Anwender gerade surft. Speziell für dieses Gerät wird nun die Struktur und das Layout der Website reorganisiert und bedarfsgerecht ausgeliefert.

Die Vorteile eines Responsive Webdesign liegen auf der Hand: Durch die flexible Anpassungsfähig einer responsiven Website können alle Zielgruppen erreicht und optimal bedient werden ohne dabei Inhalte doppelt oder gar mehrfach vorhalten zu müssen. Die Handhabung eines Desktop PCs unterscheidet sich zudem deutlich von der eines SmartPhones oder Tablets. Wo bei einem Desktop überwiegend mit Maus und Tastatur gearbeitet wird, wird bei mobilen Endgeräten via Touchscreen und „Fingerwischen“ interagiert. Auch hierfür bietet Responsive Webdesign einen optimalen Lösungsansatz.

Wo Licht ist, ist auch leider Schatten. So hat auch Responsive Webdesign Nachteile und Grenzen. Je komplexer der strukturelle Aufbau einer Website gestaltet ist, desto höher wird der Aufwand einer responsiven Umsetzung der Website. Ein höherer Aufwand wiederum, bedeutet folglich auch höhere Kosten für die zu erstellende Website. Manchmal kann es daher effizienter sein, anstelle einer responsiven Umsetzung, den Ansatz einer mobile App zu verfolgen. Weiterhin unterstützen noch nicht alle Browser die für ein responsive Webdesign erforderlichen Media Queries. (Welche Browser derzeit unterstützt werden erfahren Sie in der Rubrik „Browserkompatibilität“)

Grundlage für ein Responsive Webdesign bilden HTML5 und CSS3, sowie. die mit diesen Standards eingeführten Media Queries. Diese CSS3 Media Queries ermöglichen es, eigene Stildefinitionen für bestimmte Bildschirmformate bereitzustellen. In der Regel wird mit der Erstellung der Desktop Ansicht einer Website begonnen. Sobald eine bestimmte Bildschirmbreite unterschritten wird, greift eine weitere CSS Datei und reorganisiert die Struktur der Website.

Ein Beispiel:

Original CSS Anweisung:
#right li {
   background-image: url('../img/beispielbild.jpg');
   border-radius:5px;
   display:inline;
   margin-left: 2px;
   width:150px;
   height: 30px;
   padding: 3px 40px;
}

Erkennt die Website nun, dass eine bestimmte Breite des Browsers unterschritten wird, soll in unserem Beispiel der Wert von margin-left von 2% auf 5% erhöht werden. Hierbei müssen allerdings nicht alle Werte nochmals geschrieben werden. Nur die Stil-Elemente, die auch geändert werden sollen, müssen überschrieben werden:

Anweisung ab 800px Breite:
@media screen and (max-width: 800px) {
#right li {
   margin-left: 5px;
   }
}

Auf diese Art und Weise kann die gesamte Website abhängig von zuvor definierten Auflösungen neu strukturiert und gestaltet werden.

Browserkompatibilität Responsive Webdesign

Stand: März 2013

Die nachstehende Tabelle zeigt welche Browser aktuell responsive Webdesign problemlos unterstützen. Mit entsprechendem Aufwand kann ein Responsive Design darüber hinaus auch auf ältere Browser übertragen werden. Hierbei gilt es jedoch eine Kosten / Nutzen Abschätzung durchzuführen.

Browser Unterstützt Responsive Webdesign ab:
Chrome unterstützt responsive Webdesign Chrome seit Version 4.0 (aktuell Version 17)
Firefox unterstützt responsive Webdesign Firefox seit Version 3.5 (aktuell Version 10)
Safari unterstützt responsive Webdesign Safari / iOS seit Version 4.0 / 3.2 (5.1 / 5.0)
Opera unterstützt responsive Webdesign Opera / Mobile seit Version 9.5 / 10.0 (11.6 / 11.5)
Internet Explorer unterstützt responsive Webdesign IE / mobile seit Version 9.0 / 9.0 (Version 9.0)

Nein, Responsive Webdesign ist kein Modetrend oder vorübergehender Hype. Vielmehr besteht in diesem modernen Webdesign Ansatz die Zukunft der Website Entwicklung. Warum? Betrachten wir allein die Statistik der Absatzzahlen von mobilen Endgeräten (SmartPhones, Tablets, Phablets…) im Vergleich zu den üblichen Desktop PCs wird klar, dass eine Veränderung des Surfverhaltens stattgefunden hat und noch immer im Gange ist. Immer mehr Anwender nutzen Ihre elektronischen Begleiter unterwegs um mobil zu surfen. Websites, die diesen Sachverhalt ignorieren, werden in der Konsequenz selbst ignoriert.

"2011 wurden erstmals mehr Smartphones als Desktop-PCs verkauft"
Quelle: Canalys, 03.02.2012