Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.]
Gespeichert in:
| Hauptverfasser: | , |
|---|---|
| Format: | Buch |
| Sprache: | German |
| Veröffentlicht: |
Bonn
Galileo Press ; [i.e. Rheinwerk-Verl.]
2015
|
| Ausgabe: | 2., aktualisierte Aufl. |
| Schriftenreihe: | Galileo Computing
|
| Schlagworte: | |
| Online-Zugang: | Inhaltstext Ausführliche Beschreibung Inhaltsverzeichnis |
| Tags: |
Tag hinzufügen
Keine Tags, Fügen Sie den ersten Tag hinzu!
|
MARC
| LEADER | 00000nam a22000008c 4500 | ||
|---|---|---|---|
| 001 | BV042265306 | ||
| 003 | DE-604 | ||
| 005 | 20150826 | ||
| 007 | t| | ||
| 008 | 150112s2015 gw a||| |||| 00||| ger d | ||
| 015 | |a 14,N33 |2 dnb | ||
| 016 | 7 | |a 1054672083 |2 DE-101 | |
| 020 | |a 3836232006 |9 3-8362-3200-6 | ||
| 020 | |a 9783836232005 |c Gb. : EUR 39.90 (DE), EUR 41.10 (AT), sfr 49.90 (freier Pr.) |9 978-3-8362-3200-5 | ||
| 024 | 3 | |a 9783836232005 | |
| 035 | |a (OCoLC)887891113 | ||
| 035 | |a (DE-599)DNB1054672083 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-92 |a DE-1047 |a DE-863 |a DE-523 |a DE-M347 |a DE-1050 |a DE-706 |a DE-70 |a DE-859 |a DE-29T |a DE-573 |a DE-1043 |a DE-1102 |a DE-355 |a DE-91G |a DE-83 |a DE-M100 |a DE-1046 |a DE-858 |a DE-20 |a DE-521 |a DE-1049 | ||
| 082 | 0 | |a 006.7 |2 22/ger | |
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a 004 |2 sdnb | ||
| 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 anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] |c Andrea Ertel ; Kai Laborenz |
| 250 | |a 2., aktualisierte Aufl. | ||
| 264 | 1 | |a Bonn |b Galileo Press ; [i.e. Rheinwerk-Verl.] |c 2015 | |
| 300 | |a 489 S. |b zahlr. Ill. |c 240 mm x 168 mm | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Galileo Computing | |
| 650 | 0 | 7 | |a Responsive Webdesign |0 (DE-588)1035443651 |2 gnd |9 rswk-swf |
| 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. |e Verfasser |0 (DE-588)1023809540 |4 aut | |
| 776 | 0 | 8 | |i Erscheint auch als |n Online-Ausgabe |z 978-3-8362-3201-2 |
| 856 | 4 | 2 | |m X:MVB |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=4739864&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |q text/html |u https://www.rheinwerk-verlag.de/responsive-webdesign_3725/ |3 Ausführliche Beschreibung |
| 856 | 4 | 2 | |m DNB Datenaustausch |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027702975&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-027702975 | |
Datensatz im Suchindex
| DE-BY-TUM_call_number | 0104 DAT 675f 2014 A 2888(2) 0303 DAT 675f 2014 L 802(2) |
|---|---|
| DE-BY-TUM_katkey | 2112895 |
| DE-BY-TUM_location | 01 03 |
| DE-BY-TUM_media_number | 040008062359 040008062304 040008062315 040008062348 040008062326 040008062337 |
| _version_ | 1820807891108495360 |
| adam_text | AUF EINEN
BLICK
1 DENKEN IN FLEXIBLEN STRUKTUREN 21
2 UMSETZUNG EINES FIXEN DESIGNS IN EIN FLEXIBLES LAYOUT 41
3 DIE SCHLUESSELTECHNOLOGIE MEDIA QUERIES 57
4 EIN RESPONSIVER WORKFLOW 89
5 DESIGN UND TYPOGRAFIE 115
6 SEMANTIK UND BARRIEREFREIHEIT 151
7 RESPONSIVE LAYOUT-PATTERNS 169
8 FRAMEWORKS FUER RESPONSIVES DESIGN 217
9 NAVIGATIONSKONZEPTE 247
10 FLEXIBLE BILDELEMENTE 283
11 MEHR FLEXIBLE INHALTE 355
12 QUALITAETSSICHERUNG UND OPTIMIERUNG 431
13 FAZIT 471
HTTP://D-NB.INFO/1054672083
INHALT
GELEITWORT DES FACHGUTACHTERS ZUR ERSTEN AUFLAGE 15
VORWORT 17
1 DENKEN
IN FLEXIBLEN STRUKTUREN 21
1.1 RESPONSIVE WEBDESIGN: WAS BEDEUTET DAS EIGENTLICH? 21
1.1.1 VERAENDERTE ANFORDERUNGEN AN DIE DARSTELLUNG VON WEBSITES 22
1.1.2 ANPASSUNGSFAEHIGE WEBSITES VERSUS MOBILVERSIONEN VON WEBSITES ...
25
1.1.3 BEISPIELE FUER ANPASSUNGSFAEHIGE 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 30
1.2.3 DAS ADAPTIVE LAYOUT 30
1.2.4 DAS RESPONSIVE LAYOUT 31
1.3 VOM FIXEN ZUM FLEXIBLEN RASTER (GRID) 32
1.4 ADAPTIVES LAYOUT: FESTES LAYOUT MIT UMBRUECHEN 36
1.4.1 GEGENUEBERSTELLUNG: ADAPTIVES VERSUS FIXES LAYOUT 38
1.5 RESPONSIVES LAYOUT:
FLUIDES LAYOUT MIT UMBRUECHEN 38
1.5.1 GEGENUEBERSTELLUNG: RESPONSIVES VERSUS ADAPTIVES LAYOUT 39
1.6 ZUSAMMENFASSUNG 39
2 UMSETZUNG
EINES FIXEN
DESIGNS IN EIN FLEXIBLES
LAYOUT 41
2.1 DIE AUSGANGSLAGE: EIN GRAFISCHER ENTWURF MIT FESTEN ABMESSUNGEN 41
2.2 DER ERSTE SCHRITT: FESTE RASTER IN FLEXIBLE UMRECHNEN 47
2.3 DER ZWEITE SCHRITT ZU MEHR FLEXIBILITAET: ANPASSUNGSFAEHIGE INHALTE 49
2.4 DER DRITTE SCHRITT: LAYOUTS
MIT MEDIA QUERIES UMSCHALTEN 52
2.5 ZUSAMMENFASSUNG 55
3 DIE SCHLUESSELTECHNOLOGIE
MEDIA QUERIES
57
3.1 CASCADING STYLESHEETS
(EIN KURZER RUECKBLICK) 58
3.1.1 ZUWEISUNG VON CSS-EIGENSCHAFTEN 58
3.2 MEDIENTYP (MEDIA TYPE) 59
3.2.1 MEDIENABFRAGE FUER DEN MEDIENTYP SETZEN 59
3.2.2 MEDIENTYPEN IN DER UEBERSICHT 60
3.3 MEDIENEIGENSCHAFTEN (MEDIA FEATURES) 61
3.3.1 MEDIENEIGENSCHAFTEN IN DER UEBERSICHT 62
3.4 MEDIA QUERIES SCHREIBEN 64
3.4.1 KOMPONENTEN EINES MEDIA QUERYS 64
3.5 VIEWPORTS UND PIXEL 66
3.5.1 DER VISUELLE VIEWPORT 66
3.5.2 DER LAYOUT-VIEWPORT AUF MOBILEN GERAETEN 66
3.5.3 GERAETEPIXEL UND CSS-PIXEL: DER VIRTUELLE
VISUELLE VIEWPORT 67
3.5.4 DAS VIEWPORT-METATAG UND SEINE EIGENSCHAFTEN 70
3.5.5 DIE @VIEWPORT-ANWEISUNG IN CSS 73
3.6 MEDIA QUERIES IM RESPONSIVE WEBDESIGN 75
3.6.1 MEDIENEIGENSCHAFT WIDTH 75
3.6.2 MEDIENEIGENSCHAFT DEVICE-WIDTH 76
3.6.3 MEDIA QUERIES IN EM 76
3.6.4 MEDIENEIGENSCHAFT HEIGHT-VERTIKALE MEDIA QUERIES 78
3.6.5 MEDIENEIGENSCHAFT ORIENTATION 79
3.6.6 MEDIENEIGENSCHAFT ASPECT-RATIO, DEVICE-ASPECT-RATIO 80
3.6.7 MEDIENEIGENSCHAFT RESOLUTION UND DEVICE-PIXEL-RATIO 80
3.7 MEDIA QUERIES IM HTML-HEADER ODER IM STYLESHEET 84
3.8 DAS WICHTIGSTE MEDIA QUERY IST KEIN MEDIA QUERY! 84
3.9 MEDIA QUERIES UND DIE ALTEN INTERNET EXPLORER 84
3.9.1 NUR BASISLAYOUT ZUWEISEN 85
3.9.2 MITTLERE LAYOUTSTUFEN MIT CONDITIONAL COMMENTS ZUWEISEN 85
3.9.3 MEDIA-QUERY-UNTERSTUTZUNG MIT JAVASCRIPT NACHRUSTEN 85
3.10 USER-AGENT-SNIFFING UND SERVERSEITIGE ERKENNUNG 86
3.10.1 WURFL&CO 87
3.11 ZUSAMMENFASSUNG 87
4 EIN RESPONSIVER WORKFLOW 89
4.1 DER ALTE PROZESS 89
4.2 PHASE 1: MOODBOARDS UND INHALTSPLAN 92
4.2.1 MOODBOARDS 92
4.2.2 INHALTE STRUKTURIEREN UND HIERARCHISIEREN 93
4.2.3 CONTENT-PROTOTYPEN 95
4.3 PHASE 2: STYLE TILES UND
WIREFRAMES 96
4.3.1 STYLE TILES 96
4.3.2 MOCKUPS 100
4.4 PHASE 3: DESIGN
IM BROWSER 104
4.4.1 ONLINE-EDITOREN 105
4.4.2 KOMPONENTEN, PATTERNS UND ATOMIC DESIGN 106
4.5 PHASE 4: RINSE AND REPEAT 107
4.5.1 BEZIEHEN SIE
IHRE KUNDEN IN DEN GESAMTPROZESS MIT EIN 107
4.6 DAS RESPONSIVE TEAM 109
4.7 DOKUMENTATION RESPONSIVER DESIGNS 110
4.7.1 STYLE-DOKUMENTATION MIT EVERNOTE 111
4.7.2 DEXY 113
4.8 ZUSAMMENFASSUNG 113
5 DESIGN UND
TYPOGRAFIE 115
5.1 DESIGN FOLLOWS CONTENT 115
5.1.1 YOU CANNOT NOT COMMUNICATE-KEIN DESIGN IST AUCH EIN DESIGN 116
5.2 DESIGN VON
INNEN NACH AUSSEN - DER ATOMIC-DESIGN-ANSATZ 118
5.2.1 ATOMIC DESIGN ANWENDEN MIT PATTERN LAB 119
5.3 DESIGNANFORDERUNGEN FUER RESPONSIVE SITES 122
5.3.1 DOES SIZE MATTER-WAS MACHEN NUTZER MIT IHREN GERATEN? 123
5.3.2 GERAETEUEBERGREIFENDES SURFEN 125
5.3.3 SIZE MATTERS: ZIELE FUER TOUCH-EVENTS 125
5.3.4 ES GIBT KEIN
HOVERAUF HAWAII 127
5.3.5 INAKTIVES :ACTIVE AUF IOS 128
5.3.6 HANDPOSITIONEN 128
5.3.7 LAYOUTWECHSEL BEI AENDERUNG DER ORIENTIERUNG 129
7
5.3.8 SCHREIBEN IST MUEHSAM: FORMULARE AUF SMARTPHONES 132
5.3.9 MOBILE INSPIRATION UND BEST PRATICE 132
5.4 TYPOGRAFIE (ANPASSUNGSFAEHIGER TEXT) 133
5.4.1 DIE AUSWAHL DER SCHRIFTART 134
5.4.2 ANGABEN FUER DIE SCHRIFTGROSSE 137
5.4.3 SCHRIFTGROSSENWAHRNEHMUNG AUF KLEINEN UND GROSSEN
BILDSCHIRMEN 141
5.4.4 ZEILENLAENGE UND DURCHSCHUSS 144
5.4.5 SKALIERBARE SEITENBREITE TEXTE 148
5.5 ZUSAMMENFASSUNG 150
6 SEMANTIK UND
BARRIEREFREIHEIT 151
6.1 PRINZIPIEN DER ZUGAENGLICHKEIT 151
6.1.1 WAHRNEHMBARKEIT 152
6.1.2 BEDIENBARKEIT 157
6.1.3 VERSTAENDLICHKEIT 158
6.1.4 ROBUSTHEIT 159
6.2 SEMANTIK DURCH HTML5 159
6.2.1 SECTION 160
6.2.2 ARTICLE 161
6.2.3 NAV 161
6.2.4 ASIDE 161
6.2.5 HEADER 161
6.2.6 FOOTER 162
6.3 HTML5-FORMULARATTRIBUTE FUER MEHR SEMANTIK 163
6.3.1 NEUE EINGABEELEMENTE 163
6.4 SEMANTIK DURCH WAI-ARIA-ROLLEN 165
6.5 ZUSAMMENFASSUNG 168
7 RESPONSIVE LAYOUT-PATTERNS 169
7.1 MOBILE FIRST 170
7.1.1 REDUKTION AUF DAS WESENTLICHE IST DIE DEVISE 170
7.1.2 MOBILE FIRST-PROGRESSIVE ENHANCEMENT FUERS LAYOUT 172
8
7.1.3 MOBILE FIRST BEDEUTET AUCH CONTENT FIRST 173
7.1.4 FALLBACKLAYOUT: WAS IST DIE NOTFALLANSICHT? 174
7.2 PRAXISBEISPIEL: MOBILE FIRST 175
7.2.1 MOBILE FIRST-LOS GEHT S! 175
7.2.2 MOCKUPS FUER DAS LAYOUT 176
7.2.3 BASISVERSION: SMARTPHONE-ANSICHT 177
7.2.4 SETZEN DES VIEWPORT-METATAGS 184
7.3 AUSWAHL DER BREAKPOINTS 186
7.3.1 HAUPT-BREAKPOINTS 187
7.3.2 ANPASSUNGS-BREAKPOINTS 188
7.3.3 VERTIKALE BREAKPOINTS 189
7.4 PRAXISBEISPIEL: ERSTEN BREAKPOINT SETZEN (TABLETS) 190
7.5 LAYOUT-PATTERNS (DARSTELLUNGSMUSTER) FUER UNTERSCHIEDLICHE
AUSGABEGERAETE 195
7.5.1 TINYTWEAKS (KLEINE OPTIMIERUNGEN) 196
7.5.2 MOSTLY FLUID (GROSSTEILS FLIESSEND) 197
7.5.3 COLUMN DROP (ABGESENKTE SPALTEN) 198
7.5.4 LAYOUT SHIFTER (LAYOUTVERDREHER) 199
7.5.5 OFF-CANVAS-LAYOUT (AUSSERHALB DES BILDSCHIRMS) 199
7.5.6 FOOTER-NAVIGATION UND OFF-CANVAS-MARGINALIE 200
7.5.7 TOP-OFF-CANVAS-MENUE UND OFF-CANVAS-MARGINALIE 201
7.5.8 VERTIKALE UND HORIZONTALE OFF-CANVAS-PANELS 201
7.5.9 ZUSAMMENGEFASSTE ELEMENTE OFF-CANVAS 202
7.5.10 OFF-CANVAS-LOESUNGEN AUS DER SCHUBLADE 203
7.6 PRAXISBEISPIEL: WEITERE BREAKPOINTS SETZEN (GROSSE SCREENS) 204
7.6.1 KLEINE DESKTOPVERSION NACH DEM KONZEPT LAYOUT SHIFTER 204
7.6.2 GROSSE DESKTOPVERSION 206
7.7 BREAKPOINT-TOOLS 208
7.7.1 BREAKPOINTS TESTEN MIT BROWSERTOOLS 208
7.7.2 GRIDPAK ZUM ERSTELLEN VON RASTERN MIT MEDIA QUERIES 210
7.8 CSS3-LAYOUTTECHNIKEN FUER RESPONSIVE
LAYOUTS 211
7.8.1 FLEXBOX-LAYOUT 211
7.8.2 GRID-LAYOUT (CSS3) 215
7.9 ZUSAMMENFASSUNG 216
9
8 FRAMEWORKS
FUER RESPONSIVES DESIGN
217
8.1 EIGENE VORLAGE ODER FERTIGE FRAMEWORKS VERWENDEN? 218
8.2 WIE WAEHLEN SIE DAS RICHTIGE FRAMEWORK AUS? 220
8.3 EINE KURZE VORSTELLUNG RESPONSIVER FRAMEWORKS 221
8.3.1 YAML 222
8.3.2 FOUNDATION 226
8.3.3 BOOTSTRAP 230
8.3.4 PURECSS 233
8.4 JAVASCRIPT-BIBLIOTHEKEN UND ANDERE HELFER 235
8.4.1 JQUERY 235
8.4.2 MODERNIZR 236
8.4.3 ELEGANTE STYLESHEETS MIT PRAEPROZESSOREN: SASS 238
8.5 ZUSAMMENFASSUNG 245
9 NAVIGATIONSKONZEPTE
247
9.1 WAS MACHT EINE NAVIGATION BENUTZERFREUNDLICH? 247
9.2 BENUTZERFREUNDLICHE NAVIGATION FUER MOBILE GERAETE 248
9.2.1 FREIER BLICK AUF DIE WEBSITE 249
9.2.2 AUSREICHEND GROSSE KLICKFLAECHEN FUER TOUCHBEDIENUNG 250
9.2.3 UMGANG MIT MENUES MIT MEHREREN EBENEN 250
9.3 NAVIGATIONSTYPEN FUER MOBILE GERAETE MIT TOUCHSCREEN 250
9.3.1 WENIGE MENUEPUNKTE AM OBEREN RAND 251
9.3.2 LANGE MENUES AM OBEREN RAND 254
9.3.3 SELECT-MENUE 255
9.3.4 NAVIGATION PER ANKER AM ENDE DES SEITENINHALTS 260
9.3.5 TOGGLE-MENUE 264
9.3.6 OFF-CANVAS-MENU 271
9.4 MULTILEVEL-MENUES 275
9.4.1 DIE NATIVE EINBINDUNG VON MULTILEVEL-MENUES AUF IOS UND ANDROID ...
276
9.4.2 ANDERE LOESUNGEN FUER MULTILEVEL-MENUES 279
9.5 ZUSAMMENFASSUNG 282
10
10 FLEXIBLE BILDELEMENTE 283
10.1 ANPASSUNGSFAEHIGE BILDER 283
10.1.1 PRAXISBEISPIEL: ANPASSUNGSFAEHIGES HEADERBILD 285
10.1.2 BILDER AUSSCHNITTWEISE ANZEIGEN 287
10.1.3 PRAXISBEISPIEL: NUR BILDAUSSCHNITT FUER DIE BASISVERSION 287
10.1.4 FLEXIBLE BILDER, DIE NICHT UEBER DIE GANZE RASTERBREITE GEHEN 289
10.1.5 PRAXISBEISPIEL: FLEXIBLE TEASER-BOXEN MIT BILD UND TEXT 289
10.2 RESPONSIVE HINTERGRUNDBILDER 293
10.2.1 GEKACHELTE HINTERGRUNDMUSTER 293
10.2.2 GROSSFLAECHIGE HINTERGRUNDBILDER 298
10.2.3 PRAXISBEISPIEL: VOLLFLAECHIGE HINTERGRUNDBILDER 302
10.2.4 HINTERGRUNDGRAFIKEN ALS ICONS 305
10.2.5 CSS-SPRITES FUER
HINTERGRUNDBILDER 305
10.2.6 PRAXISBEISPIEL: CSS-SPRITES FUER
HOCHAUFLOESENDE
HINTERGRUNDGRAFIKEN 307
10.3 AUFLOESUNGSUNABHAENGIGE GRAFIKEN (SVG) 311
10.3.1 DAS SCALABLE-VECTOR-GRAPHICS-FORMAT 312
10.3.2 PRAXISBEISPIEL: ICONS ALS SVG-SPRITE 312
10.3.3 PRAXISBEISPIEL: SVG-INFOGRAFIK VERSUS GIF-INFOGRAFIK 314
10.3.4 EINBINDUNG VON SVG-GRAFIKEN 315
10.3.5 PRAXISBEISPIEL: RESPONSIVE SVG-EINBINDUNG 321
10.3.6 DIE RESPONSIVE SVG-EINBINDUNG 325
10.3.7 BROWSERSUPPORT UND FALLBACK 326
10.4 ICON-FONTS 330
10.4.1 PRAXISBEISPIEL: ICON-FONTS MIT FONT AWESOME 334
10.4.2 ICON-FONTS MIT LIGATUREN 336
10.5 BILDER FUER UNTERSCHIEDLICHE AUFLOESUNGEN 338
10.5.1 WIE ORDNE ICH DIE RICHTIGEN BILDER IM HTML-CODE ZU? 339
10.5.2 BESCHNITT MIT AUTOMATISCHER BERUECKSICHTIGUNG DES
BILDSCHWERPUNKTS 346
10.5.3 UND WER ERSTELLT DIE GANZEN BILDER? 348
10.6 ZUSAMMENFASSUNG 352
11
11 MEHR FLEXIBLE INHALTE
355
11.1 RESPONSIVE BILDERGALERIEN 356
11.1.1 PRAXISBEISPIEL: FLEXIBLE SLIDESHOW MIT RESPONSIVESLIDES 356
11.1.2 PRAXISBEISPIEL: RESPONSIVE BILDERGALERIEN MIT FLEXSLIDER 358
11.1.3 ANDERE BILDERGALERIETOOLS 364
11.2 RESPONSIVE LIGHTBOXEN 365
11.3 RESPONSIVE IMAGE
MAPS 368
11.3.1 PRAXISBEISPIEL: JQUERY-RWDLMAGEMAPS.JS 368
11.4 ANPASSUNGSFAEHIGE VIDEOS 370
11.4.1 PRAXISBEISPIEL: HTML5-VIDEOS 372
11.4.2 RESPONSIVE EMBEDDING VON YOUTUBE & CO: VIDEOS IM IFRAME 373
11.4.3 AUTOMATISCHE ANPASSUNG FUER UNTERSCHIEDLICHE VIDEO-
SEITENVERHAELTNISSE DURCH FITVIDS.JS UND FLUIDVIDS.JS 377
11.4.4 HTML5-VIDEOPLAYER MIT VIDEO.JS 378
11.5 ADOBE FLASH 380
11.6 FLEXIBLE KARTENEINBINDUNGEN (GOOGLE MAPS) 381
11.7 FLEXIBLE TABELLEN 383
11.7.1 TABELLENINHALTE DEAKTIVIEREN (HIDE ON MOBILE) 384
11.7.2 DIE TABELLE MIT CSS UMSTRUKTURIEREN 386
11.7.3 ANPASSUNGSFAEHIGE TABELLEN MIT FOOTABLE 390
11.7.4 MEHR RESPONSIVE TABELLEN 392
11.8 AKKORDEONS UND INHALTSBOXEN MIT REITERN 394
11.9 FLEXIBLE FORMULARE 398
11.9.1 ANWENDUNGSBEISPIEL: FORMULAR 399
11.10 INHALTE SELEKTIV ANZEIGEN UND LADEN 404
11.10.1 INHALTE ENTFERNEN ODER ERGAENZEN-WANN UND WIE? 404
11.10.2 INHALTE PER CSS AUSBLENDEN (DISPLAY: NONE) 405
11.10.3 INHALTE PER CSS
HINZUFUEGEN 406
11.10.4 CONDITIONAL LOADING CONTENT VIA JAVASCRIPT (UND CSS) 408
11.11 FLEXIBLE WERBUNG 412
11.11.1 BEWUSSTSEIN SCHAFFEN 412
11.11.2 ALTE UND NEUE BANNERKONZEPTE 414
11.11.3 BANNERERSTELLUNG UND-AUSLIEFERUNG 416
11.11.4 FIXE SPALTE UND NUR EIN RECTANGLE-FORMAT 418
11.11.5 GEZIELTES LADEN VON BANNERGROESSENFORMATEN MIT LAZY-ADS 419
11.11.6 ZURB-PLAYGROUND: RESPONSIVE ADS 421
12
11.11.7 GOOGLE ADSENSE ADS IM RESPONSIVEN DESIGN AUSLIEFERN 422
11.11.8 WERBEBLOECKE ZWISCHEN INHALTE SCHIEBEN MIT
CSS-REGIONS (POLYFILL) 422
11.11.9 INHALTE DYNAMISCH VERSCHIEBEN 424
11.12 RESPONSIVE HTML-E-MAILS 426
11.13 ZUSAMMENFASSUNG 430
12 QUALITAETSSICHERUNG
UND OPTIMIERUNG
431
12.1 TESTING 431
12.1.1 VALIDATOREN FUER HTML UND CSS 431
12.1.2 BREAKPOINTS TESTEN 432
12.1.3 AUF DEM GERAET TESTEN 440
12.1.4 ADOBE EDGE INSPECT, SDKS 441
12.2 PERFORMANCE TESTEN UND OPTIMIERUNG 443
12.2.1 DAS PERFORMANCE-BUDGET 443
12.2.2 WAS BEEINTRAECHTIGT DIE PERFORMANCE? 444
12.2.3 SKRIPTE UND HTML 447
12.2.4- CACHING 457
12.2.5 PERFORMANCEOPTIMIERUNG FUER GRAFIKEN UND BILDER 458
12.2.6 SCHRIFTEN OPTIMIEREN 460
12.2.7 LAZYLOADING 463
12.2.8 AUS DEN AUGEN,
AUS DEM SINN? 468
12.3 ZUSAMMENFASSUNG 470
13 FAZIT
47I
ANHANG
473
A.1 WEBSITE ZUM BUCH 473
A.2 QUELLENNACHWEISE DER VERWENDETEN BILDER 473
INDEX 477
13
|
| 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 | BV042265306 |
| classification_rvk | ST 252 |
| classification_tum | DAT 675f |
| ctrlnum | (OCoLC)887891113 (DE-599)DNB1054672083 |
| dewey-full | 006.7 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.7 |
| dewey-search | 006.7 |
| dewey-sort | 16.7 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| edition | 2., aktualisierte Aufl. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>02423nam a22004818c 4500</leader><controlfield tag="001">BV042265306</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20150826 </controlfield><controlfield tag="007">t|</controlfield><controlfield tag="008">150112s2015 gw a||| |||| 00||| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">14,N33</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1054672083</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836232006</subfield><subfield code="9">3-8362-3200-6</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836232005</subfield><subfield code="c">Gb. : EUR 39.90 (DE), EUR 41.10 (AT), sfr 49.90 (freier Pr.)</subfield><subfield code="9">978-3-8362-3200-5</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783836232005</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)887891113</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1054672083</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakddb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-92</subfield><subfield code="a">DE-1047</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-1050</subfield><subfield code="a">DE-706</subfield><subfield code="a">DE-70</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-1043</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-91G</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-M100</subfield><subfield code="a">DE-1046</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-20</subfield><subfield code="a">DE-521</subfield><subfield code="a">DE-1049</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.7</subfield><subfield code="2">22/ger</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">004</subfield><subfield code="2">sdnb</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">anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.]</subfield><subfield code="c">Andrea Ertel ; Kai Laborenz</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">2., aktualisierte Aufl.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Galileo Press ; [i.e. Rheinwerk-Verl.]</subfield><subfield code="c">2015</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">489 S.</subfield><subfield code="b">zahlr. Ill.</subfield><subfield code="c">240 mm x 168 mm</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">Galileo Computing</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="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="e">Verfasser</subfield><subfield code="0">(DE-588)1023809540</subfield><subfield code="4">aut</subfield></datafield><datafield tag="776" ind1="0" ind2="8"><subfield code="i">Erscheint auch als</subfield><subfield code="n">Online-Ausgabe</subfield><subfield code="z">978-3-8362-3201-2</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=4739864&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="q">text/html</subfield><subfield code="u">https://www.rheinwerk-verlag.de/responsive-webdesign_3725/</subfield><subfield code="3">Ausführliche Beschreibung</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">DNB Datenaustausch</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=027702975&sequence=000001&line_number=0001&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-027702975</subfield></datafield></record></collection> |
| id | DE-604.BV042265306 |
| illustrated | Illustrated |
| indexdate | 2024-12-24T04:18:17Z |
| institution | BVB |
| isbn | 3836232006 9783836232005 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-027702975 |
| oclc_num | 887891113 |
| open_access_boolean | |
| owner | DE-92 DE-1047 DE-863 DE-BY-FWS DE-523 DE-M347 DE-1050 DE-706 DE-70 DE-859 DE-29T DE-573 DE-1043 DE-1102 DE-355 DE-BY-UBR DE-91G DE-BY-TUM DE-83 DE-M100 DE-1046 DE-858 DE-20 DE-521 DE-1049 |
| owner_facet | DE-92 DE-1047 DE-863 DE-BY-FWS DE-523 DE-M347 DE-1050 DE-706 DE-70 DE-859 DE-29T DE-573 DE-1043 DE-1102 DE-355 DE-BY-UBR DE-91G DE-BY-TUM DE-83 DE-M100 DE-1046 DE-858 DE-20 DE-521 DE-1049 |
| physical | 489 S. zahlr. Ill. 240 mm x 168 mm |
| publishDate | 2015 |
| publishDateSearch | 2015 |
| publishDateSort | 2015 |
| publisher | Galileo Press ; [i.e. Rheinwerk-Verl.] |
| record_format | marc |
| series2 | Galileo Computing |
| spellingShingle | Ertel, Andrea ca. 20. Jh Laborenz, Kai ca. 20. Jh Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] Responsive Webdesign (DE-588)1035443651 gnd |
| subject_GND | (DE-588)1035443651 |
| title | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] |
| title_auth | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] |
| title_exact_search | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] |
| title_full | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] Andrea Ertel ; Kai Laborenz |
| title_fullStr | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] Andrea Ertel ; Kai Laborenz |
| title_full_unstemmed | Responsive Webdesign anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] Andrea Ertel ; Kai Laborenz |
| title_short | Responsive Webdesign |
| title_sort | responsive webdesign anpassungsfahige websites programmieren und gestalten grundlagen strategien und inspirierende praxisbeispiele layout navigationen bilder und videos schriften flexible werbung inkl responsiver frameworks barrierefreiheit performance u v m |
| title_sub | anpassungsfähige Websites programmieren und gestalten ; [Grundlagen, Strategien und inspirierende Praxisbeispiele ; Layout, Navigationen, Bilder und Videos, Schriften, flexible Werbung ; inkl. responsiver Frameworks, Barrierefreiheit, Performance u.v.m.] |
| topic | Responsive Webdesign (DE-588)1035443651 gnd |
| topic_facet | Responsive Webdesign |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=4739864&prov=M&dok_var=1&dok_ext=htm https://www.rheinwerk-verlag.de/responsive-webdesign_3725/ http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=027702975&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT ertelandrea responsivewebdesignanpassungsfahigewebsitesprogrammierenundgestaltengrundlagenstrategienundinspirierendepraxisbeispielelayoutnavigationenbilderundvideosschriftenflexiblewerbunginklresponsiverframeworksbarrierefreiheitperformanceuvm AT laborenzkai responsivewebdesignanpassungsfahigewebsitesprogrammierenundgestaltengrundlagenstrategienundinspirierendepraxisbeispielelayoutnavigationenbilderundvideosschriftenflexiblewerbunginklresponsiverframeworksbarrierefreiheitperformanceuvm |