Schon seit geraumer Zeit habe ich mit dem Gedanken gespielt, meinem Blog ein neues Layout zu verpassen, doch es sollte sich nicht nur auf den ersten Blick optisch verändern sondern technisch so aufgerüstet werden, dass sich das neue Layout dem Ausgabegerät anpasst.
Responsive ist hier das Stichwort, ein reaktionsfähiges Layout für die optimale Darstellung meines Blogs sowohl auf großen Monitoren als auch auf Tablets und Smartphones. Dafür hatte ich mir vor einem Jahr das Buch »Responsive Webdesign« von Christoph Zillgens gekauft.
From now on, if it’s not responsive, it’s not web design.
Webdesigner Andy Clarke
Der Autor Christoph Zillgens schreibt in seinem Buch, dass es laut Webdesigner Ethan Marcotte drei zentrale Elemente gibt, die ein reaktionsfähiges Webdesign ausmachen:
- Ein flexibles Gestaltungsraster
- Flexible Bilder und Medien
- Mediaqueries, ein Modul aus der CSS3-Spezifikation
Grid
Ein flexibles Gestaltungsraster ist die Grundvoraussetzung für ein reaktionsfähiges Webdesign.
Webdesigner Christoph Zillgens
In Kapitel 7 »Einen Prototypen mit HTML5-Elementen erstellen« bin ich auf die Verwendung von Frameworks gestoßen, wer bei seiner Webseite nicht bei Null beginnen möchte, kann auf sogenannte Vorlagen auch Blank Themes genannt zurückgreifen, um die Arbeit zu vereinfachen. Da wären zum Beispiel HTML5 Boilerplate, Foundation und Bootstrap.
Ich habe mir Bootstrap in Version 3 angeschaut, dieses kostenlose Frontend Framework und Open Source Projekt wurde im Jahre 2010 von Mark Otto und Jacob Thornton unter dem Namen Twitter Blueprint veröffentlicht.
Bootstrap liefert bereits vordefinierte Elemente wie zum Beispiel Navigationen, Buttons, Formulare und Listen-Elemente. Es enthält ein reaktionsfähiges, mobile first fluid Grid-System, das entsprechend des Endgerätes oder der Bildschirmgröße auf bis zu 12 Spalten skalierbar ist. Das Grid besteht aus Zeilen und Spalten.
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>Für meine Bootstrap-Installation habe ich Initializr – einen HTML5 Vorlagengenerator verwendet. Über Initializr werden im Grunde vier CSS-Dateien und fünf JavaScript-Dateien generiert. Die HTML- bzw. PHP-Dateien, die für ein WordPress Theme benötigt werden, habe ich selber erstellt.
Auf Elmastudio gibt es ein schönes Tutorial für Einsteiger – Ein WordPress-Theme mit Bootstrap entwickeln und auf der Webseite Bootstrap Magic kann man in wenigen Schritten sein eigenes Bootstrap Theme erstellen.
Flexible Bilder
Moderne Browser sind in der Lage die Eigenschaften eines Bildes wie width und height selbständig auszulesen und korrekt darzustellen, um Bilder flexibel zu gestalten kann somit auf diese Angaben verzichtet werden.
In der functions.php meines WordPress Themes verwende ich eine Funktion, um die Angabe von Breite und Höhe im HTML-Code von Bildern zu entfernen. Diese Funktion entfernt nicht nur bei neu hinzugefügten Bildern die Attribute sondern auch bei den Vorschaubildern sowie bei allen bereits veröffentlichten Bildern.
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );Zusätzlich verwende ich ein erweitertes CSS von Jeff Sebring um von WordPress vordefinierte Klassen zu überschreiben, dadurch werden dann auch Bilder mit Bildunterzeilen flexibel.
Für flexible Bilder wird folgende CSS-Eigenschaft verwendet:
img {
max-width: 100%;
}Wenn im HTML-Code des Bildes, die Angaben zu Breite und Höhe vorhanden sind, sollte das CSS wie folgt ergänzt werden:
img {
max-width: 100%;
height: auto;
}Ohne diese notwendige Angabe würde der Browser das Bild in der Höhe verzerrt anzeigen!
Flexible Medien
Videos von YouTube oder von Vimeo werden mit einem iframe eingebunden und lassen sich leider nicht mithilfe von CSS flexibilisieren. Dafür verwende ich das jQuery-Plugin FitVids.js von Chris Coyier und Paravel.
In der footer.php habe ich folgenden Code platziert:
<script src="pfad/zum/js/fitvids/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".entry").fitVids();
});
</script>Mediaqueries
Die CSS-Datei von Bootstrap ist mit 6805 (!) Zeilen Code sehr umfangreich und alle benötigten @mediaqueries sind bereits integriert. Für einen Teil der von mir genutzten WordPress Plugins sowie für die Darstellung der verschachtelten Kommentare in meinem Blog, musste ich die style.css meines Themes trotzdem ein klein wenig erweitern:
@media (max-width: 1199px) {
#marctvflickrbar li {
display: inline;
float: left;
width: 31%;
height: auto;
margin-right: .5em;
}
}
@media (max-width: 768px) {
#marctvflickrbar li {
display: inline;
float: left;
width: 31%;
height: auto;
margin-right: .5em;
}
}
@media (max-width: 468px) {
#marctvflickrbar li {
width: 100%;
height: auto;
}
}Am I Responsive?
Um zu testen, ob die neu gestaltete Website bzw. das neu gestaltete WordPress Theme auch wirklich responsive ist, habe ich den browser-basierten Viewport Resizer verwendet, einmal als Lesezeichen angelegt, lässt sich jede Webseite in unterschiedlichen Displayauflösungen testen.
Das Titelbild dieses Artikels habe ich übrigens über die Website Am I Responsive? von Justin Avery erstellt. So lassen sich auf die Schnelle, kleine aber feine Screenshots diverser Webseiten auf unterschiedlichen Endgeräten erstellen.
Zum Abschluss
Ich hoffe, Euch, den Lesern meines Blogs, gefällt das neue Layout und Ihr begrüßt es, meine Artikel ab sofort auch auf Euren mobilen Endgeräten komfortabel lesen zu können. Vielleicht möchte der ein oder andere unter Euch, auch ein eigenes WordPress Theme mit Bootstrap realisieren und ich konnte, einen kleinen Einblick in Bezug auf die Umsetzung geben.
Bis denn, denn,
Denise
Weiterführende Links
- Tutorial und Download von Bootstrap
- Initializr – HTML5 templates generator
- Bootstrap Magic – quick & easy theme generator
- Viewport Resizer – Responsive design testing tool
- »Responsive Webdesign« – die Website zum Buch von Christoph Zillgens
- Elmastudio: Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger
- MarcTV: Responsive Webdesign Tutorial
