RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?
-
Upload
eberhart-bomkamp -
Category
Documents
-
view
103 -
download
0
Transcript of RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?
![Page 1: RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/1.jpg)
RWD - Volker Lehnen - 2012
Responsive Web DesignWerkzeug oder Paradigmen-Wechsel?
![Page 2: RWD - Volker Lehnen - 2012 Responsive Web Design Werkzeug oder Paradigmen-Wechsel?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/2.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/3.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/4.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/5.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/6.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/7.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/8.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/9.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/10.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/11.jpg)
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?](https://reader035.fdocument.pub/reader035/viewer/2022070310/55204d7d49795902118cd6ca/html5/thumbnails/12.jpg)
RWD - Volker Lehnen - 2012
Mein Umbau …von www.abs-net.de zu www.abs-net.de