Mayflower GmbH I 2
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Me...
Mayflower GmbH I 5
Geschichte
I 2010: Ethan Marcotte, Responsive Architektur
I CSS Level 3
I „Wichtigste Entwicklungen des...
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: Bilder
Lö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 Navigati...
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 Logi...
Mayflower GmbH I 37
Responsive Webdesign
“Empty your mind! Be formless, shapeless, like
water. If you put water into a cup...
Mayflower GmbH I 38
Feedback
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Responsive Webdesign
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign

1.838 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.838
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign

  1. 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. 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 für Konzeptionisten, Webdesigner und Webentwickler
  3. 3. Mayflower GmbH I 7 #1: Dem Kunden erklären
  4. 4. Mayflower GmbH I 8 #1: Dem Kunden erklären Lösung: demonstrieren
  5. 5. Mayflower GmbH I 9 #2: Linearer Designprozess
  6. 6. Mayflower GmbH I 10 #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
  7. 7. Mayflower GmbH I 11 #3: Navigation
  8. 8. Mayflower GmbH I 12 #3: Navigation Lösung: gutes, einheitliches Design, Patterns
  9. 9. Mayflower GmbH I 13 #4: Bilder
  10. 10. Mayflower GmbH I 14 #4: Bilder Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet, progressive JPEG
  11. 11. Mayflower GmbH I 15 #5: Tabellen
  12. 12. Mayflower GmbH I 17 #6: Konvertieren alter Seiten
  13. 13. Mayflower GmbH I 19 #7: IE
  14. 14. Mayflower GmbH I 21 #8: Testing
  15. 15. Mayflower GmbH I 23 #8: Testing
  16. 16. 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
  17. 17. Mayflower GmbH I 35 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href
  18. 18. 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
  19. 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. 20. Mayflower GmbH I 38 Feedback

×