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
.
August 2nd, 2010 at 17:00
Guter kostenloser Emulator für Iphone und PalPrem für Windows:
http://www.genuitec.com/mobile/
Ist auch gleichzeitig ein iPhone app Designer.
September 20th, 2010 at 17:19
Ich habe mir diesen Eintrag nun schon etliche Male durchgelesen, und finde ihn jedes Mal aufs neue interessant. Auch in Foren, in welchen ich tätig bin, empfehle ich ihn immer gerne weiter. Top!
November 19th, 2010 at 19:05
[...] Soviel zum HTML 4.0 Mobile. Ein Webdesigner, welcher sich mit HTML auskennt, sollte mit diesen Informationen recht schnell etwas anfangen können. Der folgende Link zeigt noch ein paar andere Kniffe im Umgang mit mobilen Geräten: Mobile Webseiten / Metatags / HTML- und CSS-Emulatoren [...]
November 22nd, 2010 at 18:54
Vielen Dank für diese Übersicht! Habe etliche Seiten nach so einem hervorragenden Start Kit abgesucht und hiermit ihn gefunden. Besten Dank.
Februar 6th, 2011 at 23:42
Toller Artikel. Hat jemand einen Tipp, wie ich eine Abfrage an das Geräte machen kann. Ich meine, dass ich mit einem mobilen Gerät auf die Mobileversion weiterleiten kann.
Vielen Dank
Februar 7th, 2011 at 09:02
@Musterli
function changeToMobileVersion()
{
if(typeof(mobileURL) == 'undefined') return;
var ref = document.referrer;
var ua = navigator.userAgent.toLowerCase();
var regExString = /android|blackberry|iemobile|ip(hone|od|ad)|midp|opera m(ob|in)i|phone|pre\/|symbian|vodafone/;
if(ref.indexOf(siteUri) == -1 && regExString.test(ua)){
check = confirm("Möchten Sie zur mobilen Version von zauberpage.de wechseln?");
if (check == true){
window.location = mobileURL;
}
}
}
dieses JS sollte dir dabei helfen.
Dies einfach beim Laden der Seite ausführen.
Falls du es nicht per JS machen willst kannst du es auch über eine -htaccess-Datei lösen bzw. direkt über den Apache lösen.
Februar 15th, 2011 at 19:50
@Maik
Vielen Dank.
Komme leider erst jetzt zum Antworten (krankheitsbedingt).
Leider kenne ich mich mit JS noch nicht so aus.
Reicht es, wenn ich diesen JS- Code einfach in meine Datei einbinde oder muss ich noch etwas machen, damit dieser auch beim aufrufen ausgeführt wird?
Soll ich alles im “” oder “” Berich platzieren?
Was muss ich alles noch ändern ausser den check? Muss ich mobileURL durch den Pfad der Mobilen Version ersetzen?
Tut mir leid wegen den vielen Fragen. Bin mich erst noch am einarbeiten.
Besten Dank
Gruss Musterli
Februar 16th, 2011 at 09:51
@Musterli
ich würde es wie folgt machen.
Beispiel für die index.html
<html>
<head>
<script type="text/javascript" language="JavaScript">
var mobileURL = "http://mobile.meineDommain.de/index.html";
</script>
<script src="http://www.meineDommain.de/js/root.js" type="text/javascript"></script>
</head>
<body>
.... hier steht mein Content
</body>
</html>
So und in der root.js hast du dann die funktion changeToMobileVersion().
und um die automatisch aufzurufen machst du eigentlich nur folgendes z.B.
changeToMobileVersion();
function changeToMobileVersion() {
.... code der function
}
So hoffe du hast alles verstanden ansonsten nochmals fragen.
Februar 16th, 2011 at 19:24
@Maik
Vielen Dank! Habe alles so eingebaut wie beschrieben.
Leider klappt das mit dem automatischen Aufruf des JS noch nicht (getestet mit Symbian und Opera Mobile/ Mini).
Hoffe ich habe alles richtig verstanden. JS wird wohl das nächste sein, wenn ich mit php fertig bin.
Könnte man diese Überprüfung auch Serverseitig über php realisieren?
index.html:
_______________________________________
var mobileURL = “http://mobile.*********.ch/index.html”;
root.js
______________________________________
changeToMobileVersion();
function changeToMobileVersion()
{
if(typeof(mobileURL) == ‘undefined’) return;
var ref = document.referrer;
var ua = navigator.userAgent.toLowerCase();
var regExString = /android|blackberry|iemobile|ip(hone|od|ad)|midp|opera m(ob|in)i|phone|pre\/|symbian|vodafone/;
if(ref.indexOf(siteUri) == -1 && regExString.test(ua)){
check = confirm(”Möchten Sie zur mobilen Version von *********.ch wechseln?”);
if (check == true){
window.location = mobileURL;
}
}
}
Februar 17th, 2011 at 12:47
@Musterli kontaktiere mich doch mal per ICQ/Skype oder Mail. Und dann schau ich mir das mal bei dir live an.
Februar 18th, 2011 at 15:48
@Musterli und Maik
Ich habe auf die Beiträge hin mal ein bisschen probiert und gegoogelt und dabei dieses JS aufgebaut:
redirect();
function redirect() {
if(navigator.userAgent.match(/iPhone|iPod|Android|opera mini|blackberry|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile|pre|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|Opera Mobile|mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|me702|8325rc|kddi|phone|lg|sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u/i){
var question = confirm(”Mobile Version der Website anzeigen?”)
if (question){
location.replace(”http://Pfad-der-mobilen-Version”);
}
}
}
Einfach beim laden der Site ausführen (wie oben beschrieben). Bei mir funktioniert es einwandfrei mit Android und iOS. Soweit ich es erkennen konnte, können Android Devices nicht mit dem Befehl “window.location” umgehen und daher ist der Befehl “location.replace” notwendig.
Hoffe ich konnte ein wenig weiterhelfen.
April 20th, 2011 at 06:36
Hey,
Danke Mann, das hilft wirklich sehr, aber eine Frage hab ich noch das was du am Anfang gemeint hast, von wegen Start Bild, ist das gedacht wenn man die site als Lesezeichen zum Home-Bildschirm hinzufügt? (iPhone)
Thx, Mc4everHack
Juli 15th, 2011 at 11:56
hab es wie RAZR gemacht und es funkt ohne probleme Danke
Februar 12th, 2012 at 16:00
Vielen Dank für diese wirklich hervorragende Sammlung von hilfreichen Tips. Ich selbst bin gerade dabei im zweiten Anlauf eine website speziell fürs iPad zu basteln. Klappt im grossen und ganzen auch recht ordentlich. Nur auf eine Frage finde ich im web keine Antwort. Links und rechts vom content ist ein schmaler weisser Rand zu sehen, so zehn Pixel breit vielleicht. Scheint normal zu sein auf iPhone und iPad, denn ich sehe diese Ränder immer wieder auch auf anderen Seiten. Nur: Ich möchte die Seite absolut randlos haben. Gibt es da eine Möglichkeit? Als meta tag habe ich benutzt:
danke schon mal im voraus.
peter
Februar 12th, 2012 at 16:03
sorry, der meta tag wurde nicht mitgeliefert. Ich hoffe, dass es diesmal klappt:
peter
März 16th, 2012 at 09:44
Klasse Übersicht. Da die mobile Nutzung von Webseiten immer weiter zunimmt, ist eine separate mobile Webseite immer wichtiger.
März 21st, 2012 at 15:56
Der metatag:
hat mein Problem mit der Darstellung gefixt… klasse… vielen Dank
Die Seite wird mit DotNetNuke erstellt und die relative Positionierung wurde von Safari auf dem ipad falsch ausgewertet… klar… wenn der Browser auf dem ipad seine Standardgröße von 940px anwendet passt das natürlich nich zu meinem 1024er Design … wenn mans weiß.. aber das ja immer so..
Für DNN User: Ihr könnt den Metatag über Admin - Seitenstruktur für die Seiten eingeben…
zick…