Successfully reported this slideshow.
Responsive Web Design      ein Überblick         Michael Schmid        Head Technology     michael@amazeelabs.com         ...
Was istResponsive Web Design?
der Start
der Start21. September 2004
der Start21. September 2004   Cameron Adams kommt mit   einer Idee für   „Resolution dependent   layout“
http://www.themaninblue.com/experiment/ResolutionLayout/
der Start
der Start• basierend auf Javascript
der Start• basierend auf Javascript• nicht sehr schnell
der Start• basierend auf Javascript• nicht sehr schnell• wenig Aufmerksamkeit
zweiter Anlauf25. Mai 2010   Ethan Marcotte schlägt   MediaQueries für   Responsive Seiten vor   http://www.alistapart.com...
Media Queries CSS 2.1<link rel="stylesheet" type="text/css"href="core.css" media="screen" /><link rel="stylesheet" type="t...
Media Queries CSS 3<link rel="stylesheet" type="text/css"media="screen and (max-width: 480px)"href="mobile.css" />
zweiter Anlauf
zweiter Anlauf• basierend auf CSS
zweiter Anlauf• basierend auf CSS• sehr schnell
zweiter Anlauf• basierend auf CSS• sehr schnell• einfach
zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit
zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support
zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support • polyfill „css3-medi...
Kombinationen
Kombinationen/* Wide Layout */all and (min-width: 1220px)
Kombinationen/* Wide Layout */all and (min-width: 1220px)  /* Normal Layout */all and (min-width: 980px) and(max-width: 10...
Kombinationen/* Wide Layout */all and (min-width: 1220px)  /* Normal Layout */all and (min-width: 980px) and(max-width: 10...
Responsive vs. Adaptive
Responsive vs. Adaptive  • Responsive    fluid layout
Responsive vs. Adaptive  • Responsive    fluid layout  • Adaptive    mehrere fixe layouts
Responsive vs. Adaptive  • Responsive    fluid layout  • Adaptive    mehrere fixe layouts  • Hybrid    Kombination von bei...
„Responsive“http://www.smashingmagazine.com
„Responsive“http://www.smashingmagazine.com
„Responsive“http://www.smashingmagazine.com
„Responsive“http://www.smashingmagazine.com
„Hybrid“http://www.amazeelabs.com
„Hybrid“http://www.amazeelabs.com
„Hybrid“http://www.amazeelabs.com
„Hybrid“http://www.amazeelabs.com
Projektmanagement mitResponsive Web Design
Responsive Web Design    beeinflusst:
Responsive Web Design    beeinflusst:• Designer
Responsive Web Design    beeinflusst:• Designer• Themer
Responsive Web Design    beeinflusst:• Designer• Themer• Projektleiter
Responsive Web Design    beeinflusst:• Designer• Themer• Projektleiter• Tester
Responsive Web Design    beeinflusst:• Designer• Themer• Projektleiter• Tester• Kunden
Breakpoints
Breakpoints• Was ist der wichtiste Inhalt?
Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?
Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?• Wireframes, Papier, Whiteboard
Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?• Wireframes, Papier, Whiteboard• Sub-Breakpoints?
Mobile First
Mobile First• vom Kleinsten zum Grössten
Mobile First• vom Kleinsten zum Grössten• Content First
Mobile First• vom Kleinsten zum Grössten• Content First• schwierig mit Kunden
the grid is your friend
the grid is your friend • mit Grids designen
the grid is your friend • mit Grids designen • 1 Tag mit Grids verbringen   spart 1 Woche mit Theming
the grid is your friend • mit Grids designen • 1 Tag mit Grids verbringen   spart 1 Woche mit Theming • Gridberechnung   h...
http://www.fotobout.com
http://www.fotobout.com
http://www.fotobout.com
http://www.fotobout.com
http://www.fotobout.com
http://www.fotobout.com
http://www.fotobout.com
Designe nicht jede Seite
Designe nicht jede Seite  • Nur die wichtigsten Seiten
Designe nicht jede Seite  • Nur die wichtigsten Seiten  • Mehr Responsive Layouts
Designe nicht jede Seite  • Nur die wichtigsten Seiten  • Mehr Responsive Layouts
Designe nicht jede Seite  • Nur die wichtigsten Seiten  • Mehr Responsive Layouts  • Designe spezielle Dinge:
Designe nicht jede Seite  • Nur die wichtigsten Seiten  • Mehr Responsive Layouts  • Designe spezielle Dinge:   • grössere...
Testen
Testen• Browser
Testen• Browser• Responsinator.com
Testen• Browser• Responsinator.com
Testen• Browser• Responsinator.com• Adobe Shadow
Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack
Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack
Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack• Xcode (iOS Simulator)
Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack• Xcode (iOS Simulator)• Android Emulator
Responsive Images
Responsive Images• Ungelöstes Problem
Responsive Images• Ungelöstes Problem
Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar
Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene  Layouts
Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene  Layouts
Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene  Layouts• HighDP...
Responsive   vs.  Native
Responsive vs. Native
Responsive vs. NativeResponsive
Responsive vs. NativeResponsive • viel weniger Maintenance
Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht   verbreitet
Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht   verbreitet • kein Hardware Zugan...
Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht   verbreitet • kein Hardware Zugan...
„brauche ich eine Mobile   fähige Webseite?“
vor nicht allzu langer Zeit:
vor nicht allzu langer Zeit: „braucht jede Firmaihre eigene Webseite?“
Zukunft?
Zukunft?• Mobiler Traffic wächst rasant
Zukunft?• Mobiler Traffic wächst rasant • Faktor 26x bis 2015
Zukunft?• Mobiler Traffic wächst rasant • Faktor 26x bis 2015• Aktuell 6500 verschiedene webfähige  Geräte
Zukunft vonResponsive Web Design
Zukunft
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.• Weitere Media Queries
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.• Weitere Media Queries • color
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome • scan (TV pro...
Zukunft• Immer bessere Unterstützung von  Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome • scan (TV pro...
noch mehr Zukunft
noch mehr Zukunft• Media Queries für
noch mehr Zukunft• Media Queries für • Batteriestand?
noch mehr Zukunft• Media Queries für • Batteriestand? • Internet Geschwindigkeit?
noch mehr Zukunft• Media Queries für • Batteriestand? • Internet Geschwindigkeit? • Umgebungslicht?
dankeschön    Michael Schmid   Head Technologymichael@amazeelabs.com      @schnitzel
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Upcoming SlideShare
Loading in …5
×

Responsive Web Design - Ein Überblick

7,024 views

Published on

Präsentation über Responsive Web Design anlässlich der ONE Konferenz 2012

Published in: Technology
  • Be the first to comment

Responsive Web Design - Ein Überblick

  1. 1. Responsive Web Design ein Überblick Michael Schmid Head Technology michael@amazeelabs.com @schnitzel
  2. 2. Was istResponsive Web Design?
  3. 3. der Start
  4. 4. der Start21. September 2004
  5. 5. der Start21. September 2004 Cameron Adams kommt mit einer Idee für „Resolution dependent layout“
  6. 6. http://www.themaninblue.com/experiment/ResolutionLayout/
  7. 7. der Start
  8. 8. der Start• basierend auf Javascript
  9. 9. der Start• basierend auf Javascript• nicht sehr schnell
  10. 10. der Start• basierend auf Javascript• nicht sehr schnell• wenig Aufmerksamkeit
  11. 11. zweiter Anlauf25. Mai 2010 Ethan Marcotte schlägt MediaQueries für Responsive Seiten vor http://www.alistapart.com/articles/responsive-web-design/
  12. 12. Media Queries CSS 2.1<link rel="stylesheet" type="text/css"href="core.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />
  13. 13. Media Queries CSS 3<link rel="stylesheet" type="text/css"media="screen and (max-width: 480px)"href="mobile.css" />
  14. 14. zweiter Anlauf
  15. 15. zweiter Anlauf• basierend auf CSS
  16. 16. zweiter Anlauf• basierend auf CSS• sehr schnell
  17. 17. zweiter Anlauf• basierend auf CSS• sehr schnell• einfach
  18. 18. zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit
  19. 19. zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support
  20. 20. zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support • polyfill „css3-mediaqueries.js“
  21. 21. Kombinationen
  22. 22. Kombinationen/* Wide Layout */all and (min-width: 1220px)
  23. 23. Kombinationen/* Wide Layout */all and (min-width: 1220px) /* Normal Layout */all and (min-width: 980px) and(max-width: 1019px)
  24. 24. Kombinationen/* Wide Layout */all and (min-width: 1220px) /* Normal Layout */all and (min-width: 980px) and(max-width: 1019px)/* Narrow Layout (Tablet) */all and (min-width: 740px) and(max-width: 979px)
  25. 25. Responsive vs. Adaptive
  26. 26. Responsive vs. Adaptive • Responsive fluid layout
  27. 27. Responsive vs. Adaptive • Responsive fluid layout • Adaptive mehrere fixe layouts
  28. 28. Responsive vs. Adaptive • Responsive fluid layout • Adaptive mehrere fixe layouts • Hybrid Kombination von beiden
  29. 29. „Responsive“http://www.smashingmagazine.com
  30. 30. „Responsive“http://www.smashingmagazine.com
  31. 31. „Responsive“http://www.smashingmagazine.com
  32. 32. „Responsive“http://www.smashingmagazine.com
  33. 33. „Hybrid“http://www.amazeelabs.com
  34. 34. „Hybrid“http://www.amazeelabs.com
  35. 35. „Hybrid“http://www.amazeelabs.com
  36. 36. „Hybrid“http://www.amazeelabs.com
  37. 37. Projektmanagement mitResponsive Web Design
  38. 38. Responsive Web Design beeinflusst:
  39. 39. Responsive Web Design beeinflusst:• Designer
  40. 40. Responsive Web Design beeinflusst:• Designer• Themer
  41. 41. Responsive Web Design beeinflusst:• Designer• Themer• Projektleiter
  42. 42. Responsive Web Design beeinflusst:• Designer• Themer• Projektleiter• Tester
  43. 43. Responsive Web Design beeinflusst:• Designer• Themer• Projektleiter• Tester• Kunden
  44. 44. Breakpoints
  45. 45. Breakpoints• Was ist der wichtiste Inhalt?
  46. 46. Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?
  47. 47. Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?• Wireframes, Papier, Whiteboard
  48. 48. Breakpoints• Was ist der wichtiste Inhalt?• Was können wir weglassen?• Wireframes, Papier, Whiteboard• Sub-Breakpoints?
  49. 49. Mobile First
  50. 50. Mobile First• vom Kleinsten zum Grössten
  51. 51. Mobile First• vom Kleinsten zum Grössten• Content First
  52. 52. Mobile First• vom Kleinsten zum Grössten• Content First• schwierig mit Kunden
  53. 53. the grid is your friend
  54. 54. the grid is your friend • mit Grids designen
  55. 55. the grid is your friend • mit Grids designen • 1 Tag mit Grids verbringen spart 1 Woche mit Theming
  56. 56. the grid is your friend • mit Grids designen • 1 Tag mit Grids verbringen spart 1 Woche mit Theming • Gridberechnung http://grids.heroku.com
  57. 57. http://www.fotobout.com
  58. 58. http://www.fotobout.com
  59. 59. http://www.fotobout.com
  60. 60. http://www.fotobout.com
  61. 61. http://www.fotobout.com
  62. 62. http://www.fotobout.com
  63. 63. http://www.fotobout.com
  64. 64. Designe nicht jede Seite
  65. 65. Designe nicht jede Seite • Nur die wichtigsten Seiten
  66. 66. Designe nicht jede Seite • Nur die wichtigsten Seiten • Mehr Responsive Layouts
  67. 67. Designe nicht jede Seite • Nur die wichtigsten Seiten • Mehr Responsive Layouts
  68. 68. Designe nicht jede Seite • Nur die wichtigsten Seiten • Mehr Responsive Layouts • Designe spezielle Dinge:
  69. 69. Designe nicht jede Seite • Nur die wichtigsten Seiten • Mehr Responsive Layouts • Designe spezielle Dinge: • grössere Touch Bereiche
  70. 70. Testen
  71. 71. Testen• Browser
  72. 72. Testen• Browser• Responsinator.com
  73. 73. Testen• Browser• Responsinator.com
  74. 74. Testen• Browser• Responsinator.com• Adobe Shadow
  75. 75. Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack
  76. 76. Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack
  77. 77. Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack• Xcode (iOS Simulator)
  78. 78. Testen• Browser• Responsinator.com• Adobe Shadow• Browserstack• Xcode (iOS Simulator)• Android Emulator
  79. 79. Responsive Images
  80. 80. Responsive Images• Ungelöstes Problem
  81. 81. Responsive Images• Ungelöstes Problem
  82. 82. Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar
  83. 83. Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene Layouts
  84. 84. Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene Layouts
  85. 85. Responsive Images• Ungelöstes Problem• Aktuell nur mit JavaScript lösbar• Mehrere Bilder für verschiedene Layouts• HighDPI Geräte wie iPhone 4S brauchen grössere Auflösungen
  86. 86. Responsive vs. Native
  87. 87. Responsive vs. Native
  88. 88. Responsive vs. NativeResponsive
  89. 89. Responsive vs. NativeResponsive • viel weniger Maintenance
  90. 90. Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet
  91. 91. Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet • kein Hardware Zugang (Photo, Kompass, etc.)
  92. 92. Responsive vs. NativeResponsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet • kein Hardware Zugang (Photo, Kompass, etc.) • Keine Push Notification
  93. 93. „brauche ich eine Mobile fähige Webseite?“
  94. 94. vor nicht allzu langer Zeit:
  95. 95. vor nicht allzu langer Zeit: „braucht jede Firmaihre eigene Webseite?“
  96. 96. Zukunft?
  97. 97. Zukunft?• Mobiler Traffic wächst rasant
  98. 98. Zukunft?• Mobiler Traffic wächst rasant • Faktor 26x bis 2015
  99. 99. Zukunft?• Mobiler Traffic wächst rasant • Faktor 26x bis 2015• Aktuell 6500 verschiedene webfähige Geräte
  100. 100. Zukunft vonResponsive Web Design
  101. 101. Zukunft
  102. 102. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.
  103. 103. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.• Weitere Media Queries
  104. 104. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.• Weitere Media Queries • color
  105. 105. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome
  106. 106. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome • scan (TV progressive | interlace)
  107. 107. Zukunft• Immer bessere Unterstützung von Frameworks, CMS, etc.• Weitere Media Queries • color • monochrome • scan (TV progressive | interlace) • grid (textbasiert)
  108. 108. noch mehr Zukunft
  109. 109. noch mehr Zukunft• Media Queries für
  110. 110. noch mehr Zukunft• Media Queries für • Batteriestand?
  111. 111. noch mehr Zukunft• Media Queries für • Batteriestand? • Internet Geschwindigkeit?
  112. 112. noch mehr Zukunft• Media Queries für • Batteriestand? • Internet Geschwindigkeit? • Umgebungslicht?
  113. 113. dankeschön Michael Schmid Head Technologymichael@amazeelabs.com @schnitzel

×