電子雑誌のためのWeb Adaptive Layout

2. Web Adaptive Layout Youji Sakai

3. profile YOUJI SAKAI Instructional Designer

4. community http://www.facebook.com/eBookStrategy http://www.facebook.com/TheFutureDesign

5. Agenda

6. Web Adaptive Layout Web for All, Web on Everything Webzine

7. Web Adaptive Layout Web Adaptive Layout

8. Web Adaptive Layout Future

9. Web for All, Web on Everything

12. Web for All, Web on Everything SMARTPHONE OPTIMIZATIONS

13. Web for All, Web on Everything TABLET OPTIMIZATIONS

15. Web for All, Web on Everything Ethan Marcotte “Fluid Grids, Fluid Images” A Book Apart Responsive Web Design http://www.abookapart.com/products/responsive-web-design

16. Web for All, Web on Everything A List Apart Fluid Grids http://www.alistapart.com/articles/ﬂuidgrids/

17. Web for All, Web on Everything “Fluid Grids”

20. Web for All, Web on Everything DEMONSTRATION

21. Web for All, Web on Everything Jeffrey Zeldman “mobile, responsive, and adaptive” The Medium Comes of Age Jeffrey Zeldman's keynote talk from DIBI Conference 2011. http://vimeo.com/27769380

24. Web for All, Web on Everything Buy Once, Read Everywhere.

25. Web for All, Web on Everything Kindle Editions with Audio/Video http://www.amazon.com/b?ie=UTF8&node=2248263011 Kindle for iPad, Kindle for iPhone

28. Web for All, Web on Everything Mobile Safari Chrome Lite SMART DEVICE DESKTOP

29. Web for All, Web on Everything Mobile Safari Chrome Lite SMART DEVICE

30. Web for All, Web on Everything Chrome Lite Mobile Safari

31. Web for All, Web on Everything IE9 Chrome Lite Mobile Safari

32. Webzine

33. Webzine

34. Webzine The New Yorker http://www.newyorker.com/ WIRED for iPad

35. Webzine The New Yorker http://www.newyorker.com/

36. Webzine The New Yorker http://www.newyorker.com/

37. Webzine The New Yorker http://www.newyorker.com/ contents

38. Webzine New York Magazine http://nymag.com/

39. Webzine New York Magazine http://nymag.com/ contents

42. Webzine WIRED for iPad

46. Webzine

47. Webzine contents New York Magazine http://nymag.com/

49. Webzine

50. Webzine

51. Webzine HTML5 based Magazine treesaver http://treesaver.net/

52. Webzine

53. Webzine

54. Webzine treesaver

55. Webzine

56. Webzine The Innovation Issue Think Quarterly http://www.thinkwithgoogle.com/quarterly/innovation by

57. Webzine

58. Webzine

59. Webzine

60. Webzine

61. Webzine Grid layout

62. Webzine PC smartphone

63. Webzine PC smartphone

64. Webzine Website Apps WebApps

65. Webzine Kindle Edition EPUB Mobi PDF Apps WebApps eMagazine Website

66. Webzine Technology

67. Webzine

68. Webzine Luke Wroblewski “Mobile-ﬁrst” Mobile First - 5/27/2010 http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU

69. Webzine Luke Wroblewski “content ﬁrst, navigation second” Designing Mobile Web Experiences http://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/

70. Webzine “Content Strategy”

71. Webzine Kristina Halvorson “Content Strategy” Erin Kissane

72. Web Adaptive Layout

86. Web Adaptive Layout Douglas Bowman “Throwing Tables Out the Window”

87. Web Adaptive Layout Jeremy Keith “ There Is No Mobile Web” There Is No Mobile Web PDF http://adactio.com/extras/slides/thereisnomobileweb.pdf

88. Web Adaptive Layout one web ﬂexible

89. Web Adaptive Layout one web ﬂexible

92. Web Adaptive Layout grid-columns grid-rows

93. Web Adaptive Layout grid-column grid-row grid-column-span grid-row-span

94. Web Adaptive Layout DEMONSTRATION

95. Web Adaptive Layout <div id="container"> <header> <h1>The Future of Design</h1> <h2>Contact Us monkeyish studio production</h2> </header> <nav> <h3>Contents</h3> <ul> <li>Facebook</li> <li>Twitter</li> <li>YouTube</li> <li>Ustream</li> </ul> </nav> <article> <h3>The Future of Design 2012</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <section> <h3>Column1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </section> <section> <h3>Column2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </section> </article> <aside> <h3>Supplementation</h3> <section> <h3>Column3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </section> </aside> <footer> <p>Copyright © 2012 monkeyish studio</p> </footer> </div>

102. Web Adaptive Layout #container { width: 90%; margin: 0 5%; display: -ms-grid; -ms-grid-columns: 12% 64% 24%; -ms-grid-rows: 1fr 1fr 1fr; }

104. Web Adaptive Layout header { aside { -ms-grid-column: 1; -ms-grid-column: 3; -ms-grid-row: 1; -ms-grid-row: 2; -ms-grid-column-span: 3; } } footer { nav { -ms-grid-column: 1; -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-row: 2; -ms-grid-column-span: 3; } } article { -ms-grid-column: 2; -ms-grid-row: 2; }

106. Web Adaptive Layout column:1; row:1; column-span:3; column:3; column:2; row:2; row:2;

108. Web Adaptive Layout #container { -ms-grid-columns: 130px 64% 1fr; }

109. Web Adaptive Layout 130px 64%

113. Web Adaptive Layout #container { width: 90%; min-width:840px; }

120. Web Adaptive Layout nav { -ms-grid-column: 1; -ms-grid-row: 2; } article { -ms-grid-column: 2; -ms-grid-row: 2; }

121. Web Adaptive Layout nav { nav { -ms-grid-column: 1; -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-row: 2; } } article { article { -ms-grid-column: 2; -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row: 2; } }

122. Web Adaptive Layout column:2; row:2;

123. Web Adaptive Layout column:1; row:2;

128. Web Adaptive Layout column:1; row:1; column-span:3;

130. Web Adaptive Layout column:2; row:1; column-span:2;

131. Web Adaptive Layout column:2; row:1; column-span:2; column:1; row:2;

132. Web Adaptive Layout column:2; row:1; column-span:2; column:1; row:1; column-row:2;

136. Web Adaptive Layout <nav role="navigation"> <h3>Navigation</h3> <ol> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">YouTube</a></li> <li><a href="#">Ustream</a></li> <li><a href="#">Google+</a></li> </ol> </nav>

141. Web Adaptive Layout @media screen and (min-width: 35em) { body { display: -ms-box; display: box; box-orient: vertical; box-direction: reverse; } [role="navigation"] ol { display: box; box-orient: horizontal; box-direction: normal; } [role="navigation"] li { box-ﬂex: 1; } }

162. Web Adaptive Layout column-count column-gap, column-rule column-span break-before, break-after

165. Web Adaptive Layout .multicol { column-count:2; }

167. Web Adaptive Layout @media screen and (max-width:940px) { .multicol { column-count:1; } }

170. Web Adaptive Layout .multicol { column-count:3; column-gap:2em; column-rule:solid 1px #999; }

174. Web Adaptive Layout Positioned Floats http://www.interoperabilitybridges.com/css3-ﬂoats/OriginalSubmition.html

186. Web Adaptive Layout min-width, max-width min-device-width max-device-width

192. Web Adaptive Layout http://mediaqueri.es/

193. Web Adaptive Layout http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

194. Future

197. Future

198. Future Web for All, Web on Everything

199. Thank you for your attention.

200. community h t t p : / / w w w. f a c e b o o k . c o m / e B o o k S t r a t e g y

電子雑誌のためのWeb Adaptive Layout

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (11)

Similaire à 電子雑誌のためのWeb Adaptive Layout

Similaire à 電子雑誌のためのWeb Adaptive Layout (20)

Plus de Youji Sakai

Plus de Youji Sakai (13)

Dernier

Dernier (20)

電子雑誌のためのWeb Adaptive Layout