Responsive Web Design

1. Responsive Web Design Werkzeug oder Paradigmen-Wechsel?

2. Ein Problem ? • Bis ca. 2008 vorrangig Desktops und Laptops • Website Standards: anfangs 753, später 960 Pixel

3. Ein Problem ?! • Ab ca. 2008 zunehmend Netbooksund Smartphones(zunächst IPhone) • Ohne Zoom-In, nichts zu lesen • Buttons zu klein • Keine Flash Unterstützung

4. Ein Problem ?! • Reaktion: Zweite Website für mobile Endgeräte (m.domain.de oder mobile.domain.de) • Anderes CMS ? • Andere Inhalte • Andere Aufteilung • Ehrliche Antwort: Wer sucht nicht sofort den Button „Desktop-Ansicht“?

5. Ein Problem ! • Heute: IPhone, Android, Win8, Tablets …ab ca. 2014/2015 mehr Traffic mobil als via Desktop • Pflegeauffwand mal X

6. Nächstes Problem • Computer mit kabelgebunderem Anschluss • Laptop mit WLAN-Anbindung • Laptop mit SIM Karte (LTE/EDGE/GPRS ...) • Handy mit WLAN-Anbindung • Handy mit SIM Karte (LTE/EDGE/GPRS ...) • Laptop mit WLAN an Handy

7. Die Lösung: RWD • Fluide Grids • Keine absoluten Angaben für Breiten, Schrift- und Bildgrößen • EINE WEBSITE FÜR ALLE GERÄTE, max. zweiSites (Desktop / alles andere) • Mobile First

8. Umsetzung von RWD • HTML 5 mit CSS 3 • Reduzierung von Inhalten • Flexible Darstellung • Benutzung von Frameworks, z.B. Bootstrap / Foundation • Image Resizing (Adaptive Images) • Text Resizing (FitText) • Einsatz von Media Queries (Beispiele: mediaqueri.es) • Device Detection via Modernizr

9. Das Photoshop Problem • BeimÖffnenfesteGrößewählen • Nahe am Print Bereich • Leichte KommunikationmitAuftraggeberüber das Layout der Seite, aber nicht responsive

10. Ein neuer Workflow • Keinfertiges Design zuBeginn, sondernvomersten Tag an HTML Coding und AgilesProjektmanagement • Mobile First • No Flash

11. Das Vertriebs-Dilemma • Wohinmit der Werbung • KleinereWerbeplätze • WenigerWerbeplätze • Neue Ad-Sizes • Beispiel: Facebook: AktienverlustdurchVerlust der Werbefläche im mobilen Sektor

12. Mein Umbau … von www.abs-net.de zu www.abs-net.de