Verfügbarkeit: Responsive Webdesign :: Universität Regensburg

Gespeichert in:

Bibliographische Detailangaben
Titel:	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele
Von:	Andrea Ertel, Kai Laborenz
Person:	Ertel, Andrea ca. 20. Jh. Verfasser aut Laborenz, Kai
Hauptverfassende:	Ertel, Andrea ca. 20. Jh (VerfasserIn), Laborenz, Kai ca. 20. Jh (VerfasserIn)
Format:	Buch
Sprache:	Deutsch
Veröffentlicht:	Bonn Rheinwerk Computing 2017
Ausgabe:	3., aktualisierte und erweiterte Auflage
Schriftenreihe:	Rheinwerk Computing
Notation:	ST 252
Schlagwörter:	Responsive Webdesign Barrierefreiheit Codesign Frameworks HTML5 Mobile Webdesign Typografie Webdesign Webentwicklung
Medienzugang:	http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA
Beschreibung:	Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung"
Umfang:	524 Seiten Diagramme, Illustrationen
ISBN:	9783836245784 3836245787

Internformat

MARC


LEADER	00000nam a2200000 c 4500
001	BV044297325
003	DE-604
005	20230123
007	t\|
008	170504s2017 xx a\|\|\| \|\|\|\| 00\|\|\| ger d
016	7		\|a 1124015418 \|2 DE-101
020			\|a 9783836245784 \|c Festeinband : EUR 39.90 (DE), EUR 41.10 (AT), CHF 49.90 (freier Preis) \|9 978-3-8362-4578-4
020			\|a 3836245787 \|9 3-8362-4578-7
035			\|a (OCoLC)971202040
035			\|a (DE-599)DNB1124015418
040			\|a DE-604 \|b ger \|e rda
041	0		\|a ger
049			\|a DE-91G \|a DE-473 \|a DE-1049 \|a DE-1051 \|a DE-523 \|a DE-1102 \|a DE-19 \|a DE-M347 \|a DE-859 \|a DE-522 \|a DE-862 \|a DE-29T \|a DE-12 \|a DE-634 \|a DE-83 \|a DE-11 \|a DE-898 \|a DE-573 \|a DE-703 \|a DE-863 \|a DE-20 \|a DE-739 \|a DE-B768 \|a DE-B170 \|a DE-355 \|a DE-858 \|a DE-1046 \|a DE-706
084			\|a ST 252 \|0 (DE-625)143627: \|2 rvk
084			\|a DAT 675f \|2 stub
100	1		\|a Ertel, Andrea \|d ca. 20. Jh. \|e Verfasser \|0 (DE-588)1047416069 \|4 aut
245	1	0	\|a Responsive Webdesign \|b Konzepte, Techniken, Praxisbeispiele \|c Andrea Ertel, Kai Laborenz
250			\|a 3., aktualisierte und erweiterte Auflage
264		1	\|a Bonn \|b Rheinwerk Computing \|c 2017
300			\|a 524 Seiten \|b Diagramme, Illustrationen
336			\|b txt \|2 rdacontent
337			\|b n \|2 rdamedia
338			\|b nc \|2 rdacarrier
490	0		\|a Rheinwerk Computing
500			\|a Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung"
650	0	7	\|a Responsive Webdesign \|0 (DE-588)1035443651 \|2 gnd \|9 rswk-swf
653			\|a Barrierefreiheit
653			\|a Codesign
653			\|a Frameworks
653			\|a HTML5
653			\|a Mobile Webdesign
653			\|a Responsive Webdesign
653			\|a Typografie
653			\|a Webdesign
653			\|a Webentwicklung
689	0	0	\|a Responsive Webdesign \|0 (DE-588)1035443651 \|D s
689	0		\|5 DE-604
700	1		\|a Laborenz, Kai \|d ca. 20. Jh. \|0 (DE-588)1023809540 \|4 aut
710	2		\|a Galileo Press \|4 pbl
856	4	2	\|m X:MVB \|q text/html \|u http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm \|3 Inhaltstext
856	4	2	\|m Digitalisierung UB Passau - ADAM Catalogue Enrichment \|q application/pdf \|u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA \|3 Inhaltsverzeichnis
856	4	2	\|m Digitalisierung UB Passau - ADAM Catalogue Enrichment \|q application/pdf \|u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA \|3 Inhaltsverzeichnis
943	1		\|a oai:aleph.bib-bvb.de:BVB01-029701294

Datensatz im Suchindex

DE-BY-OTHR_call_number	F 03/ST 252 E73(3)
DE-BY-OTHR_katkey	5930088
DE-BY-OTHR_location	02
DE-BY-OTHR_media_number	067004168757
DE-BY-TUM_call_number	0104 DAT 675f 2014 A 2888(3) 0303 DAT 675f 2014 L 802(3)
DE-BY-TUM_katkey	2261636
DE-BY-TUM_location	01 03
DE-BY-TUM_media_number	040008256591 040008256568 040008256579 040008256580 040008256557 040008256546
DE-BY-UBR_call_number	14/ST 252 E73(3)
DE-BY-UBR_katkey	5930088
DE-BY-UBR_location	UB Allgemeiner Lesesaal
DE-BY-UBR_media_number	069042048834
_version_	1835089932130975744
adam_text	Auf einen Blick Auf einen Blick 1 Denken in flexiblen Strukturen ................................... 21 2 Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ........ 39 3 Die Schlüsseltechnologie Media Queries ........................... 53 4 Ein responsiver Workflow.......................................... 87 5 Design und Typografie ........................................... 111 6 Semantik und Barrierefreiheit ................................. 153 7 Responsive Layout-Patterns....................................... 171 8 Frameworks für responsives Design ............................... 219 9 Navigationskonzepte ............................................. 249 10 Flexible Bildelemente............................................ 287 11 Mehr flexible Inhalte............................................ 379 12 Testing und Qualitätssicherung .................................. 443 13 Performanceoptimierung........................................... 471 14 Fazit............................................................ 509 Inhalt Inhalt 1 Denken in flexiblen Strukturen 21 1.1 Responsive Webdesign: Was bedeutet das eigentlich?..................... 21 1.1.1 Veränderte Anforderungen an die Darstellung von Websites... 22 1.1.2 Anpassungsfähige Websites versus Mobilversionen von Websites ... 25 1.1.3 Beispiele für anpassungsfähige Websites......................... 26 1.2 Layouttypen, feste, fluide und flexible................................ 29 1.2.1 Das feste Layout................................................ 29 1.2.2 Das fluide und das elastische Layout............................ 29 1.2.3 Das adaptive Layout............................................. 30 1.2.4 Das responsive Layout........................................... 30 1.3 Flexible Raster - Gridsysteme.......................................... 31 1.3.1 Anwendungsbeispiel: Fixes Raster in flexibles umrechnen ........ 32 1.4 Layoutumbrüche- Breakpoints............................................ 36 1.4.1 Adaptives oder responsives Layout............................... 37 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.3.1 Exkurs: Flexible Bilder......................................... 47 2.4 Der dritte Schritt: Layouts mit Media Queries umschalten............... 49 2.4.1 Exkurs: Media Queries........................................... 49 2.5 Zusammenfassung........................................................ 51 3 Die Schlüsseltechnologie Media Queries 53 3.1 Cascading Stylesheets (ein kurzer Rückblick)........................... 54 3.1.1 Zuweisung von CSS-Eigenschaften................................. 54 5 55 55 56 57 58 60 60 62 63 64 64 65 68 70 72 72 73 74 75 76 76 78 79 80 82 83 83 84 84 85 86 87 87 91 91 Medientyp (Media Type)....................................... 3.2.1 Medienabfrage für den Medientyp setzen............... 3.2.2 Medientypen in der Übersicht......................... Medieneigenschaften (Media Features)......................... 33.1 Medieneigenschaften in der Übersicht................. Media Queries schreiben.................................... 3.4.1 Komponenten eines Media Querys ...................... 3.4.2 Media Queries zuweisen .............................. Viewports und Pixel.......................................... 3.5.1 Der visuelle Viewport ............................... 3.5.2 Der Layout-Viewport auf mobilen Geräten ............. 3.5.3 Gerätepixel und CSS-Pixel: Der »virtuelle« visuelle Viewport 3.5.4 Das Viewport-Metatag und seine Eigenschaften......... 3.5.5 Die @viewport-Anweisung in CSS....................... Media Queries in der Praxis.................................. 3.6.1 Medieneigenschaft »width« ........................... 3.6.2 Media Queries in em.................................. 3.6.3 Medieneigenschaft »height« - vertikale Media Queries. 3.6.4 Medieneigenschaft »orientation«...................... 3.6.5 Medieneigenschaft »aspect-ratio«..................... 3.6.6 Medieneigenschaften »resolution« und »device-pixel-ratio« 3.6.7 Medieneigenschaften »pointer« und »hover«............ 3.6.8 Browserunterstützung und Fallbacklösungen ........... Media-Query-Unterstützung mit JavaScript .................... 3.7.1 Element Queries und Container Queries ............... 3.7.2 Restive JS (rScript) für Geräteerkennungen .......... Serverseitige Geräte- und Feature-Erkennung ................. 3.8.1 WURFL Co............................................. 3.8.2 RESS-das Beste von Client und Server kombiniert...... 3.8.3 Client Hints ........................................ Zusammenfassung.............................................. Ein responsiver Workflow Der alte Prozess............... Phase 1: Moodboards und Inhaltsplan 4.2.1 Moodboards.............. Inhalt 4.2.2 Inhalte strukturieren und hierarchlsleren .................. 92 4.2.3 Content-Prototypen.......................................... 93 4.3 Phase 2: Style Tiles und Wireframes................................. 94 4.3.1 Style Tiles................................................. 94 4.3.2 Mockups..................................................... 97 4.4 Phase 3: Design im Browser......................................... 101 4.4.1 Frameworks und Website-Editoren als Design-Tools........... 102 4.4.2 Komponenten, Patterns und Atomic Design.................... 102 4.5 Phase 4: Rinse and Repeat.......................................... 103 4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein...... 103 4.6 Das responsive Team................................................ 105 4.7 Dokumentation responsiver Designs.................................. 106 4.7.1 Dokumentation mit Living Styleguides....................... 107 4.8 Zusammenfassung.................................................... 109 5 Design und Typografie in 5.1 Design follows Content.............................................. 111 5.1.1 You cannot not communicate - kein Design ist auch ein Design . 112 5.2 Design von innen nach außen - der Atomic-Design-Ansatz.............. 114 5.2.1 Atomic Design anwenden mit Pattern Lab........................ 115 5.3 Designanforderungen für responsive Sites............................ 121 5.3.1 Does size matter - was machen Nutzer mit ihren Geräten?....... 122 5.3.2 Geräteübergreifendes Surfen .................................. 124 5.3.3 Size matters: Ziele für Touchevents .......................... 125 5.3.4 Es gibt kein Hover auf Hawaii, und ein Klick ist kein Touch .. 126 5.3.5 Inaktives »:active« auf ¡OS................................... 128 5.3.6 Handpositionen................................................ 129 5.3.7 Layoutwechsel bei Änderung der Orientierung................... 130 5.3.8 Schreiben ist mühsam: Formulare auf Smartphones............... 132 5.3.9 Mobile Inspiration und Best Pratice ........................ 133 5.4 Typografie (anpassungsfähiger Text)................................. 134 5.4.1 Die Auswahl der Schriftart ................................... 134 5.4.2 Angaben für die Schriftgröße ................................. 137 5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen Bildschirmen.................................................. 142 5.4.4 Zeilenlänge und Durchschuss................................... 144 7 Inhalt 5.4.5 Praxisbeispiel: Relative Schriftgrößen bezogen auf die Viewport-Breite............................................ 146 5.4.6 Praxisbeispiel: Mehrspaltensatz.............................. 148 5.4.7 Silbentrennung und Textbeschnitt............................. 149 5.5 Zusammenfassung...................................................... 151 6 Semantik und Barrierefreiheit 153 6.1 Prinzipien der Zugänglichkeit ....................................... 153 6.1.1 Wahrnehmbarkeit.............................................. 154 6.1.2 Bedienbarkeit.............................................. 159 6.1.3 Verständlichkeit............................................. 159 6.1.4 Robustheit................................................... 161 6.2 Semantik durch HTML5................................................. 161 6.2.1 Neue HTML-Elemente .......................................... 162 6.2.2 HTML5-Formularattribute für mehr Semantik.................... 165 6.3 Semantik durch WAI-ARIA-Rollen .................................... 167 6.4 Zusammenfassung...................................................... 170 7 Responsive Layout-Patterns 171 7.1 Mobile First......................................................... 172 7.1.1 Reduktion auf das Wesentliche ist die Devise ................ 172 7.1.2 Mobile First - Progressive Enhancement für das Layout........ 173 7.1.3 Mobile First bedeutet auch Content First................... 174 7.2 Praxisbeispiel: Mobile First......................................... 174 7.2.1 Mobile First - los geht s!................................... 174 7.2.2 Mockups für das Layout der Beispiel-Website.................. 175 7.2.3 Basisversion: Smartphone-Ansicht............................. 176 7.2.4 Setzen des Viewport-Metatags................................. 184 7.3 Auswahl der Breakpoints ............................................. 185 7.3.1 Haupt-Breakpoints............................................ 186 7.3.2 Anpassungs-Breakpoints....................................... 187 7.3.3 Vertikale Breakpoints ....................................... 188 7.4 Praxisbeispiel: Ersten Breakpoint setzen (Tablets)................... 189 8 Inhalt 7.5 Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte.......................................... 193 7.5.1 Tiny Tweaks (kleine Optimierungen) ............................. 193 7.5.2 Mostly Fluid (großteils fließend)............................... 194 7.5.3 Column Drop (abgesenkte Spalten)................................ 195 7.5.4 Layout Shifter (Layoutverdreher)................................ 196 7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms)................... 197 7.5.6 Footer-Navigation und Off-Canvas-Marginalie..................... 197 7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie................... 198 7.5.8 Vertikale und horizontale Off-Canvas-Panels..................... 199 7.5.9 Zusammengefasste Off-Canvas-Elemente ........................... 200 7.5.10 Off-Canvas-Lösungen aus der Schublade........................... 201 7.6 Praxisbeispiel: Weitere Breakpoints setzen (große Screens).............. 202 7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter........... 202 7.6.2 Große Desktopversion............................................ 204 7.7 Flexbox-Layout...................................................... 206 7.7.1 Umsetzung des Praxisbeispiels als Flexbox-Layout................ 206 7.7.2 Praxisbeispiel: Flexbox-Layout Content Switch .................. 208 7.8 Grid-Layouts (CSS3)................................................... 211 7.8.1 Umsetzung des Praxisbeispiels als CSS-Grid-Layout............... 211 7.9 Zusammenfassung......................................................... 218 8 Frameworks für responsives Design 219 8.1 Eigene Vorlage oder fertige Frameworks verwenden?....................... 220 8.1.1 Gridpak zum Erstellen von Rastern mit Media Queries............. 220 8.1.2 FITML5-Boilerplate und Initializr .............................. 221 8.2 Wie wählen Sie das richtige Framework aus?.............................. 222 8.3 Eine kurze Vorstellung responsiver Frameworks .......................... 223 8.3.1 Foundation...................................................... 224 8.3.2 Bootstrap .................................................... 228 8.3.3 PureCSS......................................................... 232 8.3.4 Simple Grid..................................................... 235 8.4 JavaScript-Bibliotheken ................................................ 237 8.4.1 jQuery.......................................................... 237 8.4.2 Modernizr....................................................... 238 9 Inhalt 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.2.1 Freier Blick auf die Website .................................. 251 9.2.2 Ausreichend große Klickflächen für die Touchbedienung.......... 251 9.23 Umgang mit Menüs mit mehreren Ebenen........................... 251 9.2.4 Navigationstypen für mobile Geräte mit Touchscreen............. 252 9.3 Wenige Menüpunkte am oberen Rand....................................... 252 93.1 Praxisbeispiel: Mininavigation - wenige Menüpunkte am oberen Rand.................................................... 255 9.4 Lange Menüs kompakt anordnen........................................... 256 9.4.1 Praxisbeispiel: Priority-Menü.................................. 257 9.5 Select-Menü............................................................ 260 9.5.1 Praxisbeispiel: TinyNav-Select-Menü............................ 261 9.6 Navigation per Anker am Ende des Seiteninhalts......................... 265 9.6.1 Praxisbeispiel: Footer-Navigation mit Anker.................... 266 9.7 Toggle-Menü............................................................ 269 9.7.1 Praxisbeispiel: Toggle-Menü mit dem Plug-in Responsive-Nav... 269 9.8 Off-Can vas-Menü....................................................... 272 9.8.1 Praxisbeispiel: Off-Can vas-Menü mit Pushy..................... 273 9.8.2 Praxisbeispiel: Swipe-Menü mit Slideout.js..................... 275 9.9 Multilevel-Menüs....................................................... 280 9.9.1 Die native Einbindung von Multilevel-Menüs auf iOS und Android ............................................... 280 9.9.2 Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js........... 281 9.93 Praxisbeispiel: Multilevel-Menü mit Flexnav...................... 282 9.9.4 Noch mehr Multilevel-Menüs..................................... 285 9.10 Zusammenfassung........................................................ 285 10 Inhalt 10 Flexible Bildelemente 287 tv*; •: .. •....... ■ ... • • ■ ■’ .. .....’ . . • • ... 10.1 Anpassungsfähige Bilder.................................................... 287 10.1.1 Praxisbeispiel: Anpassungsfähiges Headerbild........................ 289 10.1.2 Bilder ausschnittweise anzeigen .................................... 290 10.13 Praxisbeispiel: Bildausschnitt auf schmalen Screens................. 291 10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen ....... 293 10.1.5 Praxisbeispiel: Flexible Teaserboxen mit Bild und Text.............. 293 10.2 Responsive Hintergrundbilder............................................... 296 10.2.1 Praxisbeispiel: Gekachelte Bitmap-Hintergrundmuster................. 297 10.2.2 Praxisbeispiel: Hintergrundmuster mit CSS3 erstellen ............... 298 10.2.3 Praxisbeispiel: Hintergrundmuster mit SVG .......................... 300 10.2.4 Großflächige Hintergrundbilder...................................... 302 10.2.5 Praxisbeispiel: Website mit vollflächigen Hintergrundbildern.... 305 10.2.6 Praxisbeispiel: Vollflächige Hintergrundbilder in Teaserboxen... 309 10.3 Responsive Icons........................................................... 312 10.3.1 Vorbereitung für alle Praxisbeispiele zu responsiven Icons: Erstellung der Icon-Sets............................................ 313 10.3.2 Praxisbeispiel: Icons als einzelne CSS-Hintergrundbilder............ 315 10.3.3 Praxisbeispiel: Icons als CSS-Hintergrundbilder aus einer Sprite-Datei........................................................ 319 10.3.4 Icon-Fonts.......................................................... 322 10.3.5 Praxisbeispiel: Responsive Icons als Icon-Font...................... 326 10.3.6 Praxisbeispiel: Icon-Font mit Ligaturen............................. 330 10.3.7 SVG-lcons (sind die beste Wahl) .................................... 332 10.3.8 Praxisbeispiel: Responsive Icons aus Inline-SVG-Sprite.............. 332 10.3.9 Praxisbeispiel: Icons aus extern eingebundener SVG-Datei ........... 337 10.3.10 Praxisbeispiel: Icons aus externer SVG-Datei über CSS einfärben. 339 10.4 Auflösungsunabhängige Grafiken (SVG) ...................................... 341 10.4.1 Das Scalable-Vector-Graphics-Format................................. 341 10.4.2 Praxisbeispiel: SVG-Infografik versus GIF-Infografik................ 341 10.4.3 Einbindung von SVG-Grafiken......................................... 342 10.4.4 Praxisbeispiel: Unterschiedliche SVG-Einbindungsarten............... 348 10.4.5 Die responsive SVG-Einbindung ...................................... 352 10.4.6 Praxisbeispiel: SVG-Filter ......................................... 353 10.5 Die Syntax für responsive Bilder........................................... 355 10.5.1 Syntax für responsive Hintergrundbilder............................. 356 10.5.2 Praxisbeispiel: Responsive Bilder mit »srcset« und »sizes« ......... 357 10.5.3 Praxisbeispiel: Responsive Art-Direction — das picture -Element.... 361 11 Inhalt 10.5.4 Browserunterstützung und Fallbacks für responsive Bilder ... 364 10.5.5 Fazit zur responsiven Syntax.................................. 365 10.5.6 Mit Client Hints zu echten responsiven Bildern ............. 365 10.6 Unterschiedliche Versionen für responsive Bilder erzeugen............. 367 10.6.1 Die Nulllösung: Hochauflösende und komprimierte Bilder...... 368 10.6.2 Automatisch Bilder und Code generieren mit dem Responsive Image Breakpoints Generator................................... 369 10.6.3 Bilder mit Automatisierungstools generieren (Grunt, Gulp) .. 372 10.6.4 Bildvarianten auf dem Server generieren....................... 372 10.6.5 Bilder von der Cloud ausliefern lassen...................... 373 10.7 Zusammenfassung....................................................... 377 11 Mehr flexible Inhalte 379 11.1 Responsive Slider nicht nur für Bilder..................................... 380 11.1.1 Praxisbeispiel: Bilder-Slider mit dem Slick-Plug-in................ 380 11.1.2 Praxisbeispiel: Bilderkarussell mit dem Slick-Plug-in ............. 382 11.1.3 Praxisbeispiel: Textblock-Slider mit dem Slick-Plug-in ............ 386 11.1.4 Weitere Bildergalerie-Tools........................................ 388 11.2 Responsive Lightboxen...................................................... 389 11.2.1 Praxisbeispiel: Responsive Lightbox mit Fancybox................... 390 11.3 Responsive Image Maps...................................................... 392 11.3.1 Praxisbeispiel: Flexible Image Map mit jQuery-rwdlmageMaps.js... 392 11.4 Anpassungsfähige Videos.................................................... 394 11.4.1 HTML5-Video Unterstützung und Formate.............................. 394 11.4.2 Praxisbeispiel: HTML5-Videos ...................................... 395 11.4.3 Praxisbeispiel: YouTube Co. - Videos im ¡frame................... 397 11.4.4 Praxisbeispiel: Videoseitenverhältnisse mit FitVids.js und FluidVids.js ...................................................... 400 11.4.5 Praxisbeispiel: HTML5-Videoplayer mit video.js .................... 40i 11.5 Flexible Karteneinbindungen (Maps) ........................................ 403 11.5.1 Praxisbeispiel: Google Map im iframe............................... 403 11.5.2 Praxisbeispiel: Flexible Google-Map-Einbindung mit Google API... 404 11.6 Flexible Tabellen.......................................................... 406 11.6.1 Praxisbeispiel: Datentabellen durch Scrollen zugänglich machen.. 407 11.6.2 Praxisbeispiele: Tabellen mit CSS(-generiertem Content) umstrukturieren.................................................... 4Qg 12 Inhalt 11.6.3 Praxisbeispiel: Anpassungsfähige Tabellen mit JavaScript-Plug-ins ......................................... 410 11.7 Akkordeons und Inhaltsboxen mit Reitern............................ 414 11.7.1 Praxisbeispiel: Tab-Reiter zu Akkordeon mit smartTabs.js.... 415 11.8 Flexible Formulare................................................... 418 11.8.1 Praxisbeispiel: Responsives Formular......................... 418 11.9 Inhalte selektiv anzeigen und laden ................................. 423 11.9.1 Inhalte entfernen oder ergänzen - wann und wie?............. 424 11.9.2 Inhalte per CSS ausblenden (display: none).................. 424 11.9.3 Praxisbeispiel: Inhalte per CSS-generiertem Content hinzufügen 425 11.9.4 Praxisbeispiel: Inhaltsblöcke mit AppendAround neu anordnen . 427 11.10 Flexible Werbung................................................... 430 11.10.1 Bewusstsein schaffen für die veränderten Rahmenbedingungen.. 430 11.10.2 Alte und neue Bannerkonzepte................................. 431 11.10.3 Bannererstellung und-auslieferung............................ 433 11.10.4 Fixe Spalte und nur ein Rectangle-Format.................... 434 11.10.5 Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads........ 435 11.10.6 ZURB-Playground: Responsive Ads ............................. 437 11.10.7 Google Responsive Ads ....................................... 437 11.11 Responsive HTML-E-Mails............................................. 438 11.11.1 HTML-E-Mail-Templates responsiveinsetzen..................... 439 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.2.1 Firefox......................................................... 445 12.2.2 Chrome.......................................................... 445 12.2.3 Safari ......................................................... 446 12.2.4 Breakpoint-Tester............................................... 446 12.2.5 Pattern Lab als Testplattform .................................. 448 12.2.6 Der Mobile Emulator für Opera................................... 448 12.2.7 Testen und Präsentieren......................................... 448 12.3 Auf mobilen Geräten testen............................................. 450 12.3.1 Open Device Labs weltweit ...................................... 450 12.3.2 Das Home-Device-Lab ............................................ 451 13 12.3.3 Testen in der Cloud.................................... 455 12.3.4 Real-Life-Testen mit »unkooperativen« Inhalten ........ 459 12.4 Qualitätssicherung und Wartung................................. 461 12.4.1 Dokumentationen erstellen und pflegen ................. 461 12.4.2 Modularisierung und Benennungsschemata ................ 462 12.4.3 Stylesheets knapp schreiben und schlank halten......... 464 12.4.4 Unbenutzte CSS-Deklaration und Klassen finden ......... 467 12.4.5 Tools für die Automatisierung von Prozessen............. 468 12.5 Zusammenfassung............................................. 469 13 Performanceoptimierung 471 13.1 Das Performancebudget.................................................. 472 13.2 Was beeinträchtigt die Performance?.................................... 473 13.2.1 Anatomie einer Website......................................... 474 13.3 Skripte, Stylesheets und HTML.......................................... 476 13.3.1 Aus den Augen, aus dem Sinn? .................................. 477 13.3.2 Skripte zusammenfassen......................................... 479 13.3.3 Drittanbieterskripte und Social-Media-Buttons.................. 481 13.3.4 CSS-Sprites und Data-URIs sparen Requests...................... 485 13.3.5 Stylesheets und in ihnen verlinkte Ressourcen werden unterschiedlich geladen ....................................... 486 13.3.6 Minifying und Dateikompression................................. 487 13.3.7 Die Zukunft: HTTP/2 versus HTTP/1.1............................ 488 13.4 Caching................................................................ 489 13.5 Performanceoptfmierungfür Grafiken und Bilder ..................... 490 13.5.1 Optimierung von Bitmap-Bildern................................. 490 13.5.2 SVG-Optimierung ............................................. 491 13.6 Web-Schriften optimieren............................................. 492 13.6.1 Buchstabenauswahl verkleinern ................................. 492 13.6.2 Fonts direkt einbetten......................................... 494 13.7 Gefühlte Performance und Nachladen von Inhalten..................... 495 13.7.1 Stylesheets an den Anfang, JavaScript-Dateien an das Ende der Webseite........................................ 495 13.7.2 Missionskritisches CSS (alias »above the fold«) ............... 496 13.7.3 Praxisbeispiel: Lazy Loading von Bildern mit Lazy Sizes ....... 498 Inhalt 13.7.4 Praxisbeispiel: Lazy Sizes zum Nachladen von Inhalten in Tab-Content........................................ 499 13.7.5 Praxisbeispiel: Conditional Loading Content via JavaScript (und CSS) 500 13.7.6 Farbflächen-»Vorschau« für Bilder ............................. 505 13.8 Zusammenfassung........................................................ 507 14 Fazit 509 Anhang....................................................................... 511 Index........................................................................ 513 15 Auf einen Bück Auf einen Blick 1 Denken in flexiblen Strukturen ................................... 21 2 Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ........ 39 3 Die Schlüsseltechnologie Media Queries ........................... 53 4 Ein responsiver Workflow.......................................... 87 5 Design und Typografie ........................................... 111 6 Semantik und Barrierefreiheit ................................. 153 7 Responsive Layout-Patterns....................................... 171 8 Frameworks für responsives Design ............................... 219 9 Navigationskonzepte ............................................. 249 10 Flexible Bildelemente............................................ 287 11 Mehr flexible Inhalte............................................ 379 12 Testing und Qualitätssicherung .................................. 443 13 Performanceoptimierung........................................... 471 14 Fazit............................................................ 509 Inhalt Inhalt 1 Denken in flexiblen Strukturen 21 1.1 Responsive Webdesign: Was bedeutet das eigentlich?..................... 21 1.1.1 Veränderte Anforderungen an die Darstellung von Websites ...... 22 1.1.2 Anpassungsfähige Websites versus Mobilversionen von Websites ... 25 1.1.3 Beispiele für anpassungsfähige Websites......................... 26 1.2 Layouttypen, feste, fluide und flexible................................ 29 1.2.1 Das feste Layout................................................ 29 1.2.2 Das fluide und das elastische Layout............................ 29 1.2.3 Das adaptive Layout........................................... 30 1.2.4 Das responsive Layout........................................... 30 1.3 Flexible Raster-Gridsysteme............................................ 31 1.3.1 Anwendungsbeispiel: Fixes Raster in flexibles umrechnen ........ 32 1.4 Layoutumbrüche-Breakpoints............................................. 36 1.4.1 Adaptives oder responsives Layout............................... 37 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.3.1 Exkurs: Flexible Bilder......................................... 47 2.4 Der dritte Schritt: Layouts mit Media Queries umschalten .............. 49 2.4.1 Exkurs: Media Queries........................................... 49 2.5 Zusammenfassung........................................................ 51 3 Die Schlüsseltechnologie Media Queries 53 3.1 Cascading Stylesheets (ein kurzer Rückblick)........................... 54 3.1.1 Zuweisung von CSS-Eigenschaften................................. 54 5 ■ 55 55 56 57 58 60 60 62 63 64 64 65 68 70 72 72 73 74 75 76 76 78 79 80 82 83 83 84 84 85 86 87 87 91 91 Medientyp (Media Type)....................................... 3.2.1 Medienabfrage für den Medientyp setzen............... 3.2.2 Medientypen in der Übersicht......................... Medieneigenschaften (Media Features)......................... 3.3.1 Medieneigenschaften in der Übersicht................. Media Queries schreiben ..................................... 3.4.1 Komponenten eines Media Querys ...................... 3.4.2 Media Queries zuweisen .............................. Viewports und Pixel.......................................... 3.5.1 Der visuelle Viewport ............................... 3.5.2 Der Layout-Viewport auf mobilen Geräten ............. 3.5.3 Gerätepixel und CSS-Pixel: Der »virtuelle« visuelle Viewport 3.5.4 Das Viewport-Metatag und seine Eigenschaften ........ 3.5.5 Die @viewport-Anweisung in CSS....................... Media Queries in der Praxis.................................. 3.6.1 Medieneigenschaft »width« ........................... 3.6.2 Media Queries in em.................................. 3.6.3 Medieneigenschaft »height« - vertikale Media Queries. 3.6.4 Medieneigenschaft »orientation«...................... 3.6.5 Medieneigenschaft »aspect-ratio« .................... 3.6.6 Medieneigenschaften »resolution« und »device-pixel-ratio« 3.6.7 Medieneigenschaften »pointer« und »hover«............ 3.6.8 Browserunterstützung und Fallbacklösungen ........... Media-Query-Unterstützung mit JavaScript .................... 3.7.1 Element Queries und Container Queries ............... 3.7.2 Restive JS (rScript) für Geräteerkennungen .......... Serverseitige Geräte- und Feature-Erkennung ................. 3.8.1 WURFL Co............................................. 3.8.2 RESS - das Beste von Client und Server kombiniert.... 3.8.3 Client Hints ........................................ Zusammenfassung.............................................. Ein responsiver Workflow Der alte Prozess............... Phase 1: Moodboards und Inhaltsplan 4.2.1 Moodboards.............. Inhalt 4.2.2 Inhalte strukturieren und hierarchisieren .................. 92 4.2.3 Content-Prototypen ......................................... 93 4.3 Phase 2: Style Tiles und Wireframes ............................... 94 4.3.1 Style Tiles................................................. 94 4.3.2 AAockups.................................................... 97 4.4 Phase 3: Design im Browser........................................ 101 4.4.1 Frameworks und Website-Editoren als Design-Tools........... 102 4.4.2 Komponenten, Patterns und Atomic Design.................... 102 4.5 Phase 4: Rinse and Repeat ........................................ 103 4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein...... 103 4.6 Das responsive Team............................................... 105 4.7 Dokumentation responsiver Designs................................. 106 4.7.1 Dokumentation mit Living Styleguides....................... 107 4.8 Zusammenfassung................................................... 109 5 Design und Typografie in 5.1 Design follows Content................................................ 111 5.1.1 You cannot not communicate - kein Design ist auch ein Design . 112 5.2 Design von innen nach außen - der Atomic-Design-Ansatz................ 114 5.2.1 Atomic Design anwenden mit Pattern Lab........................ 115 5.3 Designanforderungen für responsive Sites.............................. 121 5.3.1 Does size matter-was machen Nutzer mit ihren Geräten?... 122 5.3.2 Geräteübergreifendes Surfen .................................. 124 5.3.3 Size matters: Ziele für Touchevents .......................... 125 5.3.4 Es gibt kein Hover auf Hawaii, und ein Klick ist kein Touch .. 126 5.3.5 Inaktives »:active« auf ¡OS................................... 128 5.3.6 Handpositionen................................................ 129 5.3.7 Layoutwechsel bei Änderung der Orientierung................... 130 5.3.8 Schreiben ist mühsam: Formulare auf Smartphones............... 132 5.3.9 Mobile Inspiration und Best Pratice .......................... 133 5.4 Typografie (anpassungsfähiger Text)................................... 134 5.4.1 Die Auswahl der Schriftart ................................... 134 5.4.2 Angaben für die Schriftgröße ................................. 137 5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen Bildschirmen.................................................. 142 5.4.4 Zeilenlänge und Durchschuss................................... 144 7 Inhalt 5.4.5 Praxisbeispiel: Relative Schriftgrößen bezogen auf die Viewport-Breite ........................................... 146 5.4.6 Praxisbeispiel: Mehrspaltensatz.............................. 148 5.4.7 Silbentrennung und Textbeschnitt............................. 149 5.5 Zusammenfassung...................................................... 151 6 Semantik und Barrierefreiheit 153 6.1 Prinzipien der Zugänglichkeit ....................................... 153 6.1.1 Wahrnehmbarkeit.............................................. 154 6.1.2 Bedienbarkeit............................................ 159 6.1.3 Verständlichkeit ............................................ 159 6.1.4 Robustheit .................................................. 161 6.2 Semantik durch HTML5 ................................................ 161 6.2.1 Neue HTML-Elemente .......................................... 162 6.2.2 HTML5~Formularattribute für mehr Semantik.................... 165 6.3 Semantik durch WAI-ARIA-Rollen ...................................... 167 6.4 Zusammenfassung.................................................... 170 7 Responsive Layout-Patterns 171 7.1 Mobile First....................................................... 172 7.1.1 Reduktion auf das Wesentliche ist die Devise ................ 172 7.1.2 Mobile First - Progressive Enhancement für das Layout........ 173 7.1.3 Mobile First bedeutet auch Content First..................... 174 7.2 Praxisbeispiel: Mobile First......................................... 174 7.2.1 Mobile First - los geht s!................................... 174 7.2.2 Mockups für das Layout der Beispiel-Website ................. 175 7.2.3 Basisversion: Smartphone-Ansicht............................. 176 7.2.4 Setzen des Viewport-Metatags................................. 184 7.3 Auswahl der Breakpoints ............................................. 185 7.3.1 Haupt-Breakpoints ........................................... 186 7.3.2 Anpassungs-Breakpoints....................................... 187 7.3.3 Vertikale Breakpoints ....................................... 188 7.4 Praxisbeispiel: Ersten Breakpoint setzen (Tablets)................... 189 8 Inhalt 7.5 Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ........................................ 193 7.5.1 Tiny Tweaks (kleine Optimierungen) ............................ 193 7.5.2 Mostly Fluid (großteils fließend).............................. 194 7.5.3 Column Drop (abgesenkte Spalten)............................... 195 7.5.4 Layout Shifter (Layoutverdreher)............................... 196 7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms).................. 197 7.5.6 Footer-Navigation und Off-Canvas-Marginalie.................... 197 7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie.................. 198 7.5.8 Vertikale und horizontale Off-Canvas-Pane!s.................... 199 7.5.9 Zusammengefasste Off-Canvas-Elemente .......................... 200 7.5.10 Off-Canvas-Lösungen aus der Schublade.......................... 201 7.6 Praxisbeispiel: Weitere Breakpoints setzen (große Screens)............. 202 7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter.......... 202 7.6.2 Große Desktopversion........................................... 204 7.7 Flexbox-Layout..................................................... 206 7.7.1 Umsetzung des Praxisbeispiels als Flexbox-Layout............... 206 7.7.2 Praxisbeispiel: Flexbox-Layout Content Switch ................. 208 7.8 Grid-Layouts (CSS3).................................................... 211 7.8.1 Umsetzung des Praxisbeispiels als CSS-Grid-Layout ............. 211 7.9 Zusammenfassung........................................................ 218 8 Frameworks für responsives Design 219 8.1 Eigene Vorlage oder fertige Frameworks verwenden?...................... 220 8.1.1 Gridpak zum Erstellen von Rastern mit Media Queries............ 220 8.1.2 HTML5-Boilerplate und Initializr .............................. 221 8.2 Wie wählen Sie das richtige Framework aus?............................. 222 8.3 Eine kurze Vorstellung responsiver Frameworks ......................... 223 8.3.1 Foundation .................................................... 224 8.3.2 Bootstrap ..................................................... 228 8.3.3 PureCSS........................................................ 232 8.3.4 Simple Grid.................................................... 235 8.4 JavaScript-Bibliotheken ............................................... 237 8.4.1 jQuery......................................................... 237 8.4.2 Modernizr...................................................... 238 9 Inhalt 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.2.1 Freier Blick auf die Website ............................... 251 9.2.2 Ausreichend große Klickflächen für die Touchbedienung....... 251 9.2.3 Umgang mit Menüs mit mehreren Ebenen........................ 251 9.2.4 Navigationstypen für mobile Geräte mit Touchscreen.......... 252 9.3 Wenige Menüpunkte am oberen Rand.................................... 252 9.3.1 Praxisbeispiel: Mininavigation - wenige Menüpunkte am oberen Rand................................................. 253 9.4 Lange Menüs kompakt anordnen........................................ 256 9.4.1 Praxisbeispiel: Priority-Menü............................... 257 9.5 Select-Menü......................................................... 260 9.5.1 Praxisbeispiel: TinyNav-Select-Menü......................... 261 9.6 Navigation per Anker am Ende des Seiteninhalts...................... 265 9.6.1 Praxisbeispiel: Footer-Navigation mit Anker................. 266 9.7 Toggle-Menü......................................................... 269 9.7.1 Praxisbeispiel: Toggle-Menü mit dem Plug-in Responsive-Nav. 269 9.8 Off-Canvas-Menü..................................................... 272 9.8.1 Praxisbeispiel: Off-Canvas-Menü mit Pushy................... 273 9.8.2 Praxisbeispiel: Swipe-Menü mit Slideout.js.................. 275 9.9 Multilevel-Menüs.................................................... 280 9.9.1 Die native Einbindung von Multilevel-Menüs auf iOS und Android ............................................ 280 9.9.2 Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js........ 281 9.9.3 Praxisbeispiel: Muitiievel-Menü mit Flexnav................. 282 9.9.4 Noch mehr Multilevel-Menüs.................................. 285 9.10 Zusammenfassung..................................................... 285 10 Inhalt 10 Flexible Bildelemente 287 .............. 10.1 Anpassungsfähige Bilder....................................................... 287 10.1.1 Praxisbeispiel: Anpassungsfähiges Headerbild......................... 289 10.1.2 Bilder ausschnittweise anzeigen ..................................... 290 10.1.3 Praxisbeispiel: Bildausschnitt auf schmalen Screens.................. 291 10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen ........ 293 10.1.5 Praxisbeispiei: Flexible Teaserboxen mit Bild und Text............... 293 10.2 Responsive Hintergrundbilder.................................................. 296 10.2.1 Praxisbeispiel: Gekachelte Bitmap-Hintergrundmuster.................. 297 10.2.2 Praxisbeispiel: Hintergrundmuster mit CSS3 erstellen ................ 298 10.2.3 Praxisbeispiel: Hintergrundmuster mit SVG ........................... 300 10.2.4 Großflächige Hintergrundbilder....................................... 302 10.2.5 Praxisbeispiel: Website mit vollflächigen Hintergrundbildern.... 305 10.2.6 Praxisbeispiel: Vollflächige Hintergrundbilder in Teaserboxen... 309 10.3 Responsive Icons.............................................................. 312 10.3.1 Vorbereitung für alle Praxisbeispiele zu responsiven Icons: Erstellung der Icon-Sets ............................................ 313 10.3.2 Praxisbeispiel: Icons als einzelne CSS-Hintergrundbilder............. 315 10.3.3 Praxisbeispiel: Icons als CSS-Hintergrundbilder aus einer Sprite-Datei......................................................... 319 10.3.4 Icon-Fonts........................................................... 322 10.3.5 Praxisbeispiel: Responsive Icons als Icon-Font....................... 326 10.3.6 Praxisbeispiel: Icon-Font mit Ligaturen.............................. 330 10.3.7 SVG-Icons (sind die beste Wahl) ..................................... 332 10.3.8 Praxisbeispiel: Responsive Icons aus Inline-SVG-Sprite............... 332 10.3.9 Praxisbeispiel: Icons aus extern eingebundener SVG-Datei ............ 337 10.3.10 Praxisbeispiel: Icons aus externer SVG-Datei über CSS einfärben. 339 10.4 Auflösungsunabhängige Grafiken (SVG) ......................................... 341 10.4.1 Das Scalable-Vector-Graphics-Format.................................. 341 10.4.2 Praxisbeispiel: SVG-Infografik versus GIF-Infografik................. 341 10.4.3 Einbindung von SVG-Grafiken.......................................... 342 10.4.4 Praxisbeispiel: Unterschiedliche SVG-Einbindungsarten................ 348 10.4.5 Die responsive SVG-Einbindung ....................................... 352 10.4.6 Praxisbeispiel: SVG-Filter .......................................... 353 10.5 Die Syntax für responsive Bilder.............................................. 355 10.5.1 Syntax für responsive Hintergrundbilder.............................. 356 10.5.2 Praxisbeispiel: Responsive Bilder mit »srcset« und »sizes« .......... 357 10.5.3 Praxisbeispiel: Responsive Art-Direction - das picture -Element .... 361 11 Inhalt 10.5.4 Browserunterstützung und Fallbacks für responsive Bilder ... 364 10.5.5 Fazit zur responsiven Syntax.................................. 365 10.5.6 Mit Client Hints zu echten responsiven Bildern ............. 365 10.6 Unterschiedliche Versionen für responsive Bilder erzeugen............. 367 10.6.1 Die Nulllösung: Hochauflösende und komprimierte Bilder...... 368 10.6.2 Automatisch Bilder und Code generieren mit dem Responsive Image Breakpoints Generator................................... 369 10.6.3 Bilder mit Automatisierungstools generieren (Grunt, Gulp) .. 372 10.6.4 Bildvarianten auf dem Server generieren....................... 372 10.6.5 Bilder von der Cloud ausliefern lassen...................... 373 10.7 Zusammenfassung....................................................... 377 11 Mehr flexible Inhalte 379 11.1 Responsive Slider nicht nur für Bilder..................................... 380 11.1.1 Praxisbeispiel: Bilder-Slider mit dem Slick-Plug-in................ 380 11.1.2 Praxisbeispiel: Bilderkarussell mit dem Slick-Plug-in ............. 382 11.1.3 Praxisbeispiel: Textblock-Slider mit dem Slick-Plug-in ............ 386 11.1.4 Weitere Bildergalerie-Tools........................................ 388 11.2 Responsive Lightboxen...................................................... 389 11.2.1 Praxisbeispiel: Responsive Lightbox mit Fancybox................... 390 11.3 Responsive Image Maps...................................................... 392 11.3.1 Praxisbeispiel: Flexible Image Map mit jQuery-rwdlmageMaps.js... 392 11.4 Anpassungsfähige Videos.................................................... 394 11.4.1 HTML5-Video Unterstützung und Formate.............................. 394 11.4.2 Praxisbeispiel: HTML5-Videos ...................................... 395 11.4.3 Praxisbeispiel: YouTube Co. - Videos im ¡frame................... 397 11.4.4 Praxisbeispiel: Videoseitenverhältnisse mit FitVids.js und FluidVids.js ...................................................... 400 11.4.5 Praxisbeispiel: HTML5-Videoplayer mit video.js .................... 401 11.5 Flexible Karteneinbindungen (Maps) ........................................ 403 11.5.1 Praxisbeispiel: Google Map im iframe............................... 403 11.5.2 Praxisbeispiel: Flexible Google-Map-Einbindung mit Google API... 404 11.6 Flexible Tabellen.......................................................... 406 11.6.1 Praxisbeispiel: Datentabellen durch Scrollen zugänglich machen.. 407 11.6.2 Praxisbeispiele: Tabellen mit CSS(-generiertem Content) umstrukturieren ................................................... 408 12 Inhalt 11.6.3 Praxisbeispiel: Anpassungsfähige Tabellen mit JavaScript-Plug-ins ............................................ 410 11.7 Akkordeons und Inhaltsboxen mit Reitern ................................ 414 11.7.1 Praxisbeispiel: Tab-Reiter zu Akkordeon mit smartTabs.js........ 415 11.8 Flexible Formulare...................................................... 418 11.8.1 Praxisbeispiel: Responsives Formular............................ 418 11.9 Inhalte selektiv anzeigen und laden .................................. 423 11.9.1 Inhalte entfernen oder ergänzen - wann und wie?................. 424 11.9.2 Inhalte per CSS ausblenden (display: none)...................... 424 11.9.3 Praxisbeispiel: Inhalte per CSS-generiertem Content hinzufügen . 425 11.9.4 Praxisbeispiel: Inhaltsblöcke mit AppendAround neu anordnen .... 427 11.10 Flexible Werbung....................................................... 430 11.10.1 Bewusstsein schaffen für die veränderten Rahmenbedingungen.. 430 11.10.2 Alte und neue Bannerkonzepte................................... 431 11.10.3 Bannererstellung und-auslieferung ............................. 433 11.10.4 Fixe Spalte und nur ein Rectangle-Format....................... 434 11.10.5 Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads.......... 435 11.10.6 ZURB-Playground: Responsive Ads ............................... 437 11.10.7 Google Responsive Ads ......................................... 437 11.11 Responsive HTML-E-Mails ............................................... 438 11.11.1 HTML-E-Mail-Templates responsiv einsetzen...................... 439 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.2.1 Firefox ..................................................... 445 12.2.2 Chrome......................................................... 445 12.2.3 Safari ........................................................ 446 12.2.4 Breakpoint-Tester.............................................. 446 12.2.5 Pattern Lab als Testplattform ................................. 448 12.2.6 Der Mobile Emulator für Opera.................................. 448 12.2.7 Testen und Präsentieren........................................ 448 12.3 Auf mobilen Geräten testen.............................................. 450 12.3.1 Open Device Labs weltweit ...................................... 450 12.3.2 Das Home-Device-Lab ............................................ 451 13 455 459 461 461 462 464 467 468 469 471 472 473 474 476 477 479 481 485 486 487 488 489 490 490 491 492 492 494 495 495 496 498 12.3.3 Testen in der Cioud......................... 12.3.4 Real-Life-Testen mit »unkooperativen« Inhalten Qualitätssicherung und Wartung...................... 12.4.1 Dokumentationen erstellen und pflegen ...... 12.4.2 Modularisierung und Benennungsschemata ...... 12.4.3 Stylesheets knapp schreiben und schlank halten 12.4.4 Unbenutzte CSS-Deklaration und Klassen finden 12.4.5 Tools für die Automatisierung von Prozessen. Zusammenfassung..................................... Performanceoptimierung Das Performancebudget.................................... Was beeinträchtigt die Performance?...................... 13.2.1 Anatomie einer Website........................... Skripte, Stylesheets und HTML ........................... 13.3.1 Aus den Augen, aus dem Sinn? .................... 13.3.2 Skripte zusammenfassen........................... 13.3.3 Drittanbieterskripte und Sociai-Media-Buttons.... 13.3.4 CSS-Sprites und Data-URIs sparen Requests........ 13.3.5 Stylesheets und in ihnen verlinkte Ressourcen werden unterschiedlich geladen ......................... 13.3.6 Minifying und Dateikompression................... 13.3.7 Die Zukunft: HTTP/2 versus HTTP/1.1 ............. Caching.................................................. Performanceoptimierung für Grafiken und Bilder .......... 13.5.1 Optimierung von Bitmap-Bildern................... 13.5.2 SVG-Optimierung ................................. Web-Schriften optimieren ................................ 13.6.1 Buchstabenauswahl verkleinern ................... 13.6.2 Fonts direkt einbetten........................... Gefühlte Performance und Nachladen von Inhalten.......... 13.7.1 Stylesheets an den Anfang, JavaScript-Dateien an das Ende der Webseite............................. 13.7.2 Missionskritisches CSS (alias »above the fold«) . 13.7.3 Praxisbeispiel: Lazy Loading von Bildern mit Lazy Sizes Inhalt 13.7.4 Praxisbeispiel: Lazy Sizes zum Nachladen von Inhalten in Tab-Content........................................ 499 13.7.5 Praxisbeispiel: Conditional Loading Content via JavaScript (und CSS) 500 13.7.6 Farbflächen-»Vorschau« für Bilder ............................. 505 13.8 Zusammenfassung........................................................ 507 14 Fazit 509 Anhang....................................................................... 511 Index........................................................................ 513 15
any_adam_object	1
author	Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh
author_GND	(DE-588)1047416069 (DE-588)1023809540
author_facet	Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh
author_role	aut aut
author_sort	Ertel, Andrea ca. 20. Jh
author_variant	a e ae k l kl
building	Verbundindex
bvnumber	BV044297325
classification_rvk	ST 252
classification_tum	DAT 675f
ctrlnum	(OCoLC)971202040 (DE-599)DNB1124015418
discipline	Informatik
edition	3., aktualisierte und erweiterte Auflage
format	Book
fullrecord	<?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>02739nam a2200541 c 4500</leader><controlfield tag="001">BV044297325</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20230123 </controlfield><controlfield tag="007">t\|</controlfield><controlfield tag="008">170504s2017 xx a\|\|\| \|\|\|\| 00\|\|\| ger d</controlfield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1124015418</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836245784</subfield><subfield code="c">Festeinband : EUR 39.90 (DE), EUR 41.10 (AT), CHF 49.90 (freier Preis)</subfield><subfield code="9">978-3-8362-4578-4</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836245787</subfield><subfield code="9">3-8362-4578-7</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)971202040</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1124015418</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rda</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-91G</subfield><subfield code="a">DE-473</subfield><subfield code="a">DE-1049</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-19</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-522</subfield><subfield code="a">DE-862</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-12</subfield><subfield code="a">DE-634</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-11</subfield><subfield code="a">DE-898</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-703</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-20</subfield><subfield code="a">DE-739</subfield><subfield code="a">DE-B768</subfield><subfield code="a">DE-B170</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-1046</subfield><subfield code="a">DE-706</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">DAT 675f</subfield><subfield code="2">stub</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Ertel, Andrea</subfield><subfield code="d">ca. 20. Jh.</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1047416069</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="b">Konzepte, Techniken, Praxisbeispiele</subfield><subfield code="c">Andrea Ertel, Kai Laborenz</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">3., aktualisierte und erweiterte Auflage</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk Computing</subfield><subfield code="c">2017</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">524 Seiten</subfield><subfield code="b">Diagramme, Illustrationen</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Rheinwerk Computing</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung"</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Barrierefreiheit</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Codesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Frameworks</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">HTML5</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Mobile Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Responsive Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Typografie</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webdesign</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webentwicklung</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="700" ind1="1" ind2=" "><subfield code="a">Laborenz, Kai</subfield><subfield code="d">ca. 20. Jh.</subfield><subfield code="0">(DE-588)1023809540</subfield><subfield code="4">aut</subfield></datafield><datafield tag="710" ind1="2" ind2=" "><subfield code="a">Galileo Press</subfield><subfield code="4">pbl</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-029701294</subfield></datafield></record></collection>
id	DE-604.BV044297325
illustrated	Illustrated
indexdate	2024-12-20T17:59:11Z
institution	BVB
isbn	9783836245784 3836245787
language	German
oai_aleph_id	oai:aleph.bib-bvb.de:BVB01-029701294
oclc_num	971202040
open_access_boolean
owner	DE-91G DE-BY-TUM DE-473 DE-BY-UBG DE-1049 DE-1051 DE-523 DE-1102 DE-19 DE-BY-UBM DE-M347 DE-859 DE-522 DE-862 DE-BY-FWS DE-29T DE-12 DE-634 DE-83 DE-11 DE-898 DE-BY-UBR DE-573 DE-703 DE-863 DE-BY-FWS DE-20 DE-739 DE-B768 DE-B170 DE-355 DE-BY-UBR DE-858 DE-1046 DE-706
owner_facet	DE-91G DE-BY-TUM DE-473 DE-BY-UBG DE-1049 DE-1051 DE-523 DE-1102 DE-19 DE-BY-UBM DE-M347 DE-859 DE-522 DE-862 DE-BY-FWS DE-29T DE-12 DE-634 DE-83 DE-11 DE-898 DE-BY-UBR DE-573 DE-703 DE-863 DE-BY-FWS DE-20 DE-739 DE-B768 DE-B170 DE-355 DE-BY-UBR DE-858 DE-1046 DE-706
physical	524 Seiten Diagramme, Illustrationen
publishDate	2017
publishDateSearch	2017
publishDateSort	2017
publisher	Rheinwerk Computing
record_format	marc
series2	Rheinwerk Computing
spellingShingle	Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Responsive Webdesign (DE-588)1035443651 gnd
subject_GND	(DE-588)1035443651
title	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele
title_auth	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele
title_exact_search	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele
title_full	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz
title_fullStr	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz
title_full_unstemmed	Responsive Webdesign Konzepte, Techniken, Praxisbeispiele Andrea Ertel, Kai Laborenz
title_short	Responsive Webdesign
title_sort	responsive webdesign konzepte techniken praxisbeispiele
title_sub	Konzepte, Techniken, Praxisbeispiele
topic	Responsive Webdesign (DE-588)1035443651 gnd
topic_facet	Responsive Webdesign
url	http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=029701294&sequence=000003&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA
work_keys_str_mv	AT ertelandrea responsivewebdesignkonzeptetechnikenpraxisbeispiele AT laborenzkai responsivewebdesignkonzeptetechnikenpraxisbeispiele AT galileopress responsivewebdesignkonzeptetechnikenpraxisbeispiele

Verfügbarkeit

Bestellmöglichkeit prüfen

Inhaltsverzeichnis

UB Allgemeiner Lesesaal

Signatur notieren und vor Ort nutzen oder für zwei Wochen ausleihen

Bestandsangaben von UB Allgemeiner Lesesaal
Signatur:	14 ST 252 E73(3)
Exemplar 1	entleihbar Vorhanden

An OTH ausleihen
Ausleihen an der OTH sind mit eigenem Ausweis möglich.