Webseiten-Infos.de

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 WordPress-Plugins praktiziert wird, derzeit für die bessere, da effektivere Alternative.

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

Die Vorteile des WordPress-Plugins 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 CSS-Layout 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 WordPress-Theme YAML Green in den Theme-Ordner des WordPress-Plugins 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 Green-Themes im Theme-Ordner des WordPress-Plugins WP viewMobile den CSS-Code im Kopfbereich (Header) sowie für die Conditional Comments gelöscht / entfernt,
4. ein vereinfachtes mobiles CSS-Layout 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 CSS-Layout.

Getestet habe ich das mobile CSS-Layout

• mit dem Opera Mini 4 auf meinem Handy Sony-Ericsson P990i,
• mit dem Opera Mini Simulator und
• mit dem iPhone-Simulator.

Der iPhone-Simulator funktionierte allerdings erst, nachdem ich mittels dem Firefox-Addon 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.