Website-Entwicklung: 5 einfache Regeln für mobile Webseiten Detail - Computerwelt

Computerwelt: Aktuelle IT-News Österreich


21.03.2011 Galen Gruman*

Website-Entwicklung: 5 einfache Regeln für mobile Webseiten

Es ist nicht schwer Smartphone- oder Tablet-Nutzern einen ansprechenden Zugang zu Ihrer Website zu bieten. Wir zeigen Ihnen, wie Sie eine Webseite erstellen, die auch auf mobilen Geräten optimal betrachtet werden kann.

Es ist ärgerlich, wenn Sie mit Ihrem iPad, iPhone, Android-Smartphone oder einem anderen mobilen Gerät auf eine Webseite surfen und eine für PCs optimierte Webseite vorfinden, auf der Sie kaum navigieren können. Es kommt manchmal sogar noch schlimmer. Sie werden beispielsweise zu einer dermaßen reduzierten Webseite weitergeleitet, auf welcher der eigentliche Sinn der Webseite nicht mehr erkennbar ist. Beide Situationen treten nur allzu häufig auf.

Aber es muss nicht so sein. Der erste Fall tritt auf, wenn die Webseite keine speziellen Anpassungen und Vereinfachungen für Web-Vorlagen verwendet. Es gibt nämlich bereits Programme, welche die Präsentation der Webseite automatisch für die kleineren Bildschirme der mobilen Geräte anpassen. Das zweite Szenario tritt auf, wenn die Seite eine der vielen „mobilen"-Dienstleistungsangebote verwendet, die das "Wichtigste" einer Webseite aufnehmen oder gar lediglich den RSS-Feed der Seite nutzen und auf eine WAP-kompatible Version reduzieren, die von nahezu jedem mobilen Gerät gelesen werden kann.

Das Problem an dem WAP-Ansatz ist, dass er nur den kleinsten gemeinsamen Nenner darstellt. Viele alte Geräte können keine Links verwenden, deswerden werden diese nicht mit in die WAP-Darstellung aufgenommen. Die alten Geräte waren einfach nicht dafür gemacht, um im Internet zu surfen. Zu dieser Kategorie gehört neben vielen Nokia Handys auch BlackBerrys, die vor dem Bold ausgeliefert wurden. Weil diese Geräte jedoch nur für 0,5 Prozent der mobilen Webaufrufe verantwortlich sind, ist es nicht sinnvoll eine Webseite gerade dafür zu optimieren. Denn unter dieser Devise müssten alle iOS- und Android-Geräte, die neueren BlackBerrys, Windows Mobile-, Windows Phone 7- und WebOS-Maschinen und die neuesten Nokia-Geräte, welche mit Symbian 3ausgestattet sind, leiden.

Deswegen sollten Sie die alten Geräte bei der Optimierung Ihrer Webseite zu Gunsten der neuen Technologie ignorieren. Mit den folgenden fünf Regeln können Sie für den rasch wachsenden mobilen Markt ansprechende Webseiten gestalten.

1. Finden Sie heraus, welche mobilen Geräte Ihre Webseite besuchen Vermutlich haben Sie bereits eine Lösung gefunden, um mit den gewissen Eigenheiten des Internet Explorers umzugehen. Entweder Sie nutzen JavaScript oder ein Server-Skript, um dieses Problem zu umgehen. Verwenden Sie den User-Agent auch für mobile Geräte und finden Sie heraus, welche mobilen Geräte Sie berücksichtigen sollten. Zytrax zum Beispiel bietet eine tolle, häufig aktualisierte Liste über User-Agents.

Tipp: Das Motorola Xoom Tablet gibt sich selbst als einfaches Android-Gerät aus, folglich kann es passieren, dass Sie das Tablet bei der Anzeige einer Webseite wie ein einfaches Smartphone behandeln. Das würde den Xoom-Nutzern jedoch Unrecht tun. Um dieser Falle zu entgehen, sollten die ebenfalls die Größe des Browser-Fensters ermitteln und diese Information für die Unterscheidung zwischen Android Tablet und Android Smartphone nutzen. Diese Unterscheidung ist für das iPad jedoch nicht notwendig, weil es einen anderen User-Agent hat als die anderen iOS-Geräte.

2. Teilen Sie Ihre Webseiten auf Nachdem Sie herausgefunden haben, welche mobilen Geräte auf Ihre Webseite zugreifen, wollen Sie diese bestmöglich darstellen. Hierfür müssen Sie die unterschiedlichen Bereiche der Webseite entwerfen. Sie können nicht einfach alles, was für eine 1024 x 768 Pixel große Bildschirmseite optimiert wurde für ein mobiles Gerät übernehmen. In der Regel haben die mobilen Geräte gerade mal 320 x 480 Pixel, folglich müssen Sie Ihre Webseite zumindest umgestalten.

Hierfür müssen Sie die Elemente in sogenannte DIV-Elemente packen, sodass Sie diese zum gegebenen Zeitpunkt weiterbearbeiten können. Sie entscheiden, welche der DIVs Sie auf welchem mobilen Gerät anzeigen lassen. Auf diese Art und Weise erstellen Sie eine sich selbst anpassende Webseite.

Tipp: Vermeiden Sie absolute Seiten- und Tabellen-Breiten oder dergleichen. Stattdessen sollten Sie wo immer möglich Prozentwerte nutzen. So vermeiden Sie Elemente, die größer sind als die Breite des mobilen Geräts. Die Geräte können die Webseite dann im Verhältnis 1:1 darstellen. (Größere Elemente werden nämlich mit der gesamten Webseite von den Mobilgeräten automatisch verkleinert.) Es gibt für diese Regel noch eine Ausnahme. Bei eingebetteten Objekten wie Bildern sollten Sie diesen eine absolute Höhe oder Breite zuweisen.

3. Arbeiten Sie sich durch die Layout-Szenarien Erst an dieser Stelle treten Ihre Design-Künste in Erscheinung. Sie müssen herausfinden, wie Ihre Webseiten in einem normalen Browser aussehen sollen. Sie müssen sich eigentlich nur um drei Größen kümmern.

1. 320- oder 480-Pixel-Breite für Smartphones: Die Größe hängt davon ab, ob Sie die Webseite für horizontales oder vertikales Betrachten optimieren wollen. Wir empfehlen Ihnen die Webseite für die Vertikale, mit einer Breite von 320 Pixeln, zu optimieren.

2. 768- oder 1024-Pixel für Tablets: Auch hier haben Sie die Wahl. Wobei wir 1024 für Tablets empfehlen würden.

3. Welche Breite bevorzugen Sie bei Desktop-Browsern? Auch hier können Sie 1024-Pixel verwenden, insbesondere wenn Sie davon ausgehen, dass die Webseite mit 17-Zoll-Monitoren, die am meisten verwendet werden, aufgerufen wird.

Zerbrechen Sie sich nicht den Kopf über die kleineren Ausführungen der Smartphones und die unterschiedlichen Bildschirmgrößen der Tablets. Es ist ausreichend, wenn Sie sich um diese drei Kategorien von Bildschirmgrößen kümmern. Wenn Sie Ihre Webseite zusätzlich für Breitbild-Tablets wie das Motorola Xoom optimieren wollen, dann fügen Sie zusätzlich noch die 1280-Pixel-Größe zu den oben genannten Kategorien hinzu.

Jetzt sollten Sie sich dafür entscheiden, was in welcher der drei beziehungsweise vier Kategorien dargestellt werden soll. Im manchen Fällen werden Sie lediglich auf ein paar Komponenten der Webseite verzichten, damit die Seite nicht zu komplex für das Smartphone wird. Damit die Smartphone-Nutzer nicht vollständig auf diesen Inhalt verzichten müssen, können Sie die entfernten Komponenten über Links zu neuen Seiten verfügbar machen. Falls Sie diesen Inhalt für verzichtbar halten, können Sie diesen Teil der Webseite für mobile Nutzer unsichtbar machen. In anderen Fällen ist es notwendig Komponenten zu verschieben, sodass diese vertikal aneinandergehängt und bei Smartphones ein einer Spalte dargestellt werden. Die Webseiten für Tablets und Desktop-Rechner können weiterhin traditionell horizontal ausgerichtet bleiben.

Als nächstes erstellen Sie ein CSS für jede der oben genannten Kategorien. Verstecken Sie die DIVs, die Sie nicht anzeigen möchten und erstellen Sie alternative Versionen wo es notwendig ist. Wenden Sie die besten Layout-Parameter für jede einzelne Geräteklasse an. Nutzen Sie JavaScript, um mobile Geräte zu entdecken und laden Sie das richtige CSS für das Gerät. Sie können alternativ auch Apache Skripte verwenden, um mobile Geräte zu identifizieren und an die richtige Seite weiterzuleiten.

Dieser Ansatz setzt voraus, dass Sie unterschiedliche Webseiten für jedes Gerät verwalten und bedienen müssen. Dieser Nachteil wird durch die Vermeidung des komplexen Seitendesigns, welches von JavaScript vorausgesetzt wird, kompensiert. Sie können immer dann JavaScripte und/oder PHP-Code verwenden, um das Layout zu modifizieren, wenn CSS an seine Grenzen stößt.

Diesen Artikel

Bewertung:

Übermittlung Ihrer Stimme...
Noch nicht bewertet. Seien Sie der Erste, der diesen Artikel bewertet!
Klicken Sie auf den Bewertungsbalken, um diesen Artikel zu bewerten.
  Sponsored Links:

IT-News täglich per Newsletter

E-Mail:
Weitere CW-Newsletter

CW Premium Zugang

Whitepaper und Printausgabe lesen.  

kostenlos registrieren

Aktuelle Praxisreports

(c) FotoliaHunderte Berichte über IKT Projekte aus Österreich. Suchen Sie nach Unternehmen oder Lösungen.

Zum Thema

  • DBConcepts GmbH. Die Oracle Experten.

    DBConcepts GmbH. Die Oracle Experten. Enterprise Application Integration, Datenbanken, Business Intelligence und Knowledge Management, Tools, Server-Betriebssysteme, Middleware, Betriebssysteme für PCs,... mehr
  • Fabasoft AG

    Fabasoft AG Vereine und Verbände, Öffentliche Verwaltung, Medizin und Gesundheitswesen, Luft- und Raumfahrttechnik, Freie Berufe, Finanzdienstleistungen, Qualitätssicherung,... mehr
  • APC Business Services GmbH

    APC Business Services GmbH IT-Personalbereitstellung, Individual-Softwareentwicklung, IKT-Consulting mehr
  • ITSDONE GRUPPE

    ITSDONE GRUPPE Office Software, Kaufmännische Software (ERP), Datenbanken, Server-Betriebssysteme, Programmiersprachen, Betriebssysteme für PCs, Netzwerk- und Systemüberwachung,... mehr

Hosted by:    Security Monitoring by: