Mobilmachung

Private Websites für iPad, iPhone & Co. optimieren

Die Marschrichtung gibt die Hardware vor: Wer seine private Website für Tablet-PCs und Smartphones optimieren will, muss die Eigenheiten der mobilen Browser und die unterschiedlichen Display-Größen berücksichtigen.

  1. Private Websites für iPad, iPhone & Co. optimieren
  2. Optimierung für Mobilgeräte
  3. Syntax und HTML5
pc magazin, magnus, ipad, iphone

© PC Magazin

pc magazin, magnus, ipad, iphone

Tablet-PCs, allen voran Apples iPad, sind der Verkaufsschlager des Jahres. Und Smartphones lösen herkömmliche Handys ab. Die Internet-Nutzung unterwegs gehört jetzt zum Alltag. Die meisten bekannten Websites sind längst mobiltauglich - doch wie sieht es mit Ihrem privaten Auftritt aus?

Für alle Hobby-Webmaster, die es noch nicht getan haben, wird es nun Zeit, ihre Site für das mobile Zeitalter zu optimieren. Dazu muss nicht unbedingt die neue Sprache HTML5 erlernt werden - auch mit gewohntem HTML lassen sich Websites realisieren, die auf mobilen Devices tadellos laufen.

Doch HTML5 schöpft die Möglichkeiten der Geräte besser aus. Für das Erstellen mobiler Websites liefert HTML5 drei wichtige Neuerungen:

  1. Viele Tablets und Smartphones wie das iPad und das iPhone unterstützen kein Flash-Plug-in. HTML5 bietet zahlreiche APIs (Programmierschnittstellen) für das Einbinden von Video- und Audiodateien in Websites. HTML5 ist kein Rahmen für Flash wie herkömmliches HTML - es ist eine Flash-Alternative.
  2. HTML5 erlaubt Abkürzungen des Codes. Das macht ihn nicht nur übersichtlicher, auch die übertragene Datenmenge wird deutlich reduziert. Websites werden unterwegs schneller geladen, Übertragungskosten reduziert.
  3. Mit HTML5 lassen sich Websites so gestalten, dass sie noch funktionieren, wenn keine Online-Verbindung besteht - zum Beispiel in abgelegenen Gebieten oder im Flugzeug.
Beispiel-Layout

© PC Magazin

Unser einfaches Beispiel-Layout passt sich der Display-Größe an. Das Menü bleibt dank der Angabe min-width: 100px mindestens 100 Pixel breit. Dadurch rutscht der Inhalts-Container bei schmalem Browser-Fenster nach unten.

HTML5 ist noch nicht vom W3C als Standard anerkannt. Bei der neuen Auszeichnungssprache handelt es sich zurzeit um einen so genannten Working Draft, einen Arbeitsentwurf. Nichtsdestoweniger werden HTML5-Dokumente bereits von vielen Browsern unterstützt. Auf PC und Mac interpretieren Firefox, Chrome, Opera und Safari die HTML5-Syntax im Wesentlichen korrekt und identisch.

Auf mobilen Devices kommen Safari (iPad, iPhone), Opera Mini (ab Version 5), der Android-Systembrowser (ab Android 2.1) sowie der Dolphin-Browser für Android (ab Version 5) mit HTML5 prima klar. Opera Mobile (ab Version 10) unterstützt HTML5 eingeschränkt. Allein der Internet Explorer 8 auf dem PC hat echte Probleme mit HTML5-Dokumenten - mit dem IE 9 wird sich das ändern.

Wer jetzt seine Website auf HTML5 umstellt, kann die fehlende Unterstützung des Internet Explorer 8 mit ein paar Tricks kompensieren, sodass die Website auch im Microsoft-Browser so gut wie möglich dargestellt wird. Lesen Sie dazu bitte den Kasten: So klappt's: HTML5 und IE8.

Der Optimierungsbedarf

Bevor Sie an Ihrer Website herumdoktern, sollten Sie sich bewusst machen, was Optimierung für Mobilgeräte überhaupt bedeutet. Fest steht: Die Website soll am PC, am Mac, auf möglichst vielen Tablets und Smartphones gleich aussehen und bedienbar sein. Diesem Ziel stehen drei Probleme im Weg:

  1. Browser interpretieren Code unterschiedlich - vor allem, wenn er nicht standardkonform oder gar fehlerbehaftet ist.
  2. Displays haben verschiedenste Größen vom Handy bis zum ultragroßen 16:9-TFT.
  3. Viele mobile Geräte werden per Touchscreen bedient - PCs und Macs hingegen mit Maus und Tastatur.

Die Auswirkungen von Punkt eins lassen sich mit sauberem Code, ausführlichem Testen und ein paar Tricks minimieren. Problem Nummer zwei ist schwieriger zu lösen - die richtigen Ansätze verraten wir Ihnen im Abschnitt "Grundregeln fürs Design".

Die größte Herausforderung für Webdesigner liegt im dritten Punkt: Die Möglichkeiten der Touch- Bedienung lassen sich nur begrenzt auf Websites übertragen. Außer dem Tippen oder Doppeltippen auf Links und Schaltflächen lassen sie sich nicht nutzen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…