Responsive Webdesign: So wird Ihre Homepage mobiltauglich

Zugehörige Themenseiten:
Onlinemarketing

Dank Tablet und Smartphone ist das Internet längst zu einem Überall-Medium avanciert. Höchste Zeit also, die Homepage anzupassen. Wie Sie das mit möglichst wenig Aufwand schaffen.

  • Bild 1 von 4
    © Christian Ahrens
    „Ist die Homepage nicht für Mobilgeräte optimiert, verlieren Kunden den Spaß am Surfen.“ Volker Hanisch, ­ Chef von Hanisch Holzbau in Bad Neuenahr-Ahrweiler (Pfalz).
  • Bild 2 von 4
    © Christian Ahrens
  • Bild 3 von 4
    © Christian Ahrens
  • Bild 4 von 4
    © Dirkes
    „Besucher von responsiven Webseiten bleiben länger und springen seltener ab.“ Daniel Dirkes, ­Geschäftsführer von Artland Marketing in Merzen.

Die firmeneigene Homepage ist „das mit Abstand wichtigste Werbemedium für unseren Betrieb“, daran hat Volker Hanisch keinen Zweifel. Denn unabhängig davon, ob Neukunden zum Beispiel über Suchmaschinen, durch persönliche Empfehlung oder Fahrzeugwerbung auf seine Dachdeckerei und Zimmerei in Bad Neuenahr-Ahrweiler aufmerksam werden: „Praktisch alle schauen sich erst einmal auf unserer Website um, bevor sie persönlich Kontakt zu uns aufnehmen“, hat der Handwerksmeister festgestellt.

Mobilsurfen wird zum Hindernislauf

Dass Besucher ihre virtuellen Rundgänge dabei längst nicht mehr nur vom Schreibtisch-PC oder vom Notebook aus, sondern immer öfter via Tablet und Smartphone unternehmen, überraschte ihn wenig. „Schließlich bin ich ja selbst gern mit mobilen Geräten im Netz unterwegs.“ Der Spaß allerdings bleibe bei dieser Art des Surfens häufig auf der Strecke, findet Hanisch. Zum Beispiel, wenn Seiten auf dem Smartphone-Bildschirm bis zur Unleserlichkeit geschrumpft würden oder Bedienelemente auf dem Tablet auch beim x-ten Versuch nicht auf Fingertips reagierten.

„Unsere Website machte da bis vor ein paar Monaten keine Ausnahme“, räumt Hanisch ein, „sie war halt für 15- bis 17-Zoll-Bildschirme optimiert“. Aber, so fügt er hinzu, „damals ahnte ich auch nicht, dass es für dieses Problem eine elegante Lösung gibt“. Die lernte der 52-Jährige vor drei Jahren durch Daniel Dirkes kennen, dessen Agentur Artland Marketing (in Merzen) bundesweit nicht nur viele Handwerksbetriebe, sondern auch Kammern und Fachverbände betreut. „Stellen Sie Ihre Homepage auf ,Responsive Design‘ um“, riet Dirkes seinem Kunden.

Responsive? – Das heißt „reagierend“, erfuhr Volker Hanisch von seinem Dienstleister. Der Fachbegriff beschreibt die Fähigkeit von Webseiten, sich dem Bildschirm anzupassen, auf dem sie gerade angezeigt werden. Statt, wie in der Vergangenheit üblich, aus fest positionierten Elementen mit starren Pixelmaßen „sind die neuartigen Seiten aus flexiblen Bausteinen zusammengesetzt, deren Größe, Form und Platzierung sich je nach Endgerät des Nutzers verändert“, so Dirkes.

Bevor der amerikanische Webdesigner Ethan Marcotte das dahinter stehende Konzept 2010 erstmals der Öffentlichkeit vorstellte, kannten Website-Betreiber im Grunde nur eine Option, um mobilen Nutzern das unnötige Herunterladen, Vergrößern und Herumschieben von viel zu großen Bildern, zu kleinen Texten und unpraktischen Bedienelementen auf ihren Handys zu ersparen: Sie mussten eine zweite, handyoptimierte Seite bauen. Und gegebenenfalls noch eine weitere, für die damals gerade aufkommenden Tablets.

Bis 1200 Euro für den Umbau

„Zusätzliche Seiten bedeuteten aber stets auch zusätzlichen Aufwand für Programmierung, Aktualisierung und Pflege“, gibt Daniel Dirkes zu bedenken. Deshalb sei diese Mehrgleisigkeit zwar für große Portale wie Spiegel.de oder T-online eine praktikable Lösung. „Für kleinere Unternehmen, die die Homepage eher nebenbei mit pflegen, kam sie hingegen kaum infrage.“

„Bei responsiven Seiten hingegen greifen die unterschiedlichsten Geräte grundsätzlich auf dieselben Inhalte zu – nur die Darstellung verändert sich“, beschreibt Dirkes den entscheidenden Vorteil. Der Mehraufwand für den Betreiber beschränke sich deshalb im Wesentlichen auf den Umbau seiner bereits vorhandenen Onlinepräsenz.

„Für eine Homepage wie etwa die der Firma Hanisch müssen dafür etwa 1000 bis 1200 Euro einkalkuliert werden“, prognostiziert der Experte, dessen Agentur sich als Marketingdienstleister speziell für Handwerksunternehmen, Fachverbände und Handwerkskammern bundesweit einen Namen gemacht hat. Wer hingegen ohnehin eine neue Homepage für seinen Betrieb plane, für den falle der Unterschied zwischen einer konventionellen und einer responsiven Website „noch weniger ins Gewicht. Der Programmieraufwand ist für beide Varianten häufig vergleichbar“.

Sogar Selbermacher müssen auf die modernen flexiblen Websites nicht verzichten. So bringen viele der beliebten Onlinebaukästen für Homepages, etwa von 1&1, Strato oder Jimdo, inzwischen entsprechende Fähigkeiten mit. Mit den Baukästen lassen sich Internetpräsenzen ohne Programmierkenntnisse realisieren (siehe Teil 1 der Serie im Juni-Heft). „Anwender sollten allerdings schon bei der Auswahl des Grunddesigns auf das Kriterium ‚responsive‘ achten“, rät Robert Brandl vom Portal websitetooltester.de, „denn bei vielen Anbietern ist nur ein Teil der Gestaltungsvorlagen dafür ausgelegt.“ Nicht immer sei das nachträgliche Ändern des Basislayouts ohne Weiteres möglich. „Ein nachträglicher Wechsel auf Responsive Design kann sogar den kompletten Neubau der Seite bedeuten“, warnt der Experte.

Die richtigen Templates wählen

Auch bei Webgeneratoren wie Magix Webdesigner oder Zeta Producer, die auf dem eigenen Rechner installiert werden, oder bei Online-Redaktionssystemen wie WordPress oder Joomla empfiehlt es sich, bereits bei der Auswahl von Layoutvorlagen (Templates) auf Responsivität zu achten. Zwar ist bei letzteren eine nachträgliche Anpassung in jeder Hinsicht möglich, „diese erfordert jedoch umfassende Programmierkenntnisse“, gibt Webdesigner Andreas Gräber von Artland Marketing zu bedenken.

Details, mit denen sich Volker Hanisch von vornherein nicht befassen wollte. Deshalb legte der Dachdecker- und Zimmermeister die „Mobilmachung“ seiner Homepage komplett in die Hände seiner Agentur. „Weil die Website inhaltlich und optisch unverändert bleiben sollte, nicht allzu umfangreich war und mit Joomla auf einem modernen System beruhte, empfahlen wir Umrüstung statt Neubau, auch aus Kostengründen“, berichtet Andreas Gräber (mehr Info siehe rechte Seite oben).

Element für Element programmierte Gräber Hanischs Website auf Flexibilität. „Die Homepage passt sich heute in vier Stufen der jeweiligen Bildschirmbreite an“, erklärt der Internetprofi (siehe oben). Technisch sei zwar auch eine stufenlose Anpassung möglich, „dann hätten wir jedoch weniger Kontrolle über das Erscheinungsbild und somit die Bedienfreundlichkeit“, argumentiert Gräber. Denn die Vielfalt der Mobilgeräte und damit auch der Bildschirmauflösungen sei inzwischen schier unüberschaubar.

Dem Druck von Google begegnen

„Mehr Nutzerfreundlichkeit“ nennt Volker Hanisch denn auch als wichtigste Motivation für die Modernisierung seiner Website. Zwar seien die Auftragsbücher für ihn und seine fünf Mitarbeiter bis in den Winter hinein schon so gut gefüllt, dass er vor Monaten die bis dahin regelmäßig platzierte Suchmaschinen-Werbung vorübergehend einstellte. „Das Internet wird für uns aber langfristig nicht weniger, sondern mehr Bedeutung erhalten“, gibt sich der Firmenchef keinen Illusionen hin.

Die Fakten unterstützen diese Einschätzung. So kündigte Google an, nicht mobiltaugliche Webseiten künftig von Trefferanzeigen auf mobilen Geräten auszuschließen. „Damit drohen Firmen mit konventionellen Websites für viele Nutzer unsichtbar zu werden“, warnt Daniel Dirkes. Einer Studie der Initiative D21 zufolge hat sich die Zahl der Smartphone-Besitzer zwischen 2012 und 2014 mehr als verdoppelt (von 24 auf 58 Prozent), die der Tablet-Nutzer sogar auf 26 Prozent verfünffacht.

Thorsten Schäfer vom Königsteiner Siegfried-Vögele-Institut, einer Forschungseinrichtung der Deutschen Post DHL, kennt die typischen Anwendungen je Geräteklasse. Während Tischrechner und Notebook für sicherheitssensible Tätigkeiten wie etwa das Onlinebanking genutzt werden, sind Tablets das ideale Medium, um sich „zurückzulehnen und zu konsumieren“. Smartphones bildeten „die persönliche Kommunikationszentrale“ für schnelle Informationen in jeder Lebenslage. Mit einer differenzierten Gestaltung ihrer Onlineangebote könnten Firmen den unterschiedlichen Erwartungen ihrer Nutzer entgegenkommen, plädiert Schäfer (siehe Online rechts).