Webseiten mobilfähig machen

Mobile Endgeräte kann heute kein Webseitenbetreiber ignorieren. „Mobile first“ ist dabei die Devise, wenn man ein Projekt auf der grünen Wiese startet. Ein richtiger Ansatz, wenn man sich um keine Altlasten kümmern muss. Wie geht man aber vor, wenn die Webseite schon steht und die Inhalte recht aktuell sind?

Evaluation der vorhandenen Webseiten

Vielfach sind Inhalte, die für eine Desktop-Version erstellt wurden, nicht für die Nutzung durch mobile Endgeräte geeignet. Häufig müsste man sogar alles auf den Prüfstand stellen und vieles überarbeiten. Die Ressourcen dafür zu erhalten ist jedoch oft nicht durchzusetzen. Es muss ja auch alles in einem vertretbaren Rahmen bleiben und zu Beginn braucht auch nicht alles perfekt sein. Man beginnt sozusagen eine Reise, die auch zu besseren Inhalten für die Desktop-Version führt.

So ist es am Anfang oft besser die echten Problemfälle zu identifizieren und zu entscheiden, wie man damit umgehen möchte. Ohne diese Analyse kann man den Aufwand kaum abschätzen und erhält keine Vorstellung, wie eine mobile Version aussehen kann. Oft wird sich dabei herausstellen, dass es gar nicht so wirklich viele Problemfälle gibt und viel automatisiert angepasst werden kann.

Mobile Webseiten: Alles oder gar nichts?

Bei Diskussionen zu mobilen Webseiten stellt sich fast immer die Frage, ob man alles oder nur Teile der Inhalte anbieten möchte. Reduzierte Inhalte haben natürlich den Vorteil, dass man leichter damit auf dem Smartphone umgehen kann. Das bedeutet natürlich auch für die Designer, dass es einfacher ist eine mobile Seite zu entwickeln, die eine gute Usability hat.

Aber Hand aufs Herz. Wer hat sich nicht schon geärgert, dass eine mobile Version genau das nicht ermöglicht, was man gerade machen möchte. Meiner Meinung nach sollte man sich einfach die Mühe machen eine komplette mobile Seite zu erstellen. Eine reduzierte Version muss es dem Nutzer aber auf jeden Fall ermöglichen die Desktop-Version zu öffnen, wenn das Gesuchte nicht gefunden wird.

Einen Klick-Dummy für die Diskussion erstellen

In unzähligen Diskussionen habe ich es schon erlebt, dass einige Teilnehmer Probleme hatten zu visualisieren, was gerade erklärt wurde. Bei den Diskussionen zur mobilen Versionen hilft es deshalb einen Klick-Dummy zu erstellen, der zeigt, was passiert, wenn man den Browser in der Breite reduziert. Damit kann man sehr gut zeigen, dass vieles schon gut funktioniert und die eine oder andere Problemstelle demonstrieren.

Diese Vorgehensweise verkürzt die Diskussionen erheblich. Außerdem können alle beteiligten damit hausieren gehen und schon einmal Mitstreiter gewinnen, denn es wird längst noch nicht von jedem eingesehen, dass man eine mobile Version benötigt.

Muss die mobile Webseite in allen Bereichen perfekt sein?

Durch die steigende Zahl an Browsern und Endgeräte kann man heute unmöglich alle Konstellationen testen. Perfektionismus, wie bei Broschüren oder Plakaten, ist deshalb heute nicht mehr möglich. Es wäre vermessen zu behaupten, man könnte dies bei Webseiten erreichen. Zu unterschiedlich interpretieren Browser die Inhalte, zu verschieden sind die Möglichkeiten der Darstellung.

Das heißt natürlich nicht, dass man alles dem Zufall überlassen sollte. Ein sorgfältiger Test sollte auf jeden Fall eingeplant werden. Im ersten Schritt sind dazu sicher entsprechende Tools das geeignete Mittel, aber es sollte nicht vergessen werden die eigene Arbeit mit „richtigen“ Smartphones zu überprüfen. Dazu genügt aber eine kleine Auswahl der gängigsten Modelle und Betriebssysteme aus.

Bei vielen Testumgebungen/Firmennetzwerk ist der Zugriff mit dem Smartphone sicherlich nicht so einfach zu lösen. Deshalb sollte man früh genug daran denken, die Geräte zu besorgen und den Zugriff sicherzustellen.

Der Weg zu einer guten mobilen (Desktop-) Version

Wie schon erwähnt, wird es nicht funktionieren die Inhalte der Desktop-Version einfach so zu übernehmen. Man muss also im CMS eine Möglichkeit schaffen für die mobile Webseite andere Inhalte zur Verfügung zu stellen, als für die Desktop-Version. Dabei sollte man jedoch darauf achten, dass alles am gleichen Platz editiert wird, damit beim Erstellen und updaten der Inhalte nicht einzelne Stellen vergessen werden. Inkonsistente Webseiten wären dann die Folge.

Dazu wären z. B. die folgenden Szenarien denkbar.

  • Man fügt im CMS jedem Inhaltselement die Wahlmöglichkeit hinzu, ob dieses bei der mobilen Version, der Desktop-Version oder bei beiden gezeigt wird.
  • Es gibt ein Inhaltselement, welches bei der mobilen Version gezeigt wird, wenn etwas darin steht. Ist das Element leer, wird die Desktop-Version gezeigt.

Nun wird meist ein Prozess starten, der an immer mehr Stellen optimierte Inhalte für die mobile Version zur Verfügung stellt. Das heißt, die Inhalte werden kürzer und prägnanter. Dieser Prozess läuft dann so lange, bis man feststellt, dass diese Inhalte auch der Desktop-Version gut zu Gesicht stehen. Denn auch dort ist es besser, die dargestellten Inhalte schneller erfassen zu können.

Wünschenswert wäre es, dass man auf Dauer zum gleichen Ergebnis kommt, wie bei einem Projekt auf der grünen Wiese. Man hat eine knackige mobile Version mit kurzen, aber aussagekräftigen Inhalten und die Desktop-Version nutzt diese ebenso.

Ihre Meinung

Da ich aktuell an einem Projekt zur Erstellung von mobilen Webseiten arbeite, würde ich mich über Kommentare von Ihnen freuen. Wo sehen Sie zurzeit die größten Herausforderungen?

5 Gedanken zu „Webseiten mobilfähig machen

    1. Joachim Lindner

      Automatisch geht da leider gar nichts. Eine HTML-Seite muss entsprechend programmiert werden. Ich würde eher ein CMS verwenden, wie beispielsweise WordPress nutzen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.