Mobiles Webdesign in der Praxis

Transkript

1 Mobiles Webdesign in der Praxis UNDER CONSTRUCTION Mobiles Webdesign in der Praxis Gute Websites für alle Displays 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? Dieser Leitfaden gibt einen Überblick. 1 1

2 MOBILES WEBDESIGN IN DER PRAXIS 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. Die nach dem Mobile-first-Prinzip gestaltete Website des Hessischen Website Awards 2 3

3 MOBILES WEBDESIGN IN DER PRAXIS 5 Pflichten für mobile Websites A B 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. C Nestgold GbR, Wiesbaden Zweiter Preisträger des Hessischen Website Awards 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 5

4 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 auf S. 4) 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. Eagle Adventure Tours, Marburg Erster Preisträger des Hessischen Website Awards 2014, Dritter Preisträger des Hessischen Website Awards 2011 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. 6 7

5 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. Kein Messenger wird in Deutschland häufiger genutzt als WhatsApp. 8 9

6 MOBILES WEBDESIGN IN DER PRAXIS 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. Download aller BIEG-Leitfäden unter Stand: September 2016 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. Über den Autor Tim Kauf mann ist Geschäfts führer der Webagentur Taquiri GmbH, Refe rent und Fach autor. Seit 15 Jahren rea li siert er Web sites für kleine und mitt lere Unter nehmen im Rhein-Main-Gebiet und Mit tel hessen. Taquiri setzte als eine der ersten deut schen Agen turen bei Kun den projekten Res pon sive Web de sign ein. Tim Kaufmann Taquiri GmbH & Co. KG 10 11

7 Mobiles Webdesign in der Praxis Smartphones und Tablet-Computer lösen den PC als das wichtigste Internet-Zugangsgerät ab. Websites werden nun auch durch die Berührung mit den Fingern gesteuert, und selbst handtellergroße Displays müssen ausreichen, um den Auftritt anzuzeigen. Wie Sie Ihre Website für die gewachsenen Anforderungen optimieren und warum davon alle Besucher profitieren darum geht es in diesem Leitfaden. Impressum Herausgeber BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon 069 / Telefax 069 / info@bieg-hessen.de Das BIEG Hessen ist eine GbR und wird vertreten durch die Gesellschafter IHK Frankfurt am Main, IHK Hanau-Gelnhausen-Schlüchtern, IHK Fulda und IHK Offenbach am Main. Träger des BIEG Hessen Industrie- und Handelskammern: Frankfurt am Main Fulda Hanau-Gelnhausen-Schlüchtern Offenbach am Main Verantwortlich für den Inhalt Detlev Osterloh, Geschäftsführer, BIEG Hessen, IHK Frankfurt am Main Druck Daab Druck & Werbe GmbH, Reinheim Layout und Titelbild Birgit Dürr HERAUSGEBER BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon Telefax info@bieg-hessen.de