Sie sind hier:
Hessischer Website Award 2015 in Silber: www.nestgold.co

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.



Download

Gastautor

Tim Kaufmann
Taquiri GmbH

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.

http://www.taquiri.de

Letzte Aktualisierung: Februar 2018

Mehr zum Thema Mobile?

Weitere Infos rund ums Thema finden Sie auf dem BIEG-Blog:

...sowie in unseren anderen Webdesign-Leitfaden!

Der BIEG Newsletter

Immer auf dem Laufenden bleiben Sie mit unserem monatlichen Newsletter. Wir informieren Sie über aktuelle Veranstaltungen und unsere neuesten Leitfäden!