Web Adaptive Layout         Youji Sakai
profile     YOUJI SAKAIInstructional Designer
community http://www.facebook.com/eBookStrategyhttp://www.facebook.com/TheFutureDesign
Agenda
Web Adaptive LayoutWeb for All, Web on EverythingWebzine
Web Adaptive LayoutWeb Adaptive Layout
Web Adaptive LayoutFuture
Web for All,Web on Everything
Web for All, Web on Everything
Web for All, Web on Everything
Web for All, Web on Everything    SMARTPHONE OPTIMIZATIONS
Web for All, Web on Everything       TABLET OPTIMIZATIONS
Web for All, Web on Everything
Web for All, Web on Everything             Ethan Marcotte              “Fluid Grids, Fluid Images”                        ...
Web for All, Web on Everything                    A List Apart      Fluid Gridshttp://www.alistapart.com/articles/fluidgrids/
Web for All, Web on Everything                     “Fluid Grids”
Web for All, Web on Everything                     “Fluid Grids”
Web for All, Web on Everything                     “Fluid Grids”
Web for All, Web on EverythingDEMONSTRATION
Web for All, Web on Everything                     Jeffrey Zeldman                     “mobile, responsive, and adaptive”T...
Web for All, Web on Everything
Web for All, Web on Everything
Web for All, Web on Everything     Buy Once, Read Everywhere.
Web for All, Web on Everything                                     Kindle Editions                                     wit...
Web for All, Web on Everything
Web for All, Web on Everything
Web for All, Web on Everything         Mobile Safari   Chrome Lite      SMART DEVICE         DESKTOP
Web for All, Web on Everything         Mobile Safari   Chrome Lite      SMART DEVICE
Web for All, Web on Everything  Chrome Lite      Mobile Safari
Web for All, Web on Everything   IE9  Chrome Lite      Mobile Safari
Webzine
Webzine
WebzineThe New Yorkerhttp://www.newyorker.com/      WIRED for iPad
Webzine          The New Yorker          http://www.newyorker.com/
Webzine          The New Yorker          http://www.newyorker.com/
Webzine                     The New Yorker                     http://www.newyorker.com/contents
Webzine          New York Magazine          http://nymag.com/
Webzine                     New York Magazine                     http://nymag.com/contents
Webzine          New York Magazine          http://nymag.com/
Webzine          New York Magazine          http://nymag.com/
Webzine          WIRED for iPad
Webzine          WIRED for iPad
Webzine          WIRED for iPad
Webzine          WIRED for iPad
Webzine
Webzinecontents                     New York Magazine                     http://nymag.com/
Webzine          WIRED for iPad
Webzine
Webzine
Webzine      HTML5      based      Magazine    treesaver    http://treesaver.net/
Webzine
Webzine
Webzine  treesaver
Webzine
Webzine     The Innovation IssueThink Quarterly http://www.thinkwithgoogle.com/quarterly/innovation           by
Webzine
Webzine
Webzine
Webzine
Webzine     Grid layout
WebzinePC             smartphone
WebzinePC             smartphone
WebzineWebsite      Apps   WebApps
Webzine                           Kindle Edition                               EPUB                               Mobi    ...
WebzineTechnology
Webzine
Webzine   Luke Wroblewski   “Mobile-first”       Mobile First - 5/27/2010http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU
Webzine                                        Luke Wroblewski                                        “content first, navig...
Webzine“Content Strategy”
WebzineKristina Halvorson “Content Strategy”           Erin Kissane
Web Adaptive  Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutDouglas Bowman“Throwing Tables Out the Window”
Web Adaptive LayoutJeremy Keith“ There Is No Mobile Web”                                      There Is No Mobile Web      ...
Web Adaptive Layoutone web flexible
Web Adaptive Layoutone web flexible
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout grid-columns   grid-rows
Web Adaptive Layout   grid-column     grid-rowgrid-column-span  grid-row-span
Web Adaptive LayoutDEMONSTRATION
Web Adaptive Layout           <div id="container">           <header>           <h1>The Future of Design</h1>           <h...
Web Adaptive Layout           <div id="container">           <header>           <h1>The Future of Design</h1>           <h...
Web Adaptive Layout           <div id="container">           <header>           <h1>The Future of Design</h1>           <h...
Web Adaptive Layout           <div id="container">           <header>           <h1>The Future of Design</h1>           <h...
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout#container {  width: 90%;  margin: 0 5%;  display: -ms-grid;  -ms-grid-columns: 12% 64% 24%;  -ms-grid-...
Web Adaptive Layout
Web Adaptive Layoutheader {                     aside {  -ms-grid-column: 1;          -ms-grid-column: 3;  -ms-grid-row: 1...
Web Adaptive Layout
Web Adaptive Layoutcolumn:1; row:1; column-span:3;                         column:3;     column:2; row:2;                 ...
Web Adaptive Layout
Web Adaptive Layout#container {  -ms-grid-columns: 130px 64% 1fr;}
Web Adaptive Layout130px         64%
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout#container {  width: 90%;  min-width:840px;}
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layoutnav {-ms-grid-column: 1;-ms-grid-row: 2;}article {-ms-grid-column: 2;-ms-grid-row: 2;}
Web Adaptive Layoutnav {                 nav {-ms-grid-column: 1;   -ms-grid-column: 2;-ms-grid-row: 2;      -ms-grid-row:...
Web Adaptive Layout  column:2; row:2;
Web Adaptive Layoutcolumn:1; row:2;
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layoutcolumn:1; row:1; column-span:3;
Web Adaptive Layout
Web Adaptive Layout                 column:2;                   row:1;              column-span:2;
Web Adaptive Layout                 column:2;                   row:1;              column-span:2;column:1;  row:2;
Web Adaptive Layout                   column:2;                     row:1;                column-span:2;  column:1;    row...
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout<nav role="navigation"> <h3>Navigation</h3> <ol>   <li><a href="#">Facebook</a></li>   <li><a href="#">...
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout@media screen and (min-width: 35em) {   body {        display: -ms-box;        display: box;        box...
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout     column-countcolumn-gap, column-rule     column-spanbreak-before, break-after
Web Adaptive LayoutDEMONSTRATION
Web Adaptive Layout
Web Adaptive Layout  .multicol {    column-count:2;  }
Web Adaptive Layout
Web Adaptive Layout@media screen and (max-width:940px) {   .multicol {         column-count:1;         } }
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout.multicol {   column-count:3;   column-gap:2em;   column-rule:solid 1px #999; }
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout  Positioned   Floatshttp://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutDEMONSTRATION
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layoutmin-width, max-width  min-device-width max-device-width
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout      http://mediaqueri.es/
Web Adaptive Layouthttp://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
Future
Web Adaptive Layout
Web Adaptive Layout
Future
Future  Web for All,Web on Everything
Thank you for your attention.
communityh 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
Upcoming SlideShare
Loading in …5
×

電子雑誌のためのWeb Adaptive Layout

2,353 views
2,262 views

Published on

2011年9月17日(土) 
CSS Nite LP, Disk 17
「HTML5による電子書籍」
ベルサール神保町 ルーム1-2

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,353
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
33
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

電子雑誌のためのWeb Adaptive Layout

  1. 1. Web Adaptive Layout Youji Sakai
  2. 2. profile YOUJI SAKAIInstructional Designer
  3. 3. community http://www.facebook.com/eBookStrategyhttp://www.facebook.com/TheFutureDesign
  4. 4. Agenda
  5. 5. Web Adaptive LayoutWeb for All, Web on EverythingWebzine
  6. 6. Web Adaptive LayoutWeb Adaptive Layout
  7. 7. Web Adaptive LayoutFuture
  8. 8. Web for All,Web on Everything
  9. 9. Web for All, Web on Everything
  10. 10. Web for All, Web on Everything
  11. 11. Web for All, Web on Everything SMARTPHONE OPTIMIZATIONS
  12. 12. Web for All, Web on Everything TABLET OPTIMIZATIONS
  13. 13. Web for All, Web on Everything
  14. 14. Web for All, Web on Everything Ethan Marcotte “Fluid Grids, Fluid Images” A Book Apart Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
  15. 15. Web for All, Web on Everything A List Apart Fluid Gridshttp://www.alistapart.com/articles/fluidgrids/
  16. 16. Web for All, Web on Everything “Fluid Grids”
  17. 17. Web for All, Web on Everything “Fluid Grids”
  18. 18. Web for All, Web on Everything “Fluid Grids”
  19. 19. Web for All, Web on EverythingDEMONSTRATION
  20. 20. Web for All, Web on Everything Jeffrey Zeldman “mobile, responsive, and adaptive”The Medium Comes of AgeJeffrey Zeldmans keynote talk from DIBI Conference 2011. http://vimeo.com/27769380
  21. 21. Web for All, Web on Everything
  22. 22. Web for All, Web on Everything
  23. 23. Web for All, Web on Everything Buy Once, Read Everywhere.
  24. 24. Web for All, Web on Everything Kindle Editions with Audio/Video http://www.amazon.com/b?ie=UTF8&node=2248263011Kindle for iPad, Kindle for iPhone
  25. 25. Web for All, Web on Everything
  26. 26. Web for All, Web on Everything
  27. 27. Web for All, Web on Everything Mobile Safari Chrome Lite SMART DEVICE DESKTOP
  28. 28. Web for All, Web on Everything Mobile Safari Chrome Lite SMART DEVICE
  29. 29. Web for All, Web on Everything Chrome Lite Mobile Safari
  30. 30. Web for All, Web on Everything IE9 Chrome Lite Mobile Safari
  31. 31. Webzine
  32. 32. Webzine
  33. 33. WebzineThe New Yorkerhttp://www.newyorker.com/ WIRED for iPad
  34. 34. Webzine The New Yorker http://www.newyorker.com/
  35. 35. Webzine The New Yorker http://www.newyorker.com/
  36. 36. Webzine The New Yorker http://www.newyorker.com/contents
  37. 37. Webzine New York Magazine http://nymag.com/
  38. 38. Webzine New York Magazine http://nymag.com/contents
  39. 39. Webzine New York Magazine http://nymag.com/
  40. 40. Webzine New York Magazine http://nymag.com/
  41. 41. Webzine WIRED for iPad
  42. 42. Webzine WIRED for iPad
  43. 43. Webzine WIRED for iPad
  44. 44. Webzine WIRED for iPad
  45. 45. Webzine
  46. 46. Webzinecontents New York Magazine http://nymag.com/
  47. 47. Webzine WIRED for iPad
  48. 48. Webzine
  49. 49. Webzine
  50. 50. Webzine HTML5 based Magazine treesaver http://treesaver.net/
  51. 51. Webzine
  52. 52. Webzine
  53. 53. Webzine treesaver
  54. 54. Webzine
  55. 55. Webzine The Innovation IssueThink Quarterly http://www.thinkwithgoogle.com/quarterly/innovation by
  56. 56. Webzine
  57. 57. Webzine
  58. 58. Webzine
  59. 59. Webzine
  60. 60. Webzine Grid layout
  61. 61. WebzinePC smartphone
  62. 62. WebzinePC smartphone
  63. 63. WebzineWebsite Apps WebApps
  64. 64. Webzine Kindle Edition EPUB Mobi PDF Apps WebApps eMagazineWebsite
  65. 65. WebzineTechnology
  66. 66. Webzine
  67. 67. Webzine Luke Wroblewski “Mobile-first” Mobile First - 5/27/2010http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU
  68. 68. Webzine Luke Wroblewski “content first, navigation second”Designing Mobile Web Experienceshttp://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/
  69. 69. Webzine“Content Strategy”
  70. 70. WebzineKristina Halvorson “Content Strategy” Erin Kissane
  71. 71. Web Adaptive Layout
  72. 72. Web Adaptive Layout
  73. 73. Web Adaptive Layout
  74. 74. Web Adaptive Layout
  75. 75. Web Adaptive Layout
  76. 76. Web Adaptive Layout
  77. 77. Web Adaptive Layout
  78. 78. Web Adaptive Layout
  79. 79. Web Adaptive Layout
  80. 80. Web Adaptive Layout
  81. 81. Web Adaptive Layout
  82. 82. Web Adaptive Layout
  83. 83. Web Adaptive Layout
  84. 84. Web Adaptive Layout
  85. 85. Web Adaptive LayoutDouglas Bowman“Throwing Tables Out the Window”
  86. 86. Web Adaptive LayoutJeremy Keith“ There Is No Mobile Web” There Is No Mobile Web PDF http://adactio.com/extras/slides/thereisnomobileweb.pdf
  87. 87. Web Adaptive Layoutone web flexible
  88. 88. Web Adaptive Layoutone web flexible
  89. 89. Web Adaptive Layout
  90. 90. Web Adaptive Layout
  91. 91. Web Adaptive Layout grid-columns grid-rows
  92. 92. Web Adaptive Layout grid-column grid-rowgrid-column-span grid-row-span
  93. 93. Web Adaptive LayoutDEMONSTRATION
  94. 94. 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>
  95. 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>
  96. 96. 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>
  97. 97. 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>
  98. 98. Web Adaptive Layout
  99. 99. Web Adaptive Layout
  100. 100. Web Adaptive Layout
  101. 101. Web Adaptive Layout#container { width: 90%; margin: 0 5%; display: -ms-grid; -ms-grid-columns: 12% 64% 24%; -ms-grid-rows: 1fr 1fr 1fr;}
  102. 102. Web Adaptive Layout
  103. 103. Web Adaptive Layoutheader { 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;}
  104. 104. Web Adaptive Layout
  105. 105. Web Adaptive Layoutcolumn:1; row:1; column-span:3; column:3; column:2; row:2; row:2;
  106. 106. Web Adaptive Layout
  107. 107. Web Adaptive Layout#container { -ms-grid-columns: 130px 64% 1fr;}
  108. 108. Web Adaptive Layout130px 64%
  109. 109. Web Adaptive Layout
  110. 110. Web Adaptive Layout
  111. 111. Web Adaptive Layout
  112. 112. Web Adaptive Layout#container { width: 90%; min-width:840px;}
  113. 113. Web Adaptive Layout
  114. 114. Web Adaptive Layout
  115. 115. Web Adaptive Layout
  116. 116. Web Adaptive Layout
  117. 117. Web Adaptive Layout
  118. 118. Web Adaptive Layout
  119. 119. Web Adaptive Layoutnav {-ms-grid-column: 1;-ms-grid-row: 2;}article {-ms-grid-column: 2;-ms-grid-row: 2;}
  120. 120. Web Adaptive Layoutnav { 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;} }
  121. 121. Web Adaptive Layout column:2; row:2;
  122. 122. Web Adaptive Layoutcolumn:1; row:2;
  123. 123. Web Adaptive Layout
  124. 124. Web Adaptive Layout
  125. 125. Web Adaptive Layout
  126. 126. Web Adaptive Layout
  127. 127. Web Adaptive Layoutcolumn:1; row:1; column-span:3;
  128. 128. Web Adaptive Layout
  129. 129. Web Adaptive Layout column:2; row:1; column-span:2;
  130. 130. Web Adaptive Layout column:2; row:1; column-span:2;column:1; row:2;
  131. 131. Web Adaptive Layout column:2; row:1; column-span:2; column:1; row:1;column-row:2;
  132. 132. Web Adaptive Layout
  133. 133. Web Adaptive Layout
  134. 134. Web Adaptive Layout
  135. 135. 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>
  136. 136. Web Adaptive Layout
  137. 137. Web Adaptive Layout
  138. 138. Web Adaptive Layout
  139. 139. Web Adaptive Layout
  140. 140. 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-flex: 1; } }
  141. 141. Web Adaptive Layout
  142. 142. Web Adaptive Layout
  143. 143. Web Adaptive Layout
  144. 144. Web Adaptive Layout
  145. 145. Web Adaptive Layout
  146. 146. Web Adaptive Layout
  147. 147. Web Adaptive Layout
  148. 148. Web Adaptive Layout
  149. 149. Web Adaptive Layout
  150. 150. Web Adaptive Layout
  151. 151. Web Adaptive Layout
  152. 152. Web Adaptive Layout
  153. 153. Web Adaptive Layout
  154. 154. Web Adaptive Layout
  155. 155. Web Adaptive Layout
  156. 156. Web Adaptive Layout
  157. 157. Web Adaptive Layout
  158. 158. Web Adaptive Layout
  159. 159. Web Adaptive Layout
  160. 160. Web Adaptive Layout
  161. 161. Web Adaptive Layout column-countcolumn-gap, column-rule column-spanbreak-before, break-after
  162. 162. Web Adaptive LayoutDEMONSTRATION
  163. 163. Web Adaptive Layout
  164. 164. Web Adaptive Layout .multicol { column-count:2; }
  165. 165. Web Adaptive Layout
  166. 166. Web Adaptive Layout@media screen and (max-width:940px) { .multicol { column-count:1; } }
  167. 167. Web Adaptive Layout
  168. 168. Web Adaptive Layout
  169. 169. Web Adaptive Layout.multicol { column-count:3; column-gap:2em; column-rule:solid 1px #999; }
  170. 170. Web Adaptive Layout
  171. 171. Web Adaptive Layout
  172. 172. Web Adaptive Layout
  173. 173. Web Adaptive Layout Positioned Floatshttp://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html
  174. 174. Web Adaptive Layout
  175. 175. Web Adaptive Layout
  176. 176. Web Adaptive Layout
  177. 177. Web Adaptive Layout
  178. 178. Web Adaptive Layout
  179. 179. Web Adaptive LayoutDEMONSTRATION
  180. 180. Web Adaptive Layout
  181. 181. Web Adaptive Layout
  182. 182. Web Adaptive Layout
  183. 183. Web Adaptive Layout
  184. 184. Web Adaptive Layout
  185. 185. Web Adaptive Layoutmin-width, max-width min-device-width max-device-width
  186. 186. Web Adaptive Layout
  187. 187. Web Adaptive Layout
  188. 188. Web Adaptive Layout
  189. 189. Web Adaptive Layout
  190. 190. Web Adaptive Layout
  191. 191. Web Adaptive Layout http://mediaqueri.es/
  192. 192. Web Adaptive Layouthttp://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  193. 193. Future
  194. 194. Web Adaptive Layout
  195. 195. Web Adaptive Layout
  196. 196. Future
  197. 197. Future Web for All,Web on Everything
  198. 198. Thank you for your attention.
  199. 199. communityh 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

×