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

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

Embed Size (px)

Citation preview

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

RWD - Volker Lehnen - 2012

Responsive Web DesignWerkzeug oder Paradigmen-Wechsel?

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

RWD - Volker Lehnen - 2012

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

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

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

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

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“?

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

RWD - Volker Lehnen - 2012

Ein Problem ! Heute: IPhone, Android, Win8, Tablets …

ab ca. 2014/2015 mehr Traffic mobil als via Desktop

• Pflegeauffwand mal X

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

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

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

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

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

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

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

RWD - Volker Lehnen - 2012

Das Photoshop ProblemBeim Öffnen feste Größe wählenNahe am Print BereichLeichte Kommunikation mit

Auftraggeber über das Layout der Seite, aber nicht responsive

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

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

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

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

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

RWD - Volker Lehnen - 2012

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