Die diversen Wordpress-Plugins, die handytauglichen Versionen eines Blogs produzieren können, gefallen mir alle nicht so recht. Entweder hatte man zu wenig Möglichkeiten bei der Gestaltung des Outputs oder die Plugins verlangen, dass man gleich ein ganz neues Theme für die Mobil-Version anlegt – das ist mir zu viel Arbeit und auch reichlich unpraktisch. Außerdem sollte ein gut gemachtes HTML-Template so oder so weitgehend mobiltauglich sein, man müsste nur einen anderen Stylesheet laden und vielleicht hier und da Kleinigkeiten ausblenden.
Und weil das kein vorhandenes Plugin so richtig auf die Reihe bekam, habe ich selbst etwas programmiert, basierend auf dem alten Mediatyping-Artikel von Dave Shea. Das Plugin stellt Funktionen zur punktuellen Umgestaltung eines Themes zur Verfügung. Ein nahe liegendes Beispiel:
<?php if($mediatype->isMobile()): ?>
<link rel="stylesheet" href="mobile.css" />
<?php else: ?>
<link rel="stylesheet" href="screen.css" />
<?php endif; ?>
Von solchen Konstruktionen braucht man pro Theme um die 2 oder 3 Stück um es schön handytauglich zu machen. Wie bei Dave Sheas Vorlage kann man hier auch der Benutzer einerseits per Link zwischen den Styles für die verschiedenen Ausgabegeräte wechseln, andererseits wird beim erstmaligen Aufruf der Seite per Browsersniffing (ja ja, ich weiß …) ein Medientyp vorausgewählt. Ausprobieren kann man das Plugin schon mal hier.
Das Problem: ich habe keine Ahnung, wie aktuell die Browser-Liste von Mr. Shea ist. Deswegen die Frage an die Mobil-Fachleute … fehlt in diesem Array hier was wichtiges?
public $mobileAgents = array(
'Android',
'Blackberry',
'Blazer',
'Fennec',
'Handspring',
'iPhone',
'iPod',
'Kyocera',
'LG',
'Motorola',
'Nokia',
'Palm',
'PlayStation Portable',
'Samsung',
'Smartphone',
'SonyEricsson',
'Symbian',
'WAP',
'Windows CE'
);
Der Vergleich mit dem User-Agent erfolgt mittels stripos()
, d.h. die Einträge in der Liste brauchen nur (möglichst eindeutige) Teile von Handybrowser-Agentstrings zu sein.
Falls irgendwer auch noch Vorschläge für TV-Geräte hat, da gibt es sicher auch noch mehr als das hier:
public $tvAgents = array(
'Nintendo Wii',
'Playstation 3',
'WebTV'
);
Falls Interesse besteht, werde ich irgendwann diese Woche das Plugin dann fertig machen und zum Download bereitstellen.
Kommentare (9)
Dr.Zenz ¶
6. April 2009, 13:35 Uhr
Nintendo DS(i) fällt mir spontan ein.
Ingo ¶
6. April 2009, 14:12 Uhr
Danke für den Artikel! Wollte mich in Zukunft auch verstärkt um mobile Versionen eigener Websites bzw. von Kundenprojekten kümmern.
Das mobile Layout gefällt mir auf Android/G1 gut.
Rob Schneider ¶
6. April 2009, 16:27 Uhr
Peter, falls du dich dem japanischen Mobilfunkmarkt annehmen möchtest, hier drei Links zu NTT Docomo's, KDDI's und Softbank's User-Agents:
NTT Docomo
KDDI
Softbank
Falls du dich dem annehmen würdest, werde ich dein neuer grösster Fan!
Peter ¶
6. April 2009, 17:10 Uhr
Zitat Dr.Zenz:
Zenz alte Keule! Dich gibt es ja auch noch. Dein Nintendo-Sniffing sollst du haben.
Zitat Rob Schneider:
Sieht soweit ich das entziffern kann (mein Japanisch ist eher so medium) nicht weiter problematisch aus, mit 4-6 Keywords sollte ich die meisten dieser Dinger erkennen können.
Michael ¶
6. April 2009, 19:06 Uhr
Kennst du das:
http://detectmobilebrowsers.mobi/
Oder besser noch:
http://mobiforge.com/developing/story/lightweight-device-detection-php
Und wenn du damit anfängst, könntest du ja verschiedenen Geräteklassen verschiedene CSSe zukommen lassen. Zumindest das Apfeltel vs. den Rest...
Aber eigentlich auch BlackBerry (können kein margin/padding) oder Nokia S40 (kein float) oder Windows mobile (kein min-height)...
Und schon biste mittendrin :-)
Peter ¶
6. April 2009, 19:20 Uhr
Kannte ich noch nicht, aber die machen ja auch nichts anderes als mein Script. Nur meins ist vermutlich schneller und kleiner :)
Ansonsten hast du aber recht, ich dachte auch schon daran, das Ganze etwas flexibler zu gestalten. Wäre eigentlich ganz einfach. Dann kann sich auch jeder seine Mobilgeräte soweit ausdifferenzieren wie er das mag und man könnte das Plugin auch bequem für Sachen wie z.B. eine Skinauswahl mißbrauchen. Ich denke ich mache das.
Frank ¶
7. April 2009, 11:59 Uhr
Ich habe in meinem Theme folgende Clients:
mobile:
2.0 MMP
240x320
400X240
AvantGo
BlackBerry
Blazer
Cellphone
Danger
DoCoMo
Elaine/3.0
EudoraWeb
Googlebot-Mobile
hiptop
IEMobile
KYOCERA/WX310K
LG/U990
MIDP-2.
MMEF20
MOT-V
NetFront
Newt
Nintendo Wii
Nitro
Nokia
Opera Mini
Palm
PlayStation Portable
portalmmm
Proxinet
ProxiNet
SHARP-TQ-GX10
SHG-i900
Small
SonyEricsson
Symbian OS
SymbianOS
TS21i-10
UP.Browser
UP.Link
Windows CE
WinWAP
YahooSeeker/M1A1-R2D2
touch:
iPhone
iPod
Android
BlackBerry9530
LG-TU915 Obigo
LGE VX
Eventuell kannst du ja deine Endliste veröffentlichen, so dass es zur Verfügung steht.
erlehmann ¶
7. April 2009, 20:02 Uhr
Hmm … verstehen die mobilen Browser also tatsächlich kein
media="handheld"
?e2b ¶
8. April 2009, 07:21 Uhr
Eigentlich fände ich die Media-Option (mobile, handheld) auch besser, einfach ein einfacheres Layout und ein paar unnötige Informationen ausblenden.
Allerdings gibt es auf dem Markt doch sehr starke Unterschiede bei den mobilen Browsern, man braucht ja nur mal ein normales Handy, ein Windows Smartphone, einen Palm sowie ein iPhone oder Android. Sowohl die Fähigkeiten des Browsers, die Displaygröße wie auch die Art des Navigierens (Tasten, Stift und Finger).
Man kann nicht mehr einfach zwischen einem Handy und einem PDA unterscheiden. Außerdem kann man durch Stylesheets zwar Elemente ausblenden, doch zum einen werden sie trotzdem übertragen (Kosten/Zeit) und zum Anderen kann nicht jedes Handy CSS.
Interessant wäre auch, wie das iPhone und der Android auf den Media-Typ reagiert. Zumal die Geräte mit einem vollwertigen Browser ausgerüstet sind. Entweder zeigt man einfach die Desktop-Variante der Seite an oder Spielt sich mit größeren, besser antippbaren Links und Formularelemente. Als iPhone-Fan könnte man auch das klassische Design der Apps nachbauen (Auswahllisten, Slideeffekt, Grafiken …).
Also das Plugin ist eine gute Idee, wenn man nicht nochmal ein Design aufziehen will, allerdings würde ich nicht jedes mobile Gerät gleich behandeln und zumindest in Mobile und Touch aufteilen.