Webdesign

12 Punkte für bessere Mobile Webseiten

10. November 2009
von

Im Januar 2009 nutzten über 63 Millionen Menschen in den USA den Zugang zum Internet über ein mobiles Endgerät. Die Prognosen besagen, dass es bis 2013 weltweit über 1,7 Milliarden mobile Internetnutzer geben wird. Angesichts dieser Dimensionen ist es für Webdesigner und -entwickler unabdingbar, sich mit optimalen Entwicklungs- und Designlösungen für mobile Endgeräte zu beschäftigen.

Dazu ist es nicht unbedingt erforderlich, irgendwelche neue Technologien für mobiles Webdesign zu erlernen. Vielmehr muss das Design von Websites von einem anderen Standpunkt aus betrachtet werden, der entschieden restriktiver ist, als das Design für Standardbrowser. Die Probleme zu meistern, die mit dem mobilen Webdesign verbunden sind, erfordert jedoch die Fähigkeit zu kreativen Problemlösungen, um so zu Endergebnissen zu gelangen, die genauso benutzerfreundlich und zweckmäßig sind, wie die Ihre herkömmliche Webseite.

1. Machen Sie sich mit der verfügbaren Hardware- und Software vertraut

Hinsichtlich des Betriebssystems, der Bildschirmgröße und der Auflösung gibt es zwischen den Mobiltelefonen und den mobilen Endgeräten erhebliche Unterschiede. Sie müssen sich mit den Möglichkeiten auf dem Markt vertraut machen und sich entscheiden, für welche Plattform(en) Sie Ihre Webseite optimieren möchten.

Die derzeit gängigsten Betriebssysteme sind Windows Mobile, die iPhone-Plattform, Palm OS, Mobile Linux, Symbian OS, die BlackBerry-Plattform und Android (das dank des jüngsten Abkommens zwischen Verizon und Google ein erhebliches Wachstum verspricht). Es gibt noch andere proprietäre, speziell auf bestimmte Mobiltelefone zugeschnittene Betriebssysteme, wie sie beispielsweise auf einigen Verizon-Modellen und bestimmten Markenhandys zu finden sind. Sie müssen versuchen einzuschätzen, welche Betriebssysteme Ihre Nutzer am wahrscheinlichsten einsetzen würden. Wenn Ihre Besucher hauptsächlich Geschäftsleute sind, so müssen Sie sicherstellen, dass Ihre Webseite auf Windows Mobile-Endgeräten und BlackBerrys gut aussieht. Wenn Ihre Nutzer jünger, trendbewusster oder technikbegeisterter sind, dann ist es sinnvoll, Ihre Webseite für iPhones und Android-Geräte zu optimieren. In jedem Fall gilt es sicherzustellen, dass Ihre Webseite von einem Großteil der mobilen Plattformen zumindest genutzt werden kann.

StatCounter Mobile OS Stats

Ein weiterer zu berücksichtigender Faktor sind die Browser der mobilen Endgeräte. Einige der weiter verbreiteten Browser beinhalten Safari (für das iPhone), den Android-Browser, Opera Mobile, dem WebOS-Browser (auf Palmtop-Geräten), den BlackBerry-Browser und Internet Explorer Mobile (auf mobilen Windows-Endgeräten). Auf Nokia- und anderen Markengeräten werden auch weitere Browser verwendet. Einige dieser Browser basieren auf proprietären Codes, während andere auf WebKit (Android, Safari), Gecko (Fennec, ein Mozilla-Browser) oder anderen gängigen Plattformen aufbauen.

StatCounter Mobile Browser Stats

Letztendlich müssen Sie sich Gedanken darüber machen, welche Bildschirmgröße und -auflösung die Besucher Ihrer Webseite vermutlich verwenden. Ihre Webseite sollte auf der größtmöglichen Bandbreite der von Ihren Besuchern gegebenenfalls benutzten mobilen Endgeräte funktionieren. Bei Mobiltelefonen sind gebräuchliche Auflösungen 101 × 80 Pixel (viele Modelle von Sony Ericsson), 128 × 128 Pixel (einige Samsung-Modelle) und 120 × 160 Pixel (viele Motorola-Handys). Bei Smartphones ist die Spanne noch größer. iPhones haben eine Displayauflösung von 320 × 480 Pixeln, das HTC Touch Pro hat einen 480 × 640 Pixel Display, das Palm Pre hat einen 320 × 480 Display, das BlackBerry Storm einen 360 × 480 Pixel und das HTC Venus einen sage und schreibe 800 × 480 Pixel Display. Auf vielen dieser Displays lassen sich normale Webseiten problemlos darstellen, ohne dass es nennenswerte Probleme gäbe.

2. Vereinfachen Sie

Ihre für mobile Endgeräte optimierte Webseite sollte unbedingt einfacher sein als Ihre normale Webseite. Die einzige Ausnahme bilden ohnehin schon minimalistische Webseiten. In den meisten Fällen hilft es schon ungemein, viele der grafischen Elemente Ihrer Webseite zu eliminieren, um die Darstellung auf mobilen Endgeräten zu verbessern. Suchen Sie nach Möglichkeiten, sowohl das Design als auch die Funktionalität Ihrer Webseite auf jede erdenkliche Weise zu vereinfachen. Dies kann beinhalten, Ihre Menüs neu zu gestalten, Bilder wegzulassen, den Text auf mehrere Seiten aufzuteilen oder das Layout und die Funktionsweise Ihrer Webseite anderweitig zu verändern.

Beispiele

A List Apart

The Onion

Amazon Kindle Store

3. Verwenden Sie gültige Markups

Angesichts der großen Vielfalt möglicher Betriebssysteme und Browser, mit denen die Benutzer auf Ihre Webseite zugreifen können, gewinnen Webstandards zunehmend an Bedeutung. Die meisten Standard-Browser tolerieren schlecht programmierte Codes weitestgehend. Bei Browsern für mobile Endgeräte werden abweichende Tags nicht ohne weiteres geduldet. Stellen Sie sicher, dass Sie gültige Codes benutzen, die darüber hinaus so sauber und minimalistisch wie möglich programmiert sind.

4. Geben Sie den Besuchern Gelegenheit, auf die normale Webseite zuzugreifen

Je nach Art des benutzten Ausgabegerätes möchten Ihre Besucher unter Umständen auch auf Ihre normale Webseite zugreifen. Dies gilt insbesonders für viele hochwertige Smartphones und das iPhone – letzteres kann herkömmliche Webseiten hervorragend und ohne nennenswerte Probleme darstellen. Bieten Sie Ihren mobilen Besuchern die Möglichkeit, auf die normale Webseite zuzugreifen, selbst wenn dies nur durch einen Link in der Fußzeile (wo die meisten von uns ohnehin schon automatisch suchen) geschieht. Ein zusätzliches Plus ist, Ihren Besuchern die Option der Rückkehr auf die mobile Webseite zu ermöglichen, ohne die Zurück-Taste benutzen zu müssen.

Beispiele

Geek Squad

Julian Andrade

Weather Underground

5. Verwenden Sie für die mobile Webseite ein anderes Leitmotiv

In einigen Fällen ist es durchaus sinnvoll, Ihre bestehende Homepage für mobile Endgeräte zu optimieren – in vielen Fällen ist es jedoch viel einfacher, ein eigenständiges Layout für mobile Anwendungen zu wählen. Dies lässt sich realisieren, indem man einfach das CSS für mobile Endgeräte in den meisten CMS ändert. Ein eigenständiges Layout für mobile Anwendungen bedeutet, dass Sie wirklich berücksichtigen können, wie die Webseite bei Ihren Benutzern angezeigt wird, und sie speziell hierfür auslegen können. Einige Webseiten gehen sogar so weit, dass sie ein Design für normale mobile Endgeräte und ein weiteres speziell für die Nutzer von iPhones haben.

Beispiele

Gamespot

Marmalade on Toast

Watchmen UK

6. Begrenzen Sie das Scrollen auf eine Richtung

Es ist wirklich lästig, mit einem Standard-Browser auf einer Webseite in verschiedene Richtungen scrollen zu müssen. Dies ist beim Zugriff mit einem mobilen Endgerät nicht anders; im Gegenteil: es ist sogar noch schlimmer. Mit einem Touchscreen-Handy passiert es sehr leicht, dass man versehentlich in die falsche Richtung scrollt (horizontal anstatt vertikal oder umgekehrt). Dieses potenzielle Ärgernis lässt sich umgehen, wenn es auf Ihrer Webseite nur eine Scrollrichtung gibt.

Beispiele

Disney

Taltopia

Mogreet

7. Vermeiden Sie Aufklappfenster oder das Öffnen neuer Fenster

Je nach der verwendeten Plattform können einem neue Fenster oder Aufklappfenster den Spaß am Internetsurfen gründlich verderben. Verzichten Sie also darauf. Wenn sich bestimmte Inhalte in einem neuen Fenster öffnen sollen, bauen Sie eine Warnfunktion ein, damit Ihr mobiler Benutzer vorher Bescheid weiß.

8. Verringern Sie die Menge an Bildern

Verwenden Sie nur die Bilder, die zur Übertragung Ihrer Botschaft wirklich erforderlich sind. Ein Logo ist in Ordnung, ebenso wie die meisten Symbole. Auch gegen Bilder, die ein fester Bestandteil des Inhalts Ihrer Webseite sind, ist nichts einzuwenden. Streichen Sie jedoch alle Bilder, die keinem anderen Zweck dienen, als der optischen Gefälligkeit. Sie kommen auf einem mobilen Endgerät ohnehin nicht gut zur Geltung, wozu also die Mühe? Manchmal lassen diese Bilder Ihre Webseite sogar schlechter aussehen oder haben merkwürdige Auswirkungen beim Scrollen oder dem Layout, wenn die Auflösung nicht den Erwartungen entspricht.

Beispiele

Radio Paradise

Raleigh Information

Topix

9. Optimieren Sie die Navigation

Hier ist zu berücksichtigen, dass viele mobile Endgeräte mit einer Touchscreen-Benutzeroberfläche ausgestattet sind. Dies sollte bei der Gestaltung des Designs stets berücksichtigt werden. Das bedeutet, dass der anklickbare Bereich um Ihre Links herum sowie die Schaltflächen etwas größer gestaltet und die Abstände zwischen den verschiedenen Links ein bisschen weiter ausfallen müssen. Der Versuch, winzige, kaum sichtbare Links anzuklicken, macht nicht gerade Freude, und zum Anklicken jedes Mal heranzoomen zu müssen, macht es auch nicht besser. Viele Webseiten verwenden für mobile Empfangsgeräte ein völlig separates Navigationslayout, das für Touchscreens oder Eingabegeräte anstelle der Maus optimiert wurde.

Beispiele

American Modern Insurance

1M Creative

Daily Horoscope

10. Verlassen Sie sich bei der Vermittlung von Inhalten nicht auf Flash, JavaScript oder ähnliche Technologien

Nicht alle Mobiltelefone und andere mobile Endgeräte unterstützen Flash oder JavaScript. Selbst wenn das der Fall ist, ist dies noch lange keine Garantie dafür, dass die aktuellste Version installiert ist. Bei Webseiten-Besuchern mit iPhones kann man Flash getrost ganz vergessen. Stellen Sie sicher, dass alle wichtigen Informationen und Funktionalitäten Ihrer mobilen Webseite mit dem guten alten (X)HTML/CSS programmiert wurden. Ansonsten laufen sie Gefahr, dass ein Großteil Ihrer Besucher Ihre Webseite überhaupt nicht nutzen kann.

11. Stellen Sie sicher, dass Weiterleitungen reibungslos funktionieren und verweisen Sie die mobilen Nutzer nicht einfach auf die eigene Homepage

Wenn man mit einem mobilen Endgerät unterwegs ist, gibt es nichts Ärgerlicheres, als einen Link anzuklicken (entweder bei den von Suchmaschinen angezeigten Ergebnissen oder bei Verweisen von anderen Webseiten) und auf die entsprechende Homepage verwiesen zu werden. Wenn Ihre Website automatisch erkennt, dass ein Besucher von einem mobilen Browser weitergeleitet wurde, dann stellen Sie sicher, dass der Besucher auch tatsächlich zu dem Link weitergeleitet wird, den er eigentlich besuchen wollte. Sonst wird er die Webseite vermutlich verlassen und nie wieder besuchen, anstatt den Versuch zu unternehmen, das Gewünschte zu finden.

12. Stellen Sie so viele Inhalte Ihrer „normalen“ Webseite ein, wie möglich

Wie oft haben Sie sich schon mit Ihrem Mobiltelefon auf eine Ihrer Lieblingswebseiten eingewählt, nur um festzustellen, dass Sie ausgerechnet auf den gewünschten Teil keinen Zugriff haben? Das passiert ständig. Stellen Sie sicher, dass Sie die Inhalte Ihrer ursprünglichen Webseite so weit als möglich auf Ihre mobile Webseite übernehmen. Stellen Sie darüber hinaus sicher, dass nicht nur die Inhalte zur Verfügung gestellt werden, sondern auch der Navigationsweg dorthin relativ unverändert beibehalten wird.

Beispiele

The Dieline

Yahoo! Mobile

Volkswagon

Weiteres zum Thema im Web

(tm), (tl), (sl)

Cameron Chapman ist eine professionelle Web- und Grafikdesignerin mit über sechs Jahren Erfahrung. Sie schreibt für mehrere bekannte Weblogs, darunter ihre eigenes Projekt Cameron Chapman On Writing. Sie ist außerdem Autorin von Internet Famous: A Practical Guide to Becoming an Online Celebrity.

2 Kommentare zu „12 Punkte für bessere Mobile Webseiten
  1. Michael am 10. November 2009 um 11:09

    Schöne Einsteiger-Übersicht zum Thema.
    Wie erkennt meine Seite eigentlich, dass sie ein Smartphone vor sich hat? Dazu habe ich, auch bei den weiterführenden links, leider nichts gefunden?

  2. Christoph am 20. Januar 2014 um 15:04

    Endlich mal ein guter Artikel für den responsiven Internetauftritt. Besonders wichtig finde ich den Punkt “Vereinfachen”. Eigentlich müsste eine responsive Website sich durch eine Kurzversion der Texte auszeichnen, da Handy-Nutzer sicherlich weniger lesen. Aber vielen Firmen ist es wohl zu aufwändig 2 Versionen zu erstellen und zu pflegen.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!