Definition (Wikipedia): Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um die technische Umsetzung eines anpassungsfähigen Website-Layouts. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neueste Webstandards wie HTML5 und CSS3.
Anwender greifen zunehmend mit Smartphones und Tablets aufs Internet zu – Responsive Webdesign kann den Web-Auftritt dafür optimieren.
Die Zahlen: Nach Schätzungen des Bundesverbands Informationswirtschaft, Telekommunikation und neue Medien (Bitkom) waren zu Jahresbeginn 2012 in Deutschland mehr als 112 Millionen Mobilfunkanschlüsse geschaltet. „Mehr als jeder dritte Bundesbürger verfügt über zwei oder mehr Mobilfunkanschlüsse“, erklärt René Schuster, Mitglied des Bitkom-Präsidiums, und fügt an: „Der Bedarf an Smartphones, Tablet-PCs und anderen Geräten für den mobilen Internet-Zugang wird auch weiterhin rasant wachsen.“
Mobile Endgeräte erfordern flexible Websites
Laut einer Umfrage des Marktforschungsunternehmens Forsa geht schon heute rund ein Drittel der Internet-Nutzer in Deutschland auch mit dem Handy ins Internet. Ein Trend, der Unternehmen ganz neue Marketing-Möglichkeiten eröffnet. Doch die Anforderungen an modernes Online-Marketing sind dabei hoch; schließlich sind die Nutzer in Zeiten von Tablet-PC und Smartphone mobil und flexibel wie nie zuvor. Und weil die Auflösung des Displays von Laptop zu PC, Tablet-Computer, Smartphone oder Fernseher erheblich variieren kann, hängen die Bedienung und das Erscheinungsbild einer Web-Seite natürlich erheblich vom Endgerät ab. So nimmt einerseits die Zahl der Devices mit unterschiedlichen Größen und Bildschirmauflösungen zu, andererseits steigen damit auch die Ansprüche an die Funktionalität der Websites auf den mobilen Geräten.
Anpassungsfähiges Webdesign für jedes Device
In der Vergangenheit bereiteten diese Herausforderungen den Marketing-Verantwortlichen großes Kopfzerbrechen und strapazierten die Budgets von mittelständischen Unternehmen mitunter heftig. Doch nun scheint eine Lösung gefunden: Responsive Webdesign – ein Webdesign, das sich dem Anforderungsprofil jedes Endgeräts automatisch anpasst.
Die Vorteile dieser Technik: Responsive Webdesign
- berücksichtigt die spezifischen Anforderungen jedes Geräts,
- optimiert die Darstellung und Navigationselemente quasi automatisch für das jeweilige Endgerät,
- bietet so das bestmögliche Nutzererlebnis
- und senkt zugleich die Kosten für den Betrieb des Online-Auftritts.
Betriebskosten für den Online-Auftritt senken
Der Vorteil: Statt mehrere unterschiedliche Websites pflegen zu müssen, reduziert sich der Unterhalt mit Responsive Webdesign auf einen einzigen Web-Auftritt. Besonders Websites mit häufig wechselndem Inhalt profitieren also davon.
Eine Schätzung: „Je nach Anzahl und Größe des bestehenden Online-Auftritts können auch mittelständische Unternehmen, öffentliche Verwaltungen und soziale Einrichtungen durch interagierendes Webdesign bis zu 50 Prozent ihrer Betriebskosten einsparen.“
Eine Beispielrechnung: „Eine Website komplett im Responsive Design zu entwickeln kostet rund ein Drittel mehr als eine herkömmliche Website, die nur für die PC-Ansicht optimiert wurde. Dafür muss man aber keine weiteren Seiten entwickeln.“ Das, so die Meinung vieler Experten, sei der große Vorteil gegenüber dem herkömmlichen Layout.
Denn wolle man dort später zusätzlich zu einer herkömmlichen Website noch einen weiteren Ausgabekanal erstellen, zum Beispiel für mobile Endgeräte wie Smartphones oder Tablets, müsse wieder eine neue Seite kreiert und zusätzlich gepflegt werden. Diese Kosten fielen bei der Variante Responsive Webdesign weg. Deshalb würde sich dieses Verfahren bei vielen Kunden sehr schnell amortisieren.
Investitionskosten amortisieren sich schnell
Anstelle der bisher gängigen Optimierung für fixe Bildschirmauflösungen oder Schriftgrade über Pixelangaben wird im Responsive Design mit relativen Werten gearbeitet. So erhalten die verschiedenen Elemente der Web-Seite, Bilder beispielsweise, bei jeder Bildschirmauflösung immer den optimalen Prozentanteil am Layout.
Ein Anzug, der immer passt
Statt vieler verschiedener Websites existiert nun nur noch eine, die sich dem Endgerät des Nutzers anpasst. Das verbessert zum einen die Konsistenz des Erscheinungsbildes (Corporate Design) und senkt zum anderen die Kosten des Web-Auftritts: Schließlich muss nur noch eine Website gepflegt werden. Allerdings müssen Unternehmen vor diesem Return on Investment (RoI) zunächst investieren – nämlich in die Anpassung ihrer Website. Je nach Umfang der Website kann dies recht aufwendig sein, denn die exakten Pixelangaben der Seite müssen zunächst vollständig durch Prozentangaben ersetzt werden.
So stellt jeder Marketing-Verantwortliche für sein Unternehmen im Vorfeld eine individuelle RoI-Bilanz auf, die mit jeder Menge Fragen beginnt:
- Wie viele unterschiedliche Websites pflegt das Unternehmen aktuell?
- Wo liegen die Kernzielgruppen?
- Welchen Internet-Zugang wählen diese Gruppen?
- Sollen diese Kunden die Website auch mit Smartphone und Tablet-PC nutzen können?
- Was passiert auf der Website?
- Wie oft werden Aktualisierungen vorgenommen?
- Was kostet der Unterhalt der Websites?
- Wie viel kann das Unternehmen bei der Reduktion auf eine Site an Betriebskosten sparen?
Relaunch der Website für den Umstieg nutzen
Bei der Stadt Eschborn haben die Verantwortlichen schnell erkannt, dass „responsive Design“ für die Kommunikation mit den Bürgern, Gewerbetreibenden und Touristen nur von Vorteil ist. So wurde bereits Anfang 2012 der Internetauftritt der Stadt vollständig auf die neue Technik abgebildet. Die Stadt Viernheim wird in wenigen Tagen mit dem neu gestalteten Auftritt folgen.
Als Internet- und Kommunikationsexperten für öffentliche Verwaltung und soziale Einrichtungen konnte pixelegg informationsdesign diesen Relaunch von www.viernheim.de nutzen, um die neue Technik erfolgreich einzusetzen.