Skip to content

Blogansicht für mobile Geräte

Mittlerweile kommt es bei mir sehr oft vor, dass ich ein Blog mit meinem mobilen Gerät anschaue. Das liegt vor allem an Twitter, denn dies ist mittlerweile die Hauptquelle, über die ich auf (neue) Blogseiten komme. Viele Wordpress Blogs erkennen das Gerät und schalten dann in eine abgespeckte Version der Ansicht um. Dies erscheint sehr sinnvoll, denn beim mobilen Zugriff sind viele Teile der Blogseite nicht relevant, zusätzlich belastet "Nebensächliches" nicht den Datenvertrag. In meinem Fall hätte ich mobil z.B. am liebsten nur die mittlere Spalte dargestellt, das ganze "Drumherum", das mit einem nicht mobilen PC Browser durchaus Sinn macht, würde ich am liebsten ausgeschaltet haben.

Für Serendipity gibt es ein Plugin genau für diesen Zweck: "Markup: Mobile Ausgabe". Es wurde von Pelle Boese entwickelt und ist inzwischen in einer minimal neueren Version im S9Y Repository (Spartacus) vorhanden. Dieses hatte ich schon einmal für mein Nokia E71 getestet, weil die normale Blogansicht auf dem kleinen Display kaum benutzbar ist. Leider bekam ich es nicht zum laufen, mir wurde nie etwas dargestellt. Durch einen Artikel im S9Y Forum animiert, versuchte ich mich noch einmal an dem Thema und habe es jetzt tatsächlich zum Laufen bekommen.

Installation

Die Installation des Plugins ist eigentlich wie immer unter S9Y ziemlich simpel: Einfach aus Spartakus heraus suchen und den Install Knopf betätigen. Dann das installierte Plugin konfigurieren. Das Plugin ist im Endeffekt ein Template Switcher. Es kann je nach erkanntem Gerät das Blog in einem anderen Template darstellen. Und hier ist genau das Problem: Die Templates werden durch Spartakus nicht mit ausgeliefert, sie müssen separat installiert werden.

Pelle hat in seinem Plugin 2 Templates vorgesehen: Eines für IPhone Geräte und eines für alle anderen mobilen Geräte. Er hat dafür auch 2 Template Varianten erstellt. Diese bekommt man, wenn man das Plugin von seiner Seite  herunter lädt. In dem Archiv ist eine Version des Plugins, in einem weiteren Verzeichnis befinden sich die beiden Templates. Diese extrahiert man aus dem Archiv, legt sie im Template Verzeichnis des Blogs ab und trägt deren Namen im Plugin ein. Die Defaultwerte des Plugins haben hier schon die korrekten Namen verzeichnet.

An dieser Stelle ist man fertig, nun kann man es testen. Dazu installiert man in Firefox am besten den "User Agent Switcher". Mit diesem kann man vortäuschen, dass ein IPhone oder ein anderes mobiles Gerät die Seite aufruft. Beim Wechsel des Agents auf IPhone stellt sich das Blog nun in einer ganz anderen, sehr IPhone anmutenden Oberfläche dar. Für alle anderen mobilen Geräte erscheint eine sehr schlanke XTHML Version des Blogs, die auch auf kleineren Displays gut dargestellt werden dürfte. Perfekt!

Update: Ich entdecke gerade, dass die beiden Templates von Pelle auch im Template Repository von Serendipity vorhanden sind. Man muss es also nicht so umständlich wie oben machen, man kann die beiden Templates auch einfach über den normalen Mechanismus laden. Die Templates heißen iPhone App und XHTML MP. Leider wird das normale Blogtemplate beim Download gleich auf selbiges umgestellt. Ihr müsst nach dem Download der Templates also möglichst schnell wieder auf euer Template umschalten.

Anpassungen

Ich habe natürlich für mich gleich mal Anpassungen vorgenommen. Die IPhone Version habe ich im Prinzip so belassen, wie sie ist, nur einen falschen Link im Template, der auf die Pluginseite von Pelle zeigen soll (es aber nicht tut), habe ich entfernt. Bei der XHTML Version habe ich den selben Link entfernt und die Farbgebung etwas schlichter gemacht, diese war in meinen Augen etwas grell.

Wenn ich mein Blog mit meinem Android anschaue, so erscheint nun die sparsame XHTML Ansicht. Das ist deutlich zu wenig für so ein großes Display, zusätzlich ist das Template eher auf die Bedienung über Tastatur als über einen Touchscreen ausgelegt.

Ich habe also für mein Blog ein zusätzliches Android Template aufgesetzt, das in der Blogübersicht (aufklappbar) die "Teaser" der Artikel anzeigt. Ich hole mir dafür den ersten Absatz des Artikels, sonst wird das zu lang. Wahrscheinlich mache ich das noch abschaltbar, dass man, wie auch im normalen Blog, den meist längeren "nicht erweiterten Teil" des Artikels darstellen kann. 

Optisch ist das alles schon ganz okay. Knöpfe sind eigentlich nur Scribbles (obwohl gar nicht soo schlecht), ich habe erst Mal Wert darauf gelegt, dass ich eine gut per Touchscreen zu bedienende Steuerung hin bekomme. Mit diesem Template kann man nun auch Kommentare hinterlassen, was mit Pelles Templates noch nicht ging.

Was man im Screenshot gut beobachten kann: Ich hatte ein interessantes Skype Gespräch mit Matthias Mees (yellowled), meinem S9Y Template Guru :-D , da ich Probleme mit den Schriftgrößen auf dem mobilen Device hatte. Bei dem Problem konnte er mir helfen und stieß mich zusätzlich auf die Möglichkeit, Bildgrößen anzupassen. Das klappt derzeit nur teilweise. Ich möchte an der Stelle bewirken, dass die Images, die rechts / links dargestellt werden, maximal die Hälfte der Screenbreite belegen. Das funktioniert auch, nur sind sie nun gestaucht (die Höhe ist also nicht angepasst). [Update: Mit einem weiteren Hinweis von Matthias unten in den Kommentaren klappt nun auch das korrekt!]

Ach ja: Natürlich habe ich auch das Plugin erweitern müssen. Es erkennt nun IPhone, "Andere" und eben Android und man kann nun ein drittes Template für Android Devices eingetragen. Schaut's euch hier mal an, es ist aktiviert. Auf meinem Desire sieht die Ansicht schon prima aus und ist gut benutzbar.

Tests

Es würde mich freuen, wenn hier mit vielen Geräten die mobile Ansicht getestet werden würde.

  • Ein Test, ob mein minimal angepasstes IPhone Template noch funktioniert wäre wichtig. Auf einem kurz mal in die Hand genommenen IPod schien es jedenfalls zu laufen.
  • Sieht das Android Template auf allen Androids gut aus, ist gut lesbar und gut zu bedienen? Beim Android Browser ist übrigens schick, dass man in seinen Einstellungen zwischen der mobilen und der normalen Darstellung wechseln kann. Test mit anderen Browsern würden mich auch mal interessieren, ob das da sinnvoll funktioniert.
  • Für Nokias und alle anderen gibt es die WAP artige XHTML Ansicht. Für mein altes E71 sollte die perfekt sein, für Nokias mit größeren Displays wird die wahrscheinlich zu spartanisch daher kommen.

Testet mal und berichtet mir, ob das gerade so einigermaßen hinkommt.

Ich werde wohl noch ein wenig am Android Template herum basteln. Unten die Navigation gefällt mir z.B. noch nicht, da müssen große Buttons hin, damit man das besser mit mit dem Daumen drücken kann. Wenn das alles rund läuft, baue ich in das Plugin noch eine einfachere Möglichkeit ein, die Templates zu installieren, so dass das Plugin dann mehr oder weniger "out of the box" funktioniert, und release das Update dann wieder nach Spartacus. :-)

Falls also jemand mein Blog gerade in einem mobilen Gerät ansieht, wäre es schick, wenn er mal einen Kommentar hinterließe: Welches Betriebssystem, welcher Browser und ob die Darstellung des Blogs für ihn benutzbar war. Vielen Dank! :-)

Trackbacks

Grischa

Grischa am : Serendipity Mobile Output Plugin 1.01

"Serendipity Mobile Output Plugin 1.01" vollständig lesen
So, ich denke, ich bin wohl durch mit den Änderungen am Plugin von Pelle für die mobile Ausgabe des Serenditpity Blogs. Neben dem neuen Android Template habe ich vor allem einen automatischen Template Installer eingebaut. Das Plugin hat jetzt zu
Grischa

Grischa am : Der S9Y Computerclub

"Der S9Y Computerclub" vollständig lesen
Matthias und Robert haben ihren ersten S9Y InfoCamp Podcast fertig gestellt: Gestatten: Serendipity. Meiner Meinung ist der richtig klasse geworden, wer mal eine Stunde zwischen drin Zeit hat, sollte sich den ruhig mal gönnen. Ist ein schönder R
Grischa

Grischa am : Das neue S9Y Template: 2k11

"Das neue S9Y Template: 2k11" vollständig lesen
Ich bin schon länger ein Fan der Weboberflächen von Matthias Mees. Seine Templates sind meistens eher schlicht gehalten, dadurch aber immer klar strukturiert und schön anzusehen. In letzter Zeit habe ich bei ihm beobachtet, dass er sehr vie

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Ben

Ben am :

Würde gerne testen, kann mir aber leider ein entsprechendes Smartphone im Moment net leisten... Naja wünsche mal viel Erfolg weiterhin!

rowi

rowi am :

Sieht gut aus bei mir (xScope6 auf Samsung I7500 Galaxy, 320x480, Android 2.2.1):

http://rowi.standardleitweg.de/uploads/Screens/mobile/grischa1.png

http://rowi.standardleitweg.de/uploads/Screens/mobile/grischa2.png

Grischa

Grischa am :

Wow, cool! Sogar mit Screenshots! Danke Rowi! :-)

Hast Du auch gefunden, wie man auf einfache Weise den ganzen Artikel mit Kommentaren anschauen kann (außer die bisher noch *viel zu dünne* Zeile unterhalb des Teasers)? Oder wird das noch nicht deutlich?

YellowLed

YellowLed am :

Das mit den fluiden images klappt vermutlich dann nicht, wenn dem img-Element Dimensionen mitgegeben werden. Das sollte im Artikel bei Ethan Marcotte auch stehen -- img-Elemente dürfen, wenn ich mich richtig erinnere, dann weder width- noch height-Attribute bekommen, nur src und alt.

Abgesehen davon halte ich diesen Ansatz -- den UA zu sniffen und entsprechend zu bedienen -- nach wie vor für den unbequemeren. Andererseits kann man generell darüber streiten, ob man nicht für mobile Endgeräte generell eine eigene Seite ausliefern sollte -- schließlich sind all diese Lösungen (soweit ich sehe, ich kenne das Plugin nicht näher) CSS-basiert, man erspart dem mobilen Benutzer also nicht unbedingt Bandbreite, sondern liefert "nur" eine für ihn angenehmere Optik.

(Wer allerdings ein Blog mobil lesen und Bandbreite sparen will, könnte auch einfach den Feed lesen. :-))

Grischa

Grischa am :

Nein, das stimmt halt nicht, Matthias, da die unterschiedlichen Ansichten eben nicht nur CSS bezogen sondern auch vor allem Template bezogen sind. Somit wird für die mobile Auslieferung also nicht etwa alles ausgeliefert und dann per CSS einfach versteckt; "unnötiger" Content wird gar nicht erst ausgeliefert. Ergo: Bandbreiten schonend und schneller ladend.

Es ist also tatsächlich eine andere Seite, die mobil ausgeliefert wird.

Das Plugin geht sogar noch etwas weiter: Man kann auch aus dem gespeicherten Artikel selbst weitere Tags heraus filtern, die mobil vielleicht nicht benötigt oder störend sind oder per Knopfdruck alle Images ausschalten. Das geschieht alles serverseitig, nicht wie Du vermutest clientseitig über ein CSS.

Das Plugin sieht zusätzlich auch vor, bei mobilen Geräten komplett auf eine andere Webseite umzuleiten. Das ist aber durch obige Betrachtung in meinen Augen völlig überflüssig.

Ja. RSS ist die Alternative. Die bevorzuge ich auch, wenn ich in einem Blog schmökern will. In diesem Anwendungsfall geht es aber um etwas anderes: Ich schaue mit meinem mobilen Gerät in Twitter rein und entdecke dort einen Link auf einen interessanten Blogeintrag, den ich anklicke. In dem Fall hilft die RSS Ansicht halt gar nichts..

Zu den fluid images: Ah. Stimmt! Da hatte ich doch glatt noch was übersehen. Danke, ich schaue mal, ob es geht, wenn ich width und height Attribute aus dem Artikel heraus filtere.

Und nochmals Danke! :-D

YellowLed

YellowLed am :

Schön, dann ist es nicht rein CSS-basiert. Wie gesagt: Ich kenne das Plugin nicht. :-)

Es bleibt der Nachteil, dass UA-Sniffing eben ausschließlich für die Clients funktioniert, welche das Plugin „kennt“ -- das entfällt bei einer Lösung, welche die Auflösung des zugreifenden Gerätes zugrunde legt.

Möglicherweise wäre eine Kombination aus beiden Techniken ideal -- über media queries die Auflösung (und Ausrichtung, was gerade bei mobilen Geräten nicht ganz unwichtig ist) ermitteln und basierend auf der serverseitig ein mobiles oder Desktop-Layout ausgeben lassen ..?

(Ich bin übrigens auch kein Fan davon, mobile Geräte auf eine seperate Seite umzuleiten. Die Entscheidung sollte dem Anwender überlassen bleiben, ich wollte es nur erwähnt haben. :-))

Grischa

Grischa am :

Ja, das mobile Plugin muss ein mobiles Gerät erkennen, das ist richtig. Ich vermute allerdings, dass die Trefferquote bei den Geräten, die mir am wichtigsten sind, ziemlich hoch ist, weil nicht Geräte, sondern nur Plattformen erkannt werden müssen. Und letzteres erkennt man viel leichter, als spezielle Geräte.

Mischung: Ja, natürlich. Das Plugin ist ja bereits eine Mischung aus beiden, wenn auch im CSS Teil nicht so weit, wie es möglich ist (da ich kein CSS Experte bin).

Der Backend ist für die Aufbereitung des Contents zuständig (vor allem für die Abspeckung des selben), die CSS für passende Darstellung. Nur mit CSS oder nur mit Backend Änderungen hat man entweder zu viel Datentransfer oder eine nicht benutzbare Darstellung.

Grischa

Grischa am :

Woah, geil! Das klappt jetzt tatsächlich! Auch mit den max 50% Bildern.

Danke CSS / Template Guru! :-D

Grischa

Grischa am :

*UPDATE*

So.. Genug gefrickelt. Ich glaube ich gebe mich mit dem Android Template so nun erst einmal zufrieden. :-)

Das Blog lässt sich jetzt meiner Meinung nach auf dem Android Touchscreen prima bedienen! Über die Optik kann man streiten ;), aber das Gerüst ist so erst mal klasse.

Man könnte noch den Kommentareditor überarbeiten, gerade die Formular Knöpfe sind meiner Meinung nach recht klein, aber ansonsten lässt sich das Blog nun prima mit dem Daumen schmökern.

Wenn man unten die Kategorie "Reisen" auswählt, kann man einen schicken Effekt der "fluiden Images" sehen. Die Argentinienbilder sind auf die komplette Breite des Devices "vergrößert", aber die Dimensionen bleiben erhalten. Sieht echt genial aus, diese Technik ist echt schick!

Der Tipp war natürlich von Matthias, hier kann man selber mal schauen, wie das funktioniert: http://unstoppablerobotninja.com/entry/fluid-images/

Da es ein Template ist, kann an der Optik (Grafiken, Farben) ja nun jeder selbst Änderungen vornehmen. Ich muss noch die automatische Installation der Templates einbauen, dann kann ich die Version wohl releasen und das Thema für mich abhaken.

ebook news

ebook news am :

Tja jetzt habe ich gerade so eine Art billig CMS aufgesetzt, auf meine neue webseite, allerdings, nur weil ich keine datenbank mehr freihabe.

Regina

Regina am :

Super Sache! Mein Freund hat es für mich installiert und es gefällt mir sehr. Vielen Dank für diese Anleitung.

refilix

refilix am :

Hi,

ich hab da mal ne Frage. Ich hatte das Plugin schon in der Orginal Version installiert. Dabei hatte ich auch das Template angepasst. Wenn ich aber bei dieser Version versuche das Template anzupassen, scheint garnichts zu Funktionen.

Ich hatte die Buttons geändert. Aber auf meinem Smartphones werden die die Orginalen Buttons angezeigt. (Android Template).

Selbst wenn ich den kompletten Android Template Ordner lösche wird dieser angezeigt. Hä? Übersehe ich was?

Bitte um Hilfe..

mfg refi

oglasi

oglasi am :

Es bleibt der Nachteil, dass UA-Sniffing eben ausschließlich für die Clients funktioniert, welche das Plugin „kennt“ -- das entfällt bei einer Lösung, welche die Auflösung des zugreifenden Gerätes zugrunde legt.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Dieses Blog erlaubt Dir, Audio Kommentare über audioboo.fm hinzuzufügen. Erstelle einen neuen Boo und gib hier den Link auf die Seite Deines Boos ein.
record
Wenn Du Deinen Twitter Namen eingibst wird Deine Timeline in Deinem Kommentar verlinkt.
Bewirb einen Deiner letzten Artikel
Dieses Blog erlaubt Dir mit Deinem Kommentar einen Deiner letzten Artikel zu bewerben. Bitte gib Deine Blog URL als Homepage ein, dann wird eine Auswahl erscheinen, in der Du einen Artikel auswählen kannst. (Javascript erforderlich)
(Bedingung: 1 Kommentare geschrieben)
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
tweetbackcheck