Cookie-Hinweis Smartphone

20.10.2013

Mobil-Version eines Blogspot-Blog

Damit ein Blog in seiner Mobil-Version auf Smartphones angezeigt werden kann und seine Inhalte auch dort komplett erfasst werden können und abrufbar sind, muss man einiges wissen und berücksichtigen. Hier habe ich erfasst, welche Standards für die mobilen Vorlagen gelten, was man tun muss, um Änderungen am Standard vornehmen zu können, welche Änderungen möglich sind, wie man Änderungen vornehmen kann und welche Adressen innerhalb der Mobil-Version gelten.


Standards


  • Es wird die ursprüngliche Startseite mit den letzten Posts als Startseite angezeigt (Eine eventuelle Weiterleitung der Blogadresse auf eine alternative Startansicht, ist im mobilen Modus unwirksam.)
  • Als einziges Gadget wird das Seiten-Gadget angezeigt.
  • Als Navigation stehen zusätzlich zum Seiten-Gadget Pfeile zur Verfügung, mit denen man sich vor und zurück durch die Posts klicken kann.
  • Es werden nur solche Seiten automatisch in Mobiladressen umgewandelt, die aus "Leeren Seiten" erstellt wurden.
  • Bloginterne Links innerhalb von Seiten und Posts werden nicht automatisch in Mobiladressen umgewandelt.
  • Links, um innerhalb eines Posts zu navigieren, werden nicht automatisch in Mobiladressen umgewandelt.
  • Labels werden unter Posts nicht angezeigt. 
  • Um mobile Labels-Adressen aufrufen zu können, muss man sie händisch verlinkt haben.
  • Der Link in der Überschrift von Labels-Ansichten führt auf die Web-Version der Startseite, also aus der mobilen Version heraus.
  • h4-Überschriften innerhalb von Posts und Seiten haben keinen automatischen Abstand nach oben.
  • Als mobile Vorlage kann man unter Vorlage > Mobil > Zahnradsymbol eine der vorgefertigten Vorlagen oder aber "Benutzerdefiniert" wählen. Benutzerdefiniert übernimmt Designangaben, die man für die Web-Version des Blogs eingestellt hat.


Änderungsmöglichkeiten vorbereiten


Damit Änderungen am Layout und Design wirksam werden können, muss man unter Vorlage > Mobil > Zahnradsymbol "Benutzerdefiniert" als Vorlage für die Mobil-Version wählen. Dadurch wird der Code im HTML so geändert, dass man die Möglichkeit hat, das Layout und Design zu beeinflussen. Ohne die Einstellung auf "Benutzerdefiniert" ist ein Einfluss auf Layout und Design nicht möglich. Ob die Einstellung geklappt hat, kann man in der Vorschau für die mobile Vorlage kontrollieren.

Layout ändern


Hat man die mobile Vorlage erfolgreich auf "Benutzerdefiniert" eingestellt, kann man unter Vorlage > HTML bearbeiten festlegen, welche Gadgets in der Mobil-Version des Blogs angezeigt werden und welche nicht. Dazu muss man in der Zeile

<b:widget id='WIDGETNAME' locked='false' title='WIDGETTITEL' type='WIDGETTYP'>

des entsprechenden Widgets eins der folgenden Kommandos ergänzen:

  • mobile='yes'
  • mobile='no'
  • mobile='only'

Ergbebnisbeispiel:

<b:widget id='HTML2' locked='false' mobile='only' title='Navi' type='HTML'>


Infoquelle: code.blogger.com

Bug 1


Bug: Die Gadgets, die man auf mobile='only' gestellt hat, erscheinen nicht mehr unter Layout.
Notlösung: Man kann sie aber noch über den Werkzeuglink innerhalb der Mobil-Version bearbeiten. Da man die Mobil-Version auch auf dem Desktop anzeigen kann, kann man diese Gadgets trotzdem weiterhin auch am Desktop bearbeiten.

Bug 2


Bug: Unter Layout kann man Gadgets dann auch nicht mehr erfolgreich verschieben.
Notlösung: Man muss alle Gadgets also erst einrichten und dann die mobile='only'-Regel eintragen und diese auch immer dann erst vorübergehend wieder austragen, wenn man unbedingt ein Gadget verschieben muss, z.B. ein neu hinzugefügtes, das an eine bestimmte Stelle soll.

Design ändern


Hat man die mobile Vorlage erfolgreich auf "Benutzerdefiniert" eingestellt,  kann man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen Design-Kommandos speziell für Elemente innerhalb der Mobil-Version des Blogs geben. Dazu muss man die Elemente unterhalb der Klasse .mobile ansprechen.

Infoquelle: code.blogger.com

Mobile Adressen


Die mobilen Versionen der Adressen, haben den normalen Adressen ?m=1 angehängt. Man kann interne Linkziele also auch mit ihrer Mobil-Version verlinken.

Beispiele:
  • http://BLOGADRESSE/?m=1 (Startseite)
  • http://BLOGADRESSE/search/label/Labelname?m=1 (Label)
  • http://BLOGADRESSE/p/seitentitel.html?m=1 (Seite aus "Leere Seite")
  • http://BLOGADRESSE/p/seitentitel.html#ankername?m=1 (Anker auf Seite aus "Leere Seite")
  • http://BLOGADRESSE/2013/10/posttitel.html?m=1 (Post)
  • http://BLOGADRESSE/2013/10/posttitel.html#ankername?m=1 (Anker in Post) 


Lösungsbeispiel


Ich habe das Blog Wasserzeichen Navigator Bspl Web | Mobil so eingerichtet, dass man zwischen der Web-Version und der Mobil-Version wechseln kann und es jeweils unterschiedliche Navigationen gibt. Die Navigation in der Web-Version ist mit normalen Links ausgestattet, die Navigation in der Mobil-Version ist mit Mobillinks ausgestattet.

Interne Links in Posts und auf Seiten habe ich doppelt angegeben, sowohl für die Web-Version als auch für die Mobil-Version.

Den Link in der Label-Überschrift habe ich für die Mobil-Version ausgeblendet.

Wie ich das jeweils realisiert habe, habe ich dort im Blog beschrieben: Wasserzeichen Navigator Bspl: Einrichtung der Mobil-Version Web | Mobil .

Problembeispiel


Das hiesige Blog konnte ich lange nicht erfolgreich auf "Benutzerdefiniert" umstellen und deshalb auch Layout und Design der mobilen Vorlage nicht beeinflussen. Ich konnte zwar "Benutzerdefiniert" speichern, aber der Erfolg blieb aus. Es wurde dann statt der Mobil-Version des Blogs eine "Hoppla es ist ein Fehler aufgetreten"-Seite angezeigt. Wieso das so war, habe ich lange nicht rausfinden können. Mein fast identisches Testblog hatte die Macke nicht. Alles, was da vorkam und was ich da getestet hatte, konnte ich als Ursache ausschließen.

Dennoch konnte das hiesige Blog als Beispiel dafür dienen, dass man eine Mobil-Version des Blogs nutzbar machen kann, auch wenn man nicht alle benutzerdefinierten Möglichkeiten einsetzen kann.

Ich hatte hier damals alternativ eine der mobilen Standardvorlagen gewählt.

Die Grenzen, die mir damals hier im Blog gesetzt waren, um das Blog auch mobil komfortabel durchforstbar zu machen, waren die, die oben unter "Standards" beschrieben sind. Ich musste deshalb das Seiten-Gadget nutzen und darin die Navigation für beide Versionen unterbringen. Die Systematik der Navigation war daher nicht intuitiv erfassbar, sondern bedurfte der Erfahrung mit den Links.

Letztlich konnte ich das Gadget "Wochenschau" als Ursache für die Blockierung der benutzerdefinierten Mobilvorlage des hiesigen Blogs ausmachen. Ich habe das Gadget gelöscht und konnte dann die Mobilvorlage erfolgreich auf "Benutzerdefiniert" umstellen.

Ich habe dann einiges angepasst, die Navigation aber so belassen, wie sie war.

Weiterführende Links




Ute Ziemes, sg.utez.de,

12 Kommentare:

  1. Danke, das ist hilfeich. Muss ich mir merken.

    AntwortenLöschen
    Antworten
    1. Ich habe jetzt ein bisschen rumexperimentiert und festgestellt, dass man den Bug vermeiden kann, in dem man jeweils nur mobile='yes' einträgt und dafür ein Gadget einsetzt, (das ja nur in der Webversion wirksam ist) mithilfe dessen man dann die betroffenen Gadgets in den Webversion dann ausblendet.

      Löschen
    2. Das problematische mobile='only' durch diese pflegeleichte Konstruktion zu ersetzen, ist wirklich die bessere Lösung. Gute Idee. Danke, dass du sie hier teilst.

      Löschen
  2. Danke für die tolle Anleitung. Eigentlich ganz simpel, soll man meinen. :-) Aber irgendwie werden die Widgets bei mir trotzdem nicht auf dem Handy angezeigt. Die Formateinstellung "Benutzerdefiniert" habe ich eingestellt und den Farbtest gemacht. Hast du eine Idee, woran es sonst noch liegen könnte?

    AntwortenLöschen
    Antworten
    1. Dieser Post bezieht sich nur auf Layout-Vorlagen von Blogger, nicht auf die Dynamischen Ansichten. In den Dynamischen Ansichten kann man die Widgets mobil leider nicht anzeigen.

      Bislang ist es hier im Blog so geregelt, dass ich dazu schreibe, wenn der Inhalt eines Posts (auch) für die Dynamischen Ansichten gilt. Das sollte ich vermutlich mal dahingehend ändern, dass ich dazu schreibe, wenn er nicht für sie gilt.

      Löschen
  3. Hallo Ute,

    ich habe ein Template gekauft und bin etwas ratlos. Ich möchte gerne die Linkfarbe in der Mobilversion (Layout: Standard) ändern und habe nicht die geringste Idee, wie das gehen soll. Hast Du eine?

    Viele Grüße
    Danielle

    AntwortenLöschen
    Antworten
    1. Die Frage nach der Linkfarbe wäre vermutlich hinfällig, wenn du die Mobilversion deiner eigenen Vorlage nutzen würdest.

      Ich gehe davon aus, dass erst, wenn du unter Vorlage - Mobilvorlage auf "Nein, auf Mobilgeräten die Desktop-Version meiner Vorlage anzeigen" umgeschaltet und das so gespeichert hast, sich das responsive Design deiner Vorlage entfalten kann. Die Besonderheit deiner Vorlage ist ja, dass sie erkennt, auf welchem Gerät sie angezeigt wird und automatisch die passende Version deiner Vorlage anzeigt, ohne dass man zu einer speziellen Adresse wechseln müsste, wie das bei Vorlagen, die Blogger zur Verfügung stellt, notwendig ist.

      Löschen
    2. Liebe Ute,

      wenn ich das so anklicke, wird leider mobil bei mir eine Desktopversion der Seite angezeigt. Das war ganz am Anfang anders - mir ist nicht ganz klar, wodurch ich das "verstellt" habe. Liegt das jetzt am Handy oder an der Vorlage?

      Vielen Dank für Deine Antwort in jedem Fall!
      Viele Grüße
      Danielle

      Löschen
    3. Tja, das wird wohl nur die Urheberin der Vorlage beantworten können. Offenbar nicht nur auf Spanisch, sondern auch auf Englisch: Support zur Vorlage "Radish".

      Falls du letztendlich doch die Mobillösung von Blogger nutzen musst: Hast du schon getestet, was angezeigt wird, wenn du "Benutzerdefiniert" statt "Standard" einstellst und speicherst?

      Mit den anderen Mobilvorlagen, einschließlich "Standard" kann man mobil jedenfalls keinesfalls etwas beeinflussen. Auch zusammen mit Vorlagen, die Blogger zur Verfügung stellt, geht das nur mit der Einstellung "Benutzerdefiniert". Darunter wird bei den Vorlagen von Blogger dann das meiste von dem übernommen, was man auch für die Webversion eingestellt hat und man kann darüber hinaus die Mobilversion per CSS speziell ansprechen.

      Falls die Einstellung bei dir also eine mobile Variante deines Blogs anzeigt, könnte ich dir auch bei dem einen oder anderen helfen, wenn was in der Mobilversion geändert werden soll.

      Löschen
  4. Ein großes Dankeschön dafür. Hatte mein Blog auf Blogger gestartet, weil ich nicht zu viel Spielereien wollte, hab mich aber fast geärgert, dass die mobile Version nicht einfach im Dashboard zu bearbeiten ist, seit ich eigene Banner einsetzen wollte. Aber es ist echt simple, wenn man weiss wie :) Sehr gut erklärt. Direkt Mal in meinen Lesezeichen gespeichert :)

    AntwortenLöschen
  5. Herzlichen Dank für die super Hilfe! Ich fragte mich noch, wie man Labels auch mobil anzeigen lassen kann? Hier fand ich eine Anleitung:

    quartzfeather.blogspot.de/2016/02/how-to-add-labels-to-blogger-mobile.html

    Der Trenner (Komma) kann beliebig durch andere Zeichen ersetzt werden.

    AntwortenLöschen
    Antworten
    1. Danke für den Tipp. Klappt prima.

      Löschen