Was Responsive Webdesign meint, ist klar: Ein Layout, das sich flexibel an die Bildschirmgröße des Clients anpasst. Für einen perfekten Auftritt auf dem Smartphone ebenso wie dem UltraHD-TV. Was so schön klingt, birgt aber auch viele Fallstricke. Der Vortrag wird einige von ihnen Vorstellen: Von extravaganten Kundenwünschen, überraschender Browser-Inkompatibilität und der Verwendung von iFrames bis hin zu responsiven HTML-Newslettern. Abgerundet wird der Talk durch verschiedene Beispiele für den Workflow, Testing-Strategien und dem Thema SEO im Zusammenhang mit Responsive Webdesign.

2. Mayflower GmbH I 2
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Medientechnologien
I @jowe

5. Mayflower GmbH I 5
Geschichte
I 2010: Ethan Marcotte, Responsive Architektur
I CSS Level 3
I „Wichtigste Entwicklungen des Jahres 2012“
I Heterogene Browserlandschaft
I Herausforderung für Konzeptionisten, Webdesigner und
Webentwickler

7. Mayflower GmbH I 7
#1: Dem Kunden erklären

8. Mayflower GmbH I 8
#1: Dem Kunden erklären
Lösung: demonstrieren

9. Mayflower GmbH I 9
#2: Linearer Designprozess

10. Mayflower GmbH I 10
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts

11. Mayflower GmbH I 11
#3: Navigation

12. Mayflower GmbH I 12
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns

13. Mayflower GmbH I 13
#4: Bilder

14. Mayflower GmbH I 14
#4: Bilder
Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG

15. Mayflower GmbH I 15
#5: Tabellen

17. Mayflower GmbH I 17
#6: Konvertieren alter Seiten

19. Mayflower GmbH I 19
#7: IE

21. Mayflower GmbH I 21
#8: Testing

23. Mayflower GmbH I 23
#8: Testing

34. Mayflower GmbH I 34
Einbettung in iFrame
I Fit to Content
I Mobile oder Desktop?
I Polyfill
I W3C: <seamless />
I Navigation: <base />
I Videos
I #Beispiel

35. Mayflower GmbH I 35
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href

36. Mayflower GmbH I 36
Formulare nach Device
I Mobile: Rückrufservice
I Desktop: Detaillierte Angaben
I JS Validierung
I Logik über CSS Klassen?
I 2 verschiedene Formulare
I 2 verschiedene Links

37. Mayflower GmbH I 37
Responsive Webdesign
“Empty your mind! Be formless, shapeless, like
water. If you put water into a cup, it becomes
the cup. Put it into a bottle, it becomes the
bottle, you put into a teapot, it becomes the
teapot. Now water can flow, or it can crash: Be
water, my friend!”
(Bruce Lee: Fernsehinterview)

38. Mayflower GmbH I 38
Feedback