Als KEY, PPTX herunterladen
Hochgeladen vonAmazee Labs
Responsive Web Design - Ein Überblick
Das Dokument bietet einen Überblick über Responsive Web Design, beginnend mit den frühen Ideen von 2004 bis zu den modernen Ansätzen mit CSS Media Queries von 2010, die eine schnelle und effiziente Entwicklung ermöglichen. Es behandelt des Weiteren die Herausforderungen, wie responsive Bilder und die Wichtigkeit des Designs für verschiedene Geräte, sowie die zukünftige Entwicklung der Technologie. Der Text betont die Bedeutung von Projektmanagement und die unterschiedlichen Rollen, die betroffen sind, während die Nachfrage nach mobiler Optimierung stetig wächst.
Responsive Web Design - Ein Überblick
- 1. Responsive Web Design ein Überblick Michael Schmid Head Technology michael@amazeelabs.com @schnitzel
- 2. Was ist Responsive WebDesign?
- 3.
- 4.
- 5. der Start 21. September2004 Cameron Adams kommt mit einer Idee für „Resolution dependent layout“
- 6.
- 7.
- 8. der Start • basierendauf Javascript
- 9. der Start • basierendauf Javascript • nicht sehr schnell
- 10. der Start • basierendauf Javascript • nicht sehr schnell • wenig Aufmerksamkeit
- 11. zweiter Anlauf 25. Mai2010 Ethan Marcotte schlägt MediaQueries für Responsive Seiten vor http://www.alistapart.com/articles/responsive-web-design/
- 12. Media Queries CSS2.1 <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
- 13. Media Queries CSS3 <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />
- 15.
- 16. zweiter Anlauf • basierendauf CSS
- 17. zweiter Anlauf • basierendauf CSS • sehr schnell
- 18. zweiter Anlauf • basierendauf CSS • sehr schnell • einfach
- 19. zweiter Anlauf • basierendauf CSS • sehr schnell • einfach • grosse Aufmerksamkeit
- 20. zweiter Anlauf • basierendauf CSS • sehr schnell • einfach • grosse Aufmerksamkeit • kein IE 6-8 Support
- 21. zweiter Anlauf • basierendauf CSS • sehr schnell • einfach • grosse Aufmerksamkeit • kein IE 6-8 Support • polyfill „css3-mediaqueries.js“
- 22.
- 23. Kombinationen /* Wide Layout*/ all and (min-width: 1220px)
- 24. Kombinationen /* Wide Layout*/ all and (min-width: 1220px) /* Normal Layout */ all and (min-width: 980px) and (max-width: 1019px)
- 25. 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)
- 26.
- 27. Responsive vs. Adaptive • Responsive fluid layout
- 28. Responsive vs. Adaptive • Responsive fluid layout • Adaptive mehrere fixe layouts
- 29. Responsive vs. Adaptive • Responsive fluid layout • Adaptive mehrere fixe layouts • Hybrid Kombination von beiden
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. Responsive Web Design beeinflusst:
- 40. Responsive Web Design beeinflusst: • Designer
- 41. Responsive Web Design beeinflusst: • Designer • Themer
- 42. Responsive Web Design beeinflusst: • Designer • Themer • Projektleiter
- 43. Responsive Web Design beeinflusst: • Designer • Themer • Projektleiter • Tester
- 44. Responsive Web Design beeinflusst: • Designer • Themer • Projektleiter • Tester • Kunden
- 45.
- 46. Breakpoints • Was istder wichtiste Inhalt?
- 47. Breakpoints • Was istder wichtiste Inhalt? • Was können wir weglassen?
- 48. Breakpoints • Was istder wichtiste Inhalt? • Was können wir weglassen? • Wireframes, Papier, Whiteboard
- 49. Breakpoints • Was istder wichtiste Inhalt? • Was können wir weglassen? • Wireframes, Papier, Whiteboard • Sub-Breakpoints?
- 51.
- 52. Mobile First • vomKleinsten zum Grössten
- 53. Mobile First • vomKleinsten zum Grössten • Content First
- 54. Mobile First • vomKleinsten zum Grössten • Content First • schwierig mit Kunden
- 55. the grid isyour friend
- 56. the grid isyour friend • mit Grids designen
- 57. the grid isyour friend • mit Grids designen • 1 Tag mit Grids verbringen spart 1 Woche mit Theming
- 58. the grid isyour friend • mit Grids designen • 1 Tag mit Grids verbringen spart 1 Woche mit Theming • Gridberechnung http://grids.heroku.com
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 73. Designe nicht jedeSeite
- 74. Designe nicht jedeSeite • Nur die wichtigsten Seiten
- 75. Designe nicht jedeSeite • Nur die wichtigsten Seiten • Mehr Responsive Layouts
- 76. Designe nicht jedeSeite • Nur die wichtigsten Seiten • Mehr Responsive Layouts
- 77. Designe nicht jedeSeite • Nur die wichtigsten Seiten • Mehr Responsive Layouts • Designe spezielle Dinge:
- 78. Designe nicht jedeSeite • Nur die wichtigsten Seiten • Mehr Responsive Layouts • Designe spezielle Dinge: • grössere Touch Bereiche
- 83.
- 84.
- 85.
- 86.
- 87. Testen • Browser • Responsinator.com •Adobe Shadow
- 88. Testen • Browser • Responsinator.com •Adobe Shadow • Browserstack
- 89. Testen • Browser • Responsinator.com •Adobe Shadow • Browserstack
- 90. Testen • Browser • Responsinator.com •Adobe Shadow • Browserstack • Xcode (iOS Simulator)
- 91. Testen • Browser • Responsinator.com •Adobe Shadow • Browserstack • Xcode (iOS Simulator) • Android Emulator
- 92.
- 93.
- 94.
- 95. Responsive Images • UngelöstesProblem • Aktuell nur mit JavaScript lösbar
- 96. Responsive Images • UngelöstesProblem • Aktuell nur mit JavaScript lösbar • Mehrere Bilder für verschiedene Layouts
- 97. Responsive Images • UngelöstesProblem • Aktuell nur mit JavaScript lösbar • Mehrere Bilder für verschiedene Layouts
- 98. Responsive Images • UngelöstesProblem • Aktuell nur mit JavaScript lösbar • Mehrere Bilder für verschiedene Layouts • HighDPI Geräte wie iPhone 4S brauchen grössere Auflösungen
- 99. Responsive vs. Native
- 100.
- 101.
- 102. Responsive vs. Native Responsive • viel weniger Maintenance
- 103. Responsive vs. Native Responsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet
- 104. Responsive vs. Native Responsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet • kein Hardware Zugang (Photo, Kompass, etc.)
- 105. Responsive vs. Native Responsive • viel weniger Maintenance • HomeScreen Apps noch nicht verbreitet • kein Hardware Zugang (Photo, Kompass, etc.) • Keine Push Notification
- 106. „brauche ich eineMobile fähige Webseite?“
- 107. vor nicht allzulanger Zeit:
- 108. vor nicht allzulanger Zeit: „braucht jede Firma ihre eigene Webseite?“
- 109.
- 110. Zukunft? • Mobiler Trafficwächst rasant
- 111. Zukunft? • Mobiler Trafficwächst rasant • Faktor 26x bis 2015
- 112. Zukunft? • Mobiler Trafficwächst rasant • Faktor 26x bis 2015 • Aktuell 6500 verschiedene webfähige Geräte
- 113.
- 114.
- 115. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc.
- 116. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc. • Weitere Media Queries
- 117. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc. • Weitere Media Queries • color
- 118. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc. • Weitere Media Queries • color • monochrome
- 119. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc. • Weitere Media Queries • color • monochrome • scan (TV progressive | interlace)
- 120. Zukunft • Immer bessereUnterstützung von Frameworks, CMS, etc. • Weitere Media Queries • color • monochrome • scan (TV progressive | interlace) • grid (textbasiert)
- 121.
- 122. noch mehr Zukunft •Media Queries für
- 123. noch mehr Zukunft •Media Queries für • Batteriestand?
- 124. noch mehr Zukunft •Media Queries für • Batteriestand? • Internet Geschwindigkeit?
- 125. noch mehr Zukunft •Media Queries für • Batteriestand? • Internet Geschwindigkeit? • Umgebungslicht?
- 126. dankeschön Michael Schmid Head Technology michael@amazeelabs.com @schnitzel
Hinweis der Redaktion
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n
- #87 \n
- #88 \n
- #89 \n
- #90 \n
- #91 \n
- #92 \n
- #93 \n
- #94 \n
- #95 \n
- #96 \n
- #97 \n
- #98 \n
- #99 \n
- #100 \n
- #101 \n
- #102 \n
- #103 \n
- #104 \n
- #105 \n