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

10. Web for All, Web on Everything

11. Web for All, Web on Everything

12. Web for All, Web on Everything
SMARTPHONE OPTIMIZATIONS

13. Web for All, Web on Everything
TABLET OPTIMIZATIONS

14. Web for All, Web on Everything

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/fluidgrids/

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

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

19. 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

22. Web for All, Web on Everything

23. Web for All, Web on Everything

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

26. Web for All, Web on Everything

27. Web for All, Web on Everything

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

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

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

42. Webzine
WIRED for iPad

43. Webzine
WIRED for iPad

44. Webzine
WIRED for iPad

45. Webzine
WIRED for iPad

46. Webzine

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

48. Webzine
WIRED for iPad

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-first”
Mobile First - 5/27/2010
http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU

69. Webzine
Luke Wroblewski
“content first, 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

73. Web Adaptive Layout

74. Web Adaptive Layout

75. Web Adaptive Layout

76. Web Adaptive Layout

77. Web Adaptive Layout

78. Web Adaptive Layout

79. Web Adaptive Layout

80. Web Adaptive Layout

81. Web Adaptive Layout

82. Web Adaptive Layout

83. Web Adaptive Layout

84. Web Adaptive Layout

85. 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 flexible

89. Web Adaptive Layout
one web flexible

90. Web Adaptive Layout

91. Web Adaptive Layout

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>

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. 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. 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>

99. Web Adaptive Layout

100. Web Adaptive Layout

101. Web Adaptive Layout

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;
}

103. Web Adaptive Layout

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;
}

105. Web Adaptive Layout

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

107. Web Adaptive Layout

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

109. Web Adaptive Layout
130px 64%

110. Web Adaptive Layout

111. Web Adaptive Layout

112. Web Adaptive Layout

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

114. Web Adaptive Layout

115. Web Adaptive Layout

116. Web Adaptive Layout

117. Web Adaptive Layout

118. Web Adaptive Layout

119. Web Adaptive Layout

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;

124. Web Adaptive Layout

125. Web Adaptive Layout

126. Web Adaptive Layout

127. Web Adaptive Layout

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

129. Web Adaptive Layout

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;

133. Web Adaptive Layout

134. Web Adaptive Layout

135. Web Adaptive Layout

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>

137. Web Adaptive Layout

138. Web Adaptive Layout

139. Web Adaptive Layout

140. Web Adaptive Layout

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-flex: 1;
}
}

142. Web Adaptive Layout

143. Web Adaptive Layout

144. Web Adaptive Layout

145. Web Adaptive Layout

146. Web Adaptive Layout

147. Web Adaptive Layout

148. Web Adaptive Layout

149. Web Adaptive Layout

150. Web Adaptive Layout

151. Web Adaptive Layout

152. Web Adaptive Layout

153. Web Adaptive Layout

154. Web Adaptive Layout

155. Web Adaptive Layout

156. Web Adaptive Layout

157. Web Adaptive Layout

158. Web Adaptive Layout

159. Web Adaptive Layout

160. Web Adaptive Layout

161. Web Adaptive Layout

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

163. Web Adaptive Layout
DEMONSTRATION

164. Web Adaptive Layout

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

166. Web Adaptive Layout

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

168. Web Adaptive Layout

169. Web Adaptive Layout

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

171. Web Adaptive Layout

172. Web Adaptive Layout

173. Web Adaptive Layout

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

175. Web Adaptive Layout

176. Web Adaptive Layout

177. Web Adaptive Layout

178. Web Adaptive Layout

179. Web Adaptive Layout

180. Web Adaptive Layout
DEMONSTRATION

181. Web Adaptive Layout

182. Web Adaptive Layout

183. Web Adaptive Layout

184. Web Adaptive Layout

185. Web Adaptive Layout

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

187. Web Adaptive Layout

188. Web Adaptive Layout

189. Web Adaptive Layout

190. Web Adaptive Layout

191. Web Adaptive Layout

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

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

194. Future

195. Web Adaptive Layout

196. Web Adaptive Layout

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