Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Magazine-like layouts for any screen with CSSRegions

by mihnea_ovidenie on Jul 07, 2012

3,181 views

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

2 Embeds 2

http://us-w1.rockmelt.com	1
https://twitter.com	1

Statistics

Likes: 10
Downloads: 0
Comments: 0
Embed Views: 2
Views on SlideShare: 3,179
Total Views: 3,181

Good morning and welcome to my session “Magazine-like layout for any screen with CSSRegions”
This talk will be about:CSSRegions, simple and elegant solution for complex layout for digital magazinesWorth counting if you create adigital newspaper on diverse screen with less effortToday I will talk about CSSRegions, a simple yet elegant solution that can be used to build complex layout for digital magazines using HTML. After this talk, you will understand why CSSRegions is a technology worth counting when you want to create a digital newspaper on several different screens with less effort and ..
Without breaking the content.
Mostly on WebKitA few words about myself. I joined Adobe since 2008 and since then I mostly worked on Webkit, the rendering engine behind Chrome and Safari. As you know, Adobe decided to play a first-hand role in HTML5 world, and during this effort I worked on first prototypes for some of the Adobe initiatives, like CSSRegions, CSSExclusions and CSSShaders.Since 2011, I focus on implementing the CSSRegions in WebKit.
Before diving further into css regions concepts, it is helpful to step back for a few moments and take a look at some of the characteristics of traditional print models.
Layout techniques constrained by paperConstant improvementNewspaper and magazinesIn print, the layout techniques are constrained by the medium, the paper, and its characteristics: fixed dimensions, one orientation and low interactivity. When talking about print, i am mainly thinking about newspapers and magazines.
Once a day, low-quality paperArticles to be read quicklyMulticolumn as an effective layout for information (nu are sens de vorbitdespre 2,3 coloanepentrucasintsi 6).In the case of newspapers, typically published once a day on low-quality paper, the articles are designed to be read quickly. As an effective layout, we can identify the multicolumn layout.
Beautiful content with outstanding images, crafted typographyOnce a weekComplex layouts and illustrations -> quide reader attention on pageMultcolumn layout, each column 12-15 words -> minimize eye strain and facilitate readingAs opposed to newspapers, magazines filled another segment of traditional publications: the segment of beautiful content enhanced with outstanding images. Magazines were published weekly on better quality paper using crafted typography. Complex layouts for structuring the information, supported by illustrations and graphs help guide the readers attention across the page.The multi-column layout is present here also. In addition to that, we can see content distributed across arbitrarily positioned block in order to help readers to quickly scan the content for relevant information.The optimal column width, usually 12-15 words per line, is used to minimize eye strain and facilitate reading.
Rich contentmulticolumnHere is a typical magazine layout, exhibiting rich content, optimal column width
Publishing from print to digitalMany reasonsThat was yesterday... but, as we can all testify, publishing is going from print to digital media. The reasons are plenty, but let's remember some of them.
* Devices able to consume digital content (smartphones, tablets, netbooks)First:the sheer increase in number of mobile devices that are able to consume content. When talking about mobile devices, i am thinking of: smartphones, tables, netbooks, laptops.
Digital is superior over printGreater interaction between user and contentContent with audio, video, graphicsUser search contentFollow links in article for more info about the subjectSecond, the digital content offers a far superior reader experience over print content. The level of interaction between the user and the content on a digital device cannot be matched by paper. In order to provide the user with a better understanding, content is augmented with audio, video and graphics. Users can search the digital content and follow links provided in the article to gain more context about the subject.
Outstanding reading experienceSocial integrations makes article, experience sharing easierOn digital devices, the reader experience is outstanding, immersive and last but not the least, we have the social integration: facebook, twitter, google plus. One can share his experience with an article much easier than before.
Digital is the future, authoring for digital is difficult.However, the authoring process for digital media is a difficult journey.
Multiple devicesMultiple screensMultiple form factorsDifferent orientationOne of the main problems is that targeting multiple devices means that we should target multiple screens, multiple form factors and sometimes different orientations.
PublishersAdapt print workflowsPixel perfect, looks niceThe process is difficult, labor intensive, hard to adapt to late minute changesImagesNo searchNo text reflow -> 2 images for the same page on tablets with diff orientationIdeal layout modelAdapt to screensPreserve informationEnhance visual appeal from printTo recap, we are looking for a layout model that can adapt to different screen sizes, that is able to preserve the information continuity and enhance the visual appeal from print.A lot of the publishers today have workflows in which each magazine page is an image. For them, this was the natural extension to the existing print solution, an extension to their existing set of tools. While pixel perfect, this solution has some drawbacks. The process of creating a digital magazine using print-adapted workflows is labor intensive, error prone and hard to adapt to last minute changes.Images are not searchable.Because the text in an image does not reflow, one has to author the same image twice, for each orientation.There must be a better way..
One solution: HTML * present on all mobile devices * HTML + CSS -> flexible presentation model * text, images, audio, video, social availableWhy not use the HTML5 technologies, say combine HTML and CSS and JavaScript for this purpose? HTML is ubiquitous, present almost on all mobile devices. HTML coupled with CSS provides a flexible content and presentation model. And text, images, audio, video, social, are all present in HTML5 stack and ready to use.
Hard to create something diff than 2-3 multicolumns.The sad truth is that complex, fancy layouts using more than 2-3 multicolumns are difficult right now.
Hard to translate print into HTMLPrint: paginated, fit, designer has total control over appearanceHTML: not paginated, one flow. Render from top -> bottom, scrollbars if content does not fit into viewport.CSS overflow: limited, scrollbars, hidden, overlapping content.It is hard to transpose the print concepts into HTML concepts. In print, content is paginated and fit in the page, the designer has total control over the appearance.In contrast, HTML content within a document is not paginated, but has typically only one flow - the default flow. It renders linearly from the top of the web page to the bottom, triggering vertical or horizontal scrolling if the browser cannot fit the content into the viewport.At the same time, CSS provides a limited set of options for dealing with content that overflows a container. A scrollbar can be shown on the container, the overflowing content can be hidden or it can be visible but it will overlap the neighboring content.
To achieve complex layouts, hacks:Mix content with presentation style -> difficult content reuseJs for layout is slow on devicesUsually, Web developers resort to all kind of hacks to create a complex layout, mixing the semantic content with the markup content. Thus making content reuse very difficult. And, JavaScript for layout is slow especially on mobile devices.
How would we like a solution for the future digital publications look like?
For me, a nice solution would be to create the article content once, to use some evolved, standard CSS rules and the browser would be smart enough to create an outstanding layout.
CSSRegions appeared because Adobe wanted to help publishers.Something standard, based on open Web.CSSRegions: instead of allowing the browser to display the content the normal way, we would group this content, take it out of the document normal flow and show it in special areas of HTML document, the regions.Adobe is a company recognized for media excellence and we decided that we should help the publishers in their transition to digital landscape. Rather than inventing something proprietary, we decided to create something in the open, based on Web standards.The main idea for CSSRegions was: what if instead of allowing the browser to display the content the normal way, we would group this content, take it out of the document normal flow and show it in special areas of HTML document, the regions.
2 key concepts to understand: named flows and regions.CSSRegions proposal augments the functionality stack of CSS with concepts such as named flows and regions. These 2 are the key concepts to remember: named flows and regions. With CSSRegions, you group the information in named flows and then you distribute the collected information in disjoint rectangular containers, the regions, which you can position to achieve the desired layout.
Named flow: a collection of HTML elements, extracted from document normal flow and identified by name. The elements in the named flow are not displayed part of the document flow.Any elementMultiple flows in documentAll children collectedAny number of named flows diff by nameSo what exactly is a named flow? It is a way of identifying a collection of HTML element, extracted from the document normal and displayed separately.Any HTML element can be part of a named flow. When an element is collected in a named flow, all its children are collected with him.A document can have any number of independent named flows, which can be distinguished by name.
Here is a typical magazine layout displayed using CSSRegions. Here is the content of the article normal HTML.
flow-into simple CSS propertySeparate article in named flows to be used laterNow comes the interesting part. Using a simple CSS syntax “flow-into”, I separate the article content in several named-flows to be used later, independent of how the document is laid out.At this moment, using only CSS instructions, I have separated the content.
Collected content must be displayed, we need regionsRegion = css box, display named flow content instead of its own.Any size, any positionRegion chain solve overflowFrom 1 flow (keep it for late)Collecting the content only without displaying it would not be very useful, therefore let me show you the second concept: regions.A region is a CSS box that can display content from a named flow instead of its own content. Regions can have any size and can be positioned anywhere in the document.A region consumes content from a single named flow. If more then one region is attached to a named flow, those regions form a region chain. When content from a named flow does not fit into a region, the next region in chain takes the remaining content, therefore solving the overflow issue.
Going back to the article
We have 4 css boxes.Make them regions using flow-flow CSS propertyAssoc by name (between named flows and regions).Here we are using another pure CSS syntax, flow-from to create a region. As you can see, the association between the region and the flow is done by name, the regions are consuming content from the flow with the same name. You can also see that we have 2 regions for article named flow, the second region taking the content that overflow the first region.
Browser in portrait mode, resize
How are regions interacting with the named flow content?They act as pages.As you can imagine, the regions are acting as “pages” for the content in the named flow, they are paginating the content. With CSSRegions, the pagination concepts are brought to the CSS box level.
Split responsibility between the web designed and the browserCollect content using flow-into propertyCreate regions layout using flow-from propertyBrowser distribute contentLet us recap how the layout with regions is done. The responsability is split between the web designed and the browser. In the first step, the user, using a pure CSS syntax, declares which content is grouped in which named flow. In the second step, the user creates a fancy layout using CSS Boxes -> regions and associates the regions chains with the named flows.In the third step, browser flows the named flow content in the regions chains.
* Can regions adapt to multiple screens?Now that we have gained some knowledge about how the regions are working, lets see how we can create a layout with CSSRegions that can adapt to different screen sizes and orientation.
Because of that we thought about combining the CSSRegions with MediaQueries to create an even more powerful layout model.
MQ is an incredibly robust mechanism for identifying not only the types of media (screen, print) but also for inspecting the physical characteristics of the devices and browsers that render render the content..Width && height => viewport/broser windowDevice-width/device-heigth => device screen
Extract content in named flowsUse MQ to decide how many regions should a media containContent remains collected, we just position the regions differently.First, we collect the content into the named flow, separating semantic markup from style markup. Next, we create the layout with regions but we use media queries to position the regions in such a way that would make sense for the screen size and device. We let then the browser to do the layout.Using the above steps, you can see that we are not breaking the content, only tailor the regions layout so that the information is kept meaningful for the user. We do not have to hide the content, the regions will accomodate the overflow properly.
* Desktop, big displayHere is how the article looks like on a desktop, that has a big display surface.
Now the same article on a tablet, less display surface. You can see the diff between regions layout.Here is how the first page of the article would look like on the tablet, with a display surface less than that of a desktop. Please note the difference between the regions layout for different orientation (done with mq).
Second pageSecond page of the article on a tablet, again based on combination between regions and mq. The content, collected in named flows, was not touched.
Here is a possible layout of 3 regions combined with media queries. (for screen, orientation: portrait means height > width, for instance when you resize the window).
I would like to mention 3 advanced CSSRegions topics. Present first the CSSOM, fully scriptable object model, you can interact with the named flows, regions, we have events triggering on layout.And for the JS enthusiasts, we have a very powerful CSS Object Model that allows you to customize the regions layout even further. In fact, we are offering a fully scriptable model for CSSRegions, including named flow and regions objects and layout events.One is region styling and it allows the designer to style the content rendered into a certain region. For instance, you can make the text in each region of the region chain have a different color.
2 regions, 1 named flow. Depending on the region, the background of the content has a different color. A few properties can be styled: paint properties and layout properties. At this moment, only font-color and background-color.
A few words about the evolution of CSSRegions.
CSSRegions is currently a work in progress and you can use WebKit nightly builds, Chrome and IE10 to play with it.
* Not a way to create css boxes, they must existI would also like to emphasize that CSSRegions do not define a mechanism to create or position CSS boxes. Regions are boxes in which the content from named flows is displayed. You can use other modern layout techniques - multicolumn, flexbox to position the region boxes and then let the browser display the content in those boxes.
Only pure CSS syntaxMix and match with mq, responsive designYou can see them in modern browsersWhat I would like you to remember about CSSRegions.First, they can be used to create rich layouts on the Web using standard CSS, this means declarative layout. CSSRegions does not define a mechanism to create HTML boxes, the boxes(regions) must already exist in the page. Also, CSSRegions concept match and mix perfectly with MQ, they can be used to create a responsive design. Last, but not the least, CSSRegions assume the existence of modern browsers, that are helping the Web developers and Web designers even more.Responsive design, declarative layout, modern browsers. This is the future of layout on the Web, you should try it. We believe in it.

10 Likes

Ciro Spedaliere 8 months ago
Fitoschido 9 months ago
aghamilton327 10 months ago
prasit worachatrawanit, IT & New Media Marketing at ARiP Co.,Ltd. 10 months ago
tujungnew Tags css region 10 months ago
shakakira 10 months ago
Takeshi Watanabe 10 months ago
share2u 10 months ago
Edy Salim, Chief Executive Officer at PT. Sentra Studia Indonesia 10 months ago
WebVisions at WebVisions Tags barcelona wvbcn webvisions 2012 10 months ago

Magazine-like layouts for any screen with CSSRegions Presentation Transcript

Magazine-likelayoutsfor any screen with CSS Regions
This talk is about building digital publications with rich layoutsthat adapt to multiple screens by doing less work
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 andsponsors found....On the lost art of the greatAmerican road trip.
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.
<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>
Regionsany size, any positionconsume flow content
h1 { flow-into: title } p{ flow-into: article }flow-from: title blockquote { flow-into: quote } flow-from: article flow-from: article flow-from: quote
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%; } @media screen and (orientation: portrait) {<div id=“region1”></div><div id=“region2”></div> #region1, #region2 {<div id=“region3”></div> width: 50% } #region3 { display: none } }
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 Firefox? Safari? Opera?
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 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

Magazine-like layouts for any screen with CSSRegions

by mihnea_ovidenie on Jul 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

Magazine-like layouts for any screen with CSSRegions Presentation Transcript