1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Mobile Theme erstellen + welches Framework

Dieses Thema im Forum "Mobil mit WordPress" wurde erstellt von Netsurfer, 2. April 2011.

  1. Netsurfer

    Netsurfer Active Member

    Registriert seit:
    27. Februar 2008
    Beiträge:
    26
    Zustimmungen:
    0
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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
     
  2. derElch

    derElch Well-Known Member

    Registriert seit:
    8. Februar 2011
    Beiträge:
    254
    Zustimmungen:
    0
    Sei mir nicht böse aber ab hier hab ich nicht mehr weitergelesen sondern bin direkt zur "Frage" am Schluss.

    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:

    www.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.
     
  3. Netsurfer

    Netsurfer Active Member

    Registriert seit:
    27. Februar 2008
    Beiträge:
    26
    Zustimmungen:
    0
    Warum sollte ich ...?
    OK. Und warum?

    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.

    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
     
  4. derElch

    derElch Well-Known Member

    Registriert seit:
    8. Februar 2011
    Beiträge:
    254
    Zustimmungen:
    0
    Alles klar. Du suchst also ein Theme.
    ich habe mal erste Entwürfe erstellt. Kannst sie dir gerne anschauen und dich inspiriren lassen. http://m2.elchalarm.net/index.php

    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.

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

    Netsurfer Active Member

    Registriert seit:
    27. Februar 2008
    Beiträge:
    26
    Zustimmungen:
    0
    Ja, genau! :D
    Inspiration ist immer gut ...! :wink:
    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).
    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
     
  6. derElch

    derElch Well-Known Member

    Registriert seit:
    8. Februar 2011
    Beiträge:
    254
    Zustimmungen:
    0
    ich halte von solchen Best Practies nicht sehr viel. Jede Webseite hat seinen eigenen Charakter und seinen eigenen Hintergrund. (Siehe dazu mehr weiter unten wieso ich HTML5 verwende). Deshalb muss auch jede Mobile Website für sich selber angeschaut werden, und für sich selbst entwickelt werden. Es gibt im Grunde für mich nur einen Standard, und das ist die Benutzerfreundlichkeit.

    Besonders bei Webseiten für mobile Endgeräte soll die Benutzung so einfach wie möglich aber so schnell wie möglich sein. Auf meiner m2 Seite ist dies ganz gut zu erkennen. Die Buttons sind fast 100% breit. Wenn in der Fusszeile zwei Links neben einander stehen sind sie 50% breit und mehr nicht. Eine sehr gute mobile Lösung hat http://m.lautundspitz.ch/ diese Seite hat mich auch für meine Lösung inspiriert.

    Ich habe mich aus dem Grund dazu entschieden Prozentuale Angaben zu verwenden, was die Breite der Seite betrifft.

    Meine Seitenbreite und DIV Breiten betragen immer 100% des Browsersfensters. Dieses System, in der Breite mit Prozenten zu arbeiten hat sich sehr gut bewährt, getestet auf Windows Mobile/Phone, Android und iPhone Safari Browser sowie auf Samsung Galaxy.

    Einzig bei Operas Mobile Browser 10 (welches von mobiledetector als Desktopbrowser erkannt wird) passte sich die Seite immer in den Bildschirm ein, so wie es sollte.

    Auf sowas verzichte ich komplett. Am besten schreibt man HTML Strict. Javascript und die ganzen Spielereien braucht es auf mobilen Endgeräten und Smartphones meiner Ansicht nach nicht. Und wenn man das iPad betrachtet, wird dieser sowieso als Desktopbrowser eingestuft, wodurch dies sich wieder erübrigt, auch wenn kein Flash auf dem läuft. (Das Thema Grundsätzliche Barrierefreiheit auch bei Desktopbrowsern ist selbstverständlich).

    Unter Webapp würde ich ein App im klassischen Sinne von den Apps für iPhone, Android, Windows Phone oder Samsung und Nokia vorstellen. Gutes Beispeiel dazu ist wohl das SWR3 App http://www.swr3.de//-/id=614094/did=909762/1cg2a75/index.html

    elchALARM.net ist Grundsätzlich auf HTML5 aufgebaut, auch wenn die mobilen Endgeräte es als HTML4 "interpretieren" werden und HTML5 Funktionen nicht kennen. Dies hängt mit meiner Philosophie zusammen.

    Näheres dazu kannst du hier nachlesen: http://elchalarm.net/?page_id=315
    ich habe früher bei anderen Onlineprojekten viel mit XHTML 1.0 gearbeitet, bin aber seit dem projekt elchALARM.net auf HTML5 umgestiegen, aus dem oben verlinkten Grund.

    MediaQueries hab ich noch nicht in betracht gezogen. ich persönlich will möglichst wenig ( = garnicht ) auf Brwoserinformationen/Systeminformationen vom Benutzer zurückgreifen. Dies ist aus dem einfachen Grund, da dies wieder gegen meine Philosophie verstösst. Entweder funktioniert eine Seite auf allen Browsern gleich gut oder die Webseite wurde nicht genügend gut ausgearbeitet. HTML5 ist da natürlich eine Ausnahme weil es nicht auf allen Browsern gleich fortgeschritten ist, sobald sich diese aus der Entwicklung aber zu einem Standard entwickelt hat wird dies auch anderst aussehen.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden