responsive webdesign

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