Diesmal war ich auch zuversichtlich, dass das Layout mit den meisten modernen Handys und PDAs zugänglich ist. Schließlich hatte ich mit dem Opera Mini auf meinem Handy, mit dem Opera Mini Simulator sowie mit dem iPhone Simulator in Verbindung mit dem Firefox Addon User Agent Switcher getestet.

Mit dem Opera Mini 4 auf meinem Handy kann ich leider keine Bildschirmfotos (Screenshots) anfertigen. Das ist aber nicht tragisch, da die dortige Darstellung der Webseiten von Webseiten-Infos.de genauso aussieht wie beim Opera Mini Simulator.

Hier mal ein Bildschirmfoto (Screenshot) von der Startseite mit dem Opera Mini Simulator:

Sieht doch ganz akzeptabel aus. Oder?

Habe statt dem Originallogo extra die verkleinerte Version von meiner Twitterseite unter twitter.com/WebseitenInfos genommen.

Da das Simulator Programm iBBDemo auf meinem Windows-Rechner immer abstürzte (Anmerkung: Das könnte eventuell daran liegen, dass ich inzwischen Safari 4 auf meinem Rechner habe), versuchte ich mich mit dem Firefox Addon User Agent Switcher und dem iPhone Simulator unter TestiPhone.com.

Das Bildschirmfoto (der Screenshot) sah viel versprechend aus:

Darauf vertrauend stellte ich dann das neue CSS-Layout für Handy und PDA online.

Leider sah das Ergebnis auf einem echten iPhone aber bei weitem nicht so gut aus. Ute war so nett und machte Bildschirmfotos (Screenshots) mit ihrem iPhone und mailte sie mir. Danke dafür!

Hier das Problemfoto mit dem iPhone (hochkante Bildschirmgröße 320 x 480 Pixel):

Es wurde einfach der Text am rechten Bildschirmrand abgeschnitten.

Das Ende vom Lied: Ohne ein eigenes iPhone oder einen funktionierenden Simulator kann ich Layouts für das iPhone nicht testen.

Ein iPhone werde ich mir aber bestimmt nicht zulegen, solange es ohne Vertragsbindung so inakzeptabel teuer ist und iTunes als Software dafür erforderlich ist.

Ich werde deshalb jetzt die Browsererkennung für das iPhone aus dem WordPress-Plugin WP viewMobile herausnehmen.

Dann wird das iPhone halt kein reduziertes CSS-Layout für Handy und PDA bekommen, sondern das für normale Computerbildschirme.

Das finde ich zwar bescheuert, denn das iPhone ist ein Handy mit entsprechend reduzierter sichtbarer Fläche des Browsers (Viewport), aber dann ist das halt so.

Kommentare

• 11. August 2009, Ute schreibt: Bescheuert oder nicht, wir werden Apple nicht ändern. Ohne Extras habe ich die Seite jetzt gut lesbar und mit vollständigen Text ohne scrollen. Ich bin so völlig zufrieden! :hurra: das Smiliefenster öffnet sich halt auf einer neuen Seite, aber das finde ich nicht so schlimm...
• 11. August 2009, Dieter schreibt: @Ute Tja, Apple schöpft sein Käuferpotential nicht voll aus. Scheint ja trotzdem zu reichen. Wenn Dir die Darstellung der Seiten so auf dem iPhone reicht, ist das erfreulich. Die Übersicht der Tastaturkürzel für Smilies lasse ich in der Tat auf einer neuen Seite öffnen. Damit möchte ich sicherstellen, dass nicht ein Kommentarschreiber auf Smilies klickt und danach sein bisher geschriebener Kommentar weg ist. Wenn das eine völlig unberechtigte Sorge ist, dann könnte und würde ich das natürlich ändern. Ich habe halt die Sorge, dass abhängig von den Nutzereinstellungen nicht bei allen Browsern der bisher geschriebene Text bei der Rückkehr zum Kommentar erhalten bleibt.
• 11. August 2009, Ute schreibt: Lass es mit der neuen Seite, ich möchte auch nicht garantieren, dass in jedem Fall der Kommentar stehen bleibt. Apple macht Mainstream, ich denke damit erreichen sie unterm Strich am meisten.
• 11. August 2009, Dieter schreibt: @Ute Ein neues Fenster widerstrebt mir aus Gründen der Benutzerfreundlichkeit, aber noch blöder wäre es, wenn der Kommentar beim Anklicken der Übersicht der Tastaturkürzel für Smilies weg wäre. Eine dritte Alternative wäre es die Smilies direkt beim Kommentarfeld anzeigen zu lassen. Das aber hatte ich bewusst verworfen, weil dadurch die Ladezeit der Seiten wegen der vielen HTTP-Anfragen (HTTP-Requests) deutlich erhöhen würde. Die optimale Lösung habe ich da leider noch nicht gefunden und ich bin mir auch nicht sicher, ob es eine solche überhaupt gibt. Zu Apple: Apple macht das, was Microsoft früher auch schon erfolgreich praktizierte: Closed Shop!
• 11. August 2009, Ute schreibt:

  Ein neues Fenster widerstrebt mir aus Gründen der Benutzerfreundlichkeit, aber noch blöder wäre es, wenn der Kommentar beim Anklicken der Übersicht der Tastaturkürzel für Smilies weg wäre.

  Ja, das meinte ich mit: lass es.

  Eine dritte Alternative wäre es die Smilies direkt beim Kommentarfeld anzeigen zu lassen. Das aber hatte ich bewusst verworfen, weil dadurch die Ladezeit der Seiten wegen der vielen HTTP-Anfragen (HTTP-Requests) deutlich erhöhen würde.

  Ja, ohne JS sehe ich da auch keine Lösung. Beim Klicken diesen Teil der Seite nachladen, wäre die einzige weitere Alternative, aber die erfordert JavaScript... Nein, ich denke auch nicht, dass es _die_ Lösung gibt.

  Zu Apple: Apple macht das, was Microsoft früher auch schon erfolgreich praktizierte: Closed Shop!

  Da sind sie nicht allein, das machen die meisten anderen ja auch. Beim Android scheint sich so langsam ein bisschen was zu bewegen, es erfordert wohl inzwischen nicht mehr zwangsläufig die Zusammenarbeit mit Google-Applikationen... Es sind noch viel zuwenige, die sich für Alternativen interessieren, deshalb gibt es nur wenig andere Möglichkeiten.

Ähnliche Beiträge

• WordPress-Plugin PDA & iPhone in Deutsch
• Neues Layout für Handy und PDA
• Plugins für WordPress als CMS
• Opera 11 mit Erweiterungen
• Und der Gewinner des Buches ist…

Permalink | 5 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: CSS, Darstellungsprobleme, Handy, iPhone, Layout, Opera Mini, PDA, Simulator, Webseiten

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.

Kommentare

• 9. August 2009, Micha schreibt: Ich warte nur noch auf den Tag, an dem du dein erstes Theme veröffentlichst :)
• 9. August 2009, Dieter schreibt: @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. :-)
• 9. August 2009, Ute schreibt: 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. ;)
• 10. August 2009, Dieter schreibt: @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. :-(
• 10. August 2009, Dieter schreibt: 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!").
• 17. Juli 2011, Susanne schreibt: Also mir gefällt es, schaut auf alle Fälle professioneller aus als bei mir...
• 17. Juli 2011, Dieter schreibt: Danke! Nur so als Tipp: Wenn der Benutzername zum Impressum der angegebenen Website gepasst hätte, wäre der Link auch drin geblieben.
• 10. Dezember 2011, iPhone-Simulatoren sind für die Tonne! | Webseiten-Infos.de schreibt: [...] Gestern hatte ich mein neues Layout für Handy und PDA vorgestellt (siehe hierzu meinen Blogbeitrag “Neues CSS-Layout für Handy und PDA“). [...]
• 10. Dezember 2011, WordPress-Plugin PDA & iPhone in Deutsch | Webseiten-Infos.de schreibt: [...] die Darstellung von Webseiten-Infos.de auf Handy und PDA kannst Du in meinem Blogbeitrag “Neues Layout für Handy und PDA” [...]

Ähnliche Beiträge

• Und der Gewinner des Buches ist…
• iPhone-Simulatoren sind für die Tonne!
• WordPress-Plugin PDA & iPhone in Deutsch
• Layout von Webseiten-Infos.de geändert
• Verschenke Buch CSS-Layouts von Dirk Jesse

Permalink | 9 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: CSS, Firefox, Firefox-Addon, Handheld, Handy, iPhone, Layout, PDA, Plugins, User Agent, Webseiten, WordPress, YAML, YAML Green

Angesichts der geringen Bildschirmauflösung bei diesen Mobilgeräten sowie deren zunehmenden Verbreitung und Nutzung zum Ansehen von Webseiten, macht es immer mehr Sinn ein solches Plugin für WordPress einzusetzen.

Leider ist dieses Plugin in Englisch. Auch verfügt es über keine Sprachdateien.

Deshalb habe ich es für meine WordPress-Installationen ins Deutsche übersetzt und stelle diese übersetzte Version hier als ZIP-Datei zum Herunterladen (Downloaden) zur Verfügung:

WordPress-Plugin PDA & iPhone 1.2.8 (Größe: 138  kB).

Die Installation erfolgt wie für die englische Originalversion bei WordPress beschrieben:

1. Entpacke die ZIP-Datei mit einem Entpacker-Programm wie beispielsweise dem kostenlosen Open-Source-Programm 7-Zip.
2. Kopiere die entpackten (entzippten) Dateien in den Ordner unter wordpress wp-content/plugins.
3. Gehe zur Plugins-Seite in WordPress und aktiviere das WordPress-Plugin PDA & iPhone.
4. Auch wenn das Plugin aktiviert ist, siehst Du kein Menü dafür im Administrationsbereich (Backend). Um das Plugin in Aktion zu sehen, musst Du Deine WordPress-Seiten mit einem PDA, iPhone oder iPod Touch aufrufen.

Die Seiten von www.webseiten-infos.de habe ich mit mir dem Opera Mini 4 auf meinem Smartphone Sony Ericsson P990i angesehen und auf diese Weise die Funktionsfähigkeit des Plugins überprüft.

Es gibt auch einen Opera Mini Simulator. Mit diesem kannst Du Dir durch Eingabe von www.webseiten-infos.de das ins Deutsche übersetzte WordPress PDA Plugins 1.2.8 im Einsatz ansehen.

Da ich kein iPhone und keinen iPod Touch habe, kann ich leider nicht die Sinnhaftigkeit meiner Übersetzung für die Anpassung an das iPhone und den iPod Touch testen.

Zwar habe ich mir mal www.webseiten-infos.de mit iBBDemo, dem Blackbaud iPhone Browser Simulator, angesehen. Ob dies aber auch der tatsächlichen Darstellung auf einem iPhone oder iPod Touch entspricht, weiß ich jedoch nicht.

Für Rückmeldungen aller Art (Übersetzungsfehler, Verbesserungsvorschläge etc) bin ich jederzeit dankbar.

Nachtrag vom 16. August 2009:

Zwischenzeitlich habe ich das WordPress-Plugin PDA & iPhone deaktiviert. Die Gründe dafür und meine neue Lösung für die Darstellung von Webseiten-Infos.de auf Handy und PDA kannst Du in meinem Blogbeitrag “Neues Layout für Handy und PDA” nachlesen.

Ähnliche Beiträge

• iPhone-Simulatoren sind für die Tonne!
• Neues Layout für Handy und PDA
• Ursache des enormen Speicherbedarfs gefunden!
• Webseiten-Infos.de auf WordPress 3.0 aktualisiert
• Was ist ein Blog (Teil 2)?

Permalink | Kein Kommentar | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Deutsch, iPhone, iPod Touch, PDA, Plugins, WordPress