09.02.2013 von Kommentar schreiben

Design-Optimierung für Mobile Websites - Marketing oder Benutzerfreundlichkeit?

Die Optimierung deiner Webseite für mobile Geräte ermöglicht es dir, einen inzwischen großen Teil des Internetmarkts zu erreichen. Eine mobile Webseite bereitzustellen ist demnach kein Luxus mehr, sondern Pflicht für einen stetig wachsenden Smartphone und Tablet Markt. Falls du es bisher nicht geschafft (oder nicht für nötig gehalten) hast deine Webseite entsprechend zu optimieren, solltest du das nun schnellstmöglich nachholen. Das Minimum sollte, sofern du Wordpress-Nutzer bist, ein mobiles Template sein, auch wenn das keine dauerhafte Lösung ist.

Vincent Clark, Content Strategist bei USB Memory Direct, beschreibt in diesem Artikel die verschiedenen Typen von Rich Content und Best Practices um sie für mobile Endgeräte vorzubereiten. Er geht dabei außerdem auf Responsive Webdesign ein und darauf, wie du dessen Prinzipien auch auf deine Content Marketing Strategie anwenden kannst.

In den Kommentaren kannst du deine eigenen Erfahrung mit Responsive / Mobile Design teilen und auftretende Fragen stellen. Vincent und ich werden uns bemühen diese bestmöglich zu beantworten!

 

Was ist Responsive Design?

Responsive design ist im Grunde ein flexibles Layout welches sich automatisch an die Größe deines Screens (d.h. Browsers) anpasst. Das heißt, du kannst für verschiedene Displaygrößen entsprechend der Höhe, Breite, Auflösung und Ausrichtung verschiedene Layouts gestalten. Der Grund ist offensichtlich: Webseiten die für "normale" Desktop-Bildschirme optimiert sind, sprich einer Auflösung ab 1024Pixel, werden auf mobilen Geräten komplett zerrissen. Das beeinflusst natürlich die "User Experience" und vertreibt Besucher.

Responsive Webdesign geht allerdings über die reine Größenanpassung hinaus. Es geht vielmehr um die Anpassung von Schriftarten & -größen, von Rich Media und Navigationselementen an die Bedürfnisse mobiler Nutzer. Ein gutes Bespiel hierfür ist die Vergrößerung der Navigationsbuttons um sie für Touch-Eingaben zu optimieren, sie aber gleichzeitig z.B. durch ein Drop-Down Menü platzsparender umzusetzen.

Eine schöne Sammlung von Tipps zum Thema findest du im Smashing Magazine.

 
Responsive Webdesign

Wie interagieren mobile User mit dem Web?

Elementar für die Optimierung ist das Wissen um die mobile Nutzung von Webseiten im Vergleich zum Computerbildschirm. Ein erster Schritt kann dafür sein herauszufinden, wie viele Besucher überhaupt von mobilen Geräten auf deine Webseite zugreifen - Google Analytics und Co. geben hier Aufschluss. Um die künftigen Änderungen bewerten zu können empfiehlt es sich, hier einige Daten zu notieren (bspw. die meistbesuchten Seiten und die auf der Webseite verbrachte Zeit).

Mobile User sind oft unterwegs und besuchen deine Webseite ad hoc auf der Suche nach einer Wegbeschreibung, einem Produktvergleich oder schnellem Zugriff auf Informationen. Geschwindigkeit spielt also eine große Rolle, ebenso wie die Accessibility, also die Benutzbarkeit. Das Design muss also primär diese Aspekte beachten und die Anforderungen der Benutzer erfüllen, nicht direkt dem eigenen Sinn für Ästhetik.

 

Verzicht auf Flash und JavaScript

Wie wir wissen haben einige Geräte so ihre Probleme mit Flash (nicht nur Apple-Geräte sondern auch Android), teilweise auch mit JavaScript. So schön die Möglichkeiten mit diesen Technologien auch sind, sie bringen nichts, wenn Nutzer mobiler Geräte sie nicht sehen können. Bevor du da anfängst dich mit Workarounds rumzuschlagen rate ich dir zu HTML5 und CSS3.

 

Minimalistisches Mobile Interface

Das Ziel einer mobilen Webseite ist die Erfüllung von Besucherbedürfnissen - alles andere ist zweitrangig. Elemente die nicht zu diesen Ziel beitragen könntest du entfernen, um zum einen die Ladezeit zu verbessern und zum anderen die Ablenkung durch unnötigen zu minimieren. Werbung ist hier das typische Beispiel. So wenig wie möglich - so viel wie nötig.

 

Popups loswerden

Angenommen du benutzt Popups um Besucher dazu aufzufordern sich für deinen Newsletter anzumelden oder ein Produkt zu kaufen, dann kennst du bestimmt die Diskussion zu dieser umstrittenen Methode der Lead Generierung. Auf dem Computerbildschirm ist diese Diskussion möglicherweise berechtigt, aber hinsichtlich mobiler Endgeräte besteht hier überhaupt kein Redebedarf.

Deine Besucher haben bestimmt keine Zeit und Lust sich mit deinen Call to Action Popups zu beschäftigen, die gerade ihren gesamten Screen blockieren. Sie wollen nur Informationen, und das möglichst schnell (und unkompliziert). Der Verzicht auf Popups und qualitativ hochwertiger Content ist hier definitiv zielführender.

 

Der "Backup-Link" zur Web-Version

Es gibt mit Sicherheit den ein oder anderen Fall wo Nutzer sich die Zeit nehmen wollen um zu surfen, bspw. beim Lesen eines Blogartikels oder wenn sie auf deine Webseite "gestolpert" sind und mehr Informationen haben möchten weil sie so hoch interessant aussieht ;-)

In diesen Fällen bevorzugen sie vielleicht die Web-Version deiner Webseite in nicht-abgespeckter Form. Auf Tablets macht das inzwischen von der Auflösung des Screens her keinen Unterschied mehr. Der Vorteil: der Besucher kann selbst wählen welche Version er anschauen möchte.

 

Immer weiter anpassen

Im mobilen Bereich gibt es quasi täglich was Neues. Das macht ständige Anpassungen nötig. Jedes neue Gerät auf dem Markt könnte die Betrachtungsweise schlagartig ändern. Oder du stellst fest, dass ein Großteil deiner Benutzer nur bestimmte Seiten aufsuchen. Letztendlich geht es darum, die Erfahrungen deiner Besucher auf der Webseite zu verbessern und ihnen die Informationen zu geben, die sie suchen.

 

Bildquelle: ZERGE_VIOLATOR / flickr.com

Vincent Clark

Über den Autor

Vincent Clarke is a content strategist at USB Memory Direct. He enjoys writing and identifying opportunities to add value through content, regardless of medium. You can connect with him on Twitter @_vhclarke.

Gefällt dir was du liest?

Melde dich für meinen Newsletter an und erhalte alle neuen Beiträge per Mail. Dazu schenke ich dir mein E-Book zu Content Design plus ein ganzes Kapitel aus meinem Buch Blog Boosting mit knapp 100 Seiten!

Kommentare

Schreibe deinen Kommentar

Du willst deinen Text formatieren oder einen Link platzieren? Kein Problem, du findest eine Anleitung hierzu in den Kommentarrichtlinien.