Schlagwort-Archiv: responsiv

Bootstrap 3, das CSS-Framework

Geschätzte Lesezeit: 4 Minuten, 38 Sekunden

Bootstrap ist das bekannteste und beliebteste CSS-Framework. Wenn es um responsive Layouts und Webseiten geht, ist Bootstrap die erste Wahl.
Dieser Artikel erklärt, was Bootstrap ist und welchem Prinzip dieses Frameworks gehorcht.

Bootstrap Framework

Was ist Bootstrap?

Bootstrap ist ein Open Source CSS-Framework von Twitter, das responsive Layouts für mobile Geräte unterstützt und für HTML5 Anwendungen bestens geeignet ist. CSS steht für Cascading Style Sheet und erlaubt es, Layoutangaben für HTML Webseiten zu definieren.

Das Framework legt ein Grid über die gesamte Page. Das bedeutet, die gesamte Breite wird in Spalten und die Höhe in Zeilen aufgeteilt. Das Grid hat üblicherweise 12 Spalten. Man kann daraus auch Zellen erzeugen, die sich beispielsweise über vier Spalten erstrecken. Geht ein Eingabefeld, eine Überschrift oder ein Button über alle Spalten, bedeutet das die volle Bildschirmbreite. Bei sich änderner Auflösung oder Fenstergröße des Browsers skaliert Bootstrap die Ansicht dann automatisch. Das geht, weil das genormte Gridsystem verwendet wurde!

CSS basiert auf Elementen wie <h1> (Überschrift erster Ebene für Titel), Identifikatoren (das sind frei wählbare Namen für Elemente, die pro Seite nur einmalig vorkommen sollten) und Klassen (das ist eine Bezeichnung für eine Menge gleichartiger Elemente, beispielsweise alle Erwähnungen eines Firmennamens).

CSS an sich kann alles, was Bootstrap auch kann, aber CSS erfordert es, dass man sich umfassend Gedanken zu Farben, Größen, Abständen und Designelementen macht. Mit Bootstrap sind viele dieser Aspekte in Komponenten vorgedacht und werden out of the box und kostenlos geliefert. Dazu gehören auch Buttons, Dialogboxen und vieles mehr.

Man verwendet Bootstrap, indem man es mit einem einfachen Befehl in eine HTML Datei im Kopfbereich (also innerhalb des <head> Tags) einbindet, etwa so:

<code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt">></span></code>

Nun kann man alle vorgedachten Komponenten von Bootstrap verwenden, ganz einfach. Die Anzeige eines Bootstrap-Buttons geschieht beispielsweise so (unser Beispiel ist von der Bootstrap-Website und zeigt alle möglichen Button Ausprägungen, die man aber selbst leicht anpassen kann):

<code class="language-html" data-lang="html"><span class="c"><!-- Standard button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>

<span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>

<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>

<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>

<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>

<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>

<span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code>

Das Ergebnis ist folgende Anzeige:

Bootstrap HowTo
Bootstrap Buttons

Mit sogenannten Themes kann das Aussehen aller Komponenten weiter angepasst werden, was insbesondere für HTML5 Anwendungen wichtig ist (ansonsten würden sie viele ähnliche Elemente enthalten und man merkt sofort, dass die App mit diesem CSS-Framework erstellt wurde). Ein Theme ist bei Bootstrap im Prinzip das gleiche wie auch bei WordPress. Was HTML5 Websites angeht, sollte von darauf achten, keine Applications zu schreiben, die im wesentlichen aus einer riesigen HTML Datei bestehen. Das führt nämlich aus Sicht des Onlinemarketing zu großen Problemen!

Bootstrap hat an Bedeutung gewonnen

Spätestens seit Google verantwortlich für das Aufkommen des Begriffs Mobilegeddon ist, sollte man sich mit responsivem Webseiten beschäftigen. Allerdings macht das auch so Sinn, denn Eure Site sollte sowohl auf Desktop-Bildschirmen als auch auf mobilen Endgeräten wie Smartphones oder Tablets vernünftig dargestellt werden.

Abgesehen davon hilft Bootstrap dabei, das Layout von Webseiten sauber und einfach festzulegen, ohne sich mit table-Tags oder divs mit komplizierten styles-Anweisungen rumschlagen zu müssen.

Zum Problem mit responsiven Webseiten und dem Suchmaschinenmarketing haben wir einen extra Artikel geschrieben.

Bootstrap 3 ist übrigens die aktuelle Version, alles, was eine niedrigere Versionsnummer hat, könnt Ihr getrost ignorieren.

Installation

Wie installiert man das Framework? Ganz einfach: Herunterladen, entpacken und in ein Unterverzeichnis Deiner Webanwendung kopieren. Dann auf Deiner HTML-Datei einbinden, etwa so:

<link rel="stylesheet" href="css/bootstrap.css">

Ersetze dabei css durch das Unterverzeichnis, in das Du Bootstrap kopiert hast und bootstrap.css durch den Dateinamen der CSS-Datei, die versionsabhängig ist!

Alternativ kannst Du auch Bootstrap direkt aus dem Internet verwenden , ohne es vorher herunterzuladen. Dafür solltest Du aber ein sogenanntes CDN verwenden. Ein CDN ist ein Content Distribution Network, das hochverfügbar ist und Dir superschnelle Ladezeiten garantiert (bzw. suggeriert, denn manchmal sind CDNs auch nicht ereichbar). Einbinden mittels CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Kombination mit Javascript

Ebenso Standard wie Bootstrap im HTML-Bereich ist jQuery. jQuery ist ein Javascript-Framework, das die Maniputation von Webseiten enorm vereinfacht. Es ist CSS3 konform und ziemlich leichtgewichtig. Man kann damit auch Elemente aus dem DOM-Modell auslesen.

Anstatt umständlich etwas zu schreiben wie document.getElementById(„myid“) heisst es dann nur noch $(„#myid“). Mit Hilfe von Selektoren können auch komplexe Bedingungen kodiert werden. Auch das Auslesen von Attributen, welches zumal für responsive Design wichtig ist, geht mit jQuery supereinfach.

Ressourcen zu Bootstrap 3

Das wichtigste zuerst: Die Bootstrap 3 Webseite. Dort könnt Ihr Bootstrap kostenlos herunterladen.
Wer es lieber auf Deutsch mag, kann die deutsche Bootstrap-Seite aufrufen.

Für Icons sollte unbedingt Font Awesome verwendet werden, denn damit sind alle Grafiken voll skalierbar und sehen auch auf Displays mit riesiger Pixelanzahl perfekt aus. Auch Font Awesome ist kostenlos!

Das Aussehen Deiner Website kannst Du mithilfe von Themes steuern. Diese beeinflussen Farben, Schriften, Icons, Aufteilungen usw. Auf Bootswatch gibt es kostenfreie Themes, unbedingt ansehen. Unser Geheimtipp: das Spacelab-Theme.

Ganz wichtig ist, das Grid System dieses CSS-Frameworks zu verstehen: Bootstrap basiert auf einem 12-Spalten-Layout, Details sind in diesem Tutorial anschaulich erklärt.

Eine gute praktische Einführung gibt dieses Tutorial, in dem der Bau einer Landing Page mit Bootstrap beschrieben wird.

Noch cooler ist es, ein eigenes WordPress-Theme mit Bootstrap zu erstellen, dazu sollte man allerdings schon fortgeschrittene Kenntnisse sowohl in CSS als auch in WordPress als auch in der Webseitenerstellung allgemein haben. Wer sich rantrauen will, kann hier lesen, wie man am besten vorgeht.

Wer sich die ganze Arbeit sparen will und beim Editieren von CSS- und HTML-Code nicht glücklich wird, der sollte gleich zu WordPress greifen. Die meisten Layouts unterstützen responsive Webseiten und kapseln den gesamten Code weg. Man kann sich auf das wesentliche konzentrieren, so wie es sein soll!


Wie hat Dir der Artikel gefallen?

Bootstrap 3, das CSS-Framework: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,63 von 5 Punkten, basieren auf 19 abgegebenen Stimmen.

Weitere Beiträge

Mobilegeddon – Was ist das?

Geschätzte Lesezeit: 4 Minuten, 5 Sekunden

Google bewertet die Mobilfähigkeiten von Webseiten für das Ranking. Es gilt geeignete Maßnahmen zu ergreifen, um sich vor einem Absturz in den Suchergebnissen zu schützen.
mobilegeddon
Der Begriff wurde Ende April 2015 populär, weil Google zu diesem Zeitpunkt offiziell anfing, Webseiten auf ihre Tauglichkeit hin zu untersuchen, wie gut sie auf mobilen Endgeräten wie Smartphones dargestellt werden können.

Warum Mobilegeddon?

Es wäre nicht so schlimm, wenn Google lediglich feststellen würde, dass eine Webseite nicht geeignet ist für die Darstellung auf Mobiltelefonen. Leider geht mit dieser Feststellung aber auch eine Bestrafung durch Google einher (siehe auch einen Spiegel Online Artikel dazu). Das heisst: Jede Webseite, die nicht vernünftig auf mobile Devices dargestellt wird, läuft Gefahr, im Google Ranking weit nach unten zu rutschen.

Und wer will das schon? es ist also relevant, ob Deine Homepage mobil ist oder nicht. Anfang Juni wurde bestätigt, dass ungefähr die Hälfte aller Seiten, die nicht mobile friendly sind, im Ranking abgestürzt sind!

Mobilfähig heisst allerdings nur, dass eine Version für Smartphones vorhanden sein muss. Tablets, Notebooks und Desktop-PCs sind nicht Teil der Prüfung, d.h. insbesondere für ein Tablet, das ja eine relativ hohe Auflösung und mittelmäßig große Bildfläche besitzt, bedarf es keiner gesonderten Mobilversion der Seite! Das wurde auch von Google in Website Boosting #31 klargestellt.

Übrigens wurde Anfang Mai 2015 auch von Bing angekündigt, dass mobilfähige Seiten ein besseres Ranking erhalten als die Webpräsenzen, die nur auf Desktops gut aussehen.  Allerdings wird es wohl bei Bing keine massiven Sichtbarkeitsverluste geben, da das Feedback der Webmaster abgewartet und ausgewertet wird, bevor die Suchstrategie angepasst wird. Bing wird in den Suchergebnissen ein mobile friendly Label anzeigen, um den User über die Fähigkeit der jeweiligen Seite besser zu informieren.

Wie kommt es zum Mobilegeddon?

Viele Webseiten sind von Hand erstellt und nicht über moderne Content Management Systeme wie WordPress oder Joomla. Oder man hat das falsche Tool eingesetzt (ganz am Ende dieses Artikels nennen wir ein paar geeignete Tools und Möglichkeiten).

Das resultiert darin, dass Seiten für eine fixe Darstellungsbreite angelegt wurden. Die Annahme, dass eine Webseite auf einem PC-Monitor angeschaut wird, war eben bis vor nicht allzu langer Zeit noch zulässig. Und jeder, wirklich jeder heutige Computer-Bildschirm kann Auflösungen von 1024 Pixeln Breite oder mehr darstellen. Warum also nicht für die Homepage eine feste Breite von 1000 Pixeln festsetzen?

Heutige mobile Endgeräte haben zwar ebenfalls oft eine hohe Auflösung in Pixeln (oft sogar mehr als ein LCD-Bildschirm). Allerdings fällt jedem auch sofort auf, dass ein Smartphone oder selbst ein Tablet eine sehr kleine physische Größe hat verglichen mit einem Monitor. Das ganze drückt sich in der Einheit Zoll aus: PC-Monitor: 21 Zoll o.ä., Smartphone: 6 Zoll, Tablet: 14 Zoll (all das sind nur Richtwerte, um die Qualität des Problems zu verdeutlichen).

Man kann also einen Text mit einer Schriftgröße von 14 Pixeln auf einem PC-Bildschirm sehr gut lesen (außer man ist kurzsichtig…), auf einem Smartphone hingegen gar nicht – jedenfalls nicht ohne Zoomen.

Das genau stört Google nämlich: Dass ein Smartphone-User zoomen oder scrollen muss. Und erst wenn eine Webseite für mobile Geräte optimiert ist, dann ist auch die Suchmaschine zufrieden! Mal ehrlich: Wer hätte das vor ein paar Jahren gedacht, dass dieser Zusammenhang mal ins Spiel kommen würde?

Teste Deine Webseite mit dem Google Mobile Check. Im Idealfall erhältst Du folgende Meldung:

Mobile check
Website check bei Mobilegeddon

Was tun, um das Mobilegeddon zu vermeiden?

Die Antwort ist nicht ganz einfach und sie hängt auch von der Webseite ab, um die es geht.

Wir haben hierzu deshalb extra einen Artikel geschrieben, wo erklärt wird, wie man seine Webseite fit für die mobile Darstellung macht.

Vorab schon mal ein paar Links für diejenigen, die eine neue Webseite erstellen wollen. Denn in diesem Fall sollte man gleich richtig planen und eine responsive Webseite erstellen. Wer hier den Fehler macht, zu wenig Aufwand reinzustecken oder das falsche Tool zu verwenden, den bestraft nicht nur das Leben, sondern auch Google. Abgesehen davon: Jeder hat doch einen Vorteil, wenn die eigene Website von möglichst vielen Endgeräten aus optisch einwandfrei dargestellt werden kann!

Content Management Systeme (CMS)

Idealerweise verwendet man ein CMS, um das Problem des Mobilegeddon auf elegante und stressfreie Weise zu umgehen. Die populärsten CMSe haben wir hier für Euch aufgelistet – WordPress ist unser absoluter Tipp!

Voraussetzung für die Nutzung eines CMS ist ein geeigneter Webspace bei einem Provider wie Strato oder 1&1. Beispielsweise bietet Strato schon für ein paar Euro im Monat Webhosting-Pakete an, die WordPress enthalten (bzw. einen One-Click-Installer dafür, wirklich einfach). Übrigens wurde ERFOLGSREZEPTE ONLINE auch mit WordPress erstellt! Siehe auch unseren WordPress Hosting Testbericht.

  • WordPress: Die Nummer eins der Content Management Systeme: Unser Top-Tip
  • Magento: Ebenfalls populär, Hosting beispielsweise bei 1&1
  • Joomla: Nicht so umfangreich wie WordPress
  • Drupal: Nicht ganz so einfach zu bedienen wie WordPress, eher für technisch versiertere Personen
  • Plugins für WordPress: Ein Plugin ist eine Erweiterung. Für WordPress sind die allermeisten kostenlos und viele sind wirklich mächtig
  • WordPress für Dummies: Ein gutes Buch für Anfänger
  • Als Plugins für WordPress empfehlen wir

Tools für Webseiten

Wer ohne Programmieren zum Ziel kommen will, braucht ein mächtiges Werkzeug. Wir stellen einige davon hier vor, macht euch selbst ein Bild:

Webflow Websites
Webflow Editor für Webseiten
  • Webflow: supereinfaches Tool zum Erstellen von Webseiten – kostenlos und online. Bietet auch responsive Designs
  • Dunked: Nach der obligatorischen Registrierung kann man rein visuell Webseiten erstellen

Weitere Tools sind in unserem Tools-Artikel zu finden.


Wie hat Dir der Artikel gefallen?

Mobilegeddon – Was ist das?: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 8 abgegebenen Stimmen.
SEO Agentur Testsieger

 

Weitere Beiträge

Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren

Geschätzte Lesezeit: 7 Minuten, 40 Sekunden

Mobile friendly websites

Mobilegeddon: Google straft Dich ab!

Ende April 2015 hat das sogenante Mobilegeddon (Google Abstrafung für Webseiten, die nicht fit für Smartphones & Tablets sind) für Aufsehen gesorgt. Wir erklären, wie man seine Website responsiv gestaltet und somit fit für mobile Endgeräte macht.

Das Problem herkömmlicher Webseiten auf mobilen Endgeräten

Grundsätzlich ist es möglich, eine bestehende Homepage auf einem Smartphone mit kleinerer Auflösung anzusehen. Jedoch zeigt das mobile Gerät eben nur einen Teil der gesamten Seite auf einmal an. Der Anwender muss also scrollen bzw. über den Screen wischen, um alle Inhalte sehen zu können.
Dies ist natürlich nicht optimal für die Bedienbarkeit (Usability) einer Webseite. Das hat auch Google gemerkt und sich gesagt: Jede Webseite, die nicht ordentlich auf mobile Geräten dargestellt wird, wird möglicherweise mit einer Strafe im Ranking belegt.
Da normale Computerbildschirme entweder eine wesentlich höhere Auflösung oder eine wesentlich höhere physische Größe haben als Tablets und erst recht als Smartphones, zeigen letztere eben nur einen Teil einer Webseite an, die für PC-Monitore erstellt wurde.
Selbst wenn die Auflösung eines mobilen Geräts in Pixeln genauso hoch ist wie die eines, sagen wir, 21 Zoll Monitors, kann es doch die Seite nicht vollständig darstellen: Aufgrund der kleineren Abmessungen des Displayes (eben nur beispielsweise 7 Zoll statt 21) werden Texte und Bilder herunterskaliert und kleiner dargestellt als am PC.

Die Hintergründe zum Mobilegeddon haben wir in einem eigenen Artikel zusammengestellt.

Wie macht man eine Webseite fit für die mobile Nutzung mit Smartphones und Tablets?

Vorab: Unsere Empfehlung findet ihr in einem eigenen Artikel: Professionelle Webseiten mit WordPress: Schritt für Schritt erklärt.

Es gibt grundsätzlich zwei sinnvolle Möglichkeiten:

1. Möglichkeit: Eigene mobile Webseite erstellen

Die bisherige Homepage bleibt in Ihrer Form bestehen. Zusätzlich dazu wird ein neues Layout für den bestehenden Inhalt (Content) bereitgestellt, das ist natürlich einiges an zusätzlicher Arbeit.
Dieses mobile Layout berücksichtigt von vornherein kleinere Displays und verwendet größere Schriften. Weiterhin wird weniger Inhalt auf derselben Pixelfläche platziert als auf einer herkömmlichen Webseite.
Dann muss noch gesteuert werden, wann die Desktop-Version und wann die mobile Webseite anzuzeigen ist.
Das geht folgendermaßen – vorab: Möglichkeit 2 ist die empfohlenene: Das responsive Design – wer ungeduldig ist, kann den nächsten Abschnitt überspringen!
1. Verweis auf Originalseite anbringen
Das ist technisch nicht unbedingt nötig, aber gut für das Suchmaschinenranking.
Im-Bereich des HTML-Dokuments gibt man etwa folgendes auf der mobilen Variante der Webseite an: Dieses Beispiel gilt für die mobile URL http://m.meineseite.de/startseite.

2. Verweis auf mobile Webseite von der Desktop-Version
Damit der Browser auf dem Handy nun weiß, dass es eine mobile Variante gibt, teilt man ihm dies mit Hilfe des rel-Tags mit:
Der rel-Tag steht dabei wieder im Kopfbereich des HTML-Dokuments (-Tag). Die Zahl 640px gibt die maximale Breite des Displays in Pixeln an, für die diese mobile Website vorgesehen ist. Lässt sich die Seite mobil auch auf 800 Pixeln Breite noch gut darstellen, gibt man statt dessen an:

2. Möglichkeit: Responsive Webseite erstellen

Das eben dargestellt Verfahren hat einige Nachteile. Unter anderem existieren mehrere Layouts für denselben Content parallel. Will man eine Webseite mobil machen, empfehlen wir die zukunftsträchtige Technik des responsiven Designs. Hierfür gibt es eine Reihe von Frameworks für Entwickler, die dabei unterstützen. Man muss das Rad also nicht neu erfinden.

Die Idee dahinter lässt sich am besten erklären, wenn man das populäre CSS-Framework Bootstrap betrachtet:
Bootstrap sieht vier verschiedene Bildschirmgrößen vor: XS (extra small), S (small), M (medium) und L (large).

Hinter diesen vier Größenkategorien stecken folgende Pixelgrößen (bezogen auf die Breite des Bildschirms in Pixeln):

  • XS sind Schirme kleiner als 768 Pixel Breite.
  • S sind Schirme größer gleich 768 und kleiner 992 Pixel.
  • M sind Schirme größer gleich 992 und kleiner als 1200 Pixel.
  • L sind alle Auflösungen ab 1200 Pixel aufwärts.

Die Größe L ist die normalerweise relevante für PC-Systeme und große Tablets oder auch für Notebooks oder Laptops.

Insgesamt gibt es natürlich deutlich mehr mobile Auflösungen als diese, aber vier Modi über die maximale Breite zu unterstützen ist ein sehr guter und beherrschbarer Kompromiss, der auch dem Fakt Rechnung trägt, dass ein Smartphone oder Tablet auch gedreht werden kann und Breite und Höhe sich dann vertauschen.

Bootstrap ist das populärste CSS-Framework und bietet alles, was man braucht, um eine Webseite mobil zu machen! Wie genau, das erklären wir gleich.

Die dritte Möglichkeit, die wir für wenig sinnvoll und wenig zielführend halten, ist das dynamische Erzeugen der Seite (Dynamic Serving). Daher gehen wir hier auch nicht näher darauf ein.

Wie macht man eine Webseite mobil mit responsivem Design und Bootstrap?

Das schöne: Bootstrap nimmt einem viel Arbeit ab, siehe den Abschnitt vorher! Weiterhin arbeiten wir nur mit einer Content-Quelle, denn das Layout für die verschiedenen Bildschirmgrößen wird im HTML per CSS-Anweisungen gesteuert. Konkret geht das über CSS-Klassen von Bootstrap.

Jetzt folgt ein kleiner Ausflug in Bootstrap-Interna: Wenn Du kein Programmierer werden willst, überspringe diesen Abschnitt und gehe zum nächsten!

Ein Beispiel: Du erstellt eine Webseite und fängst mit einem Layout an, das für PC-Bildschirm geeignet ist, also für Breiten von 1200 Pixeln oder mehr.
Die HTML-Seiten enthalten beispielsweise einen Bereich, in dem links ein Menü steht (was ca. 200 Pixel breit ist), in der Mitte ein Contentbereich (ca. 800 Pixel breit) und rechts eine Sidebar (wieder 200 Pixel breit). Nur der Content-Bereich sei dynamisch hinsichtlich der Breite, Menü und Sidebar sind auf 200 Pixel festgelegt.

Verkleinert man das Browserfenster, wird der Content-Bereich also immer schmaler. Spätestens bei einer Breite von, sagen wir, 400 Pixeln ist der Content nicht mehr schön anzusehen, weil er einfach zu gedrungen wirkt und eingequetscht ist zwischen Menü und Sidebar. Bei Bootstrap arbeitet man idealerweise nicht mit festen Pixelbreiten, sondern man definiert die Breite eines Bereichs in Spalten. Bootstrap definiert, dass es genau 12 Spalten gibt. Menü und Sidebar hätten also je 2 Spalten und der Hauptbereich für den Content dann 8 Spalten, macht 2 + 2 + 8 = 12 Spalten.

Namecheap
Nun kommt das Spannende: Man kann über Bootstrap nicht nur die Anzahl der Spalten definieren, sondern auch, bei welcher Bildschirmgröße ein Bereich (Menü, Contentbereich usw.) wie viele Spalten haben soll. Die Bildschirmgrößen hatten wir oben schon genannt: L (oder LG), M (oder MD), S (oder SM) und XS (ganz groß bis ganz klein).
Wie sieht das ganze im HTML-Code aus? Wir gehen mal einen Beispielcode zur Veranschaulichung (grundlegende HTML-Kenntnisse sind hierzu erforderlich):

<div id="menu" class="col-lg-2">
Hier steht das Menü
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3</div>
<div id="content" class="col-lg-8">
Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
</div>
<div id="sidebar" class="col-lg-2">
Hier steht die Sidebar
Text 1
Text 2
Bild 1</div>

Es wird schnell klar, dass die ganze Informationsmenge, die man auf einem großen Schirm (Bootstrap-Größe L) anzeigen kann, nicht auf einem kleinen Bild (Bootstrap Größe S) zur Anzeige bringen kann.
Daher müssen wir für Größe S (und für XS sowieso) eine neue Darstellungsart definieren. Größe M muss hier nicht speziell abgehandelt werden, weil für M der Contentbereich immer noch groß genug ist.

So würde das obige Beispiel auch auf kleinen Bildschirm ordentlich dargestellt – das wäre die einfachste und schnellste Maßnahme:

<div id="menu" class="col-lg-2 col-sm-12">
Hier steht das Menü
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3</div>
<div id="content" class="col-lg-8 col-sm-12">
Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
</div>
<div id="sidebar" class="col-lg-2 col-sm-12">
Hier steht die Sidebar
Text 1
Text 2
Bild 1</div>

Was haben wir gemacht: Das Menü bekommt jetzt 12 statt 2 Spalten, also die gesamte Breite. Der Content hat nun ebenfalls die volle Breite von 12 Spalten zur Verfügung. Und auch die Sidebar bekommt 12 Spalten. Das war’s, zumindest akzeptiert Google jetzt dieses Layout. Mna kann natürlich etwas feintuning betreiben, beispielsweise die Sidebar horizontal statt vertikal ausrichten, das ist aber wesentlich mehr Arbeit und soll in diesem Grundlagenartikel nicht weiter diskutiert werden (in einem anderen Artikel dann mehr dazu).

Wichtig noch: Bootstrap schaut für die aktuelle Bildgröße, etwa M, ob eine Deklaration wie col-md-6 vorhanden ist (MD steht für Größe M). Ist dies nicht der Fall, sucht Bootstrap nach der Größe S und dann nach XS. Es ist also wichtig, dass im obigen Beispiel die Deklarationen col-lg-* ersetzt werden durch col-md-*, denn dann gelten sie sowohl für L- als auch für M-Größen!

Spezialfall: Content Management Systeme wie WordPress oder Magento

Betreibst Du Deine Webseite oder Dein Blog über WordPress? Dann besteht die Möglichkeit, dass das Thema (engl.: Theme) von WordPress bereits eine responsive Variante anbietet. Das solltest Du unbedingt prüfen.Am einfachsten geht das, indem Du Deine WordPress-Webseite im Browser aufrufst und den Darstellungsbereich des Browsers einfach veränderst:

Einmal die Darstellung im Vollbildmodus auf einem PC-Bildschirm ausprobieren.

Als nächstes die Breite des Fenster reduzieren und zwar immer weiter, bis das Fenster nur noch sehr klein ist (vielleicht 600 Pixel breit). Das geht am einfachsten über die sogenannten „Handles“, die erscheinen, wenn man den Mauszeiger an den äußersten rechten Rand des Browserfensters bewegt. Aber Achtung: Das Browserfenster darf nicht im Vollbildmodus dargestellt werden, sonst funktioniert das nicht!

Ein gutes Einsteiger-Buch zum Thema WordPress ist übrigens WordPress für Dummies.

Passende Hosting Anbieter für Deine Webseite haben wir in einem extra Artikel vorgestellt – es gibt sogar Anbieter, die Hosting-Pakete für 3 Monate komplett kostenlos anbieten und Dir eine Kündigungsmöglichkeit innerhalb dieser 3 Monate geben = Kosten 0 Euro.

Ein Experte muss her

Du selbst bist kein Programmierer oder Techie und willst Deine Webseite mobil machen. Dann hast Du ein Problem, sofern Du weder auf ein responsives Blog-Theme o.ä, verfügst und auch niemanden kennst, der Dir hilft.
In dem Fall empfehlen wir Dir, einen Experten zu Rate zu ziehen bzw. diesen zu beauftragen. Sehr günstige und kompetente Programmierer findet man etwa auf oDesk. Für solche Aufgaben braucht man keinen teuren Deutschen Entwickler zu beauftragen, der um ein Vielfaches teurer ist als eine Offshore-Ressource aus dem Ausland. Und oDesk ist ohne Risiko: Erst wenn die Leistung erbracht wurde, bekommt der Programmierer sein Geld. Ist man zufrieden, schön, ansonsten bekommt man sein Geld zurück!

Möchtest Du Dich in das Thema Webseitenprogrammierung einarbeiten, such‘ Dir entsprechende Fachliteratur dazu, um schnell zu einem Ergebnis zu kommen. Hier sollte man nicht am falschen Ende sparen. Ein gutes Buch ist nicht teuer und zahlt sich immer aus.

Wenn Du ein etwas umfangreicheres Vorhaben hast und doch lieber einen deutschen IT-Dienstleister beauftragen möchtest, dann kannst Du Dich gerne an uns wenden: Wir sind Experten für Webseiten und Programmierung und bieten einen kostenlosen Vorabcheck Deiner Website an. Kontakt: Siehe Impressum.


Wie hat Dir der Artikel gefallen?

Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,67 von 5 Punkten, basieren auf 9 abgegebenen Stimmen.

Weitere Beiträge