Blog CSS

Ich erwartete eigentlich kaum, dass iPhone oder iPod touch eine große Rolle bei der Entwicklung der Webseiten spielen würden. Wenn man die heutige Zahlen ansieht, kommt man zum Schluss, dass es doch wichtig ist, Webseiten für Mobile Safari zu optimieren. Zwar liegt der Anteil noch unter 1%, es sieht aber so aus, dass diese Zahl weiter steigen wird. Das neue Handy und Player von Apple sind sehr populär und zwar weltweit. Die Absatzzahlen steigen kontinuierlich. Bald wird auch in Russland iPhone offiziell vorgestellt. Nach meinem Kenntnisstand ist der Anteil an Handybesitzern, die mobile Dienste in Anspruch nehmen, in Russland, sehr hoch. Wenn dazu noch China käme, wäre der Anteil von iPhone ziemlich bedeutend. Für Internetauftritte, die für internationales Publikum ausgelegt sind, ist es ein großer Markt. Genau deswegen möchte ich ein paar interessante und nützliche Tipps hier vorstellen:

Viewport:
Mobile Safari ist in der Lage, normale Webseiten am iPhone und iPod toch darzustellen. Es ist aber so, dass es für manche Designs sinnvoller wäre, einen Teil des Designs auszublenden. Zum Beispiel, wenn man ein Design hat, wo die eigentliche Webseite nach links orientiert ist und rechts einen freien Raum hat, ist es sinnvoll, den freien Raum auszublenden und den Benutzer auf den eigentlichen Inhalt aufmerksam zu machen.
Um dies zu erreichen sollte man Meta-Teg Viewport verwenden:

Die Zahl 480 steht für Anzahl der Pixel und das Wort width für die Breite, auf die Mobile Safari zentrieren soll.

Favicon:
Den Begriff Favicon brauche ich hier nicht zu erklären, weil jeder Webseiten-Entwickler und auch viele Benutzer wissen, worum es geht.
Um Favicon für Mobile Safari zu verwenden, sollte man auf diese wie folgt verweisen:
<link rel=apple-touch-icon“ href=“favicon.png“>

Interne Applikationen ansprechen:

Ganz wichtig, wenn man den Benutzer eine Möglichkeit geben möchte, durch anklicken der Telefonnummer sofort die Applikation für Anrufe zu starten, sollte man die Nummer in folgendes Tag setzen:
<a href=“tel:911“>911</a>

Google Maps verlinkt man wie folgt:
<a href=“http://maps.google.com/maps?q=bahnhofstrasse+1+55116+Mainz“>Mainz</a>

YouTube Videos verlinken:
Obowhl iPhone ein eigenes Programm zum Abspielen von YouTube Videos besitzt, kann man Videos mit einem einfachen Link verlinken.