Mayflower GmbH I 1
© http://www.naturalgrocers.com/products/drinking-water
© Mayflower GmbH 2012
Responsive Webdesign
Fiese Fallstricke und sexy Strategien
Johannes Weber I 12. Sept. 2013
Mayflower GmbH I 3
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Me...
Mayflower GmbH I 4
Responsive Webdesign
I Beispiel: Text
I Beispiel: Formatierter Text
I Beispiel: Eltern - Kind
I Beispie...
Mayflower GmbH I 5
Mobile vs. Desktopbrowser
Mayflower GmbH I 6
Geschichte
I 2010: Ethan Marcotte, Responsive Architektur
I CSS Level 3
I „Wichtigste Entwicklungen des...
Mayflower GmbH I 7
Top 8
Fallstrickennetmagazine.com
Mayflower GmbH I 8
#1: Dem Kunden erklären
Mayflower GmbH I 9
#1: Dem Kunden erklären
Lösung: demonstrieren
Mayflower GmbH I 10
#2: Linearer Designprozess
Mayflower GmbH I 11
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts
Mayflower GmbH I 12
#3: Navigation
Mayflower GmbH I 13
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns
Mayflower GmbH I 14
#4: Bilder
Mayflower GmbH I 15
#4: Bilder
Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG
Mayflower GmbH I 16
#5: Tabellen
Mayflower GmbH I 17
#5: Tabellen
Lösung: bestehende Design Patterns
Mayflower GmbH I 18
#6: Konvertieren alter Seiten
Mayflower GmbH I 19
#6: Konvertieren alter Seiten
Lösung: Reverse Engineering, Rewrite
Mayflower GmbH I 20
#7: IE
Mayflower GmbH I 21
#7: IE
Lösung: Polyfill oder darauf verzichten
Mayflower GmbH I 22
#8: Testing
Mayflower GmbH I 23
#8: Testing
Lösung: Testsites, Tools, Geräte teilen
graziös
Mayflower GmbH I 24
#8: Testing
Mayflower GmbH I 25
Beispie
l
Mayflower GmbH I 26
Workflow
Mayflower GmbH I 27
Beispie
l
Workflow
Mayflower GmbH I 28
Beispie
l
Workflow
Mayflower GmbH I 29
Beispie
l
Workflow
Mayflower GmbH I 30
Beispie
l
Workflow
Mayflower GmbH I 31
Beispie
l
Workflow
Mayflower GmbH I 32
Beispie
l
Mayflower GmbH I 33
Frameworks
Mayflower GmbH I 34
Mayflower GmbH I 35
Responsive Newsletter
I Optimiert auf Outlook 2003
I Media Query Support
I Webclients
I CSS: !importan...
Mayflower GmbH I 36
Responsive Newsletter
I Testing Tools
emailonacid.com
mailchimp.com
campaignmonitor.com
Mayflower GmbH I 37
Einbettung in iFrame
I Fit to Content
I Mobile oder Desktop?
I Polyfill
I W3C: <seamless />
I Navigati...
Mayflower GmbH I 38
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href
Mayflower GmbH I 39
Formulare nach Device
I Mobile: Rückrufservice
I Desktop: Detaillierte Angaben
I JS Validierung
I Logi...
Mayflower GmbH I 40
Responsive Webdesign
“Empty your mind! Be formless, shapeless, like
water. If you put water into a cup...
Mayflower GmbH I 41
Feedback
26.09.13 Mayflower GmbH 42
Vielen Dank für Ihre
Aufmerksamkeit!
Johannes Weber
johannes.weber@mayflower.de
Tel: +49 89 242...
Upcoming SlideShare
Loading in …5
×

Responsive Webdesign: Fiese Fallstricke und sexy Strategien

2,092 views

Published on

Der neue Mayflower-Donnerstagsvortrag am Standort München, dieses Mal mit Web-Experte Johannes Weber. Kostenfrei für alle, die vorbeischauen mögen:-)

Thema: 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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,092
On SlideShare
0
From Embeds
0
Number of Embeds
289
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Webdesign: Fiese Fallstricke und sexy Strategien

  1. 1. Mayflower GmbH I 1 © http://www.naturalgrocers.com/products/drinking-water
  2. 2. © Mayflower GmbH 2012 Responsive Webdesign Fiese Fallstricke und sexy Strategien Johannes Weber I 12. Sept. 2013
  3. 3. Mayflower GmbH I 3 Johannes Weber I Jahrgang 1986 I Developer bei Mayflower I Seit 2003: Onlinemedien I M.Sc – Digitale Medientechnologien I @jowe
  4. 4. Mayflower GmbH I 4 Responsive Webdesign I Beispiel: Text I Beispiel: Formatierter Text I Beispiel: Eltern - Kind I Beispiel: Responsive
  5. 5. Mayflower GmbH I 5 Mobile vs. Desktopbrowser
  6. 6. Mayflower GmbH I 6 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. 7. Mayflower GmbH I 7 Top 8 Fallstrickennetmagazine.com
  8. 8. Mayflower GmbH I 8 #1: Dem Kunden erklären
  9. 9. Mayflower GmbH I 9 #1: Dem Kunden erklären Lösung: demonstrieren
  10. 10. Mayflower GmbH I 10 #2: Linearer Designprozess
  11. 11. Mayflower GmbH I 11 #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
  12. 12. Mayflower GmbH I 12 #3: Navigation
  13. 13. Mayflower GmbH I 13 #3: Navigation Lösung: gutes, einheitliches Design, Patterns
  14. 14. Mayflower GmbH I 14 #4: Bilder
  15. 15. Mayflower GmbH I 15 #4: Bilder Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet, progressive JPEG
  16. 16. Mayflower GmbH I 16 #5: Tabellen
  17. 17. Mayflower GmbH I 17 #5: Tabellen Lösung: bestehende Design Patterns
  18. 18. Mayflower GmbH I 18 #6: Konvertieren alter Seiten
  19. 19. Mayflower GmbH I 19 #6: Konvertieren alter Seiten Lösung: Reverse Engineering, Rewrite
  20. 20. Mayflower GmbH I 20 #7: IE
  21. 21. Mayflower GmbH I 21 #7: IE Lösung: Polyfill oder darauf verzichten
  22. 22. Mayflower GmbH I 22 #8: Testing
  23. 23. Mayflower GmbH I 23 #8: Testing Lösung: Testsites, Tools, Geräte teilen graziös
  24. 24. Mayflower GmbH I 24 #8: Testing
  25. 25. Mayflower GmbH I 25 Beispie l
  26. 26. Mayflower GmbH I 26 Workflow
  27. 27. Mayflower GmbH I 27 Beispie l Workflow
  28. 28. Mayflower GmbH I 28 Beispie l Workflow
  29. 29. Mayflower GmbH I 29 Beispie l Workflow
  30. 30. Mayflower GmbH I 30 Beispie l Workflow
  31. 31. Mayflower GmbH I 31 Beispie l Workflow
  32. 32. Mayflower GmbH I 32 Beispie l
  33. 33. Mayflower GmbH I 33 Frameworks
  34. 34. Mayflower GmbH I 34
  35. 35. Mayflower GmbH I 35 Responsive Newsletter I Optimiert auf Outlook 2003 I Media Query Support I Webclients I CSS: !important I Mobile First
  36. 36. Mayflower GmbH I 36 Responsive Newsletter I Testing Tools emailonacid.com mailchimp.com campaignmonitor.com
  37. 37. Mayflower GmbH I 37 Einbettung in iFrame I Fit to Content I Mobile oder Desktop? I Polyfill I W3C: <seamless /> I Navigation: <base /> I Videos I #Beispiel
  38. 38. Mayflower GmbH I 38 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href
  39. 39. Mayflower GmbH I 39 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
  40. 40. Mayflower GmbH I 40 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)
  41. 41. Mayflower GmbH I 41 Feedback
  42. 42. 26.09.13 Mayflower GmbH 42 Vielen Dank für Ihre Aufmerksamkeit! Johannes Weber johannes.weber@mayflower.de Tel: +49 89 2420 54 1118 Mayflower GmbH Mannhardtstraße 6 80538 München Q & A

×