Your prescription for increased productivity and profitability
For the past few months I have been taking a little detour away from ePub to explore the “New Web.” Sure, there has been a lot of talk over the past year or so about being able to design responsive web pages that boast high design on the same level as glossy print magazines. Little did I realize when I upgraded my Mac to OS 10.9 that I would be dipping my toes into this whole new area of discovery. Yes, I knew that Xcode 5 would have advancements in how it handled memory, but was quite surprised with what else would be packaged with OS 10.9. With the little I have been able experiment with, I am blown away with the design possibilities that are now available for web and mobile devices. For whatever role you will be playing with the “New Web,” you need to be aware of its capabilities. If you haven’t upgraded to 10.9, you don’t have an excuse (unless you don’t have a Macintosh). The upgrade is free and, so far, is proving to be glitch-free.
The new web is all about high design with pages able to modify in appearance to accommodate different viewport sizes. But that is just the beginning. Now along with responsiveness, we have a whole new set of capabilities for displaying content. Leading this thrust are CSS Regions and Shapes. These new capabilities will have designers creating high design pages with the same freedom of expression we now enjoy with InDesign. And, because Adobe has been actively working to advance these technologies, you can bet that InDesign will evolve with it.
Similar to how we flow text through linked text frames in InDesign, CSS Regions allow content to flow through any number of “linked” HTML elements (called “text regions ”). Imagine a single flow of text being displayed in one column, then many columns, around images, and even into shapes. When the page size changes, the text flow changes to accommodate.
Additionally JavaScripts can respond to events to manage the layout. For instance, the regionoversetchange event is dispatched when a regionOverset property for a region changes as when the reader resizes or re-orients the page. You can determine how your layout will respond depending on the design, content, and other aspects of your layout, dynamically adding or removing regions to accommodate
Best of all, although what you can do with CSS Regions could fill a fairly lengthy book, you can get started quite easily. Here’s a short bit of code for demonstration.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<title>Testing</title>
</head>
<body>
<p class="example-text">The quick brown fox jumped over the lazy sleeping dog. Now is the time for all good men to come to the aid of their party.</p>
<div class="regions"></div>
<div class="regions"></div>
</body>
</html>.example-text {
font-size: 12pt;
-webkit-flow-into: example-text-flow;
padding: 0;
margins: 0;
}
.regions {
-webkit-flow-from: example-text-flow;
border: 1px solid black;
padding: 2px;
margin: 5px;
width: 200px;
height: 50px;
}
That’s it! Save the CSS in a file named styles.css in a folder named css. Both the css folder and the HTML file need to share a common folder. Open the HTML file in a 7.0 version of Safari. (You can drag the file onto the Safari application icon to open it.) The text should flow between two bordered text elements.
Notice in the CSS that the class for the content (.example-text) has a -webkit-flow-into attribute for the named text flow while the containers (.regions) have a -webkit-flow-from attribute for the same named flow. This is fundamentally what makes CSS regions work. However, there is much more that can be done with regions.
CSS Shapes allow any geometric shape to be used as a container for text or images. Sure, you have been able to do that by forcing line breaks where you wanted them, but with shapes you don’t use line breaks. The lines break as the shape becomes condensed or expanded.
To get a grasp on some of this, you will want to take a glimpse into the near future. If you have iOS7 for Mobile Safari or Version 7.0 of Safari running on your Macintosh, you can experience some eye-popping examples on the web. There are a number of examples on codepen. At codepen.io/adobe/details/tcfji you will find an example of an image cropped to a CSS shape.
You can see what Adobe has been doing to push high-design in an hour-long video at http://experts.adobeconnect.com/p4wkjzkzvce/.
When time permits, prepare to sit back and do some serious reading about CSS Regions at coding.smashingmagazine.com/killer-responsive-layouts-with-css-regions.
And if you really want to get serious, the unofficial, pre-release, Editor’s Draft version for CSS region documentation can be found at dev.w3.org/csswg/css-regions/.
Documentation states that you should be able to view pages with CSS Regions and Shapes in Chrome, but you need to enable the experimental web feature using Chrome flags. After reading the warning at the top of the “flags” page, I got cold feet and stuck with Safari. If you are undaunted, type in chrome:///flags/#enable-experimental-web-platform-features (from within Chrome, of course), and press enter. Click the “Enable” link within that section. Finally click the “Relaunch Now” button at the bottom of the browser window.
The adage that innovation follows demand may be applicable here. So talk it up, start playing with it, and be prepared because it won’t be long before this WILL be the way to write code for the web. I can’t wait to see what Adobe will have in store for us with InDesign.