Gambio-Tutorials: Eigene Contents mit responsiver Darstellung erstellen

06. März 2018

Eigene Texte sind ein ausgezeichnetes Mittel, um einen Shop lebendiger wirken zu lassen und den möglichen Kunden direkt anzusprechen und zum Kauf zu animieren.

Aufgelockert wird ein langer Text optimalerweise mit einigen Bildern, die passend im Text untergebracht werden. Hier ergibt sich dann allerdings oft das Problem, dass diese Bilder zu unschönen Darstellungen auf unterschiedlich großen Displays der Nutzer führen.

Ein probates Mittel, um diesem Problem entgegenzuwirken, ist das Grid-System von Bootstrap welches ich auch hier schon einmal beschrieben habe.

Mit diesem kleinen Tutorial möchte ich dieses Mal zeigen, wie sich Inhalte mit dem Gridsystem für unterschiedliche Endgeräte optimiert darstellen lassen.

Extra CSS oder Einstellungen über den StyleEdit 3 sind diesmal nicht notwendig. Alles was wir heute brauchen, ist der Content Manager und das grundlegende Verständnis, wie das Gridsystem funktioniert.

Vorbereitungen

Zunächst brauchen wir natürlich einen Text, den wir im Shop anzeigen lassen wollen. In meinem Fall wird es sich dabei um Blindtext handeln, der für den illustrativen Zweck allerdings völlig ausreichend sein sollte.

Zusätzlich benötigen wir natürlich noch ein paar Bilder, die im späteren Verlauf sinnvoll im Text platziert werden sollen.

Zuallererst möchte ich mich aber mit einigen erklärungswürdigen Begriffen beschäftigen, die dabei helfen werden, zu verstehen, was ich in diesem Tutorial mache.

Begriffserklärungen

Das Gridsystem von Bootstrap funktioniert auf Basis von HTML und CSS. Im HTML werden an den betreffenden Elementen bestimmte Klassen (im Sinne von Erkennungsmerkmalen) angehängt, sodass das CSS die Elemente ansprechen und dann die korrekte Aufteilung der Elemente übernehmen kann. Folgende Klassen werden wir im Verlauf kennenlernen und benutzen:

Allgemeine Spaltenverteilung

  • row: Eine “Reihe”, Container-Element für eine Anzahl von col-Elementen (Spalten). Wichtig: Es sollte immer ein HTML-Element mit der Klasse row geben, welches dann die nachfolgenden HTML-Elemente mit den Klassen col- hat.

Beispiel:

<div class="row">
 <div class="col-xs-12">[...]</div>
 </div>
  • col-xs-*: Das Element mit dieser Klasse erhält die Anzahl an Spalten in der mobilen Ansicht, wie angegeben. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12). XS steht für Extra Small, also sehr kleine Anzeigegeräte.

Beispiel:

<div class="row">
<!-- eine Spalte in der mobilen Ansicht -->
<div class="col-xs-1">[...]</div>
<!-- zwei Spalten in der mobilen Ansicht -->
<div class="col-xs-2">[...]</div>
<!-- drei Spalten in der mobilen Ansicht -->
<div class="col-xs-3">[...]</div>
<!-- etc. -->
</div>
  • col-sm-*: Das Element mit dieser Klasse erhält die Anzahl an Spalten in der Ansicht für Tablets im Portrait-Modus, wie angegeben. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12). SM steht für small to medium, also kleinere bis mittelgrosse Anzeigeräte.

Beispiel:

<div class="row">
<!-- eine Spalte in der Portrait-Ansicht -->
<div class="col-sm-1">[...]</div>
<!-- zwei Spalten in der Portrait-Ansicht -->
<div class="col-sm-2">[...]</div>
<!-- drei Spalten in der Portrait-Ansicht -->
<div class="col-sm-3">[...]</div>
<!-- etc. -->
</div>
  • col-md-*: Das Element mit dieser Klasse erhält die Anzahl an Spalten in der Ansicht für Tablets im Landscape-Modus, wie angegeben. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12). MD kann man mit Medium Devices übersetzen, also mittelgrosse Anzeigegeräte.

Beispiel:

<div class="row">
<!-- eine Spalte in der Landscape-Ansicht -->
<div class="col-md-1">[...]</div>
<!-- zwei Spalten in der Landscape-Ansicht -->
<div class="col-md-2">[...]</div>
<!-- drei Spalten in der Landscape-Ansicht -->
<div class="col-md-3">[...]</div>
<!-- etc. -->
</div>
  • col-lg-*: Das Element mit dieser Klasse erhält die Anzahl an Spalten in der Ansicht für Desktop-PCs und Laptops, wie angegeben. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12). LG steht dabei simpel für large, also große Anzeigegeräte.

Beispiel:

<div class="row">
<!-- eine Spalte in der Desktopansicht -->
<div class="col-lg-1">[...]</div>
<!-- zwei Spalten in der Desktopansicht -->
<div class="col-lg-2">[...]</div>
<!-- drei Spalten in der Desktopansicht -->
<div class="col-lg-3">[...]</div>
<!-- etc. -->
</div>

Offsets

  • col-xs-offset-*: Das Element mit dieser Klasse wird in der mobilen Ansicht um die angegebene Anzahl an Spalten nach rechts eingerückt. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12).

Beispiel:

<div class="row">
<!-- sechs Spalten in der mobilen Ansicht, um eine Spalte nach rechts eingerückt -->
<div class="col-xs-6 col-xs-offset-1">[...]</div>
</div>
  • col-sm-offset-*: Das Element mit dieser Klasse wird in der Ansicht für Tablets im Portrait-Modus um die angegebene Anzahl an Spalten nach rechts eingerückt. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12).

Beispiel:

<div class="row">
<!-- sechs Spalten in der Portrait-Ansicht, um eine Spalte nach rechts eingerückt -->
<div class="col-sm-6 col-sm-offset-1">[...]</div>
</div>
  • col-md-offset-*: Das Element mit dieser Klasse wird in der Ansicht für Tablets im Landscape-Modus um die angegebene Anzahl an Spalten nach rechts eingerückt. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12).

Beispiel:

<div class="row">
<!-- sechs Spalten in der Landscape-Ansicht, um eine Spalte nach rechts eingerückt -->
<div class="col-md-6 col-md-offset-1">[...]</div>
</div>
  • col-lg-offset-*: Das Element mit dieser Klasse wird in der Desktop-Ansicht um die angegebene Anzahl an Spalten nach rechts eingerückt. Der Stern dient hier als Platzhalter für die verfügbare Anzahl an Spalten (Minimum: 1, Maximum: 12).

Beispiel:

<div class="row">
<!-- sechs Spalten in der Desktop-Ansicht, um eine Spalte nach rechts eingerückt -->
<div class="col-lg-6 col-lg-offset-1">[...]</div>
</div>

Verkettungen von Klassen

Es ist zu beachten, dass eine Verkettung der Klassen möglich ist, sodass wir eine unterschiedliche Aufteilung der Spalten für die unterschiedlichen Ansichten erreichen können. Es können also in einer Anweisung die Regeln für verschiedengroße Geräte auf einmal geschrieben werden.

Beispiel:

<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">[...]</div>
</div>

Das Beispiel würde in Worte übersetzt folgendes bedeuten: Volle Breite in der mobilen Ansicht, acht Spalten in der Ansicht Tablet-Portrait, sechs Spalten in der Ansicht Tablet-Landscape und vier Spalten in der Desktopansicht.

Analog verhält es sich auch bei der Vergabe der Offset-Klassen, sodass auch hier unterschiedlich große Einrückungen für die unterschiedlichen Ansichten möglich sind.

Soll für aufeinanderfolgende Ansichten eine gleiche Spaltenverteilung oder Einrückung erreicht werden, so würde es reichen, nur die Klasse für die kleinste Ansicht zu vergeben. Ein col-xs-6 würde also auch für alle anderen Ansichten sechs Spalten vergeben, wenn keine weitere Klasse für eine größere Ansicht folgt.

Beispiel:

<div class="row">
<div class="col-xs-6 col-md-4">[...]</div>
</div>

In Worten würden diese Anweisungen folgendes bedeuten: In der mobilen Ansicht und in der Ansicht für Tablets im Portrait-Modus sei bitte sechs Spalten breit, für die Ansicht im Landscape-Modus und in der Desktop-Ansicht aber bitte nur vier Spalten.

Gleiches Verhalten gilt auch hier für die Offset-Klassen, sodass hier unnötiger Code vermieden werden kann.

Sollen die Spalten aber für jede Ansicht individuell vergeben werden, so müssen die jeweiligen Klassen auch entsprechend genutzt werden. Dies ist in Ausnahmefällen erforderlich, wenn bestimmte Inhalte es erfordern, dass sie in einer Ansicht anders dargestellt werden müssen.

Automatisches Anpassen von Bildern oder anderen Inhalten

  • img-responsive: Diese Klasse an ein Bildelement angehängt bewirkt, dass sich das Bild immer dem in seinem Container verfügbaren Platz anpasst.
  • embed-responsive: Diese Klasse wird in einem HTML-Element benötigt, welches einen externen Inhalt, wie ein iframe oder ein Video, beinhalten soll, dass sich automatisch an die Auflösung des Endgerätes anpasst. Das Seitenverhältnis, in welchem der externe Inhalt angezeigt werden soll, kann über die beiden nachfolgenden Klassen konfiguriert werden.
  • embed-responsive-16by9: Zeigt einen externen Inhalt im Seitenverhältnis von 16 zu 9 an.
  • embed-responsive-4by3: Zeigt einen externen Inhalt im Seitenverhältnis von 4 zu 3 an.
  • embed-responsive-item: Der externe Inhalt, der responsiv eingebunden werden soll, benötigt diese Klasse, damit die Anpassung an die Bildschirmauflösung korrekt funktioniert.

Beispiel:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Inhalte für bestimmte Auflösungen verstecken oder anzeigen

In manchen Fällen kann es allerdings sinnvoll sein, das Bild auszublenden, wenn es zu klein werden würde. Alternativ könnte für kleinere Ansichten ein anderes Bild hinterlegt werden, welches stattdessen angezeigt wird. Wie das funktioniert erkläre ich im Folgenden.

  • hidden-xs: Ein Element mit dieser Klasse ist nur in der mobilen Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.
  • visible-xs: Ein Element mit dieser Klasse wird nur in der mobilen Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.
  • hidden-sm: Ein Element mit dieser Klasse ist nur in der Portrait-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.
  • visible-sm: Ein Element mit dieser Klasse wird nur in der Portrait-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar
  • hidden-md: Ein Element mit dieser Klasse ist nur in der Landscape-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.
  • visible-md: Ein Element mit dieser Klasse wird nur in der Landscape-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.
  • hidden-lg: Ein Element mit dieser Klasse ist nur in der Desktop-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.
  • visible-lg: Ein Element mit dieser Klasse wird nur in der Desktop-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.

Zur Veranschaulichung der unterschiedlichen Klassen hier noch eine kleine Tabelle. Diese ist auch hier einsehbar:

Tabelle zur Sichtbarkeit von Display-Ansichten

Abb. 1: Tabelle zur Veranschaulichung der Sichtbarkeit

Texte und andere Inhalte vorbereiten

Nachdem wir nun die wichtigsten Klassen zum responsiven Gliedern von Texten gezeigt haben, können wir uns um die eigentliche Arbeit kümmern: Wir brauchen einen Text und Bilder beziehungsweise andere Inhalte, die wir als Content in den Shop einbauen wollen.

Für mein Beispiel werde ich einen automatisch generierten Blindtext, sowie einige Testbilder und ein Testvideo verwenden. Diese sollten den Zweck der Veranschaulichung gut erfüllen.

Folgende Bilder werden verwendet. Hier zur Veranschaulichung verkleinert:

Folgendes Video soll von extern eingebunden werden:

https://player.vimeo.com/video/163276989

Folgender Text soll verwendet werden:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Damit wären unsere Vorbereitungen abgeschlossen und wir können uns darum kümmern, den Text wie gewünscht zu formatieren.

Tipp:
Nutzt zum Formatieren der Texte einen Texteditor mit so genannter Syntax-Highlighting-Funktion. Damit behaltet ihr einen besseren Überblick über euren Text.

Texte und andere Inhalte passend anordnen

Nachdem wir nun alle relevanten Begriffe geklärt und alle Inhalte zusammen gesammelt haben, die wir für unseren Content benötigen, können wir damit beginnen, die Texte, Bilder und externen Inhalte in die gewünschte Reihenfolge zu bringen.

Gewünschter Inhalt über die gesamte Breite

Soll ein Inhalt über die gesamte verfügbare Breite angezeigt werden, so wird folgendes HTML benötigt. Da in meinem Beispiel in allen Ansichten der Inhalt über die gesamte Breite angezeigt werden soll, wird nur die Klasse col-xs-12 benötigt.

Ein Bild über die gesamte Breite anzeigen:

<div class="row">
<!-- Ein Bild über die gesamte verfügbare Breite -->
<div class="col-xs-12">
<img class="img-responsive" src="pfad/zum/bild.png" alt="Beispielbild"/>
</div>
</div>

Dies würde folgende Ausgabe im Shop erzeugen:

Bildausgabe im Gambio-Shop

Abb. 2: Einbindung eines Testbildes über die gesamte Breite. Da das Bild nur 800px breit ist, ist noch ein kleiner Rand rechts zu sehen

Text über die gesamte Breite anzeigen

<div class="row">
<!-- Ein Text über die gesamte verfügbare Breite -->
<div class="col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

Dieser Text würde im Shop dann wie folgt angezeigt werden:

Textausgabe im Gambio-Shop

Abb. 3: Einbindung eines Textes über die gesamte Breite des Shops

Einen externen Inhalt über die gesamte Breite anzeigen

<div class="row">
<!-- Ein Video über die gesamte verfügbare Breite -->
<div class="col-xs-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1"></iframe>
</div>
</div>
</div>

Dies würde folgendes Video im 16:9 Format über die gesamte Seite anzeigen:

Videoausgabe im Gambio-Shop

Abb. 4: Beispielhafte Einbindung eines Videos

Ein eingerückter Inhalt

Soll ein Inhalt ein Stückchen eingerückt dargestellt werden, so ist das mit den oben genannten offset-Klassen möglich. Da das Vorgehen hier für alle Inhalte analog ist, zeige ich dies nur anhand eines einzelnen Beispiels:

<div class="row">
<!-- Ein Text mit einer Spalte Einrückung -->
<div class="col-xs-offset-1 col-xs-11">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

Das obige Beispiel würde einen Text erzeugen, der um eine Spalte in allen Ansichten eingerückt ist.

Eingerückter Text im Gambio-Shop

Abb 5: Beispielhafte Einbindung eines eingerückten Inhalts

Sollen für die unterschiedlichen Ansichten unterschiedlich starke Einrückungen verwendet werden, müssen die offset-Klassen der jeweiligen Ansichten verwendet werden und die Spaltenanzahl des Inhalts ist entsprechend anzupassen.

<div class="row">
<!-- Ein Text über die gesamte verfügbare Breite -->
<div class="col-xs-offset-1 col-md-offset-2 col-xs-11 col-md-10">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

Dieses modifizierte Beispiel würde einen Text erzeugen, der in der mobilen und in der Portrait-Ansicht um eine Spalte eingerückt ist und ab der Landscape-Ansicht um zwei Spalten eingerückt wird.

Mehrere Inhalte nebeneinander

Um mehrere Inhalte gut lesbar und gegliedert anzuzeigen, bietet es sich hin und wieder an, diese auch nebeneinander anzuzeigen. Wie sich mehrere Inhalte nebeneinander anordnen lassen, möchte ich im folgenden Beispiel veranschaulichen.

<!-- Drei Inhalte nebeneinander -->
<div class="row">
<div class="col-xs-12 col-md-4">
<img alt="Beispielbild" class="img-responsive" src="images/testbild1.png" />
</div>

<div class="col-xs-12 col-md-8 col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>

<div class="col-xs-12 col-lg-4">
<br class="hidden-lg">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/163276989?color=00599d&amp;title=0&amp;byline=0&amp;portrait=0?autoplay=1"></iframe>
</div>
</div>
</div>

<br>
<!-- Ein Text über die gesamte Breite -->
<div class="row">
<div class="col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

<br>
<!-- Ein Text und ein Bild, die sich die Breite zu gleichen Teilen aufteilen -->
<div class="row">
<div class="col-xs-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>

<div class="col-xs-12 col-md-6">
<img alt="Beispielbild" class="img-responsive" src="images/testbild2.png" />
</div>
</div>

<br>
<!-- Ein Text über die gesamte Breite -->
<div class="row">
<div class="col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

<br>
<!-- Ein Bild und ein Text, die sich die Breite im Verhältnis eins zu drei teilen -->
<div class="row">
<div class="col-xs-12 col-md-3">
<img alt="Beispielbild" class="img-responsive" src="images/testbild3.png" />
</div>

<div class="col-xs-12 col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>

Das hier verwendete Beispiel vereint so gut wie alle vorherigen Beispiele in sich.

Dieses würde einen Content erzeugen, welcher in der mobilen Ansicht alle Inhalte über die gesamte Breite anzeigt, um eine gute Lesbarkeit zu gewährleisten.

Ab der Landscape-Ansicht, in der wieder ausreichend Platz zur Anzeige zur Verfügung steht, werden die Inhalte wieder nebeneinander dargestellt. Ausnahme ist hier der erste Inhaltsblock, der erst ab der Desktop-Ansicht dreispaltig wird, um die Lesbarkeit weiterhin zu gewährleisten.

In der Landscape-Ansicht wird das Video noch in einer extra Zeile angezeigt. Darüber hinaus wird an der Stelle noch eine kleine Besonderheit verwendet, die ich im folgenden Abschnitt genauer erklären möchte. Hier wird ein Seitenumbruch zwischen Text und Video platziert, welcher erst ab der Desktop-Ansicht ausgeblendet wird.

Dieser dient dazu einen kleinen Abstand zwischen Text und Video zu schaffen, so lange diese Elemente untereinander dargestellt werden, da diese sonst zu nahe beieinander liegen würden.

Wie das Beispiel dann live aussehen würde, zeigen die folgenden Bilder:

Mobile Ansicht

 

Beispiel für mobile Ansicht

Abb. 6: Beispiel für mobile Ansicht


Portrait-Ansicht

 

Beispiel für die Portrait-Ansicht

Abb. 7: Beispiel für die Portrait-Ansicht


Landscape-Ansicht

 

Beispiel für die Landscape-Ansicht

Abb. 8: Beispiel für die Landscape-Ansicht


Desktop-Ansicht

 

Beispiel für die Desktop-Ansicht

Abb. 9: Beispiel für die Desktop-Ansicht

Inhalte je nach Ansicht anzeigen oder ausblenden

Je nach eingebundenem Inhalt kann es notwendig sein, dass dieser nur für bestimmte Ansichten angezeigt wird oder in bestimmten Ansichten durch eine alternative Darstellung ausgetauscht werden soll. Dies lässt sich mit den hidden-*– und visible-*– Klassen umsetzen.

Sollen zum Beispiel sämtliche Bilder und Videos aus der mobilen Ansicht entfernt werden, sodass nur noch Text angezeigt wird, kann folgendes HTML verwendet werden:

<!-- Drei Inhalte nebeneinander -->
<div class="row">
<div class="hidden-xs hidden-sm col-md-4">
<img alt="Beispielbild" class="img-responsive" src="images/testbild1.png" />
</div>

<div class="col-xs-12 col-md-8 col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>

<div class="hidden-xs hidden-sm col-md-12 col-lg-4">
<br class="hidden-lg">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/163276989?color=00599d&amp;title=0&amp;byline=0&amp;portrait=0?autoplay=1"></iframe>
</div>

</div>
</div>

Obiges Beispiel würde dafür sorgen, dass auf mobilen Geräten und in der Portrait-Ansicht nur der Text angezeigt wird, während ab der Landscape-Ansicht wieder Bild und Video angezeigt werden.

Soll ein Inhalt nur für eine ganz bestimmte Ansicht angezeigt werden, so lässt sich dies über die visible-*-Klassen erreichen. Dies kann zum Beispiel notwendig sein, um für eine bestimmte Ansicht ein Bild anzuzeigen, welches genau auf die gewählte Ansicht angepasst ist.

Beispiel:

<!-- Bild mit Alternative für mobile Geräte -->
<div class="row">
<div class="hidden-xs col-sm-12">
<img alt="Beispielbild" class="img-responsive" src="images/testbild1.png" />
</div>
<div class="visible-xs col-xs-12">
<img alt="Beispielbild" class="img-responsive" src="images/testbild1_xs.png" />
</div>
</div>

Dieses Beispiel würde einen Inhalt erzeugen, welcher ein Bild enthält, welches ab der Portrait-Ansicht angezeigt wird und eine Alternative beinhaltet, die nur auf mobilen Geräten angezeigt werden wird. Sämtliche Beispiele können natürlich analog für die anderen Ansichten angewendet werden

Schluss

Und damit sind wir auch schon wieder am Ende angelangt. Ich hoffe, ich konnte euch mit diesem kleinen Tutorial ein klein wenig näher bringen, wie das Bootstrap-Gridsystem genutzt werden kann, um Inhalte sauber gegliedert zur Ansicht zu bringen.

Möchtet ihr noch etwas wissen oder habt ihr Vorschläge für künftige Tutorials? Haut in die Tasten und lasst es uns wissen!


Für aktuelle News aus der Welt des E-Commerce folge uns bei Twitter

Selbstverständlich findest du uns auch bei Facebook

Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop

Mehr erfahren