RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?

Präsentation zum Thema: "RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?"—  Präsentation transkript:

1 RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?

2 RWD - Volker Lehnen - 2012 Ein Problem ? Bis ca. 2008 vorrangig Desktops und Laptops Website Standards: anfangs 753, später 960 Pixel

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

4 RWD - Volker Lehnen - 2012 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 RWD - Volker Lehnen - 2012 Ein Problem ! Heute: IPhone, Android, Win8, Tablets … ab ca. 2014/2015 mehr Traffic mobil als via Desktop Pflegeauffwand mal X

6 RWD - Volker Lehnen - 2012 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 RWD - Volker Lehnen - 2012 Die Lösung: RWD Fluide Grids Keine absoluten Angaben für Breiten, Schrift- und Bildgrößen EINE WEBSITE FÜR ALLE GERÄTE, max. zwei Sites (Desktop / alles andere) Mobile First

8 RWD - Volker Lehnen - 2012 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 RWD - Volker Lehnen - 2012 Das Photoshop Problem Beim Öffnen feste Größe wählen Nahe am Print Bereich Leichte Kommunikation mit Auftraggeber über das Layout der Seite, aber nicht responsive

10 RWD - Volker Lehnen - 2012 Ein neuer Workflow Kein fertiges Design zu Beginn, sondern vom ersten Tag an HTML Coding und Agiles Projektmanagement Mobile First No Flash

11 RWD - Volker Lehnen - 2012 Das Vertriebs-Dilemma Wohin mit der Werbung Kleinere Werbeplätze Weniger Werbeplätze Neue Ad-Sizes Beispiel: Facebook: Aktienverlust durch Verlust der Werbefläche im mobilen Sektor

12 RWD - Volker Lehnen - 2012 Mein Umbau … von www.abs-net.de zu www.abs-net.dewww.abs-net.de