Inhalte in der Mobilversion anders anzeigen lassen

In der Webversion des Blogs ist es schade, wenn man die Breite des Blogs nicht ausnutzt, um Inhalte in Posts oder auf Seiten nebeneinander anzuzeigen, die nebeneinander stehend übersichtlicher sind. Auch Hover-Effekte können hier die Nutzbarkeit verbessern.

Auf Smartphones sind derlei Darstellungsformen jedoch ungeeignet.

---

Bilder mit individueller Größenangabe, die nicht automatisch in der Mobilversion verkleinert werden oder breite Tabellen können nicht sinnvoll auf Smartphones angezeigt werden. Hovereffekte machen dort gar keinen Sinn, sondern können - zufällig ausgelöst - unter Umständen sogar die weitere Nutzung der Seite verhindern. (Wenn z.B. ein Abschnitt per Hover auf eine höhere Ebene gelegt wird und man nicht mehr an die Ebene daunter kommt, um wischen zu können.)

Stellt man derart problematische Inhalte in zwei verschiedenen Versionen in den Post oder auf die Seite und umrahmt sie jeweils mit einem Div-Container, den man mit einer speziellen Klasse ausgezeichnet hat, dann kann man, wenn die Mobilvorlage des Blogs erfolgreich auf "Benutzerdefiniert" gestellt ist, in der Webversion nur den Div-Container mit der Klasse für die Webversion anzeigen lassen und in der Mobilversion des Blogs nur den Div-Container mit der Klasse für die Mobilversion anzeigen lassen. So kann man beispielsweise in der Webversion Daten nebeneinander in einer Tabelle präsentieren, die Daten in der Mobilversion aber untereinander stehend anzeigen lassen.

Als CSS-Kommandos benötigt man dafür nur Kommandos zum Aus- bzw. Einblenden.

Beispiel:

Folgend sieht man in der Webversion dieses Posts das Wort "Webinhalt" und in der Mobilversion sieht man statt dessen das Wort "Mobilinhalt".

Webinhalt

Mobilinhalt

Zur Kontrolle kann man hier zwischen den Versionen wechseln:

• http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html
• http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html?m=1

Mit folgenden Einträgen ist das realisiert worden:

In den Post im HTML-Modus des Blogger-Editors eingetragen:

<div class="webinhalt">
Webinhalt
</div>

<div class="mobilinhalt">
Mobilinhalt
</div>

Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eingetragen:

/* Abschnitte für Webinhalte oder Mobilinhalte je nach Blogversion ein- oder ausblenden */
.mobilinhalt,
.mobile .webinhalt {
display:none;
}
.webinhalt,
.mobile .mobilinhalt {
display:block;
}

Wann immer ich nun einen Abschnitt mit der Klasse "webinhalt" oder "mobilinhalt" auszeichne, werden diese CSS-Kommandos für den jeweiligen Container wirksam.

Alternativ kann man die CSS-Kommandos zwischen Style-Klammern im HTML-Modus des Blogger-Editors unter den sonstigen Inhalten eintragen, nämlich so:

<style type="text/css">
/* Div-Container für Webinhalte oder Mobilinhalte je nach Blogversion ein- oder ausgeblendet */
.mobilinhalt,
.mobile .webinhalt {
display:none;
}
.webinhalt,
.mobile .mobilinhalt {
display:block;
}
</style>

In dem Fall gelten die Kommandos jedoch nur speziell für diesen Post bzw. diese "Seite", bzw. für die Abschnitte, die mit den entsprechenden Klassen ausgezeichnet sind und im HTML aller Elemente stehen, die gerade geöffnet sind.

Ob man nur ein Wort in die Container setzt oder ein Bild oder eine Tabelle oder eine halbe Seite mit allerhand verschiedenen Inhaltsarten, ist egal; denn ausgeblendet oder eingeblendet wird der jeweilige Container mit all seinen beliebigen Inhalten, also alles vom Beginn des öffnenden Div-Tags bis zum Ende des schließenden Div-Tags.

Ute Ziemes, sg.utez.de, 2016-02-11