Blick ins Buch

Responsive Webdesign

Konzepte, Techniken, Praxisbeispiele

Andrea Ertel, Kai Laborenz (Autoren)

Buch | Hardcover

524 Seiten

2017 | 3., aktualisierte und erweiterte Auflage
Rheinwerk (Verlag)
978-3-8362-4578-4 (ISBN)

Lese- und Medienproben

Inhaltsverzeichnis (PDF)

Titel ist leider vergriffen, Neuauflage unbestimmt

Artikel merken

Websites für alle Endgeräte entwickeln
Layout, Navigationen, Bilder und Videos, Schriften u. v. m.
Inkl. Barrierefreiheit und Performanceoptimierung

Das Standardwerk in der dritten Auflage!

»Responsive« ist heute eine Kernanforderung an jede Website. Doch mit passenden Breakpoints allein ist es nicht getan. Auch Typografie und Navigation müssen auf allen Endgeräten funktionieren. Für Profis heißt das: ständig weiterlernen, optimieren und neue Lösungen finden.

Lernen Sie in diesem Praxisbuch, wie Sie anpassungsfähige Websites programmieren und gestalten – von Anfang an und auf dem aktuellsten Stand der Technik. Mit vielen Beispielen und Tipps für gute Layout- und Content-Strategien.

Lernen Sie die Grundlagen von Responsive Webdesign
Erfahren Sie alles über den Umgang mit verschiedenen Layouttypen, den Einsatz von Media Queries sowie die Entwicklung eines modernen Webdesigns. Finden Sie heraus, wie Sie responsive Websites testen und die Performance optimieren.

Layout-, Navigations- und Content-Strategien
Sorgen Sie dafür, dass das Layout für alle Ausgabemedien funktioniert und Ihre Navigations- und Content-Strukturen benutzerfreundlich sind. Die Autoren stellen Ihnen hilfreiche Konzepte für eine flexible Navigation vor.

Setzen Sie Inhaltselemente responsiv ein
Erstellen Sie flexible Bilder und legen Sie Grafiken im Vektorformat SVG an. Lernen Sie, wie Sie Formulare, Tabellen oder Slideshows responsiv einsetzen und externe Videoplayer, Maps oder Werbeformate im responsiven Design verwenden.

Themen sind insbesondere:
Media Queries und Viewports
Design und Typografie
Semantik und Barrierefreiheit
Responsive Layout-Patterns
Das passende Framework wählen
Knackpunkt Navigation
Flexible Inhaltselemente
Device Testing / CSS-Regression
Performance-Optimierung

Andrea Ertel ist seit dem Jahr 2000 als Webdesignerin tätig und seit über 10 Jahren Frontend Developer bei der Kommunikationsagentur Sunbeam. Dort kümmert sie sich um die barrierefreie Umsetzung anpassungsfähiger Websites und die Integration der Projekte in das Content-Management-System TYPO3.

Kai Laborenz arbeitet seit 1994 als Webdesigner. Seidem hat er sein Wissen in zahlreichen Kursen und Workshops vermittelt, unter anderem beim E-Learning-Anbieter Akademie.de, wo er zudem als Webmaster tätig war. Er ist Geschäftsführer der Internetagentur Sunbeam und entwickelte Websites für Kunden wie BP und die deutsche Energieagentur.

  Vorwort ... 17

  1.  Denken in flexiblen Strukturen ... 21
       1.1 ... Responsive Webdesign: Was bedeutet das eigentlich? ... 21
       1.2 ... Layouttypen, feste, fluide und flexible ... 29
       1.3 ... Flexible Raster -- Gridsysteme ... 31
       1.4 ... Layoutumbrüche -- Breakpoints ... 36
       1.5 ... Zusammenfassung ... 38

  2.  Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ... 39
       2.1 ... Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen ... 39
       2.2 ... Der erste Schritt: Feste Raster in flexible umrechnen ... 43
       2.3 ... Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte ... 46
       2.4 ... Der dritte Schritt: Layouts mit Media Queries umschalten ... 49
       2.5 ... Zusammenfassung ... 51

  3.  Die Schlüsseltechnologie Media Queries ... 53
       3.1 ... Cascading Stylesheets (ein kurzer Rückblick) ... 54
       3.2 ... Medientyp (Media Type) ... 55
       3.3 ... Medieneigenschaften (Media Features) ... 57
       3.4 ... Media Queries schreiben ... 60
       3.5 ... Viewports und Pixel ... 63
       3.6 ... Media Queries in der Praxis ... 72
       3.7 ... Media-Query-Unterstützung mit JavaScript ... 80
       3.8 ... Serverseitige Geräte- und Feature-Erkennung ... 83
       3.9 ... Zusammenfassung ... 86

  4.  Ein responsiver Workflow ... 87
       4.1 ... Der alte Prozess ... 87
       4.2 ... Phase 1: Moodboards und Inhaltsplan ... 91
       4.3 ... Phase 2: Style Tiles und Wireframes ... 94
       4.4 ... Phase 3: Design im Browser ... 101
       4.5 ... Phase 4: Rinse and Repeat ... 103
       4.6 ... Das responsive Team ... 105
       4.7 ... Dokumentation responsiver Designs ... 106
       4.8 ... Zusammenfassung ... 109

  5.  Design und Typografie ... 111
       5.1 ... Design follows Content ... 111
       5.2 ... Design von innen nach außen -- der Atomic-Design-Ansatz ... 114
       5.3 ... Designanforderungen für responsive Sites ... 121
       5.4 ... Typografie (anpassungsfähiger Text) ... 134
       5.5 ... Zusammenfassung ... 151

  6.  Semantik und Barrierefreiheit ... 153
       6.1 ... Prinzipien der Zugänglichkeit ... 153
       6.2 ... Semantik durch HTML5 ... 161
       6.3 ... Semantik durch WAI-ARIA-Rollen ... 167
       6.4 ... Zusammenfassung ... 170

  7.  Responsive Layout-Patterns ... 171
       7.1 ... Mobile First ... 172
       7.2 ... Praxisbeispiel: Mobile First ... 174
       7.3 ... Auswahl der Breakpoints ... 185
       7.4 ... Praxisbeispiel: Ersten Breakpoint setzen (Tablets) ... 189
       7.5 ... Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ... 193
       7.6 ... Praxisbeispiel: Weitere Breakpoints setzen (große Screens) ... 202
       7.7 ... Flexbox-Layout ... 206
       7.8 ... Grid-Layouts (CSS3) ... 211
       7.9 ... Zusammenfassung ... 218

  8.  Frameworks für responsives Design ... 219
       8.1 ... Eigene Vorlage oder fertige Frameworks verwenden? ... 220
       8.2 ... Wie wählen Sie das richtige Framework aus? ... 222
       8.3 ... Eine kurze Vorstellung responsiver Frameworks ... 223
       8.4 ... JavaScript-Bibliotheken ... 237
       8.5 ... Elegante Stylesheets mit Präprozessoren: SASS & Co. ... 240
       8.6 ... Zusammenfassung ... 247

  9.  Navigationskonzepte ... 249
       9.1 ... Was macht eine Navigation benutzerfreundlich? ... 249
       9.2 ... Benutzerfreundliche Navigation für mobile Geräte ... 250
       9.3 ... Wenige Menüpunkte am oberen Rand ... 252
       9.4 ... Lange Menüs kompakt anordnen ... 256
       9.5 ... Select-Menü ... 260
       9.6 ... Navigation per Anker am Ende des Seiteninhalts ... 265
       9.7 ... Toggle-Menü ... 269
       9.8 ... Off-Canvas-Menü ... 272
       9.9 ... Multilevel-Menüs ... 280
       9.10 ... Zusammenfassung ... 285

10.  Flexible Bildelemente ... 287
       10.1 ... Anpassungsfähige Bilder ... 287
       10.2 ... Responsive Hintergrundbilder ... 296
       10.3 ... Responsive Icons ... 312
       10.4 ... Auflösungsunabhängige Grafiken (SVG) ... 341
       10.5 ... Die Syntax für responsive Bilder ... 355
       10.6 ... Unterschiedliche Versionen für responsive Bilder erzeugen ... 367
       10.7 ... Zusammenfassung ... 377

11.  Mehr flexible Inhalte ... 379
       11.1 ... Responsive Slider nicht nur für Bilder ... 380
       11.2 ... Responsive Lightboxen ... 389
       11.3 ... Responsive Image Maps ... 392
       11.4 ... Anpassungsfähige Videos ... 394
       11.5 ... Flexible Karteneinbindungen (Maps) ... 403
       11.6 ... Flexible Tabellen ... 406
       11.7 ... Akkordeons und Inhaltsboxen mit Reitern ... 414
       11.8 ... Flexible Formulare ... 418
       11.9 ... Inhalte selektiv anzeigen und laden ... 423
       11.10 ... Flexible Werbung ... 430
       11.11 ... Responsive HTML-E-Mails ... 438
       11.12 ... Zusammenfassung ... 442

12.  Testing und Qualitätssicherung ... 443
       12.1 ... Validatoren für HTML und CSS ... 443
       12.2 ... Breakpoints im Browser testen ... 444
       12.3 ... Auf mobilen Geräten testen ... 450
       12.4 ... Qualitätssicherung und Wartung ... 461
       12.5 ... Zusammenfassung ... 469

13.  Performanceoptimierung ... 471
       13.1 ... Das Performancebudget ... 472
       13.2 ... Was beeinträchtigt die Performance? ... 473
       13.3 ... Skripte, Stylesheets und HTML ... 476
       13.4 ... Caching ... 489
       13.5 ... Performanceoptimierung für Grafiken und Bilder ... 490
       13.6 ... Web-Schriften optimieren ... 492
       13.7 ... Gefühlte Performance und Nachladen von Inhalten ... 495
       13.8 ... Zusammenfassung ... 507

14.  Fazit ... 509

  Anhang ... 511

  Index ... 513

»Mit dem Buch erhalten Sie einen sehr guten Überblick und Hilfe zur Umsetzung von Responsive Webdesign. « Onlinemarketing-Praxis 201801

Für jeden, der mehr Flexibilität in das eigene Design-Denken bekommen möchte. t3n zur Vorauflage

Anschaulich und verständlich. Zeigt alle wichtigen Aspekte. Sehr gut! dotnetpro zur Vorauflage

Erscheinungsdatum	30.05.2017
Reihe/Serie	Rheinwerk Computing
Verlagsort	Bonn
Sprache	deutsch
Maße	168 x 240 mm
Einbandart	gebunden
Themenwelt	Informatik ► Web / Internet ► HTML / CSS
Themenwelt	Informatik ► Web / Internet ► Web Design / Usability
Schlagworte	Barrierefreiheit • Code-Design • codesign • CSS3 • CSS3 (Cascading Style Sheets) • Frameworks • Hand-Buch Bücher lernen Grundlagen Kurse Tipps Workshops Tutorials Wissen Anleitung Training Ausbild • Hand-Buch Bücher lernen Grundlagen Kurse Tipps Workshops Tutorials Wissen Anleitung Training Ausbildung • HTML5 • Mobile design • Mobile Webdesign • Responsive Webdesign • Rheinwerk-Verlag Computing • Typografie • Webdesign • Webentwicklung • Web-Entwicklung
ISBN-10	3-8362-4578-7 / 3836245787
ISBN-13	978-3-8362-4578-4 / 9783836245784
Zustand	Neuware