Your SlideShare is downloading. ×
0
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

6,358

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,358
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
58
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×