HTML #36: Gadgets in mobiler Ansicht ein- und ausblenden

Langezeit habe ich gar nicht gerne mit dem Handy auf Blogs geschaut. Inzwischen hat sich das geändert. In einer kleinen Pause auf der Couch zwischendurch mal das Handy zücken und schauen was es so neues gibt ist irgendwie entspannter als sich dafür immer an den Laptop zu setzen. Das hat sich noch einmal verstärkt seit der Laptop nicht mehr täglich an ist (wie das gekommen ist weiß ich gar nicht so genau). Was mir seitdem umso mehr aufgefallen ist, dass die mobile Ansicht von Blogger zwar schön schlicht und übersichtlich ist, aber doch einfach vieles fehlt. So verstehe ich, dass der Bildschirm einfach zu schmal ist um die Sidebar anzuzeigen und wenn ich ehrlich bin, dann kann ich darauf sogar bis zu einem gewissen Grad verzichten, denn wenn weniger angezeigt werden muss, dann geht das Laden auch schneller. Nichtsdestotrotz gibt es Dinge auf die mag ich einfach nicht verzichten. So findet sich mein Impressum beispielsweise in der Fußzeile bzw. dem Footer. In der Übersicht mit den verschiedenen Seiten gefiel es mir einfach nicht. Das ist ja erstmal okay, aber das hatte zur Folge, dass das Impressum in der mobilen Ansicht nicht zu finden war. Ich hatte schon überlegt es zusätzlich noch einmal auf die Seite mit dem Kontaktformular zu legen, aber auch das wäre nicht Ideal. Worauf ich nur ungern verzichtet habe waren die Socialmediabutton. Klar kann man drauf verzichten, aber was ist so verkehrt daran, wenn auch Handynutzer einem direkt folgen können oder sich auf Instagram oder Pinterest umsehen können. Genau darum soll es heute gehen: Wie sorge ich dafür, dass bestimmte Gadgets auch in der mobilen Ansicht dargestellt werden?



Zunächst einmal zum Zustand vorher. Typisch für die mobile Ansicht (die erkennt man übrigens an dem /?m=1 am Ende der URL) ist, dass es nur eine Spalte gibt, also keine Sidebar. Wenn man sich mal überlegt wie klein so ein Handydisplay im vergleich mit einem Tablett oder gar einem Laptop ist, dann macht es durchaus Sinn sich auf das wesentliche zu beschränken, damit es übersichtlich bleibt und nicht zu überladen wirkt. Wer wirklich alles betrachten will, der kann ja immer noch die "Web-Version anzeigen" oder sich mit einem Gerät mit größerem Display auf die Reise durchs WWW machen.


Was für einen Unterschied die mobile und die Desktopansicht machen kann man hier ganz gut sehen. Beide Screenshots wurden mit einem 10'' Tablett gemacht. Während die mobile Ansicht hier wirklich schon fast verloren wirkt lassen sich die Inhalte in der Standardansicht ganz gut erkennen. Für Geräte mit größerem Bildschirm lohnt es sich also fast nicht auf die Sidebar zu verzichten während man mit dem Handy doch nur noch einen sehr kleinen Bereich für den Text hat.


Wie ihr vielleicht schon gesehen habt ist auf dem ersten Bild ganz oben noch keine Reihe mit Sociellmediabutton zu sehen, auf den Vergleichsbildern zwischen den Ansichten jedoch schon. Es ist also möglich diese Button bzw. bestimmte Gadgets auch in der mobilen Ansicht anzuzeigen (viel mehr kann man sogar Gadgets auch nur in der mobilen Ansicht darstellen lassen). Wer jetzt denkt, dass das bestimmt schwer ist, der irrt sich. Trotzdem gilt wie immer: Vorher eine Sicherung machen!!! Wie genau das geht habe ich bereits in "Teil 21: Blog und Layout sichern" erklärt. Dort könnt ihr alles nachlesen. Nachdem der Blog gesichert ist können wir gefahrlos am HTML arbeiten. Wenn etwas schief gehen sollte, dann stellen wir einfach alles wieder her und versuchen es von vorne. 


Bevor es so richtig los gehen kann müssen wir uns erst überlegen, was genau wir auch in der mobilen Ansicht dargestellt haben wollen. Bei mir war das wie gesagt das HTML-Gadget mit den Socielmediabutton und das HTML-Gadget in der Fußleiste, dem Footer. Wie man die Button und auch andere Gadgets einfügt habe ich bereits vorher erklärt, schaut bei Fragen gerne die älteren Teile der Reihe an. Um zu wissen bei welchen Gadgets wir Anpassungen vornehmen müssen, gilt es deren Nummer in Erfahrung zu bringen. Das geht ganz einfach in dem wir im Bereich "Layout" das entsprechende Gadget heraussuchen, auf "Bearbeiten" klicken und uns dann die URL genauer ansehen.


Dazu müssen wir evtl. in die Adressleiste klicken und dann mit gedrückter Maustaste nach rechts ziehen oder wir klicken die Zeile an und navigieren uns mit den Pfeiltasten zur Seite. Ganz am Ende steht nämlich eine Nummer. Hier "HTML3". Das bedeutet, dass ich später das HTML-Gadget mit der Nummer 3 in der mobilen Ansicht sehen will und dieses daher entsprechend einstellen muss. Diesen Schritt wiederholen wir für alle Gadgets, die wir sehen wollen. Dabei gilt es aber immer zu bedenken, dass die mobile Ansicht nicht zu überladen sein sollte, damit man sie schnell laden kann und die wichtigen Sachen sofort findet. Wer wirklich alles sehen will hat ja immer die Option zur Desktop-Ansicht zu wechseln.


Im Bereich "Vorlagen" klicken wir auf "HTML bearbeiten" und landen dann in den tiefen unseres Blogs. Hier müssen wir aber gar nicht lange suchen denn wir können oben "Weiter zum Widget" klicken (Warum das beim Einfügen Gadget und jetzt Widget heißt muss man nicht verstehen, wichtig ist für uns nur das Ergebnis). Hier wählen wir einfach das Widget bzw. Gadget aus, dass wir anpassen wollen. Bei mir waren es die Nummern 3 (beim ersten Versuch noch Nummer 1, also nicht irritieren lassen).

Zwischen "id='HTMLx' locked='false'" und "titel=''" fügen wir nun unseren Befehl "mobil='yes'" ein. Bei mir gab es beim Versuch zu speichern erst einen Fehler, denn ich hatte schräge Anführungszeichen. Warum auch immer. 


Erkennt man den Unterscheid zwischen den Anführungszeichen? Wenn das bei euch auch der Fall ist, dann kopiert einfach die Anführungszeichen aus dem bereits existierenden HTML-Text und fügt sie ein. Dann sollte es klappen. Zum Speichern einfach nur auf den "Vorlage speichern"-Botton klicken. Ebenso verfahrt ihr für alle weiteren Widgets, die ihr auch in der mobilen Ansicht angezeigt haben wollt. 


Nachdem ist mit meinen beiden (Impressum und Sozialmedia) fertig war musste ich feststellen, das meine Button viel zu groß für die mobile Ansicht waren. In zwei Zeilen wollte ich sie nicht, denn so nahmen sie mehr Platz ein als der Header. Wie gut, dass es auch die Möglichkeit gibt bestimmte Widgets auch nur in der mobilen Ansicht darzustellen. Schnell ein neues Widget mit identischem Inhalt angelegt. Nun gab es kruzfristig zwei Reihen Sozialmediabutton in meinem Blog, aber das ist okay. Das eine Widget habe ich einfach für die mobile Ansicht angepasst (daher ist oben auch der Wechsel von HTML1 zu HTML3 zustande gekommen). Die Größe der Button habe ich von 45 auf 20 Pixel reduziert und auch die Zwischenräume sind von 10 auf 5 Pixel geschrumpft. Fürs Handy also richtig, aber alles doppelt wollte ich im Blog ja auch nicht haben.


Also wieder ab ins HTML und dort das neue Widget HTML3 (achtet bei den Nummern unbedingt darauf was ihr sehen wollt und geht wie oben vor und übernehmt nicht einfach die Zahlen von mir, es sind nur Beispiele, die auf meinen Blog zutreffen) ausgewählt. Hier geben wir statt "mobil='yes'" nund "mobil='only'" ein. Dies führt dazu, dass dieses Gadget nur in der mobilen Ansicht dargestellt wird. Im Beispiel unten sieht man auch, dass die Anführungszeichen gerade sind und es somit auf Anhieb geklappt hat.


Wieder speichern und schauen ob alles klappt. Mit "mobil='no'" lassen sich übrigens gezielt Gadgets ausblenden, die dann nicht mehr in der mobilen Ansicht erscheinen sollen.


Die Button in der mobilen Ansicht sind nun wirklich nicht sehr groß, aber durch die bekannten Symbole sollten sie trotzdem zu erkennen sein. Alternativ besteht auch die Möglichkeit einfach nicht alle Symbole darzustellen sondern nur die wichtigsten, also zu den Kanälen die häufig genutzt werden. Bei mir würden da also z.B. Twitter rausfallen. Mit weniger Symbolen wäre auch eine größere Darstellung ohne Zeilenumbruch möglich. Getrennte Widgets bieten hier also viele Möglichkeiten die mobile Ansicht zu optimieren und sich auf das Wesentliche zu beschränken.


Zum Abschluss nun das Nachherbild mit kleinen Button und endlich einem Impressum am Ende der Seite. Ebenso wäre es möglich euer Profil (meines ist ja sonst in der Sidebar) in der mobilen Ansicht ebenfalls anzuzeigen. Ich habe mich dagegen entschieden, da ich eine seperate "über mich"-Seite habe, in der man sehen kann wer hinter dem Blog steckt.

Noch einmal in Kürze:
Mit dem Befehlt "mobil='yes'" lassen sich bestimmte Gadgets einblenden, während sie mit  "mobil='no'" ausgeblendet werden. Mit  "mobil='only'" hingegen sind sie nur über die mobile Ansicht und nicht der der Desktop-Version zu sehen.

Sollten noch Fragen offen sein oder ihr andere Fragen zum Thema HTML im Blog haben, dann gerne her damit. Vielleicht gibt es ja ab jetzt wieder öfter neue Teile.

8 liebe & nette Meinungen

  1. Vielen Dank für die tolle und ausführliche Anleitung. Das werde ich bestimmt mal zu Hause ausprobieren, denn im Moment bin ich nur mit dem Handy unterwegs und genau soche Kleinigkeiten fehlen mir aufm Handy.
    LG, Rike

    AntwortenLöschen
    Antworten
    1. Hallo Rike,

      Ganz viel Erfolg bei der Umsetzung.

      Liebe Grüße
      Rebecca

      Löschen
  2. Liebe Rebecca,
    vielen Dank für dieses überaus nützliche Tutorial. Wenn auch mein Englisch schon sehr schlecht ist, meine HTML-Kenntnisse sind noch schlechter :o).
    Deine HTML-Reihe habe ich mir für den nächsten Urlaub mal vorgemerkt. Die möchte ich unbedingt und am Stück durch arbeiten.
    Mich würde es sehr freuen, wenn Du öfter mal ein HTML-Tutorial für uns Normalos schreibst.
    Lieben Gruß
    Angie

    AntwortenLöschen
    Antworten
    1. Hallo Angie,

      ich weiß nicht ob es unbedingt sinnvoll ist von 1 zu starten und dann den Nummern zu gehen. Der erste Teil ist definitiv der erste, aber danach ging es eher so wie gerade die Fragen kamen. Schau vielleicht mal oben im Reiter unter "HTML". Dort habe ich die einzelnen Teile ein wenig thematisch gruppiert. Wenn du noch Fragen hast, dann versuche ich gerne zu helfen.

      Liebe Grüße
      Rebecca

      Löschen
  3. Sehr toll, vielen Dank! Die Anzeige meiner Leiste oben hab ich schonmal genau so bearbeitet, da war das ziemlich kompliziert mit dem dropdown Menü. Hab also ziemlich geschwitzt dabei. Die Sache mit den Buttons find ich super, das will ich auch unbedingt.
    Vielen Dank für das Tutorial!

    AntwortenLöschen
    Antworten
    1. Hallo Nina,

      so ein Menü finde ich mobil auch recht schwer. Für den Blog von meinem Bruder habe ich auch eines geschrieben. Dort geht man ja mit der Maus drüber und kann dann das Untermenü anwählen. Aber mit dem Handy kann man ja nirgendwo drüber gehen, durch das Tippen klickt man ja quasi gleich an. In diesem Fall kann es wirklich praktisch sein eine zweite Steuerung bzw. Navigation speziell für die mobile Ansicht zu haben. So lässt sich alles komfortabel bedienen.

      Liebe Grüße
      Rebecca

      Löschen
  4. Tolles Tutorial! Hat super geklappt bei mir :)

    AntwortenLöschen
    Antworten
    1. Hallo Nina,

      das freut mich ungemein :)

      Liebe Grüße
      Rebecca

      Löschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.

Related Posts Plugin for WordPress, Blogger...