Responsive Webdesign Wir haben das Internet kaputt gemacht... Redakteure 3 Gestalter 4 Entwickler 5 Wie konnte das geschehen? Responsive Webdesign Was heisst RWD? "sich selbst (an das Ausgabemedium) anpassendes Design" 10 Was bedeutet RWD? "optimal viewing experience" engl. Wikipedia • einfache Inhaltserfassung • unkomplizierte Bedienbarkeit 11 Zwei Wege "Graceful degradation" "Progressive enhancement" Inhalt Content is king! • Priorisierung von Inhalten • Medien • Inhaltliche Bilder • Videos • Benutzer-Feedback • Popups & Overlays • MouseOver-Hinweise • Formular-Meldungen 16 Optik Form follows... display • flexibles Raster/Grid • weniger konkret • Schriftskalierung 18 Form follows... display • flexibles Raster/Grid • weniger konkret • Schriftskalierung • Formulare & Bedienelemente 20 Form follows... display • flexibles Raster/Grid • weniger konkret • Schriftskalierung • Formulare & Bedienelemente • Bildeinsatz 22 Technik • Browser-Kompatibilität • JavaScript • Strukturierung von CSS • Pflegbarkeit der Inhalte • Testing & Kontrolle • Lade- & Render-Zeiten 24 Workflow 26 27 Umdenken 29 Quellen für Abbildungen & Grafiken Workflow-Abbildungen auf Seite 26, 27 Christop Zillgens, Buch "Responsive Webdesign" http://responsivewebdesign-buch.de Bildschirm auf Seite 7 Wikipedia http://commons.wikimedia.org/wiki/File: HypertextEditingSystemConsoleBrownUniv1969.jpg Screenshots von Mobilgeräten auf Seite 3, 4, 5, 19, 21 WTFmobile http://wtfmobileweb.com Quellen für Abbildungen & Grafiken Bildschirmgrößen-Grafiken auf Seite 13, 14 Lizensiert, von Fotolia Geräte-Collage auf Seite 8 Brad Frost http://bradfrostweb.com/blog/web/mobile-first-responsiveweb-design