Tanja Volk Responsive Webdesign

Responsive Webdesign bedeutet soviel wie reaktionsfähiges Webdesign. Doch zunächst einmal müssen hier ein paar Begrifflichkeiten geklärt werden, denn beim Thema „responsive Webdesign“ werden Dinge häufig durcheinander geworfen. Und zwar…

Mobiles Design:

Mobiles Design ist kein responsive Design. Denn hierbei werden separate Seiten ganz speziell für mobile Geräte programmiert. Beim Aufrufen einer solchen Website wird man auf die mobile Version der Website weitergeleitet. Die Inhalte können ganz andere sein als auf der normalen Website.

Beispiele:

Der Nachteil dieser Variante ist, dass zwei separate Websites gepflegt werden müssen. Der Vorteil ist, dass die Inhalte für die mobile Besuchergruppe optimiert werden können. Wenn jemand bspw. von unterwegs aus die Seite der deutschen Post besucht, ist er möglicherweise daran interessiert zu erfahren wo der nächste Briefkasten ist etc.

Responsive Design:

Beim responsive Design passt sich die Website optisch an alle möglichen verschiedenen Displaygrößen und Geräte an. Es geht dabei also nicht darum, die Seiten für bestimmte Geräte (i-phone, Smartphone etc.) zu optimieren, sondern um die flexible Anpassung des Designs an wirklich alle verfügbaren internetfähigen Endgeräte. Die Inhalte sind dabei größtenteils dieselben.

Hierbei wird im Optimalfall mit einem flüssigen Gestaltungsraster gearbeitet, das heißt anstatt wie früher den Elementen fixe Werte für die Größe zu geben, werden diese nun prozentual vergeben. Das ist die Grundlage damit sich das Layout an verschiedene Viewportgrößen anpassen kann.

Darüber hinaus benötigt man Media Querys, diese fragen die Viewportgröße des jeweiligen Endgerätes ab, wodurch man speziell angepasste CSS-Anweisungen mitgeben kann. Auch die Größenangabe für den Text wird in em (oder %) angegeben, wodurch sich auch die Schriftgröße proportional verhält. Nicht zuletzt werden auch die Graphiken flexibilisiert.

Beispiele:

Der Nachteil im Vergleich zur oberen Variante ist, dass die Inhalte unabhängig vom Endgerät immer die gleichen sind. Dieser Nachteil wirkt sich allerdings nur aus, wenn der Besucher der Site auf dem mobilen Gerät andere Inhalte erwarten würde, wie das zum Beispiel bei der Post der Fall sein könnte. Der Vorteil gegenüber der vorhergenden Lösung ist natürlich der weitaus geringere Arbeitsaufwand.

Eine weitere Variante des responsive Webdesigns ist das sogenannte „adaptive Design“. Dieses besteht im Gegensatz zum responsive Design aus festen Größen, wobei mit Hilfe von Media Querys CSS-Anweisungen mit denen man die Darstellung von Elementen einer Webseite von der Fensterbreite des Browsers und vom Ausgabegerät abhängig machen kann bestimmte Breakpoints für entsprechende Endgeräte gesetzt werden. Das ist zwar einfacher zu programmieren, hat aber den Nachteil, dass das Design nicht flexibel ist und es evtl. zu Darstellungsfehlern in bestimmten Viewportgrößen kommen kann.

Hybrid-Lösung:

Die Hybrid-Lösung – auch RESS (Responsive Design + Server Side Components) genannt – ist eine Mischung aus den beiden oberen Varianten mobile und responsive Design. Zum einen sind die Elemente optisch angepasst zum anderen wird Server-seitig das entsprechende Endgerät abgefragt und angepasste Inhalte dargestellt. Dies ist natürlich die absolut perfekte Lösung, jedoch sehr komplex und zeitaufwändig.

Beispiel:

Hinweis:

Falls Sie Interesse haben, sich näher mit diesem Thema zu befassen, dann kann ich nur eines der bestimmt besten deutschen Tutorials zu diesem Thema empfehlen und zwar hier bei Galileo Press.