Post on 27-Nov-2014
description
Mayflower GmbH I 2
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Medientechnologien
I @jowe
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
Mayflower GmbH I 7
#1: Dem Kunden erklären
Mayflower GmbH I 8
#1: Dem Kunden erklären
Lösung: demonstrieren
Mayflower GmbH I 9
#2: Linearer Designprozess
Mayflower GmbH I 10
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts
Mayflower GmbH I 11
#3: Navigation
Mayflower GmbH I 12
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns
Mayflower GmbH I 13
#4: Bilder
Mayflower GmbH I 14
#4: BilderLösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG
Mayflower GmbH I 15
#5: Tabellen
Mayflower GmbH I 17
#6: Konvertieren alter Seiten
Mayflower GmbH I 19
#7: IE
Mayflower GmbH I 21
#8: Testing
Mayflower GmbH I 23
#8: Testing
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
Mayflower GmbH I 35
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href
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
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)
Mayflower GmbH I 38
Feedback