Mobile Theme erstellen + welches Framework

Hallo zusammen!

Vorweg: Ich kenne die diversen Plugins, die es dafür gibt, wie u.a. WPTouch und habe etliche davon ausprobiert.

Fazit: Keines der Plugins überzeugt mich. Also bedürfte es intensiver Anpassungen, was meiner Erfahrung nach mindestens genauso aufwendig ist, wie das Gewünschte lieber gleich selber zu programmieren. Dann kennt man es wenigstens auch in und auswendig.

Soweit ich das bisher überblicke, gibt es zwei grundsätzlich verschiedene Ansätze für eine Mobile-Version:

1. Eine eigene (Sub-)Domain auf die um-/ weitergeleitet wird
2. Ein eigenes Theme auf welches "umgeschaltet" wird

Von Variante 1 halte ich persönlich nichts, u.a. deshalb nicht, weil ich ja keinen anderen Inhalt (Content) anzeigen lassen möchte, sondern vielmehr vor allem eine andere Art der Präsentation erreichen möchte.

Bis jetzt habe ich eine, wie ich finde recht einfache Art gefunden, mittels eines "Mini-Plugins" bei Erkennen eines entsprechenden Mobile User-Agents auf ein anderes Theme zu switchen:

<?php
function gp_mobile_theme_switcher() {
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) $is_mobile = true;
    if($is_mobile) $template = "mobile_theme";
    else $template = "standard_theme";
    return $template;
}
add_filter('template', 'gp_mobile_theme_switcher');
add_filter('stylesheet', 'gp_mobile_theme_switcher');
?>

Den erforderlichen Kopf für ein Plugin habe ich hier jetzt einmal weggelassen.

Der/ die "mörder" RegExp stammt übrigens von http://detectmobilebrowser.com/

Falls jemand eine "bessere" oder einfachere Methode kennt, würde ich mich über einen entsprechenden Beitrag freuen.

Also mittels dieses sehr kleinen Plugins kann man einen Mobile User-Agent erkennen und dann Wordpress ein entsprechend anderes Theme (und somit auch Stylesheet) verwenden lassen, als das ansonsten konfigurierte Theme.

Nun also zu dem Punkt des eigentlichen Mobile Themes:
Es gibt ja mittlerweile schon einige Frameworks, wie bspw. jQuery Mobile. Viele davon befinden sich noch in ihren Anfängen, sprich Alpha Versionen.

Von daher meine Frage: Hat hier schon mal jemand ein eigenes Mobile-Theme entwickelt? Und wenn ja, unter Verwendung eines Frameworks (falls ja, welches?)?

Wer kennt entsprechende Tutorials (speziell auf Wordpress zugeschnitten) und kann hier netterweise den/ die Link(s) posten?

Und eine allgemeinere Frage an jeden Wordpressanwender und -leser hier:
Was ist für euch wichtig an einer Mobile-Version (in punkto Funktionalität, Benutzerfreundlichkeit, Zugänglichkeit, etc.)?
Auf welche Dinge/ Funktionalitäten könntet ihr gegenüber einer Desktop-Version gut verzichten?

Ich würde mich sehr freuen, wenn wir hier ggf. eine muntere Diskussion zu dem Thema starten könnten. Eventuell ließe sich daraus ja auch ein (das) Mobile-Theme entwickeln!?

Ich wäre gerne bereit, das Ergebnis, welches hier mittels gemeinsamer Ideen & Anstrengungen erreicht würde, hinterher auch allgemein zur Verfügung zu stellen.

Vorab schon mal besten Dank für's Lesen!

Gruß
Gunther

Zitat von derElch

Sei mir nicht böse

Warum sollte ich ...?

Zitat

aber ab hier hab ich nicht mehr weitergelesen sondern bin direkt zur "Frage" am Schluss.

OK. Und warum?

Zitat

Zu dem was du am Anfang geschrieben hast:

Ich weiss nicht ob du Wordpress Mobile Pack schon ausprobiert hast oder nicht, aber zu dem schreib ich einfach mal folgendes:

Ja, hab' ich. Und es gilt dafür dasselbe wie für alle anderen Plugins dieser Art:
Ohne Anpassung(en) ist es für mich nicht zu gebrauchen. Also stehe ich wieder vor der Frage, ob ich mich in die Tiefen eines fremden Plugins einarbeite, um meine gewünschten Änderungen vornehmen zu können, oder ob ich es gleich von Grund auf selber erstelle.

Wobei es mir in erster Linie ja eigentlich um das Mobile Theme und weniger um ein Plugin geht. Wie simpel der "Switch" zwischen einem Desktop- und einem Mobil-Theme sein kann, habe ich ja versucht zu demonstrieren anhand des Code Beispiels in meinem ersten Post.

Zitat

http://elchalarm.net vs. m.elchALARM.net

Beide Domains zeigen auf das gleiche Verzeichnis. das mobile Theme wurde allerdings noch nicht angepasst. Das Plugin hat die Möglichkeit entweder über die Domain den "Style zu wählen" oder über einen "Detektor" automatisch zu wechseln oder die dritte option beides zusammen zu verwenden, und den User auswählen lassen.

Wie ich bereits schrieb, halte ich nichts von dem Konzept verschiedener URLs - noch dazu wenn die Inhalte identisch sind.
Und ja, ich weiss auch, dass das Plugin alle 3 Varianten ermöglicht. Aber das ist eben gar nicht der Punkt um den es mir geht.

Mich interessiert vielmehr das eigentliche Mobile-Theme. Nur je mehr ich im Web nachforsche, umso unschlüssiger werde ich mir, wie man das am sinnvollsten umsetzt.
Die diversen Frameworks, die einem eigentlich die Arbeit erleichtern sollen, habe alle jeweils ihre Vor- und Nachteile.

So ist für mich bspw. jQueryMobile aktuell keine brauchbare Grundlage, solange aufgrund des Konzepts keine Links zu Ankern möglich sind und somit auch die CSS3 Pseudo-Klasse 'target' nicht verwendet werden kann.

Ich suche also nicht nach einem Plugin (welcher Art auch immer), sondern nach einem Mobile-Theme, bzw. nach der vermeintlich "besten" Variante ein solches zu schreiben, ob mit oder ohne Framework.

Gruß
Gunther

Zitat von derElch

Alles klar. Du suchst also ein Theme.

Ja, genau! :D

Zitat

ich habe mal erste Entwürfe erstellt. Kannst sie dir gerne anschauen und dich inspiriren lassen. http://m2.elchalarm.net/index.php

Inspiration ist immer gut ...! :wink:

Zitat

Kannst dir gerne den Quelltext anschauen wie ich das angefangen habe.
Vom Grundaufbau her ist es eigentlich recht simple. Alles ist relativ und stellt sich unter das was darüber ist.

Ja ..., nun gibt es ja diverse Quellen für sogenannte "Best Practices" und mittlerweile ja auch schon gewisse "Quasi-Standards", die sich in der Praxis eingebürgert haben (Beispiel: Häufig findet man ganz oben links einen Back-Button gefolgt vom zentrierten Seitentitel und rechts einen Home-Button).

Zitat

Ich hoffe ich kann dir damit weiterhelfen. Falls nicht werd ich wohl noch einen Versuch starten müssen xD

Ja, danke. Ist zumindest mal ein Anfang. Ich bin zwar relativer Wordpress Noob, allerdings beschäftige ich mich seit über 15 Jahren mit Webdesign - darf also durchaus behaupten relativ fit im Umgang mit XHTML + CSS zu sein.

Eines der Hauptprobleme bei Webseiten für mobile Endgeräte ist (mal wieder) die enorme Vielfalt an verschiedenen Browsern und deren Fähigkeiten. Hinzukommen die verschiedenen Displaygrößen und die Möglichkeit das Display zu drehen - sprich man muss gegenüber einer Desktopvariante auch noch die beiden möglichen Ausrichtungen (Portrait + Landscape) berücksichtigen.

Prinzipiell stelle ich mir folgendes vor:
Eine Seite für die Anzeige auf einem mobilen Endgerät sollte von Hause aus erstmal möglichst "schlank" sein, d.h. möglichst wenige HTTP Requests haben und vor allem auf alles Unbenötigte (z.B. Scripts, die auf den Endgeräten gar nicht lauffähig sind) verzichten.

Hinzukommt, dass man alles was serverseitig erledigt werden kann, auch dort macht - z.B. Thumbnails von Images erstellen und in die Seite einbinden. Ein Klick auf das Thumbnail könnte dann bspw. per AJAX das Bild in einem größeren Format nachladen und anzeigen.

Ich selber besitze nur ein Android Smartphone und muss deshalb für alle anderen Gerätetypen auf entsprechende Simulatoren zurückgreifen, was speziell bei gerätespezifischen Funktionen nicht immer ganz zuverlässig ist.

Was mir persönlich auch immer noch nicht so richtig klar ist, ist der Unterschied, sofern es überhaupt einen gibt, zwischen einer für die Anzeige auf mobilen Endgeräten optimierten Webseite und einer sog. "Webapp"?

Und neben diesen mehr oder weniger allgemeinen Punkten (s.o.) kommen dann natürlich noch einige wordpressspezifische Aspekte hinzu - aber die dürften wohl das kleinere Problem sein ... ;-)

Wie ich sehe, hast du dich für HTML 5 entschieden und scheinst dich auf WebKit basierte Browser zu beschränken bei deinem Layout?
Verwendest du auch Media Queries?

Gruß
Gunther