Stuttgart, mobile Webseiten, Apps, webdesign, mobile Endgeräte, iPad, iPhone, Samsung Galaxy, Smartphone, Tablet-PC

Sperren Sie auch Ihre Website-Besucher aus?

55% der 14 - 29 Jährigen und 37% der Gesamtbevölkerung nutzen bereits das Internet über Smartphone oder Tablet-PC.

Quelle:Bitkom

Mediennutzung Deutschland Quelle: Bitkom

Die digitale Entwicklung schreitet rasant voran:

Laut einer Veröffentlichung der Wirtschaftsprüfungsgesellschaft pwc (PricewaterhouseCoopers) vom 12. Juni 2012,

werden bis 2016 mehr als 3 Milliarden Verbraucher weltweit das Internet auf mobilen Geräten nutzen.

Quelle:pwc

Die meisten Websites in Deutschland sind auf diesen Trend noch nicht eingestellt:

Bsp: Webseite der Bundesregierung Stand: Juni 2012

Hinweis: zum Vergrößern der Bilder bitte auf das entspechende Bild klicken

Ansicht auf verschiedenen mobilen Geräten:

Website der Bundesregierung - Normalansicht auf dem PC

Website der Bundesregierung

Normalansicht der Website der Bundesregierung auf dem PC

Website der Bundesregierung - Ansicht im IPad

Beispiel einer unkonfigurierten mobilen Webseite auf dem Tablet-PC

Website auf dem Tablet-PC in der Landscape-Ansicht
Website auf dem Tablet-PC in der Portrait-Ansicht

Website der Bundesregierung - Ansicht im IPhone

Beispiel einer unkonfigurierten mobilen Website auf dem Smartphone

Website auf dem Smartphone - Landscape-Ansicht
Website auf dem Smartphone - Portrait-Ansicht

Wie auf den verschiedenen mobilen Geräten gut zu sehen ist, wurde ein Teil der Webseite nicht auf die Größe des Bildschirms des entsprechenden Gerätes skaliert.

Aber das ist das geringste Problem. In der Regel lässt sich eine mobile Website auf dem Bildschirm hin und her verschieben, sodass der Anwender letztendlich doch zu den gewünschten Inhalten gelangt. Diese Vorgehensweise ist aber nicht benutzerfreundlich.

Ein weit größeres Problem für den Benutzer der mobilen, schlecht konfigurierten Webseite, besteht darin, dass die Interaktionsfähigkeit mit der Website eingeschränkt wird:

Selbst wenn die gesamte Seitenansicht auf die Bildschirmgröße passt, verkleinert sich auch die Schriftgröße - bis hin zur Unleserlichkeit. Schaltflächen und Verlinkungen sind jetzt so sehr verkleinert, dass ein Finger nicht mehr auf die einzelnen Einträge klicken kann.

Website verkleinert auf Bildschirmgröße Bsp. iPhone

Ansicht einer Website, die im iPhone auf Bildschirmgröße gerendert wird:

Anforderungen an eine mobile Website

Die mobile Nutzung von Internetseiten stellt besondere Anforderungen an das Design, die Benutzbarkeit (Usability) und die Programmierung:

  • mobile Webseiten werden in der Regel nicht mit einer Computermaus, sondern mit dem Finger bedient. Dementsprechend müssen die Schaltflächen der Anwendung gestaltet sein.
  • Um die Lesbarkeit bei verkleinerter Bildschirmgröße zu gewährleisten, muss der Kontrast zwischen Schrift und Hintergrund sehr hoch sein.
  • Schriften müssen der veränderten Bildschirmgröße angepasst werden.
  • Die Anordnung der einzelnen Bildschirmelemente sollte der Größe des Gerätes angepasst werden. 
  • Interaktive Elemente, wie Formulare, Links, Bildergalerien müssen in Ihrer Darstellung dem Ausgabegerät angeglichen werden.
  • Auf einem einzigen Gerät wird die mobile Site je nach Drehrichtung auf eine horizontale (landscape) - oder vertikale (portrait) Darstellung angepasst. Dieser Umstand muss in der Layout-Erstellung und auch in der Programmierung berücksichtigt werden.
  • Flash-Websites, bzw. Flash-Filme werden auf den meisten mobilen Endgeräten nicht mehr unterstützt. die Alternative heißt HTML5.

Lösungen

Um eine Webseite fit für die Zukunft zu machen und auf die Handhabung mit mobilen Geräten abzustimmen, gibt es unterschiedliche Lösungsansätze und Techniken: dazu gehören u.a

  • Responsive Webdesign

    hierzu wird eine einzige Webseite auf die Benutzung mit mobilen Geräten angepaast. Design und Position der Inhaltselemente werden dadurch beeinflusst, do dass die Webseite je nach Ausgabegerät einen anderen Aufbau einnimmt. Vorstellen kann man sich das Ganze in etwa wie eine "Gummiseite", die sich den Gegebenheiten anpasst.
  • JQuery Mobile-App

    sieht eher aus wie eine App und lässt sich auch so bedienen. Wird in der Regel unabhängig von der Webseite programmiert.
  • eine eigene Webseite in HTML5 und CSS3

    Hier werden individuelle Anpassungen direkt im Quellcode und im Seiten-Stylesheet der Seite gemacht. 

Welche von diesen Lösungen für Sie in Frage kommt, ist abhängig von der programmiertechnischen Qualität und den Inhalten Ihrer Ausgangsseite und muss im Einzelfall detailliert untersucht werden. Lassen Sie sich doch beraten und nehmen Sie Kontakt auf:

>> Anfrage für eine mobile Website