Praxiswissen Responsive Webdesign

Inhaltsverzeichnis
Praxiswissen Responsive Webdesign

Praxiswissen Responsive Webdesign

Tim Kadlec

Für meine Frau und unsere wundervollen Töchter

Inhaltsverzeichnis

Danksagungen

Vorwort

von Aaron Gustafson

Beitragende

1. Das Web ist immer und überall

Was wir falsch gemacht haben

Die Geräte kommen, die Geräte kommen

Bildschirmgröße

Netzwerkgeschwindigkeit

Unterstützung von Standards

Eingabemethoden

Kontext

Getrennte Websites

Divergenz

»Responsive« werden

Progressive Enhancement

Wozu noch ein Buch über Responsive Design?

Was wird behandelt?

Für wen dieses Buch ist

Codebeispiele

Die Website zum Buch

2. Fluid Layouts

Layoutoptionen

Feste Breite

Fluid Layouts

Elastische Layouts

Hybride Layouts

Welcher Ansatz ist am ehesten responsive?

Schriftgrößen

Pixel

Em

Prozentsätze

Bonusrunde: rem

Welcher Ansatz ist am ehesten responsive?

Konvertierung von Pixeln

Grid-Layouts

Vom Inhalt ausgehen

Das Raster festlegen

Flexible Lösung

Objekte mit fester Breite in einer fluiden Welt

Feste und fluide Breiten mischen

Tabellenlayouts – und zwar richtig

Unterstützung Für ältere Versionen Des Internet Explorer

Zusammengefasst

3. Media Queries

Viewports

Ein Pixel ist ein Pixel, es sei denn, es ist keins

Viewport-Tag und Eigenschaften

Width

Height

User-Scalable

Initial-Scale

Maximum-Scale

Minimum-Scale

Lösung für das viewport-Problem

Struktur von Media Queries

Medientypen

Medienausdrücke

Logische Schlüsselwörter

And

Not

Or

Only

Regeln

Eingebettet kontra extern

Reihenfolge von Media Queries

Vom Desktop ausgehend

Von mobilen Geräten ausgehend

Die Grundfunktionalität entwickeln

Breakpoints bestimmen

Folgen Sie dem Inhalt

Verbesserungen für große Bildschirme

Flexiblere Media Queries mit em

Navigation

Toggle-Menü

Toggle-Css

Toggle-JavaScript

Unterstützung für den Internet Explorer

Zusammenfassung

4. Responsive Media

Was ist das Problem?

Performance

Bilder für mobile Geräte

JavaScript

Gestatten, matchMedia

Strategien für Responsive Images

Kampf dem Browser

Resignation

Serverseitige Lösung

Optionen für Responsive Images

Sencha.io Src

Adaptive Images

Moment, was war noch mal die Antwort?

Hintergrundbilder

Da wir schon dabei sind

Hochauflösende Displays

SVG

Andere Ressourcen mit fester Breite

Video

Die User Experience Verbessern

Werbung

Zusammengefasst

5. Planung

Responsive Design ist eine Entscheidung

Überlegungen

Performance

Kontext

Content Negotiation

Investierte Zeit

Browserunterstützung

Werbung

Schlussfolgerung

Achten Sie auf Ihre Analyse-Tools

Verzerrte Analysen

Auf welche Statistiken es ankommt

Verzerrte Marktanteile

Setzen Sie sich mit Ihren Inhalten auseinander

Inhaltsanalyse

Seitentabellen

Setzen Sie Schwerpunkte bei der Optimierung

Optimiert für manche, zugänglich für viele

Sorgen Sie für eine geräteübergreifende User Experience

Vorbereitung der Testumgebung

Echte Geräte

Bisheriger Traffic

Regionaler Traffic und Markt

Gerätespezifische Faktoren

Projektspezifische Features

Budget

Browservielfalt

Emulatoren

Dienste von Drittanbietern

Zusammengefasst

6. Design-Workflow

Die Distanz steht nicht fest

Ein interaktives Medium

Zusammenarbeit

KommuniKation

Wiederholungen

Respekt

Zusammenarbeit Mit Dem Kunden

In Systemen denken

Mobile First

Mobile Geräte nehmen explosionsartig zu

Mobile Geräte zwingen zum Fokus

Mobile Geräte erweitern Ihre Möglichkeiten

Die Tools

Wireframes

Beginnen Sie mit einer Skizze

Mock-ups

Das Problem mit statischen mock-ups

Design im Browser

Unsere Gewohnheiten

Unsere tools

Styleguides

Ihr Eigener Style Guide

Zusammengefasst

7. Responsive Content

Mit dem Inhalt anfangen

Inhaltstypen

Zielsetzung

Erstellung

Struktur

Content Modeling

Welchen Inhalt wann anzeigen?

Inhalte entfernen

»View Desktop« ist keine Lösung

Vertrauen

Inhalte verbessern

Reihenfolge der Inhalte ändern

Nochmals zur Struktur

Hilfe wartet um die Ecke

Wo wir hinwollen

Codesuppe

Winzige Schritte

API für Inhalte

Speicherschicht

Übersetzungs- Oder Api-Schicht

Anzeigeschicht

Zusammengefasst

8. RESS

User Agent-Erkennung

Anatomie eines User Agent-Strings

Was können Sie mit der User Agent-Erkennung anstellen?

Pro user agent-Erkennung

Kontra user agent-Erkennung

Feature-Erkennung

Modernizr

Auf den Server

Pro feature-Erkennung

Kontra feature-Erkennung

User Agent- und Feature-Erkennung kombinieren

RESS: Das Beste aus zwei Welten

Stürmische Zeiten

WURFL installieren

Konfiguration

Leistungsmerkmale ermitteln

Feature-Erkennung

Anrufe tätigen

Optimierung für Touch-Geräte

Touch-freundliches JavaScript

Zusammengefasst

9. Responsive User Experiences

Ein System von Sensoren

Netzwerk

Was können wir tun?

Testladen von Bildern

Network Information-API

Kontext

Kontext klassifizieren

Zusammengesetztes Bild

Haltung des Benutzers

Beobachten und forschen

Leistungsmerkmale

HTML5-Eingabetypen

APIs

Geolocation-API

Media Capture and Streams

Weitere APIs am Horizont

Zusammengefasst

10. Nachwort: Blick nach vorn

A. Bildnachweis

Beispiel-WebSite

Kapitel 1

Kapitel 4

Kapitel 5

Kapitel 6

Kapitel 9

B. Über den Autor

C. Über den technischen Gutachter

Stichwortverzeichnis

Danksagungen

Häufig heißt es, dass das Schreiben eines Buchs ein einsamer Prozess für Einsiedler sei. In manchen Fällen mag das stimmen, aber auf dieses Buch trifft es definitiv nicht zu. Wenn dieses Buch in irgendeiner Form gut gelungen ist, dann wegen all der harten Arbeit, Geduld und des Feedbacks all derer, die mir dabei geholfen haben.

Ein riesiges Dankeschön geht an ...

Michael Nolan, der mir zunächst einmal angeboten hat, ein Buch zu schreiben. Vielen Dank für das Vertrauen in mich!

Margaret Anderson und Gretchen Dykstra, die über meine schrecklichen Interpunktionsfehler hinweggesehen und mir den Eindruck vermittelt haben, dass ich wesentlich mehr Ahnung davon habe, wie man ein Buch schreibt, als ich es in Wahrheit habe.

Danielle Foster, die dafür gesorgt hat, dass das Buch so fantastisch aussieht, und die einige meiner Änderungen in allerletzter Minute akzeptiert hat. Außerdem herzlichen Dank an Rose Weisburd, Joy Dean Lee, Aren Straiger, Mimi Heft, Rebecca Winter, Glenn Bisignani und das übrige Team bei New Riders, die mitgeholfen haben, dass dieses Buch entstehen konnte.

Ed Merritt, Brad Frost, Guy Podjarny, Henny Swan, Luke Wroblewski, Tom Maslen und Erik Runyon für ihre wunderbaren Beiträge. Dadurch, dass sie eingewilligt haben, ihr Fachwissen und ihre Erfahrung zu teilen, ist dieses Buch wesentlich gehaltvoller geworden.

Jason Grigsby für sein wachsames Auge darauf, dass ich versehentlich nichts erfunden habe, für sein wertvolles (und häufig urkomisches) Feedback und seinen unermüdlichen Zuspruch. Jason ist nicht nur einer der klügsten Menschen, die ich kenne, sondern auch einer der hilfsbereitesten. Ich bin dankbar, ihn zum Freund zu haben!

Aaron Gustafson dafür, dass er ein großartiges Vorwort geschrieben hat. Von ihm lerne ich unentwegt, seitdem ich mit dem Web arbeite. Es wäre noch stark untertrieben zu sagen: Ich fühle mich zutiefst geehrt, dass er bereit war, das Vorwort zu diesem Buch zu schreiben.

Stephen Hay, Stephanie Rieger, Bryan Rieger, Brad Frost, Derek Pennycuff, Ethan Marcotte, Chris Robinson, Paul Thompson, Erik Wiedeman, Sara Wachter-Boettcher, Lyza Danger Gardner, Kristofer Layon, Zoe Gillenwater, Jeff Bruss, Bill Zoelle, James King, Michael Lehman, Mat Marquis, Nishant Kothary, Andy Clarke, Ronan Cremin, Denise Jacobs und Cennydd Bowles für ihre stetigen Einsichten, ihr Feedback und ihren Zuspruch. Dieses Buch verdankt der kollektiven Großartigkeit dieser Menschen eine ganze Menge!

Ein Dankeschön an alle, die durch ihre Anregungen – sowohl persönlicher Art als auch online – die Diskussionen, die in diesem Buch skizziert werden, bereichert haben. Wir sind eine großartige Community, und ich bin stolz darauf, ein Teil davon zu sein.

Meiner Mutter und meinem Vater für ihre Liebe und ermutigenden Worte.

Meinen wundervollen Töchtern: dafür, dass sie mich immer wieder daran erinnert haben, dass es in Ordnung ist, von Zeit zu Zeit eine Pause zu machen, um mit ihnen zu spielen. Und dafür, dass sie jeden einzelnen Tag mit ihrem Lachen, ihren Küssen und Umarmungen füllen.

Und an meine wunderbare Frau Kate. Dieses Buch – genau wie alles andere, was mir je gelungen ist – ist das direkte Ergebnis ihrer liebevollen Unterstützung und ihres Zuspruchs. Worte reichen nicht aus, um auszudrücken, wie dankbar ich ihr bin.

Vorwort

von Aaron Gustafson

Vor einigen Jahren hat die Fotografielegende Chase Jarvis die intelligente Bemerkung gemacht, dass die »beste Kamera immer die ist, die man dabeihat«. Damals wirkte diese Behauptung leicht irritierend, sie scheint mir aber richtig zu sein: Eine perfekte Aufnahme ist nur selten durch und durch geplant. Wenn Sie Glück haben, findet sie den Weg zu Ihnen.

Vielleicht liefert das Licht genau die perfekten Akzente für das Herbstlaub auf Ihrem Spaziergang am späten Nachmittag. Oder Ihre kleine Tochter steht gerade zum ersten Mal im Leben auf zwei Beinen. In solchen Momenten geht es nicht darum, ob Ihre Leica im Nebenzimmer im Regal steht oder Ihre Rebel im Auto liegt. Es geht darum, dass Sie eine Kamera bei sich haben – egal was für ein Modell –, mit der Sie diese glücklichen und flüchtigen Momente einfangen können.

Diesen Gedanken von Jarvis weiterspinnend, hat Stephanie Rieger für Folgendes plädiert: Der beste Browser ist der, den Sie dabeihaben. Das Leben ist schließlich unberechenbar, Gelegenheiten sind flüchtig, und die Inspiration trifft einen oft schnell und hart.

Stellen Sie sich vor, Sie arbeiten in der Krebsforschung. Sie grübeln seit Monaten über Bergen von Forschungsergebnissen und suchen nach einer Möglichkeit, die Interferon-Gamma-Produktion zu erhöhen – um die natürliche Fähigkeit des Körpers anzukurbeln, die Tumorentwicklung zu verhindern. Ihr Bauch sagt Ihnen, dass Sie einer Antwort ziemlich nahe sind, aber eben noch nicht ganz. Und dann, eines Morgens – während Sie sich die Erschöpfung unter einer schönen warmen Dusche vom Leib spülen – trifft es Sie wie ein Schlag. Jawohl! Sie glauben, Sie haben es! Sie müssen lediglich noch mal in den Artikel schauen, den Sie letzte Woche gelesen haben.

Tropfend springen Sie aus der Wanne und landen auf der Badematte. Ohne das Handtuch auch nur eines Blickes zu würdigen, schnappen Sie sich Ihr Handy, gehen auf die Website des Fachmagazins und werden leider auf die »mobile« Version weitergeleitet. Dort finden Sie aber nur allgemeine Informationen zur gewünschten Veröffentlichung und sollen sich registrieren.

Ihre Finger hinterlassen eine feuchte Spur auf dem Bildschirm, während Sie verzweifelt nach unten scrollen, um den Link »Vollständige Website« zu finden und darauf zu tippen. Während der Bildschirm lädt, schweben Sie etwa 10 km über dem Schachbrettmuster einer Website, die aussieht, als wäre sie von einem Website-Ausschuss am grünen Tisch gestaltet worden.

Mehrere Minuten, unzählige Fingergesten und endloses Tippen später finden Sie endlich den Artikel. Aber nur um festzustellen, dass es sich um ein PDF handelt, das auf Ihrem kleinen Bildschirm fast nicht zu lesen ist. Entmutigt legen Sie das Telefon weg, schleppen sich zurück in die Dusche und versuchen, sich Ihre Enttäuschung abzubrausen.

Traurigerweise ist das Surfen auf einem mobilen Gerät leider nur allzu oft ein frustrierendes (und gelegentlich auch entwürdigendes) Unterfangen. Aber das muss nicht sein.

In diesem Buch erzählt Ihnen mein Freund Tim ganz klar und verständlich, was Sie tun können (und auch tun sollten), um allen Benutzern ein großartiges Nutzererlebnis zu bieten, das auf die Möglichkeiten des jeweiligen Geräts zugeschnitten ist und das Zeit, Geduld sowie Datenlimits berücksichtigt. Lassen Sie sich nicht von seinem Kleinstadtcharme täuschen: Tim kennt dieses Zeug in- und auswendig! Ich habe eine Menge aus diesem Buch gelernt und weiß: Ihnen wird es genauso gehen.

Aaron Gustafson ist der Autor von Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (Easy Readers, 2011).

Beitragende

Die Diskussion über Responsive Design entwickelt sich rasant. Sehr rasant. Dieses Buch soll eine Zusammenfassung der wunderbaren Diskussionen in unserer Community bieten. Aus diesem Grund habe ich mehrere Menschen gebeten, kurze Beiträge zu ihren Projekten und Studien zu schreiben.

Das sind die Beiträge in ihrer Reihenfolge im Buch:

Alle sieben forschen an der vordersten Front des Responsive Webdesign. Sie implementieren die in diesem Buch diskutierten Techniken und treiben die Diskussion kontinuierlich voran. Es ist mir eine unglaubliche Ehre, ihre Beiträge in diesem Buch zu präsentieren – Beiträge, die ihrer hart erkämpften Erfahrung entspringen.