Responsives Design mit WordPress - Joe Casabona - ebook

Responsives Design mit WordPress ebook

Joe Casabona

0,0

Opis

Responsives Design ist der Schlüssel zu einem konsistenten und attraktiven Auftritt Ihrer WordPress-Website auf Desktop, Tablet und Smartphone. Wie Sie hierfür professionelle Themes und Plugins entwickeln, lernen Sie mit diesem Buch. Webexperte Joe Casabona zeigt Ihnen, wie Sie WordPress' Features für Ihre Arbeit optimal nutzen, welche Konzepte Ihnen das Arbeiten erleichtern und welche Rezepte zu den besten Ergebnissen führen. Zu Beginn frischen Sie Ihr Wissen zu WordPress' Kernfunktionalitäten auf und steigen dann schnell in die Entwicklung responsiver Themes und Plugins ein. Sie lernen, inhaltsbasierte Breakpoints für jede Bildschirmgröße zu setzen, die Datenmenge für Mobilnutzer gering zu halten sowie Navigation, Bilder, Widgets, Kommentare und Archive richtig zu designen. Außerdem macht Sie Casabona bekannt mit den wichtigsten Frameworks. Abschließend wenden Sie das Gelernte in fünf Tutorials an, in denen Sie responsive WordPress-Plugins und Theme-Komponenten programmieren und designen: eine Fotogalerie, eine Google Maps-basierte Karte, einen ImageSlider, ein Kontaktformular und eine Produktseite für einen Online-Shop.

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
czytnikach Kindle™
(dla wybranych pakietów)
Windows
10
Windows
Phone

Liczba stron: 214

Odsłuch ebooka (TTS) dostepny w abonamencie „ebooki+audiobooki bez limitu” w aplikacjach Legimi na:

Androidzie
iOS



Joe Casabona arbeitet seit über zehn Jahren als professioneller Webdesigner (den größten Teil dieser Zeit auch mit WordPress). Sein reiches Fachwissen gibt er als Trainer, als Sprecher auf Konferenzen und als Buchautor weiter.

Zu diesem Buch - sowie zu vielen weiteren dpunkt.büchern - können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus+:www.dpunkt.de/plus

Responsives Design mit WordPress

Joe Casabona

Übersetzung: Florence Maurice, maurice-web.de

Lektorat: Boris Karnikowski, karnikowski.com

Fachlektorat: Florence Maurice, maurice-web.de

Copy-Editing: Brigitte Hamerski, lektorat-hamerski.de

Herstellung: Birgit Bäuerlein

Satz: Ulrich Borstelmann, borstelmann.de

Umschlaggestaltung: Helmut Kraus, www.exclam.de

Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Buch 978-3-86490-177-5

PDF 978-3-86491-498-0

ePub 978-3-86491-499-7

1. Auflage 2014

Translation Copyright für die deutschsprachige Ausgabe © 2014 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Copyright der amerikanischen Originalausgabe © Joseph Casabona, 2014

Title of American original: Responsive Design with WordPress

Published by New Riders

ISBN: 978-0-321-95741-2

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Meinen Eltern, Louis und Marie, für ihre stetige Unterstützung. Und Joe und Jean Rizzi, die mir mit Ratschlägen, Liebenswürdigkeit und Geduld geholfen haben, dahin zu kommen, wo ich heute bin.

Danksagung

Ich möchte folgenden Personen danken, ohne die Sie das Buch nicht in den Händen halten würden.

Stephan Mekosh dafür, dass er ein fantastischer Fachlektor und ein guter Freund ist und darüber hinaus auch der Erste war, der mir CSS und WordPress gezeigt hat.

Michael Nolan dafür, dass er mir ermöglichte, das Buch zu schreiben und mich bei Peachpit Press/New Riders willkommen hieß, wo das US-Original erschien, auf dem diese Übersetzung basiert.

Nancy Peterson und Eric Schumacher-Rasmussen für Ratschläge, Anleitung und Überarbeitungen, für ihre Orientierungshilfen und für unsere wöchentlichen Gespräche.

Joanne Gosnell und Scout Festa für ihre Redaktion bzw. fürs Korrekturlesen und dass sie es schafften, den Eindruck zu erwecken, ich würde Grammatik und die englische Sprache gut beherrschen.

Jesse Friedman für das wundervolle Vorwort und seine netten Worte.

Jason Coleman, Stephanie Leary, Lisa Sabin-Wilson und Pippin Williamson für ihre Inspirationen zu WordPress und zur Kunst, ein Buch zu schreiben.

Meiner Familie und meinen Freunden, besonders meinen Eltern; meinen Brüdern, Phil, Mike und Rob; Dave Redding; Rob McManus; Matt Wren und meiner wunderbaren Freundin, Erin Holman.

Ich möchte außerdem kurz die Website meines Bruders Phil erwähnen, http://phil.casabona.org. Er hat das Portrait angefertigt, das in diesem Buch verwendet wird, und ich schätze seine Arbeiten sehr.

Inhaltsverzeichnis

1     Was ist responsives Webdesign?

1.1     Die Ursprünge des responsiven Webdesigns

1.2     Breakpoints und Media Queries

1.2.1     em-basierte Breakpoints

1.2.2     Inhaltsbasierte Breakpoints

1.3     Die Geräte – aktueller Stand der Dinge

1.4     Denken Sie an die Verbindungsgeschwindigkeit

1.5     Zusammenfassung

1.5.1     Fragen

1.5.2     Antworten

2     Grundlagen der WordPress-Theme-Erstellung

2.1     Gestatten: unsere Website

2.2     Die Template-Struktur

2.2.1     style.css

2.2.2     functions.php

2.2.3     header.php und footer.php

2.2.4     index.php

2.3     Der Loop

2.3.1     Der Grundaufbau

2.3.2     Mehrfache Loops

2.4     Custom-Post-Types

2.5     Plugins und Shortcodes

2.5.1     Hooks, Actions und Filter

2.5.2     Shortcodes

2.6     Zusammenfassung

2.6.1     Fragen

2.6.2     Antworten

3     Ein responsives Theme erstellen – die richtige Basis

3.1     RWD-Techniken

3.1.1     Media Queries

3.1.2     RESS

3.1.3     wp_is_mobile()

3.1.4     JavaScript

3.2     Das responsive Layout hinzufügen

3.3     Die Standard-CSS-Klassen von WordPress

3.3.1     Kommentare und Widgets

3.3.2     Vermischte Styles

3.4     Zusammenfassung

3.4.1     Fragen

3.4.2     Antworten

4     Ihr responsives Theme – grundlegende Eigenschaften

4.1     Die Navigation im RWD

4.1.1     Beliebte Techniken kurz vorgestellt

4.1.2     Serverseitige Anpassung der Navigation

4.1.3     Überlegen Sie, was für Ihre Besucher das Beste ist

4.2     Vom richtigen Umgang mit Bildern

4.2.1     Wie in WordPress Bilder hochgeladen werden

4.2.2     picturefill.js einsetzen

4.2.3     Die Breite und Höhe bei Bildern überschreiben

4.3     Der richtige Umgang mit Widgets

4.3.1     Die Sidebar

4.3.2     Sidebar-Widgets

4.4     Zusammenfassung

4.4.1     Fragen

4.4.2     Antworten

5     Ihr responsives Theme – Blog-Eigenschaften

5.1     Behandlung von Kommentaren

5.2     Der richtige Umgang mit Archiven

5.3     Zusammenfassung

6     Responsive Theme-Frameworks

6.1     Einige Prinzipien der Wiederverwendung, die Sie sich merken sollten

6.1.1     Gerätetests

6.1.2     Definieren Sie Ihre Anforderungen

6.2     WordPress-Frameworks

6.2.1     Frameworks, Themes und Plugins finden

6.2.2     Warum sollten Sie ein kommerzielles Theme verwenden?

6.3     Beliebte WordPress-Frameworks

6.3.1     Bootstrap

6.3.2     Foundation

6.3.3     Unbedingt erwähnenswert: HTML5     Boilerplate

6.3.4     Thesis

6.3.5     Genesis

6.3.6     Underscore

6.3.7     Twenty Thirteen

6.3.8     Ein eigenes Theme-Framework entwickeln

6.4     Zusammenfassung

6.4.1     Fragen

6.4.2     Antworten

7     Techniken und Tutorials

7.1     Einleitung

7.1.1     Im Fokus: CPTs und CSS

7.2     Eine responsive Fotogalerie in WordPress

7.2.1     Eine Galerie aus neuen Bildern erstellen

7.2.2     Den CSS-Code ändern

7.2.3     Einschränkungen

7.3     Eine responsive WordPress-Karte mit Google Maps

7.3.1     Den Shortcode erstellen

7.4     Ein responsiver Bilder-Slider in WordPress

7.4.1     Definition des Plugins und der Variablen

7.4.2     Die Slider-Skripte einbinden

7.4.3     Shortcode und Template-Tag

7.4.4     Den Custom-Post-Type erstellen

7.5     Ein responsives Kontaktformular in WordPress

7.6     Eine responsive Produktseite in WordPress

7.6.1     Shortcode und Template-Tag

7.6.2     Den Custom-Post-Type erstellen

7.7     Zusammenfassung

7.7.1     Fragen

7.7.2     Antworten

A     Quellen

A.1     Ein paar Worte zum Abschluss

A.2     Bücher

A.3     Treffen und Konferenzen

A.3.1     Meetup.com

A.3.2     WordCamp Central

A.3.3     An Event Apart

A.3.4     Webinale

A.3.5     Beyond Tellerrand

A.4     Links

A.4.1     Websites

A.4.2     Podcasts

      Index

Vorwort

Von Jesse Friedman

Heute werden 20% aller Websites mit WordPress erstellt und im Jahr 2014 wird es jede vierte Website sein, die online geht. Meine erste Website mit WordPress habe ich 2005 umgesetzt, bevor man es »cool« fand. Ich bin sehr stolz, ein altgedienter Entwickler und Stratege für ein Produkt zu sein, das von Millionen von Leuten weltweit eingesetzt wird.

Seitdem ich damals 2005 meine erste Site online gestellt habe, habe ich mein eigenes Buch über die Entwicklung mit WordPress geschrieben. Ich habe außerdem Beiträge für andere Bücher geschrieben und Artikel in Online-Zeitschriften wie Smashing Magazine und net Magazine publiziert; darüber hinaus unterrichte ich an der Universität und online. Auf der ganzen Welt habe ich auf Konferenzen gesprochen – u. a. auf derjenigen, auf der ich Joe Casabona traf.

Ich fühlte mich geehrt, als Joe mich bat, das Vorwort für sein Buch zu schreiben, denn ich wusste, dass es gut werden würde. Joe hat eine wirkliche Begabung, aus komplizierten Lösungen einfache Schritt-für-Schritt-Anweisungen zu machen. WordPress wurde dafür konzipiert, einfach zu sein: einfach beim Setup, bei der Installation und in der Erweiterung. Trotzdem kann es für unerfahrenere Designer und Entwickler eine Herausforderung sein, WordPress so zu verstehen, dass sie damit produktiv arbeiten können.

Diese Herausforderung hat mich dazu gebracht, 2012 mein Buch Web Designer’s Guide to WordPress: Plan, Theme, Build, Launch zu schreiben und es ist auch der Grund, warum Joe dieses Jahr sein Buch geschrieben hat. Wir sind beide altgediente Entwickler und wollen unseren Beitrag für das Wachsen der WordPress-Gemeinschaft leisten. Der beste Weg hierfür ist, der Gemeinschaft etwas beizubringen und unsere Erfahrung sowie unser Wissen über das Produkt zu teilen, das wir jeden Tag nutzen. Genau das macht Joe mit seinem Buch Responsives Design mit WordPress. Es ist ein grundsolides Buch mit vielen großartigen Beispielen.

Als Professor an zwei Universitäten in Rhode Island weiß ich, dass dieses Buch eine wunderbare Ergänzung für meinen Lehrplan sein wird. Die Lektionen, die Beispiele und auch die Fragen am Ende jeden Kapitels helfen Ihnen, sehr gute Grundlagen in beiden Themen – WordPress und responsives Webdesign – zu erwerben. Sie werden im Laufe des Buches ein WordPress-Theme erstellen, sodass Sie Ihre Kenntnisse beim Lesen verfestigen können.

Und das Beste: Sie eignen sich gleichzeitig zwei Fähigkeiten an. Sie werden WordPress lernen und zur selben Zeit spezielle Kenntnisse im responsiven Webdesign erwerben. Sie werden nicht nur Ihre Kenntnisse in beiden Gebieten verbessern, sondern es wird Sie auch zu einem Experten in einer recht profitablen Nische machen.

Wie bereits erwähnt, wird WordPress hinter 25% der Websites stehen, die im Jahr 2014 online gehen. Das bedeutet, dass jede vierte neue Website einen Entwickler braucht, der sich mit WordPress auskennt. Hinzu kommt: Dieses Jahr werden mehr Informationen über mobile Geräte abgerufen als über herkömmliche Computer. Wenn Sie 2013 noch keine sehr guten Kenntnisse im responsiven Webdesign hatten – im Jahr 2014 brauchen Sie sie definitiv.

Meiner Meinung nach gibt es keine bessere Art, sich Kenntnisse anzueignen, als sie selbst anzuwenden. Dieses Buch ist die beste Art, gleichzeitig WordPress und responsives Webdesign zu lernen. Gut gemacht, Joe!

Einleitung

Mein erstes tragbares Gerät bekam ich im ersten Jahr in der Highschool. Es war der Palm m100 und ich mochte ihn sehr. Er konnte nicht viel, aber naja, mit 13 oder 14 gab es auch nicht viel, wofür ich ihn gebraucht hätte. Aber – hey, einen Computer in der Hosentasche? Das war einfach unglaublich! Deswegen nahm ich ihn überall mit hin (und er wurde mir auch ein, zweimal weggenommen, weil ich ihn im Unterricht benutzt hatte).

Mein nächstes Gerät war ein Compaq iPAQ, auf dem Windows lief, und der einen Farbbildschirm hatte. Jetzt wurde mir fast schon schwindelig. Ich konnte richtige Programme auf ihm ausführen. Als ich Anfang 2000 verschiedene Colleges besuchte, erkundigte ich mich sogar, ob es WLAN auf dem Campus gäbe, das war die Zeit, wo WLAN gerade erst begann, populär zu werden. Ich dachte an all die wunderbaren Dinge, die ich mit einem kleinen Computer tun konnte, der einen Eingabestift hatte und in meine Tasche passte. Trotzdem stellte ich nach einer Weile fest, dass ich mehr wollte. Das brachte mich zu meinem ersten Smartphone: dem Palm Treo 650 (Abb. 1).

Abb. 1 Ach, Treo 650. Manchmal vermisse ich dich noch.

Ich machte alles mit dem Treo 650: Anrufe, Fotos oder meinen Google-Account synchronisieren. Er hatte sogar einen primitiven Browser namens Blazer. Ich konnte Websites von meinem Handy aus aufrufen!

Seit dieser Zeit hat sich die mobile Landschaft natürlich verändert. Mit dem iPhone kam ein voll ausgestatteter Browser auf mobile Geräte, der alles von CSS bis JavaScript konnte. Ein Problem war allerdings noch nicht gelöst: das Problem der kleinen Bildschirme. An dieser Stelle kommt das responsive Webdesign ins Spiel.

Responsives Webdesign? – Klar. Es ist gerade ungeheuer beliebt. Bei vielen Leuten – Entwicklern, Designern, Agenturen, Nutzern – ist es gefragt. Der Grund dafür liegt ja auch auf der Hand: Es ist nicht nur die Antwort auf den rasch wachsenden mobilen Markt, sondern ist noch dazu recht cool. Inzwischen überprüfen die meisten Leute, wenn sie eine Site besuchen, ob sie responsiv ist (ein Browserfenster größer und kleiner zu ziehen und zu schauen, wie die angezeigte Website reagiert, ersetzt das frühere »im Quellcode nach Layouttabellen suchen«).

Wenn Sie eine Website gestalten, haben Sie definitiv keinerlei Kontrolle darüber, wie sie angesehen wird; Sie können auch nicht bestimmen, wo sie angesehen wird, genauso wenig haben Sie Einfluss darauf, auf welchem Gerät und bei welcher Verbindung die Site betrachtet wird. Das mag für manche schrecklich klingen, aber für mich (und ich wette auch für Sie) ist es genau das Gegenteil. Ich liebe es, dieses Problem zu lösen. Das heißt nicht, dass das Ganze nicht auch ein bisschen einschüchternd wäre. Schließlich muss man eine Website erstellen, die sich gut auf Smartphones nutzen lässt und gleichzeitig auf dem Desktop beeindruckend aussieht. Genau darum geht es beim responsiven Webdesign.

Auch WordPress selbst ist eine tolle Sache. Es ist die Basis von Millionen von Webseiten – Hundert Millionen sogar. Wie Sie im Vorwort gelesen haben, wird im Jahr 2014 jede vierte Website auf Basis von WordPress erstellt. WordPress nimmt uns viel ab, lässt uns aber auch vieles machen. Wie passt WordPress zum responsiven Webdesign? Wie es sich gezeigt hat, ist WordPress hilfreich bei der Erstellung von responsiven Themes; es sind viele nützliche Features integriert, die wir als Entwickler bei der Erstellung besserer responsiver Websites einsetzen können. Und genau das werde ich Ihnen zeigen.

Für wen ist dieses Buch gedacht?

Am liebsten würde ich Ihnen sagen, dass das Buch für jeden ist, der WordPress-Sites entwickelt. Aber um das eigentliche Thema des Buches behandeln zu können, muss ich ein paar Annahmen über Sie, meinen geneigten Leser, machen.

Zuerst einmal setze ich voraus, dass Sie Grundkenntnisse in HTML, CSS, PHP, JavaScript und MySQL haben. Ich gehe außerdem davon aus, dass Sie sich etwas mit WordPress auskennen – Sie haben es schon mal installiert und setzen es ein, vielleicht haben Sie sogar bereits ein Theme erstellt. Außerdem erwarte ich, dass Sie bereits einen Server benutzt haben; Sie sollten zumindest die Verzeichnisstruktur von WordPress kennen und wissen, wie man FTP/SFTP einsetzt.

Das Buch ist für Web- und WordPress-Entwickler gedacht, die davon profitieren wollen, was WordPress bietet, um gute responsive Websites zu erstellen. In diesem Buch werden wir uns eine Vielzahl von Themen und Techniken ansehen, um aus Website-Bestandteilen responsive WordPress-Theme-Komponenten zu machen.

Trotzdem biete ich eine kurze Einführung. Im ersten Kapitel sehen wir uns das responsive Webdesign genauer an: was man darunter versteht, wie es aufkam und was empfohlene Vorgehensweisen sind. Dann gibt es einen kurzen Überblick über die Theme-Entwicklung in WordPress; dabei behandeln wir die Hauptbestandteile eines WordPress-Themes – wichtige Dateien, den Loop, Custom-Post-Types, Plugins u. Ä. Danach kommen wir zu dem, was Spaß macht.

Dem Hauptthema des Buches – der Erstellung eines responsiven WordPress-Themes – widmen sich drei Kapitel: Kapitel 3 behandelt wichtige responsive Techniken und wie man sie in ein WordPress-Theme integriert. Kapitel 4 und Kapitel 5 kümmern sich um spezielle Komponenten einer WordPress-Website, dazu gehören die Navigation, Bilder, Kommentare, Widgets, Archive und Plugins.

Zum Schluss sehen wir uns noch responsive Theme-Frameworks sowie Child-Themes in Kapitel 6 an, danach folgen in Kapitel 7 im Kochbuch-Stil gehaltene Tutorials für die responsive Entwicklung.

Warum habe ich dieses Buch geschrieben?

Als ich auf die Idee kam, ein Buch zu diesem Thema zu schreiben, gingen mir ganz unterschiedliche Gedanken durch den Kopf: Das responsive Webdesign ändert sich ständig; WordPress ändert sich ständig. Die Best-Practice-Empfehlungen, die noch vor ein paar Jahren galten, haben sich in beiden Bereichen geändert und es ist wichtig, diese Informationen zu verbreiten.

In der Webentwicklung gibt es eine wichtige Bewegung in Richtung »doing responsive responsibly« (responsives Webdesign, aber verantwortungsvoll – ein von Scott Jehl geprägter Satz); der Gedanke dahinter ist, dass es beim responsiven Webdesign nicht nur um Bildschirmgrößen geht. Es gibt eine andere große Bewegung in der WordPress-Community, Funktionalitäten aus Themes zu entfernen (Funktionen wie Slider und Custom-Post-Types, die eigentlich Inhalte sind). Ich wollte über diese verschiedenen Dinge schreiben – weil viele Webentwickler sowohl mit responsivem Webdesign als auch mit WordPress arbeiten.

Konventionen

Es gibt im Buch zwei verschiedene Darstellungen von Code: Zum einen kann der Code direkt im Text stehen wie etwa <?php echo "Hallo Welt!”; ?> oder er kann als eigener Block angegeben sein, wo er dann folgendermaßen aussieht:

function hello_world(){$s= "Hallo Welt";return $s;}print hello_world();

In beiden Fällen sollten Sie ihn leicht erkennen. Was die Kodierungsstandards anbelangt, so führt der WordPress-Codex einige auf (http://rwdwp.com/16). Ich werde mein Bestes tun, mich daran zu halten.

Um zu kennzeichnen, dass der aufgeführte Code zwischen andere Code-Blöcke gehört (das heißt, dass etwas Code zwischen der ersten gezeigten Zeile und der nächsten ausgelassen wurde), setze ich das Auslassungszeichen (…) ein.

Außerdem möchte ich noch darauf hinweisen, dass ich HTML5-Markup verwende, wir aber keine fortgeschrittenen Features wie WebSockets oder die Storage-APIs nutzen werden.

In den meisten Fällen benutze ich im CSS-Code .klassen anstelle von #ids. Das sollte zu sauberem CSS-Code führen, ohne dass sehr spezifische Selektoren notwendig wären. Ich formatiere meinen CSS-Code immer folgendermaßen:

.class-name{  color: #FFFFFF;  background: #000000;  }

Beachten Sie die Verwendung eines Bindestrichs anstelle der Camelcase-Schreibweise und anstelle des Unterstrichs; außerdem ist die schließende Klammer ebenfalls eingerückt. Das macht es einfacher, den CSS-Code zu lesen, besonders wenn er länger wird.

Tipp

Auf diese Art sind Tipps und Hinweise gestaltet.

Im Gegensatz zur Schreibung von CSS-Klassen haben alle PHP-Funktionen einen Unterstrich (_) und sind mit dem Präfix mf_ versehen, also beispielsweise so: mf_get_featured_images().

Aufgrund des eingeschränkten Platzes einer Buchseite kann sich eine einzelne Codezeile über mehrere Zeilen im Buch erstrecken. In diesen Fällen sind die umbrochenen Zeilen etwas eingerückt. Falls Sie die digitale Version des Buches haben, werden Sie manchmal feststellen, dass der Code unvorhersehbar im Text umbricht. Dann sollten Sie die herunterladbaren Dateien auf www.rwdwp (siehe nächster Absatz) heranziehen, weil sie genauer sind.

Weitere Hinweise zum Buch

In diesem Buch gibt es viel Code. Die meiste Zeit werde ich darauf hinweisen, wo Sie ihn finden. Wenn nicht, steht er auf der Website des Buches, www.rwdwp.com, und auch bei GitHub. Dort befindet sich auch eine Liste der Short-URLS sowie der Sites, auf die sie verweisen. Weil wir es für die deutsche Übersetzung für anschaulicher hielten, sind die Screenshots übersetzt. Die Codebeispiele auf www.rwdwp.com sind es der einfacheren Pflege halber nicht – was aber für Sie sicher kein Problem darstellt.

Wenn Sie sich durch das Buch programmieren, werden Sie merken, dass ich bis zum Kapitel 6 das Testen nicht ausführlich erwähne. Es ist allerdings wichtig, zumindest auf einer Reihe von Geräten zu testen, besonders, wenn Sie die beschriebenen Techniken bei echten Projekten einsetzen möchten (und ich hoffe natürlich, dass Sie das tun).

Außerdem verwende ich einige Abkürzungen, die normalerweise direkt an der entsprechenden Stelle definiert sind. Falls nicht, sehen Sie hier die häufigsten:

RWD: Responsives Webdesign

WP: WordPress

RESS: Responsive Design and Server Side Components

Der Codex: der WordPress-Codex (die Dokumentation der API)

1 Was ist responsives Webdesign?

Seien wir ehrlich: Sie sind kaum hier, um zu erfahren, was responsives Webdesign (RWD) ist. Sie wissen, was es ist, und warum man es braucht. Das Web ändert sich ständig; zum Zeitpunkt, zu dem ich dies schreibe, gibt es allein bei Android-Geräten mehr als 6.000 Bildschirmauflösungen und unsere Websites müssen sich daran anpassen! Seitdem das Thema RWD im Jahr 2009 aufkam, sind unzählige Bücher dazu erschienen.

Vielleicht haben Sie eines dieser Bücher gelesen oder einen Blogartikel von einem der unzähligen Autoren, die sich dem Thema widmen. Oder vielleicht haben Sie auch schon Ihr eigenes responsives Design umgesetzt. Sie sind hier, weil Sie lernen wollen, wie man WordPress so einsetzt, dass es Ihre responsiven Designs verbessert.

Trotzdem können wir nicht einfach irgendwo in der Mitte beginnen. Sie sollten zumindest ein paar Hintergrundinformationen erfahren, bevor wir tiefer einsteigen. Glauben Sie mir, ich tue es für uns beide.

Dieses Kapitel widmet sich der Geschichte des responsiven Webdesigns – vom Blogartikel, mit dem alles begann, kommen wir zu empfohlenen Herangehensweisen für die Praxis. Sie lernen die beste Art kennen, Breakpoints, d. h. Layoutumbrüche, zu ermitteln und zu definieren. Außerdem erfahren Sie, was Sie sonst beim RWD berücksichtigen müssen. Schließlich beschäftigen wir uns mit dem derzeitigen Stand bei den webfähigen Geräten (falls Sie es noch nicht wissen: es gibt gaaanz viele unterschiedliche Geräte). Sie sollten zumindest mit HTML und CSS sowie mit der Theorie von flüssigen Rastern vertraut sein.

1.1 Die Ursprünge des responsiven Webdesigns

Den Begriff Responsive Web Design hat Ethan Marcotte in seinem gleichnamigen Artikel für das Web-Magazin A List Apart (http://rwdwp.com/1) geprägt. In seinem Artikel schreibt er:

Anstatt voneinander unabhängige Designs für die stetig zunehmende Anzahl von webfähigen Geräten zu erstellen, können wir diese Designs als Facetten derselben User Experience behandeln. Wir können eine Website für eine optimale User Experience designen und gleichzeitig standardbasierte Techniken bei unseren Designs anwenden. Damit sind diese nicht nur flexibler, sondern passen sich auch besser an die Medien an, auf denen sie dargestellt werden. Kurz gesagt, wir müssen responsives Webdesign betreiben.

Der Rest ist, wie man so schön sagt, Geschichte. Mobile Geräte sind ein integraler Teil der Gesellschaft und die Menschen machen immer mehr mit ihren Smartphones … dazu später mehr. Jetzt geht es erst einmal darum, wie Sie RWD anwenden und dabei vielleicht um den wichtigsten Punkt beim RWD: die Breakpoints.

1.2 Breakpoints und Media Queries

Über Breakpoints und Media Queries teilen wir dem Browser (mit CSS) mit, wann er unser Design aufgrund der Bildschirmgröße anpassen soll. Media Queries sind an sich nicht neu, es gibt sie schon seit einer Weile und sie werden von den meisten Browsern unterstützt (Abb. 1-1). Webentwickler nutzen Media Queries, um CSS-Angaben aufgrund von bestimmten Bedingungen anzuwenden (d. h. nur für Bildschirme oder nur für den Ausdruck oder bei einer bestimmten Breite des Browserfensters). Breakpoints sind vom Entwickler vorgegebene Breiten des Browserfensters; es sind die Stellen, an denen sich das Layout ändert. Beispielsweise könnte 1024px ein Breakpoint sein.

Abb. 1-1 Browserunterstützung für Media Queries bei caniuse.com

Durch den Siegeszug der mobilen Geräte wurde die Notwendigkeit für Media Queries und Breakpoints immer größer. Außerdem entwickelt sich diese Technik immer noch weiter. Als Marcotte zum ersten Mal das responsive Webdesign einführte, gab es noch nicht so viele verschiedene populäre Geräte, deswegen kamen ein paar »gängige« Breakpoints auf.

Hinweis

Zu Anfang des RWD erschienen »gängige« Breakpoints, die ziemlich genau mit Apple-Produkten übereinstimmten, beispielsweise 320px, 768px und 1024px.

Seitdem ist die Anzahl der Bildschirmgrößen exponentiell in beide Richtungen gewachsen und es wurden verschiedene Ansätze vorgeschlagen, wie man Breakpoints angibt und ermittelt. Was ich Ihnen nun vorstelle, gilt nicht nur als empfohlene Herangehensweise (zum Zeitpunkt, an dem ich das schreibe), sondern es ist auch die Technik, die ich im weiteren Buch anwenden werde.

1.2.1 em-basierte Breakpoints

Im letzten Abschnitt haben Sie erfahren, dass »gängige Breakpoints« aufkamen, die sich an bestimmten Pixelbreiten von Browsern orientierten. Aber bereits im Jahr 2011 merkten Webentwickler, dass man sich auf diese verbreiteten Breakpoints als Empfehlung fürs RWD nicht verlassen konnte, und das aus zwei Gründen. Der erste hat etwas damit zu tun, dass sich eine Webseite nicht nur an das aufrufende Gerät, sondern auch an die Einstellungen des Nutzers anpassen sollte. In ihrem Artikel »The ›Trouble‹ with Android« (Die ›Probleme‹ mit Android) (http://rwdwp.com/2) spricht Stephanie Rieger davon, wie unsinnig es ist, Designs für konkrete Bildschirmgrößen zu entwickeln. Aber ebenso unsinnig ist es auch, anzunehmen, wir wüssten, wie die Einstellungen des Nutzers aussehen. Browser geben bestimmte Standards für Schriftgrößen, Abstände und Ähnliches vor, aber die Benutzer haben die Möglichkeit, diese an ihre Bedürfnisse anzupassen. Wenn ein Benutzer beispielsweise Probleme hat, einen kleinen Text zu lesen, wird er die Standardgröße für Text ändern. Solange eine Website ordentlich programmiert wurde, passt sich die Schrift dann automatisch entsprechend der Benutzereinstellungen an. Deswegen sollten wir von pixelbasierten Breakpoints auf em-basierte umsteigen.

Webentwickler verwenden die Einheit em schon seit Jahren zur Definition der Größe von Elementen. Der Grund hierfür ist, dass em und nicht Pixel als Einheit für die Schrift gewählt werden sollten, damit die Texte flexibel sind und nicht aufgrund von Browsereinstellungen Probleme machen. Denn – das ist wichtig – Pixel sind absolut. Wenn Schriftgrößen (oder andere Elemente) in Pixeln definiert werden, dann ändern sie sich nicht, auch wenn der Benutzer in seinen Einstellungen Änderungen vornimmt.

Hinweis

Eine witzige Tatsache am Rande: em ist kein Akronym oder keine Abkürzung für ein Wort, also nicht wie px eine Abkürzung für Pixel ist. em ist eine Einheit, die im Zusammenhang mit der Schriftgröße steht, und auf dem großen M der gerade verwendeten Schrift basiert. em ist die phonetische Schreibweise des »M«. Bei CSS wird em inzwischen nicht mehr nur als relativer Schriftgrad gesehen, sondern auch für Containergrößen verwendet.

Wenn wir hingegen em für die Schriftgröße verwenden, dann ändert sich die Schrift passend zu den Designs und Benutzereinstellungen. Wenn der Benutzer zoomt, bricht das Layout nicht. Dieselbe Technik kann für Breakpoints eingesetzt werden, d. h. Sie sollten statt mit Pixeln über em bestimmen, wann sich das Layout zu verändern hat. Das stellt sicher, dass Ihre Webseitenlayouts flexibel und responsiv sind, sodass sie nicht nur auf die Breite des Browserfensters, sondern auch auf die Einstellungen des Benutzers reagieren. Anders gesagt: Damit hat der Benutzer die vollständige Kontrolle darüber, wie er die Inhalte sieht.

Das passt genau dazu, worum es beim RWD geht: Wir wissen nicht, mit welchen Geräten die Benutzer unsere Websites betrachten werden, deswegen sollten wir Websites so erstellen, dass sie auf allen Geräten gut aussehen.

Deswegen ist es logisch, dass flexible, em-basierte Breakpoints der richtige Weg für die größtmögliche Flexibilität bei einem Layout sind. Allerdings müssen wir noch einen zweiten Punkt bei Media Queries berücksichtigen, um sicherzustellen, dass diese soweit wie möglich unabhängig von konkreten Geräten sind.

1.2.2 Inhaltsbasierte Breakpoints

Wenn ein Webentwickler von den »gängigen« Breakpoints ausgeht, dann erstellt er im Grunde Websites für (ungefähr) drei Gerätegrößen; genau genommen für Desktops, das iPad und das iPhone. Anstatt das Layout wie früher auf ein Gerät zu beschränken, beschränkt er es damit auf drei Geräte. Das ist eine Verbesserung, aber eine recht kleine, wenn man bedenkt, dass es Hunderte von Geräten gibt, zwischen denen die Benutzer wählen können. Mit dem ständigen Aufkommen neuer Geräte und der schnellen Diversifizierung von Bildschirmauflösungen ist es so gut wie unmöglich, zu entscheiden, für welche Bildschirme man Layouts designen soll. Deswegen ist die empfohlene Vorgehensweise inzwischen, Breakpoints nicht gerätebasiert, sondern inhaltsbasiert auszuwählen. Rieger erklärt die Gründe für diese Entwicklung in ihrem Artikel.