Der Begriff Responsive Webdesign beschreibt eine aktuelle Technik der Website-Gestaltung, die es ermöglicht mittels HTML5, CSS3 und Media-Queries ein einheitliches Anzeigen von Inhalten auf einer Website zu gewährleisten. Dabei wird das Layout der Website so flexibel gestaltet, dass dieses auf dem Desktop, Tablet und Smartphone gleichbleibende Benutzerfreundlichkeit bietet.
Der grafische Aufbau einer Website mit Responsive Webdesign erfolgt gemäß der Anforderungen des jeweils anfragenden Gerätes. Im Detail betrifft dies primär die Anordnung und Darstellung der Seitenelemente, wie Navigationen, Spalten und Texte, wie auch die Berücksichtigung unterschiedlicher Eingabemethoden wie Maus oder Touchscreen. Mobile Endgeräte erfordern flexible Websites!
Wo liegt der Unterschied zu einer separaten mobilen Website?
Der wesentliche Unterschied zwischen responsiven Design und einer mobilen Webseite besteht in der Anzahl der Template-Vorlagen. Klassisch ist die Desktop-Version die "normale Ansicht der Website" und für die mobile Endgeräte wie Tablets und Smartphones wird ein zusätzlich unabhängig gesteuertes Template erstellt. Hier werden meist Inhalte reduziert und Navigationen angepasst.
Eine Herausforderung liegt nun darin zu klären, welches Template für das anfragende Gerät vom Server ausgeliefert werden soll. Zur Differenzierung werden hier auch oft Datenbanken eingesetzt, wo entsprechende Eigenschaften wie Displaygröße und Auflösung des mobilen Endgerätes hinterlegt sind. Zusätzlich wird normalerweise ein Link "zur Mobilen Version wechseln" und "Zur Desktop-Version wechseln" eingeblendet.
Beim Responsive Webdesign wird nur ein Template für die Website erstellt. Dieses Template passt sich dann selbstständig der verfügbaren Auflösung des Displays an. Gut sichtbar wird das Verhalten des Responsive Webdesign, wenn die Breite des Browser-Fensters verändert wird. Die Anpassungen der Breite des Layout kann dynamisch erfolgen oder zu einem bestimmten "Breakpoint", an dem das Layout für die Größe des "Viewports" wechselt.
Beispiele Breakpoints bzw. Auflösungen typischer Viewports
- Viewports bis zu 760px - Das Layout richtet sich primär an Smartphones
- Viewports 760 bis 980px - gilt für Tabletts oder Landscape (Querformat) Smartphone
- Viewports 980 bis 1280 Pixel - entspricht der "klassischen" Browserfenstergröße eines 4:3-Monitor 15-17 Zoll
- Viewports ab 1280 Pixel - entspricht allen modernen Panels mit FullHD-Auflösung
Bei der Entwicklung eines Responsive Webdesign bzw. einer "responsiven" Webseite ist es am besten, mit Media Query und CSS für kleine Displays / Monitore zu beginnen und danach das Layout für alle höheren Auflösungen festzulegen.
Vorteile einer Website Optimierung mit Responsive Webdesign für Mobile Endgeräte
Vorteile von Responsive Webdesign zeigen sich vor allem in den Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Tablets und Smartphones erzwingen ein Umdenken bei der Gestaltung von neuen Webseiten. Auch der zusätzliche Pflegeaufwand von redaktionellen Inhalten und Bildmaterial einer Mobile-Webversion entfällt mit einer "responsiven" Webseite. Dazu kommt, dass eine Mobile-Website gegebenenfalls für zukünftige Tablet- oder Smartphone-Formate weitere Templates und Webversion des Layouts benötigt.
Kostenfaktor Responsive Design - was kostet Responsive Webdesign?
Mit seiner geräteübergreifenden Flexibilität spielt Responsive Webdesign eine tragende Rolle und nimmt damit einen kosteneffizienten Faktor in der Kommunikations-Strategie eines Unternehmens ein. Denn mehr denn je muss heute ein erfolgreiches Unternehmen auf die Bedürfnisse - gerader der mobilen Nutzer und Zielgruppen - eingegangen, um potentielle Kunden optimal und zielführend ansprechen zu können. Die Kosten bei der Neuerstellung oder für den "Umbau" auf responsive Webdesign werden sich schnell rechnen. In vielen Fällen entspricht die Implementierung eines responsive Webdesigns bei vorhandenen Webauftritten einem Relaunch.