»Flexible Boxes« - responsives Webdesign verstehen

In diesem Buch geht es um die Erstellung moderner Webseiten. Die Schwerpunkte sind HTML5, CSS3, responsive Webdesign und Grid-Layouts. Neu dabei sind responsive Grafiken und Layouten per Flexbox. 

Peter Müller
Flexible Boxes (2., aktualisierte und erweiterte Auflage)
Eine Einführung in moderne Websites

Rheinwerk Verlag · 503 Seiten · broschiert · 2. Auflage 2015
26,90 Euro · ISBN 978-3-8362-3499-3
Updates zum Buch

Die Printausgabe ist ausverkauft (Stand 07/2017) 
Als E-Book beim Rheinwerk Verlag bestellen 

Auf der Verlagsseite zum Buch wird das Buch so beschrieben: 

... zeigt Ihnen von Grund auf, was Sie für die Erstellung von flexiblen Webseiten für die verschiedensten Endgeräte beachten müssen. Egal, ob es sich dabei um HTML5, CSS3, responsives Webdesign oder Grid-Frameworks handelt. Inklusive responsive Grafiken mit HTML5 (srcset, sizes und <picture>) und Layouten mit der Flexbox (display:flex):

Wolfgang Treß von textico.de schrieb über Flexible Boxes:

Besonders angenehm ist, dass Müller in all dem Technik- und Modewort-Chaos um Webdesign für unterschiedliche Plattformen/Geräte und auf Benutzer reagierende Seiten völlig gelassen und ruhig bleibt und konzentriert Schritt für Schritt vor geht. Plötzlich macht dann all das HTML/CSS/Javascript-Bla Sinn und fügt sich ohne zu überfordern zu einem Ganzen zusammen.

Flexible Boxes ist ein kleiner Webdesign-Diamant inmitten von Kohlehalden...

Die Leseprobe (PDF, 55 Seiten, Inhaltsverzeichnis, Index sowie die Kapitel 1, 4 und 12) und die Beispieldateien können Sie gleich hier herunterladen. 

Für wen ist dieses Buch

In diesem Buch werden aktuelle Methoden zum Erstellen von Webseiten in einem sich ständig ändernden World Wide Web beschrieben. Gutes Handwerk sozusagen. Wenn Sie in der Vergangenheit schon Erfahrungen mit der Erstellung von Webseiten gesammelt haben und sich jetzt über modernes Webdesign mit HTML5 und CSS3 informieren möchten, liegen Sie mit diesem Buch richtig. 

Grundprinzipien von CSS wie Spezifität, Kaskade, Positionierung, Float-Layouts, Clearing-Techniken und dergleichen sollten Sie schon beherrschen, denn die werden in diesem Buch nicht weiter erläutert. Falls Sie bei diesen Themen Nachholbedarf entdecken, wird mein Buch »Einstieg in CSS« Ihnen gute Dienste leisten.

»Flexible Boxes« versteht sich trotzdem als Einführung und richtet sich daher nicht in erster Linie an professionelle Frontend-Entwickler. Die sollten die in diesem Buch behandelten Themen eigentlich schon kennen.

Was ist neu in der zweiten Auflage?

Seit dem Erscheinen der ersten Auflage ist über ein Jahr vergangen, und in der Zeit hat sich im Web eine Menge getan. Neben unzähligen kleineren Aktualisierungen und Änderungen gibt es zwei große neue Themenbereiche:

  • Responsive Grafiken (<picture>, srcset, sizes & Co.)

    2014 war ein ereignisreiches Jahr für dieses wichtige Thema, und die ersten Browser unterstützen bereits die noch taufrische picture-Spezifikation. Responsive Grafiken werden Teil von HTML 5.1, in Kapitel 6, »Responsive Grafiken, Audio und Video«, ausführlich erläutert und in Kapitel 15, »Inhalte für responsive Webseiten gestalten«, auf den Beispielseiten eingebaut.

  • Flexbox: Layouten mit dem CSS Flexible Box Layout Module

    Float und Clear haben die CSS-Layouts im letzten Jahrzehnt dominiert, aber neue CSS3-Module zum Layouten rücken langsam in greifbare Nähe. In Kapitel 19, »Ausblick: Flexbox – jenseits von Floatlayouts«, stelle ich Ihnen das CSS Flexible Box Layout Module vor, das unter dem Namen Flexbox bekannt ist und mit dem das Layouten fast zum Vergnügen wird.

Grids und Frameworks bilden jetzt zusammen mit der Flexbox einen eigenen Teil.

Das sagen die Leser dazu

Im Folgenden einige Ausschnitte aus den Rezensionen auf Amazon

»Der Autor führt nicht nur souverän in RWD ein, sondern vermittelt auch einige andere Neuerungen in HTML5/CSS3. Aus meiner Sicht ist das Buch narrensicher. Wer es damit nicht lernt, lernt es gar nicht.«

»... meine Erwartungen sind sogar übertroffen worden. Danke an den Autor. Sehr hilfreiche Lektüre. Kann ich nur jedem Webdesigner empfehlen.«

»Von mir volle 100 Punkte :-) « 

»Peter Müller gelingt ist wie sonst kaum jemandem, Licht in das Dunkel der Webseiten-Gestaltung zu bringen.«

»Peter Müller schafft es immer wieder, eine vergleichsweise trockene Materie verständlich und kurzweilig darzustellen.«

Teil I: HTML5 – »ausgezeichneter« Inhalt

Semantische Strukturelemente in HTML5

Nach der Einführung beginnt die Reise mit einem Ausflug in die Welt von HTML5, denn selten hat eine neue HTML-Version für so viel Verwirrung und Missverständnisse gesorgt.

Das A und O einer erfolgreichen Website sind gute Inhalte, und der erste Schritt auf dem Weg zu einer responsiven Website ist es, diese Inhalte mit sinnvollem HTML auszuzeichnen. Teil I ist eine aus vier Kapiteln bestehende Einführung in HTML5, die die Möglichkeiten der neuen HTML-Version für normale Webseitenersteller aufzeigt:

  • Kapitel 3 – Das HTML5-Universum im Überblick

    Ein kurzer Blick auf das HTML5-Universum zeigt, was genau der Begriff HTML5 eigentlich meint und was davon für Nichtprogrammierer wirklich interessant ist. 

  • Kapitel 4 – Semantische Strukturelemente in HTML5

    Anhand des Templates HTML5 Bones werden die neuen HTML5-Elemente wie header, footer, nav, section, article, aside und main vorgestellt und erklärt. Motto: »Semantisches HTML statt immer nur div«.

  • Kapitel 5 – Kleinigkeiten und Formulare

    HTML5-Elemente wie figure und figcaption sowie time werden ebenso vorgestellt wie Änderungen an bestehenden HTML-Elementen. Auch für Formulare gibt es zahlreiche neue Attribute und Eingabefelder.

  • Kapitel 6 – Responsive Grafiken, Audio und Video

    Mit Elementen und Attributen wie <picture>, srcset und sizes wird es möglich, für unterschiedliche Layouts unterschiedliche Grafiken auszuliefern. Zur Einbindung von Multimedia helfen <audio> und <video>

  • Kapitel 7 – Workshop: Das HTML für die Beispielseiten

    In diesem Kapitel wird das HTML für die Beispielseiten erstellt und erläutert. Dabei wird auch das Einfügen von Grafiken auf responsiven Webseiten erklärt.

Die Beispielseiten werden im weiteren Verlauf des Buches nach dem Prinzip »Mobile First« Schritt für Schritt weiterentwickelt.

Teil II: CSS3 – Inhalte gestalten

Das Fundament ist mit der Auszeichnung der Inhalte mit modernem HTML5 gelegt, und in diesem Abschnitt geht es um die Gestaltung dieser Inhalte:

  • Kapitel 8 – Tools, Zentralisierung und Normalisierung

    Nach der Vorstellung von Tools, die das Testen von Webseiten in verschieden großen Browserfenstern erleichtern, schauen sich normalize.css genauer an, erstellen Sie ein zentrales Stylesheet, binden jQuery ein und lernen Modernizr kennen.

  • Kapitel 9 – Selektoren für alle Fälle

    Ein ganzes Kapitel über Selektoren mit zahlreichen Beispielen zu deren Einsatz, denn moderne Browser verstehen mehr als Klassen und IDs. Das Kapitel dient auch zum Nachschlagen, und Sie müssen es nicht auf einen Schlag lesen.

  • Kapitel 10 – Text gestalten mit CSS3

    Webfonts, relative Einheiten für Schriftgrößen, text-shadow und Iconfonts. Im Workshop binden Sie zwei Google Fonts ein und erstellen grafikfreie Social-Media-Icons.

  • Kapitel 11 – Boxen gestalten mit CSS3

    In diesem Kapitel geht es um die Gestaltung der Boxen selbst, nach dem Motto »CSS3 statt Grafiken und Flash«. Das Border-Box-Modell wird ebenso erläutert wie Schatten, Rundungen, grafikfreie Farbverläufe und Transparenzen. Zum Abschluss kommt mit den Eigenschaften transition und transform etwas Bewegung in die Sache.

Teil III: Getting responsive

Das Fundament ist mit der Auszeichnung der Inhalte mit modernem HTML5 gelegt, und in diesem Abschnitt geht es um die Gestaltung dieser Inhalte:

  • Kapitel 12 – Media Queries – die Seiten werden responsiv

    Media Queries sind eine Erweiterung der bekannten Medientypen wie screen und print und ermöglichen es, unterschiedliche Layouts für unterschiedliche Situationen auszuliefern. 

  • Kapitel 13 – Responsive Navigationen

    Das Kapitel zeigt zunächst verschiedene Navigationsmöglichkeiten auf mobilen Geräten. Im Workshop wird mit der Pseudoklasse :target eine CSS-basierte mobile Navigation für die Beispielseiten erstellt, die anschließend mit verschiedenen Tools getestet wird.

  • Kapitel 14 – Responsive Layouts - ein flexibles Grid 

    In diesem Kapitel erstellen Sie für die Beispielseiten ein flexibles, prozentbasiertes Gridlayout. Zunächst wird erklärt, was ein Grid wirklich ist, dann wird das Layout responsiv und in ein Full-Page-Layout verwandelt. Den Abschluss bildet der Umgang mit dem Internet Explorer.

  • Kapitel 15 - Inhalte für responsive Webseiten gestalten 

    Los geht es in diesem Kapitel mit responsiven Grafiken. Danach werden ein flexibler Slider und flexible Videos eingebunden. Die Optimierung der Zeilenlänge und ein CSS3-Akkordeon zur platzsparenden Darstellung von längeren Inhalten bilden die nächsten Themen. Adaptive Images zur Auslieferung von maßgeschneiderten Grafiken runden das Kapitel ab.

Teil IV: Grids, Frameworks und Flexbox

Das Fundament ist mit der Auszeichnung der Inhalte mit modernem HTML5 gelegt, und in diesem Abschnitt geht es um die Gestaltung dieser Inhalte:

  • Kapitel 16 - Gridlayouts: von Pixel zu Prozenten 

    Nach einen kleinen Exkurs zum Thema »Frameworks« erstellen Sie ein pixelbasiertes Grid mit dem Klassiker 960.gs, das Sie anschließend per Zauberformel in ein prozentbasiertes Grid verwandeln. 

  • Kapitel 17 – »Desktop First«: Gridlayouts mit YAML4 

    Das CSS-Framework YAML gehört zu den dienstältesten Frameworks überhaupt und erfreut sich immer noch großer Beliebtheit. In diesem Kapitel erstellen Sie nach dem Motto »Desktop First« ein Gridlayout mit YAML.

  • Kapitel 18 - »Mobile First«: Gridlayouts mit Foundation 

    Foundation von Zurb ist ein modernes Frontend-Framework, das von Anfang an nach dem »Mobile First« Prinzip aufgebaut wurde. In diesem Kapitel erstellen Sie mit Foundation ein Gridlayout. 

  • Kapitel 19 - Ausblick: Flexbox - jenseits von Floatlayouts 

    Zum Abschluss stelle ich Ihnen das CSS Flexible Box Layout Module vor, mit dem das Layouten per CSS fast zum Vergnügen wird. Tauchen Sie ein die neue Welt des Layoutens und genießen Sie die Flexbox

 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.