Einrichtung der Mobil-Version

Folgend dokumentiere ich, welche Einstellungen ich vorgenommen habe, um die Mobil-Version des Blogs auf Smartphones anzeigbar und seine Inhalte auch darin bequem erreichbar zu machen.

---

Mobil-Version aktiviert

Unter Vorlage > Mobil > Zahnradsymbol "Ja, auf Mobilgeräten die mobile Version meiner Vorlage anzeigen" markieren und Speichern.

Mobil-Vorlage gewählt

Unter Vorlage > Mobil > Zahnradsymbol "Benutzerdefiniert" gewählt, in der Vorschau kontrolliert, ob das Erfolg hatte und das gewohnte Design angezeigt wird und dann gespeichert.

Navigation passend eingerichtet

• Unter Seiten das Seiten-Gadget auf "Nicht anzeigen" gestellt.
• Unter Vorlage > HTML bearbeiten die vorbereiteten HTML-Gadgets für die Navigation passend zugeordnet:
  • Das HTML-Gadget für die Navigation in der Web-Version um die Regel mobile='no' ergänzt: <b:widget id='HTML2' mobile='no' locked='false' title='Navi' type='HTML'>
  • Das HTML-Gadget für die Navigation in der Mobil-Version um die Regel mobile='only' ergänzt: <b:widget id='HTML1' mobile='only' locked='false' title='Navi 2' type='HTML'>

Die mobile Navigation kann ich seither nur in der Mobil-Version mit Hilfe des Werkzeugs bearbeiten, weil die mobile='only'-Regel dazu führt, dass das Gadget nicht mehr unter Layout steht. Unter Layout kann ich seither Gadgets zudem nicht mehr erfolgreich verschieben. Man muss also alle Gadgets 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.

CSS

Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen folgende Einträge für die Mobilversion gemacht:

/* - - - - - - - -
MOBIL-Version ANFANG
- - - - - - - - */

/* VORWIEGEND ABSTÄNDE NACH LINKS */
html .mobile .main-inner {
margin-left: 8px;
}
.mobile .tabs-inner .widget ul {
padding-left: 0px;
}
.mobile #HTML1 ul {
margin-left: 8px;
}
.mobile .tabs-inner .widget ul li {
margin-left: 0px;
padding: 0px;
}
.mobile .tabs-inner .widget li a {
margin-top: 3px;
margin-right: 5px;
margin-left: 0px;
padding: 5px;
}
/* Post-Datum - Zuviel Abstand nach links neutralisieren */
.mobile .mobile-date-outer span {
margin-left: -8px;
padding-left: 0px;
}
.mobile h2.date-header span {
padding-left: 0px;
}

/* VERTIKALE ABSTÄNDE OBERHALB DER POSTS */
.mobile .column-center-outer {
margin-top: 0px;
}
.mobile .post-outer {
margin-top: 0px;
}

/* GESTALTUNG DER NAVIGATION */
.mobile .tabs-inner .widget li a {
font-size: 15px;
}
.mobile .tabs-inner .widget ul li {
float: left;
}

/* AUSBLENDUNGEN */
/* Gplus-Bereich im Post-Footer ausgeblendet */
.mobile .goog-inline-block {
display: none;
}
/* Link zur Sartseite der Webversion in der Labelüberschrift ausgeblendet */
.mobile .status-msg-body a {
display: none;
}

/* SKALIERBARE VIDEOS */
.mobile .responsive-video {
position: relative;
padding-bottom: 56.25%; /*16:9-Seitenverhältnis*/
/* ratio 16x9 */
padding-top: 0px;
height: 0;
overflow: hidden;
}
.mobile .responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 4x3-SEITENVERHÄLTNIS */
.mobile .responsive-video.ratio4x3 {
padding-bottom: 75%;
}

/* NEBENBEMERKUNGEN */
.mobile aside.nebenbemerkung {
float:left;
padding:1%;
background-color:white;
color:#050710;
border-radius:1%;
font-size:85%;
}

/* - - - - - - - -
MOBIL-Version ENDE
- - - - - - - - */

Überschriften

Bei h4-Überschriften in Posts und auf Seiten achte ich darauf, dass je zwei Zeilenumbrüche darüber stehen, damit sie tatsächlich als Überschrift des Folgeabschnitts erscheinen und nicht als Unterschrift des Abschnitts darüber.

Weiterführende Links

• So geht's: Mobil-Version eines Blogspot-Blogs ( Web | Mobil )