Die Zahlen sprechen für sich: Nach Schätzungen des Bundesverbands Informationswirtschaft, Telekommunikation und neue Medien Bitkom waren Anfang 2013 in Deutschland über 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 Internetzugang wird auch weiterhin rasant wachsen."
Mobile Endgeräte erfordern flexible Websites
Laut einer Umfrage des Marktforschungsunternehmens Forsa geht schon heute rund ein Drittel der Internetnutzer in Deutschland auch mit dem Smartphone ins Internet. Ein Trend, der Unternehmen ganz neue Marketingmö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 Notebooks zu PCs, Tablet-Computern, Smartphones oder dem Fernseher erheblich variieren kann, hängen Bedienung und Erscheinungsbild einer Webseite 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 Marketingverantwortlichen großes Kopfzerbrechen und strapazierten die Budgets mittelständischer Unternehmen mitunter heftig. Doch nun scheint eine Lösung gefunden: Responsive Webdesign. Das bedeutet ein Webdesign, das sich dem Anforderungsprofil jedes Endgeräts automatisch anpasst.
Frank Pomereinke, Geschäftsführer des Online-Marketing-Spezialisten Hydra Newmedia, zählt die Vorteile dieser Technik auf: "Responsive Webdesign berücksichtigt die spezifischen Anforderungen jedes Geräts und optimiert die Darstellung und Navigationselemente quasi automatisch für das jeweilige Endgerät. Es bietet so in der Regel 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 Webauftritt. Besonders Websites mit häufig wechselndem Inhalt profitieren also davon. Pomereinke schätzt, dass je nach Anzahl und Größe des bestehenden Online-Auftritts auch mittelständische Unternehmen durch interagierendes Webdesign bis zu 50 Prozent ihrer Betriebskosten einsparen können.
Der Hydra-Geschäftsführer rechnet vor: "Eine Website komplett im Responsive Design zu entwickeln kostet zwar 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 der Experte, 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, so Pomereinke, 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 Website, Bilder beispielsweise, bei jeder Bildschirmauflösung immer den optimalen Prozentanteil am Layout quasi 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 Webauftritts: 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 Marketingverantwortliche für sein Unternehmen im Vorfeld eine individuelle Return-on-Investment (RoI)-Bilanz auf, die mit jeder Menge Fragen beginnt: Wie viele unterschiedliche Websites pflegt das Unternehmen aktuell? Wo liegen die Kernzielgruppen? Welchen Internetzugang 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 großen, weltweit operierenden Konsumgüterherstellern ist die Entscheidung für die Nutzung von Responsive Webdesign vermutlich schnell gefallen. Die Stuttgarter Webdesigner von Hydra haben gerade erst ein Portal für Sony Mobile in anpassungsfähigem Design entwickelt. Aber auch bei vielen Mittelständlern scheint der Nutzen dieses Designs die höheren Anfangsinvestitionen zu rechtfertigen. Vor allem, wenn sowieso ein kompletter Relaunch des Online-Auftritts ansteht. Denn wenn man die Seite gänzlich neu aufbaut, ist der Einbau der flexiblen Layouts recht einfach zu bewerkstelligen.
So wurde beispielsweise auch der neue Webauftritt für die Rubore®-Seals-Kampagne des Mittelständlers Trelleborg Sealing Solutions ganz im Responsive-Design gestaltet. Das Unternehmen entwickelt und vertreibt als eines der weltweit führenden Unternehmen Präzisionsdichtungen und Präzisionsführungen. Dynamik und ständige Neuerungen begleiten Trelleborg seit seiner Gründung. Daher ist Innnovation für das Unternehmen mit seinen rund 50 Vertretungen weltweit auch im Bereich Marketing ein großes Thema.
Tobias Schmid, Manager Global Marketing & Communications bei Trelleborg Sealing Solutions: "Gerade im Hinblick auf die stark zunehmende Nutzung von mobilem Internet und viralem Marketing war es uns wichtig, dass die Microsite auch auf mobilen Endgeräten optimal genutzt werden kann." Das Unternehmen entschied sich deshalb für Responsive Webdesign, weil es Vorteile hinsichtlich Usability, Konsistenz und Kosten des Online-Auftritts sah.
So funktioniert Responsive Webdesign
Responsive Webdesign basiert auf HTML5 und CSS3. Mittels sogenannter Media Queries werden die Eigenschaften und Fähigkeiten des Endgeräts abgefragt, mit dem der Besucher auf die Website zugreifen will. Wie groß ist das Display des Geräts? Wie hoch seine Auflösung? Welches Format besitzt der Screen, Hoch- oder Querformat? Und welche Eingabemöglichkeiten stehen zur Verfügung: Tastatur, Maus, Finger und Sprache?
Notwendige Voraussetzung für die Nutzung von Media Queries ist die strikte Trennung von Inhalt und Layout, um das volle Potenzial des Responsive Webdesigns ausschöpfen zu können. Dann passt sich das Layout der Website automatisch an, ohne dabei auf Javascript oder Änderungen im HTML-Code zurückgreifen zu müssen. Schriftgröße und Bilder skalieren sich entsprechend in Breite wie Höhe, das Bild dreht sich ins gewünschte Hoch- oder Querformat, und vermeintlich weniger wichtige Elemente werden erst gar nicht angezeigt.
Diese Reduktion beziehungsweise Priorisierung der Inhalte muss sorgfältig geplant sein. Dafür bieten sich Workshops an. Dabei werden genau jene Bereiche der Website definiert, die auf kleineren Displays ausgeblendet werden oder weiter nach unten rutschen können. Je nach Breite werden Inhalte umstrukturiert und entweder untereinander oder nebeneinander angeordnet. Der Online-Marketing-Spezialist Frank Pomereinke rät zu drei- bis fünfstufigen Strukturen. Diese sollten jedoch noch separat skalierbar sein. So könne man bereits mit drei skalierbaren Stufen alle Auflösungen abdecken: Für kleine Smartphone-Screens gilt die schmalste Ansicht, in der Inhalte in der Regel nur untereinander dargestellt werden. Die mittlere Stufe richtet sich an Tablets mit größerem Display im Hochformat und verzichtet meist auf ein bis zwei Tabellenspalten am rechten Rand. Die dritte Ansicht zielt auf Monitore und Tablets mit hoher Auflösung und Querformat. Sie zeigt die Inhalte in voller Breite.
Der Kalifornier Luke Wroblewski, einer der erfahrensten Webdesigner weltweit, geht in seinem Buch "Mobile First" sogar noch einen Schritt weiter. Er empfiehlt, die Inhalte im Web so aufzubereiten, dass sie überall und jederzeit abgerufen werden können und sich dabei in erster Linie an den kleinen, mobilen Endgeräten zu orientieren. Denn der Trend gehe klar zur Internetnutzung auf mobilen Endgeräten.
Das stellt vieles infrage, denn die kleineren Bildschirmgrößen zwingen die Webdesigner, sich auf das Wesentliche bei Form, Funktion und Inhalt zu beschränken. So müssen auch die verwendeten Techniken mit allen Endgeräten kompatibel sein, was beispielsweise den Einsatz von Flash erschwert. Das berühmte Credo lautet: Weniger ist mehr. Und diese Philosophie deckt sich mit den traditionellen Wünschen so ziemlich jeden Nutzers: dem Wunsch nach Schnelligkeit und intuitiver Bedienung.
Dieser Artikel basiert auf einem Beitrag der TecChannel-Schwesterpublikation Computerwoche. (cvi)