GESCHRIEBEN VON

Tim Kaufmann
Tim Kaufmann ist Geschäftsführer der Webagentur Taquiri GmbH, Referent und Fachautor. Seit 1996 realisiert er Websites für kleine und mittlere Unternehmen im Rhein-Main-Gebiet und Mittelhessen. Taquiri setzte als eine der ersten deutschen Agenturen bei Kundenprojekten Responsive Webdesign ein.

Mobiles Webdesign in der Praxis

Geschrieben von Tim Kaufmann

Es wird heute kaum noch bestritten, dass Websites auch auf Smartphones und Tablets komfortabel funktionieren müssen. Für Websitebetreiber bleiben dabei aber noch viele Fragen offen:

Wie geht man am besten vor? Was sollte man mindestens tun? Was geht dann noch zusätzlich? Was ist bei der Umsetzung zu beachten?

 

Darum lohnt sich „Mobile first“ immer

Unter „Mobile first“ versteht man das Prinzip, nach dem eine neue Website zunächst auf dem Smartphone entsteht. Erst später in der Entwicklung folgen dann die Anpassungen für die Desktop-Version. Das mag etwas überambitioniert wirken, bedenkt man, dass heute im Durchschnitt „nur“ 30 Prozent der Website-Besuche auf Smartphones und Tablets erfolgen (mit starken Schwankungen von Website zu Website). Doch auch für die Desktop-Version bringt Mobile first massive Vorteile mit sich.

Plant man eine Website zunächst für das Smartphone, dann führt der begrenzte Platz auf dem Display zur Beschränkung auf das Wesentliche. Die Website wird das zeigen, was wichtig für Besucher und Unternehmensziele ist. Für Füllmaterial gibt es keinen Raum. Mobile first zwingt also alle Beteiligten zu einer klaren Definition des inhaltlichen Kerns der Website und zu einem Höchstmaß an Konzentration, von dem zwangsläufig auch die auf Basis der mobilen Website entstehende Desktop-Version profitiert. Schließlich ändern sich die inhaltlichen Prioritäten nicht, weil mehr Bildschirmplatz zur Verfügung steht.

Aus diesem Grund sollten mobile und Desktop-Website in der Regel auch dieselben Inhalte und Funktionen zeigen. Das ist wichtig für Besucher, deren Hauptzugangsgerät das Smartphone ist. Es ist außerdem wichtig für Nutzer, die Ihre Website zunächst per PC besuchen und später mit dem Smartphone zurückkehren. Der identische Informationsgehalt verhindert vergebliches Suchen und damit Frustration.

5 Pflichten für mobile Websites

Die folgenden Vorschläge zur Gestaltung einer mobilen Website sind das, was wir zum Pflichtprogramm für mobile Websites zählen. Mit der Umsetzung dieser Vorschläge verbessern Sie das mobile Erlebnis nämlich enorm. Außerdem profitieren auch die Nutzer der Desktop-Version davon:

  1. Kern der mobilen Optimierung ist die Technik des so genannten Responsive Webdesigns. Dabei passt sich die Website in ihrem Erscheinungsbild automatisch an die Größe des Displays beziehungsweise  Browser-Fensters an – zusätzlicher Code macht es möglich. Die Notwendigkeit, interessante Bereiche einer Seite zu vergrößern, damit sie auch auf dem Smartphone lesbar werden, entfällt.
  2. Der Inhalt sollte möglichst weit oben auf der Seite beginnen. Deshalb sollten Sie Informationen möglichst weit oben auf der Seite platzieren. Entsprechend kleiner fallen Firmenlogo und Navigation (Menü) aus. Das Hauptmenü verschwindet dabei aus Platzgründen häufig hinter einem einzigen Knopf, der drei waagerechte Striche untereinander zeigt. Besser ist das Wort „Menü“, denn es wird von deutlich mehr Nutzern verstanden. Auf langen Seiten sollte es einen Knopf „Zurück nach oben“ geben, der langatmiges Zurückscrollen überflüssig macht. Auch die Wiederholung der Links aus dem Hauptmenü im Fußbereich der Seite kann helfen, die Zahl der Scroll-Vorgänge zu reduzieren. (Beispiel A im linken Bild)
  3. Kommen Sie dem oft eiligen, wenig konzentrierten Verhalten Ihrer mobilen Besucher im Textaufbau entgegen: ein kurzes Fazit am Anfang ermöglicht eine rasche Einschätzung jeder Seite. Je weiter man scrollt, um so detaillierter wird der Text. Zwischenüberschriften, Aufzählungen und Icons erleichtern das Überfliegen des Inhaltes.  (Beispiel B im linken Bild)
  4. Widerstehen Sie der Versuchung, alles etwas kleiner zu machen, damit es auf das Display passt! Fingerkuppen sind viel breiter als Mauszeiger. Dementsprechend müssen Links, Knöpfe und andere Bedienelemente in der mobilen Ansicht größer erscheinen und mit mehr Abstand zueinander platziert werden. Testen Sie selbst, ob Sie die Bedienelemente Ihrer Website präzise bedienen können. Ein Test mit dem kostenlosen Google PageSpeed Insights verschafft zusätzliche Klarheit. (Beispiel C im linken Bild)
  5. Abseits von WLANs sind mobile Internetverbindungen teuer, nur bedingt verlässlich und nicht immer die schnellsten. Tun Sie deshalb alles, um die Seiten zu beschleunigen, zum Beispiel durch eine Reduktion des Datenvolumens und hochwertiges Webhosting. Auch die Ladezeit der Desktop-Ansicht Ihrer Website profitiert davon.

Die Kür für mobile Websites

Menschen benutzen ihre Smartphones wirklich überall: zu Hause, auf der Arbeit, beim Einkaufen, als Pendler, während des Fernsehens, im Bett, in der Warteschlange und während zahlreicher anderer, oft nur kurzer Pausen. Dadurch gibt es viele neue Situationen und Orte, in und an denen Ihr Unternehmen online nützlich sein und Besucher erreichen kann.

Wenn Sie nun überlegen, welche neuen Möglichkeiten Sie künftig nutzen möchten, dann sollten Sie die Website nur als einen von mehreren Bausteinen im mobilen Online-Marketing betrachten. Beziehen Sie auch weit verbreitete Apps und Dienste in Ihre Überlegungen mit ein, zum Beispiel Facebook und WhatsApp. Wie werden Sie dort sichtbar? Außerdem gilt: Nur für wenige Unternehmen rechnen sich die eigene App und andere technisch aufwendige Lösungen. Entscheiden Sie sich doch für eine App, konzentrieren Sie sich auf einfacher umzusetzende Funktionen, die Ihnen und Ihren Kunden den größten Nutzen bringt.

Einige Praxisbeispiele:

  1. Ein Arzt informiert Patienten via Website und Kurznachrichten über aktuelle Terminverzögerungen. Das verkürzt Wartezeiten.
  2. Ein Restaurant nimmt Tischreservierungen online entgegen. Das funktioniert spontan und überall und erspart Telefonate.
  3. Ein Kosmetikunternehmen berät Kundinnen, nachdem sie per Smartphone ein Selfie aufgenommen und über die mobile Website hochgeladen haben.
  4. Ein Fitnessstudio veröffentlicht die „Trainingstipps des Tages“ in einem besonders mobilfreundlichen Format und lädt so zum spontanen Check der Website während einer Pause ein.
  5. Ein Obstbauer trägt seine Verkaufsstände bei Google My Business ein, erhöht so seine Sichtbarkeit in der lokalen Suche und damit in der Karten-App auf dem Smartphone.
  6. Ein Onlineshop bietet eine Beratung per WhatsApp-Chat an. Mehr Verkauf, weniger Rücksendungen.
  7. Ein Personalberater bietet Kunden und Kandidaten eine Anfahrtsbeschreibung, die den aktuellen Standort des Smartphones für die Routenplanung automatisch abfragen kann.
  8. Ein Anbieter maßgeschneiderter Gardinen bietet eine für das Smartphone optimierte Aufmaßanleitung und ein Webformular, in das sich die Maße direkt vor Ort eintragen lassen.

Mobile Nutzertypen und -gruppen

Bei Google unterteilt man mobile Nutzer in drei Gruppen, die man nach ihrem Informationsbedarf als „sofort und dringend“ beziehungsweise „wiederkehrend und dringend“ bezeichnet; als dritte Gruppe weist Google die der „gerade gelangweilten“ Nutzer aus.

Die Bedürfnisse dieser Gruppen hinsichtlich Inhalten und Navigation weichen voneinander ab, doch in einem gleichen sich die verschiedenen Nutzer auch: sie müssen sich sehr häufig zugleich auf das Smartphone und auf ihre Umgebung konzentrieren, sind also tendenziell abgelenkt. Das erhöht den Anspruch an die Einfachheit und Klarheit des Informationsangebotes. Umgekehrt bedeutet es aber nicht, dass Sie auf komplexere Website-Funktionen am Smartphone verzichten müssen. Angesichts von Milliarden von Kurznachrichten, die täglich auf winzigen Bildschirmtastaturen getippt werden, kann man der Masse der Nutzer ziemlich großes Durchhaltevermögen bescheinigen. Voraussetzung dafür ist natürlich, dass die Website einen Nutzen in Aussicht stellt, der für die Mühen entschädigt.

Fazit

Die Optimierung von Websites für mobile Endgeräte erhöht die Anforderungen an alle, die an Ihrer Website arbeiten, vom Auftraggeber über den Web-Architekten und Designer bis hin zum Programmierer. Dafür entschädigt sie mit einer Vielzahl von Vorteilen, auch für die Desktop-Version. Und falls Sie heute schon über kleine Displays hinaus denken: dank Responsive Webdesign kann sich Ihre Website nicht nur an Smartphones anpassen, sondern auch an große Displays, TV-Geräte und Präsentationswände.