Neues Layout für Handy und PDA

Vor einigen Wochen hatte ich hier das Layout für Handy, PDA und iPhone mittels des Plugins WordPress PDA & iPhone deaktiviert.

Ursächlich dafür war, dass ich auf Webseiten-Infos.de unter Blog auch eine Template-Datei ohne WordPress-Loop einsetze und diese Seite dann beim Betrachten mit Handy oder PDA keinen Inhalt anzeigte. Danke an Ute, die mich hierauf aufmerksam machte. Sie war zwar mit dem normalen Layout auf ihrem iPhone zufrieden, aber andere mobile Geräte haben meistens eine noch kleinere Bildschirmauflösung und dann ist ein reduziertes und angepasstes Layout für diese Geräte sinnvoll.

Thomas Scholz aka toscho brachte mir mit seinem Link zu dem Blogbeitrag „The 5-Minute CSS Mobile Makeover“ wieder in Erinnerung, dass ich da eine noch offene Baustelle habe.

Leider wird von vielen mobilen Browsern der Medientyp handheld nicht unterstützt. Deshalb halte ich die Erkennung von mobilen Browsern über den User Agent, wie sie auch von vielen WordPressPlugins praktiziert wird, derzeit für die bessere, da effektivere Alternative.

Heute habe ich mit Hilfe des WordPressPlugins WP viewMobile ein neues Layout für Handy und PDA erstellt, also diese offene Baustelle endlich geschlossen.

Die Vorteile des WordPressPlugins WP viewMobile liegen für mich darin, dass

  • es mit einem deutschen Theme und deutsch im Administrationsbereich (Backend) daher kommt,
  • ich eigene Themes hinzufügen und anpassen kann,
  • sich die Erkennung der mobilen Browser anpassen lässt.

Ein mobiles CSSLayout sollte aus meiner Sicht insbesondere berücksichtigen, dass

  • eine kleinere Bildschirmfläche und -auflösung als bei Monitoren von Computern zur Verfügung steht,
  • in der Regel die Datenübertragungsgeschwindigkeit / -rate niedrig ist und
  • Funktionalitäten, die lediglich mit Computer genutzt werden können, entfernt werden sollten.

Zur Umsetzung habe ich dafür

  1. das modifizierte WordPressTheme YAML Green in den Theme-Ordner des WordPressPlugins WP viewMobile kopiert,
  2. dann YAML Green auf der Seite Optionen für das Plugin WP viewMobile im Administrationbereich (Backend) ausgewählt und die Einstellung entsprechend aktualisiert,
  3. in der functions.php des YAML GreenThemes im Theme-Ordner des WordPressPlugins WP viewMobile den CSS-Code im Kopfbereich (Header) sowie für die Conditional Comments gelöscht / entfernt,
  4. ein vereinfachtes mobiles CSSLayout erstellt, das
    • möglichst den geringen Bildschirmplatz auf Handys und PDAs optimal nutzt,
    • möglichst wenig Bandbreite benötigt,
    • die Breite der Formularelemente begrenzt, damit der Opera Mini die Webseiten nicht auf maximale Breite zieht.

Sehr wahrlich

  • fehlen noch einige User Agents, so dass noch nicht alle mobile Browser erkannt werden, und
  • gibt es noch Verbesserungsbedarf und -möglichkeiten bei diesem mobilen CSSLayout.

Getestet habe ich das mobile CSS-Layout

Der iPhone-Simulator funktionierte allerdings erst, nachdem ich mittels dem FirefoxAddon User Agent Switcher und der importierten XML-Liste von Mobilgeräten, als User Agent für den Firefox das iPhone auswählte.

Darüber hinaus probierte ich den Seitentest unter ready.mobi aus. Das Ergebnis war zwar vernichtend, aber die dort zum Emulationstest aufgeführten Mobilgeräte sind aus meiner Sicht eh nicht zum mobilen Surfen geeignet. Vielmehr gehören die schon ins Museum. Anscheinend hat das auch der Betreiber der Website ready.mobi erkannt, denn die Website lies sich nicht mehr aufrufen (Stand: 24. Mai 2010).

Hier noch der Link zu meiner mobilen CSS-Datei.

Für Verbesserungshinweise und -vorschläge mittels Kommentar oder Mail bin ich jederzeit dankbar.

7 Kommentare und 2 Trackbacks/Pingbacks

  1. 1. Micha

    Kommentar vom 9. August 2009 um 20:15

    Ich warte nur noch auf den Tag, an dem du dein erstes Theme veröffentlichst :)

  2. 2. Dieter

    Kommentar vom 9. August 2009 um 20:33

    @Micha
    Man soll ja nie nie sagen, aber das überlasse ich lieber Profis wie Dir und Heiko. :-)
    Und diesbezüglich hast Du mir ja schon den Mund wässrig gemacht. Ich sage nur Xtreme One-Theme. :-)

  3. 3. Ute

    Kommentar vom 9. August 2009 um 23:17

    Hi Dieter,

    sorry ich schon wieder und das ichphone…

    Leider bin ich schon wieder nicht glücklich. Das Theme lässt mich Beiträge wieder nur mit quer scrollen lesen. Das ist mühsam.

    Alles andere sieht gut aus, falls dieser Kommentar auch noch ankommt. ;)

  4. 4. Dieter

    Kommentar vom 10. August 2009 um 07:45

    @Ute
    Danke für Deinen Hinweis und die Screenshots.

    Ich will ja nicht unken, aber interpretiert das iPhone den Media Querie max-device-width: 480px als width auch für die vertikale Nutzung des Browsers?

    Testweise habe ich jetzt mal max-device-width auf 320px geändert und die Seitenvergrößerung (den Zoom) freigegeben. Verstehe sowieso nicht, warum bei „The 5-Minute CSS Mobile Makeover“ empfohlen wird diese abzustellen.

    Wäre Dir und allen Lesern die ein iPhone haben sehr dankbar, wenn die Zugänglichkeit dieser Seiten mit dem iPhone testet. Scheint ja – im Gegensatz zum Opera Mini – leider mit dem Simulator nicht richtig zu funktionieren. :-(

  5. 5. Dieter

    Kommentar vom 10. August 2009 um 22:28

    So die Benutzerkennungen für das iPhone und den iPod Touch habe ich beim WordPress-Plugin WP viewMobile herausgeworfen. Nun sollten diese mobilen Geräte halt das Standardlayout von Webseiten-Infos.de für Computerbildschirme erhalten (siehe hierzu auch meinen neuen Blogbeitrag „iPhone-Simulatoren sind für die Tonne!„).

  6. 6. Susanne

    Kommentar vom 17. Juli 2011 um 09:20

    Also mir gefällt es, schaut auf alle Fälle professioneller aus als bei mir…

  7. 7. Dieter

    Kommentar vom 17. Juli 2011 um 10:05

    Danke!
    Nur so als Tipp: Wenn der Benutzername zum Impressum der angegebenen Website gepasst hätte, wäre der Link auch drin geblieben.

  8. 8. iPhone-Simulatoren sind für die Tonne! | Webseiten-Infos.de

    Pingback vom 10. Dezember 2011 um 13:18

    […] Gestern hatte ich mein neues Layout für Handy und PDA vorgestellt (siehe hierzu meinen Blogbeitrag “Neues CSS-Layout für Handy und PDA“). […]

  9. 9. WordPress-Plugin PDA & iPhone in Deutsch | Webseiten-Infos.de

    Pingback vom 10. Dezember 2011 um 13:18

    […] die Darstellung von Webseiten-Infos.de auf Handy und PDA kannst Du in meinem Blogbeitrag “Neues Layout für Handy und PDA” […]

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

 

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen