responsive webdesign

Download Responsive Webdesign

Post on 27-Nov-2014

1.044 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

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

2. 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 fr Konzeptionisten, Webdesigner und Webentwickler 3. Mayflower GmbH I 7 #1: Dem Kunden erklren 4. Mayflower GmbH I 8 #1: Dem Kunden erklren Lsung: demonstrieren 5. Mayflower GmbH I 9 #2: Linearer Designprozess 6. Mayflower GmbH I 10 #2: Linearer Designprozess Lsung: Design von Elements & weniger Layouts 7. Mayflower GmbH I 11 #3: Navigation 8. Mayflower GmbH I 12 #3: Navigation Lsung: gutes, einheitliches Design, Patterns 9. Mayflower GmbH I 13 #4: Bilder 10. Mayflower GmbH I 14 #4: Bilder Lsung: Scripts, SVG, Icon Fonts, , srcSet, progressive JPEG 11. Mayflower GmbH I 15 #5: Tabellen 12. Mayflower GmbH I 17 #6: Konvertieren alter Seiten 13. Mayflower GmbH I 19 #7: IE 14. Mayflower GmbH I 21 #8: Testing 15. Mayflower GmbH I 23 #8: Testing 16. Mayflower GmbH I 34 Einbettung in iFrame I Fit to Content I Mobile oder Desktop? I Polyfill I W3C: I Navigation: I Videos I #Beispiel 17. Mayflower GmbH I 35 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href 18. Mayflower GmbH I 36 Formulare nach Device I Mobile: Rckrufservice I Desktop: Detaillierte Angaben I JS Validierung I Logik ber CSS Klassen? I 2 verschiedene Formulare I 2 verschiedene Links 19. 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) 20. Mayflower GmbH I 38 Feedback