電子雑誌のためのWeb Adaptive Layout
Upcoming SlideShare
Loading in...5
×
 

電子雑誌のためのWeb Adaptive Layout

on

  • 2,290 views

2011年9月17日(土) 

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

Statistics

Views

Total Views
2,290
Views on SlideShare
2,268
Embed Views
22

Actions

Likes
11
Downloads
31
Comments
0

3 Embeds 22

http://localhost 17
https://twitter.com 4
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

電子雑誌のためのWeb Adaptive Layout 電子雑誌のためのWeb Adaptive Layout Presentation Transcript

  • 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” A Book Apart Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
  • 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”The Medium Comes of AgeJeffrey Zeldmans keynote talk from DIBI Conference 2011. http://vimeo.com/27769380
  • 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 with Audio/Video http://www.amazon.com/b?ie=UTF8&node=2248263011Kindle for iPad, Kindle for iPhone
  • 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 PDF Apps WebApps eMagazineWebsite
  • 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, navigation second”Designing Mobile Web Experienceshttp://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/
  • 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 PDF http://adactio.com/extras/slides/thereisnomobileweb.pdf
  • 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> <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>
  • 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>
  • 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>
  • 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>
  • 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-rows: 1fr 1fr 1fr;}
  • Web Adaptive Layout
  • 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;}
  • Web Adaptive Layout
  • Web Adaptive Layoutcolumn:1; row:1; column-span:3; column:3; column:2; row: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: 2;} }article { article {-ms-grid-column: 2; -ms-grid-column: 1;-ms-grid-row: 2; -ms-grid-row: 2;} }
  • 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:1;column-row:2;
  • 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="#">Twitter</a></li> <li><a href="#">YouTube</a></li> <li><a href="#">Ustream</a></li> <li><a href="#">Google+</a></li> </ol></nav>
  • 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-orient: vertical; box-direction: reverse; } [role="navigation"] ol { display: box; box-orient: horizontal; box-direction: normal; } [role="navigation"] li { box-flex: 1; } }
  • 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