Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Magazine-likelayoutsfor any screen with  CSS Regions
This talk is about   building     digital publications        with    rich layoutsthat adapt to   multiple screens   by do...
without breaking     the content
I’m Mihnea Ovidenie  mihnea@adobe.com  @omihnea  WebKit  CSS Regions  CSS Exclusions  CSS Shaders
TraditionalPrint Publishing
Paperfixed dimensionsone orientationlow interactivity
Newspaperscontent structuremulti-columnlayout
Magazinesrich contentpolished presentationoptimal column width
publishing is    going digital
smartphones               tabletsmobiledevices netbooks
text              digitalvideo        content                     search       interaction
readingexperience               socialimmersive   integration
authoring for digital         is difficult
Multiple devices
Today  each page = one imageThe good       The bad  pixel       not handy perfect      no search             no text reflow
Tomorrow?HTML + CSS + JavaScript
magazine-like layout is difficult using the Web stack
Print          HTMLpaginated   continuous flowfit         browser scroll            overflow
Hacksmix semantic & layout markupjavascript for layout is slow
FutureDigital Publishing
Content once, layouteverywherestandard CSSbrowsers “magically” layout
CSS Regionsexpressive Websophisticated layoutscollect & distribute content
named            flowskeyconcepts           regions
Named flowscollect document contentmultiple named flows
Into theGreat Wide OpenOur journey began long before weactually took to the road. Routes andschedules had to be figured an...
Into theGreat Wide OpenOur journey began long before weactually took to the road. Routes andschedules had to be figured an...
<h1>Into the                                       Into the Great Wide Open                                        </h1>Gr...
Regionsany size, any positionconsume flow content
h1 {                                         flow-into: title                                        }                    ...
Demo
collect contentcreate layoutdistribute contentin regions
adaptive layoutwith CSS Regions
CSS Regions     &Media Queries
Media Queriesorientation: portrait | landscapemin-width: 320pxmax-width: 1024px
Content once, layouteverywheredo not break contentdetect constraintstailor regions layout
Demo
#region1, #region2, #region3 {                                flow-from: article;                                width: 30...
Advanced CSS Regionsjavascript interactionregion stylingcombine with CSS Exclusions
CSS Regions       Evolution
Yesterday (2011)Open standard      Browsers Adobe               WebKit                   (prototype)
TodayOpen standard   Browsers Adobe           WebKit Microsoft       Chrome                 IE10
TomorrowOpen standard   Browsers Adobe           WebKit Microsoft       Chrome                 IE10                 Firefo...
not a mechanism to create boxes
responsiveCSS           designRegions           declarativemodern       layoutbrowsers
html.adobe.commihnea@adobe.com   @omihnea
Attributions    Icons from the Noun project    Cell Phone            iPhone              iPad            Smartphone       ...
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Magazine-like layouts for any screen with CSSRegions
Upcoming SlideShare
Loading in …5
×

Magazine-like layouts for any screen with CSSRegions

7,971 views

Published on

Published in: Technology
  • Be the first to comment

Magazine-like layouts for any screen with CSSRegions

  1. Magazine-likelayoutsfor any screen with CSS Regions
  2. This talk is about building digital publications with rich layoutsthat adapt to multiple screens by doing less work
  3. without breaking the content
  4. I’m Mihnea Ovidenie mihnea@adobe.com @omihnea WebKit CSS Regions CSS Exclusions CSS Shaders
  5. TraditionalPrint Publishing
  6. Paperfixed dimensionsone orientationlow interactivity
  7. Newspaperscontent structuremulti-columnlayout
  8. Magazinesrich contentpolished presentationoptimal column width
  9. publishing is going digital
  10. smartphones tabletsmobiledevices netbooks
  11. text digitalvideo content search interaction
  12. readingexperience socialimmersive integration
  13. authoring for digital is difficult
  14. Multiple devices
  15. Today each page = one imageThe good The bad pixel not handy perfect no search no text reflow
  16. Tomorrow?HTML + CSS + JavaScript
  17. magazine-like layout is difficult using the Web stack
  18. Print HTMLpaginated continuous flowfit browser scroll overflow
  19. Hacksmix semantic & layout markupjavascript for layout is slow
  20. FutureDigital Publishing
  21. Content once, layouteverywherestandard CSSbrowsers “magically” layout
  22. CSS Regionsexpressive Websophisticated layoutscollect & distribute content
  23. named flowskeyconcepts regions
  24. Named flowscollect document contentmultiple named flows
  25. Into theGreat Wide OpenOur journey began long before weactually took to the road. Routes andschedules had to be figured andsponsors found....On the lost art of the greatAmerican road trip.
  26. Into theGreat Wide OpenOur journey began long before weactually took to the road. Routes andschedules had to be figured andsponsors found....On the lost art of the greatAmerican road trip.
  27. <h1>Into the Into the Great Wide Open </h1>Great Wide Open <img src=“road.jpg” /> <p> Our journey began long before we actually took to the road. Routes and schedules had to be figured andOur journey began long before we sponsors found.actually took to the road. Routes and </p>schedules had to be figured andsponsors found. <blockquote> ...On the lost art of the great...On the lost art of the great American road tripAmerican road trip. </blockquote>
  28. Regionsany size, any positionconsume flow content
  29. h1 { flow-into: title } p{ flow-into: article }flow-from: title blockquote { flow-into: quote } flow-from: article flow-from: article flow-from: quote
  30. Demo
  31. collect contentcreate layoutdistribute contentin regions
  32. adaptive layoutwith CSS Regions
  33. CSS Regions &Media Queries
  34. Media Queriesorientation: portrait | landscapemin-width: 320pxmax-width: 1024px
  35. Content once, layouteverywheredo not break contentdetect constraintstailor regions layout
  36. Demo
  37. #region1, #region2, #region3 { flow-from: article; width: 30%; } @media screen and (orientation: portrait) {<div id=“region1”></div><div id=“region2”></div> #region1, #region2 {<div id=“region3”></div> width: 50% } #region3 { display: none } }
  38. Advanced CSS Regionsjavascript interactionregion stylingcombine with CSS Exclusions
  39. CSS Regions Evolution
  40. Yesterday (2011)Open standard Browsers Adobe WebKit (prototype)
  41. TodayOpen standard Browsers Adobe WebKit Microsoft Chrome IE10
  42. TomorrowOpen standard Browsers Adobe WebKit Microsoft Chrome IE10 Firefox? Safari? Opera?
  43. not a mechanism to create boxes
  44. responsiveCSS designRegions declarativemodern layoutbrowsers
  45. html.adobe.commihnea@adobe.com @omihnea
  46. Attributions Icons from the Noun project Cell Phone iPhone iPad Smartphone Computer Andrew The Noun project The Noun project George The Noun projectForrester, from The Agpoon, from The Noun project Noun project Browser User Yellow, from The The Noun project Noun project

×