Seit Montag tagt der Mobile World Congress in Barcelona wo die Mobilfunkbrache ihre neusten Modelle zur Saison 2010 vorstellt. Und den Beobachtern ist nicht entgangen das immer mehr Anbieter den Smartphonemarkt für sich entdeckt haben. In Deutschland selbst soll mitlerweile jedes dritte Handy was verkauft wird ein Smartphone sein. Was mich auch zu diesem Artikel bringt. Denn wie ihr vielleicht schon in euren Statistiken mitbekommen habt steigen die Zugriffe auf euren Webpräsenzen von mobilen Endgeräten und falls nicht dann sollte euch das nicht hindern eine Mobile Version eurer Webseite zu erstellen. Denn wenn ihr den Eintritt in diesem Marktsegment verschlafen solltet werdet ihr es später schwerer haben als von Anfang an dabei zu sein.
Durch das recht kleine Display (Auflösung) eines Smartphones kann das lesen einer vollgepacken Webseite etwas anstrengend sein. Zudem sollte man auch beachten das die Übertragungsrate bei den Handys noch nicht so gut ist wie man es sonst gewohnt ist. Daher sollte man seine Inhalte bündeln und vereinfacht bzw. Nutzerfreundlicher zur Verfügung stellen.
Mobile Meta Tags
1 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> |
Der Metatag viewport gibt an in welcher Auflösung der Bowser die Webseite rendern soll. Da aber nicht alle Smartphones aber die gleiche Auflöung haben würde ich hier keine Pixelangaben machen und den Browser/ Handy die Entscheidung überlassen. Falls ihr aber lieber mit einer festen Bereite arbeiten wollt dann sieht der Code z.b. wie folgt aus.
1 | <meta name="viewport" content="width=320, initial-scale=1, user-scalable=no" /> |
Als nächstes bestimmen wir die CSS-Datei für unsere Mobile Version
1 | <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile-style.css" type="text/css" /> |
Durch die Angabe max-device-width: 480px sagen wir das Endgeräte mit einer max. Auflösung von 480 Pixeln sich diese CSS-Datei nehmen sollen.
Als nächstes kommen 2 spezifische iPhone,- iPod,- iPad- Tags.
1 2 | <link rel="apple-touch-icon" href="/mobile-img/icon.png" /> <link rel="apple-touch-startup-image" href="/mobile-img/icon.png" /> |
Bei einen Bookmark nimmt das iPhone,- iPod,- iPad standardmäßig ein Screenshoot der aktuellen Seite. Aber mit der Meta-Angabe apple-touch-icon nimmt das Apple-Endgerät stattdessen die Grafik die ihr hier hinterlegt habt. Die Grafik sollte ca. 57×57 Pixel groß sein. Und nun das schöne ihr braucht auf diese Grafik keinen Glaseffekt legen denn dies macht das iPhone z.B. ganz alleine und eurer Icon sieht aus wie von Apple selbst :). Das einzige was ihr vermeiden solltet sind transparente Icons/Fläschen denn diese werden durch den Galseffekt schwarz dargestellt.
Durch den Metatag apple-touch-startup-image kannst du ein Start-Bild festlegen was angezeigt wird während die Anwendung startet. Dies ist besonders nützlich, wenn deine Web-Anwendung offline ist. Standardmäßig wäre sonst ein Screenshot der Web-Anwendung zu sehen.
HTML + Design
Beim HTML bzw. Design gibt es natürlich auch einiges zu beachten. Denn was im “normalen” Browser funktioniert muß nicht auf einen Mobilen-Browser funktionieren. Aber fangen wir hier erstmal ganz oben einer Datei an.
So gibt es für Mobile Webseiten natürlich auch ein eignen Doctype der auch angegeben werden sollte.
1 | <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> |
Es ist auch eine alternative DTD von Openwave erhältlich, diese enthält gegenüber dem normalen XHTML Mobile Profile einige Erweiterungen. Der Doctype zu Openwave sieht wie folgt aus.
1 2 | <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN" "http://www.openwave.com/dtd/xhtml-mobile10.dtd"> |
Eine XHTML Mobile Seite sieht dann also wie folgt aus:
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<title>Ein XHTML Mobile Test Dokument</title>
</head>
<body>
<p>Hier steht der Content meiner Mobilen Webseite :) .</p>
</body>
</html> |
Als nächsten kommen wir zu den Zeilenabständen. Denn hier sollte euch klar sein das nicht jeder Besucher kleine Finger hat. Daher empfehle ich eine line-height von 1.5em; und einer font-size von 14px;. Durch diese Angaben ist euer Text gerade auf den kleinen Endgeräten gut lesbar und die Gefahr das er einen anderen Link anklickt wird dadurch minimiert. Auf spielerein wie z.B. onMouseOver könnt ihr bei eurer mobilen Version verzichten denn ein Finger ist keine Maus 
. Als nächstes was mir persönlich immer wieder negativ auffällt auf mobilen Webseiten ist die Textlänge. Teasert sie an oder zeigt die ersten 200 Zeichen eines Textes und versteckt den Rest z.B. hinter einem mehr denn wenn der User wirklich mehr lesen will dann wird er auch klicken. Ein schönes Lösungsbeispiel findet ihr z.B. hier.
Emulatoren
Da man sich natürlich nicht jedes Handy kaufen kann um zu schauen ob die eigene Webseite im jeweiligen Browser sauber gerendert/dargestellt wird sollte ihr auf Emulatoren zurückgreifen was auch zudem viel billiger ist .
Android-Emulator Damit dieser Emulator läuft benötigt ihr Eclipse was wieso meiner Meinung nach der beste OpenSource Editor für z.B. zum Entwickeln von Webanwendungen ist.
iPhone-Emulator dieser läuft leider nur unter einem Mac, typisch Apple halt aber mitlerweile gibt es im Web verschiedene Websimulatoren.
Zum Schluß bleibt mir nur noch zu sagen. Achtet auf die Ladezeiten eurer mobilen Webseite. Und verschlaft nicht den Trend. Denn in den mobilen Endgeräten wird wahrscheinlich die Zukunft liegen und man sollte diesen Markt nicht unterschätzen.
Februar 19th, 2010 at 19:08
hi
die idee ist gar nicht von der hand zu weisen schon jetzt auf die kleinen endgeräte einzugehen. und das mit den emulatoren ist genial.
vielen dank…
Februar 25th, 2010 at 17:09
Hallo an alle. Dank für das skript !
Februar 25th, 2010 at 23:58
Ich mag dieses Blog! gibt es immer eine Menge von interessanten Artikeln! Ich füge einen Blog zu den Favoriten hinzufügen!
März 14th, 2010 at 17:27
Danke für die ausführliche Beschreibung. es ist nämlich wirklich wichtig, dass die Internetseiten auf dem Handy gut erscheinen. Bei den meisten ist das der Fall, es gibt aber auch Seiten, bei denen man erst einmal ewig scrollen muss, um zum Text oder einem Bild zu gelangen, weil beim Umwandeln der Formatvorlage riesige weiße Flächen entstehen. Das sollte natürlich vermieden werden.
März 18th, 2010 at 02:10
Schaut euch mal die mobile Seite von http://www.y-site.de an. Automatische Endgeräteerkennung und viele Interaktionen der Webseite mit dem Handy. Gebt mal Feedback. Lars
März 18th, 2010 at 09:12
@Lars nette Optimierung aber so wie es aussieht fragt ihr nur das iPhone ab und wechselt dann zur mobilen Version von euch. Falls ihr jQuery oder Prototype nutzt dann ist die Abfrage für mobile Endgeräte nur ein 2 bzw. 3 Zeiler. Ansonsten nicht gerade meine Lieblingsfarbe die ihr da gewählt habt aber das ist ja Geschmackssache
.