Adobe Explores the Future of Responsive Digital Layout with National Geographic Content
Update (5/21/13): To see the mobile prototype, check out Creating an Installed Application Experience on Mobile With Web Technologies.
National Geographic partnered with Adobe, sharing select content for Adobe’s use to experiment with digital layout. The results mark the beginning of a technical and design collaboration that will look at innovating around layout while responding to some of the real world needs of National Geographic’s designers. By combining a National Geographic feature entitled “Forest Giant” with some of Adobe’s contributions to web standards, Adobe has created a forward-looking vision of how readers will consume web content in the very near future.
Configuration
Because some of the features the demo uses are still experimental, the article needs to be viewed in Chrome Canary with two runtime flags enabled.
Learn how to enable flags in Canary to view CSS Regions, CSS Exclusions and CSS Custom Filters.
To learn more about enabling runtime flags, see this tutorial.
Once you have Chrome Canary installed and properly configured, go check out the demo. (Note that the entire project is open source and available on GitHub.) Of course, if you’re in a hurry, you can always just watch the video above to get a feel for the experience.
Editor’s Marks
Some of the advantages of modern layout capabilities can be subtle, so we created an “editor’s overlay” mode which highlights the more noteworthy features and explains how they were implemented. To enable editor’s marks, click on the bar at the bottom of the article (or just press the tilde key).
Regions
In order to have better control over the flow of the article, we used CSS regions. At its core, regions allows you to separate your content from where and how it gets displayed. Specifically, it allows you to designate which part of your DOM is your content, and which elements your content should flow through. The flow of the content happens automatically, adjusting for things like font size changes, resizing, zooming, etc.
In the “Forest Giant” demo, we use regions to make the content flow throughout the page in interesting ways, even creating shallow columns in one instance. Without regions, the designer would have had to break the content up manually, and would have to make major adjustments to the entire page if the content ever changed. With regions, the content is automatically broken up across various elements as the source text flows through the specified region chain.
Regions are also an excellent tool for responsive design. When you change the size and/or position of your regions in response to changes in screen size, your content automatically reflows through your region chain.
Exclusions
CSS Exclusions allow text to flow along either the inside or the outside of a shape. Take a look at the drop cap at the beginning of the article. Without exclusions, the text to the right of the “O” would be vertically aligned, creating uneven spacing. By using exclusions — and specifically shape-outside — the text is able to follow the contour of the initial letter creating a much cleaner and far more polished visual effect.
Another example of exclusions is the text at the bottom of the article. Notice how the paragraph follows the shape of the map. This type of high-end layout was not formerly possible with HTML content. Without exclusions, the best way to do this on the web would probably be through the use of images, however you then lose the ability for your text to be resized, indexed, searched, copied, and easily updated.
Learn more about CSS Exclusions.
Balanced Text
The concept of balanced text is fairly subtle, but once you’re aware of it, you’ll find that it makes a huge difference in the way your content is laid out. By default, browsers wrap text one word at a time which means you can easily end up with lines containing only one or two words while the line above it might stretch the entire length of your container. Although this is something we’re pretty accustomed to seeing on the web, it’s not a layout that would ever be permitted in print. When designers have full control over how lines of text are broken up, they will balance the text such that every line is approximately the same length.
We’re using a balanced text polyfill for both the subtitle of the article, and the pull quote between the second and third paragraphs. To see how it works, try resizing your browser horizontally. If you have a wide enough monitor, you should see the entire pull quote on one line. As you decrease the width of your window, you will see that the text always wraps in such a way as to keep the lines close to the same width.
Learn more about Balanced Text.
Custom Filters
Most of us are accustomed to applying filters to images in applications like Photoshop and Instagram. And if you’ve used SVG on the web extensively, you’ve probably also experimented with SVG filters. Now you can apply the same visual effects to any HTML elements using CSS Filters.
The advantages of filters are:
- They can be applied dynamically which means you don’t have to preprocess your assets.
- You can apply them to any HTML element (not just images).
- They can be animated with CSS Animations.
We’re using a custom filter at the bottom of the article to allow users to “peel back” the bottom of the page and expose an interactive infographic (click on the “Explore the President Tree” text to see the filter in action). The effect is a subtle but fun way to create a sense of depth in the content, and is achieved entirely through CSS.
Learn more about CSS Custom Filters.
WebGL
Because the “Forest Giant” article is about the second largest tree in the world (but probably the biggest in terms of mass), we wanted to convey a sense of size. If you click on the “Click Here to Pan & Zoom” link below the thumbnail of the giant sequoia, you’ll see a huge image of the tree assembled tile-by-tile until you reach the top. Try scrolling around the image and note how small the three scientists appear in relation to the tree they are studying.
This effect is accomplished with WebGL (through a library called three.js). Although WebGL is not a specification or implementation that Adobe is contributing to directly, we’re a big fan, and it was the perfect technology for building a smooth 3D animation.
Conclusion
Advances in technology have proven many times that convenience often trumps fidelity. For example, MP3s became popular — even at their initial low bitrates — because it was more important for us to have all of our music available wherever we were than it was to have the best possible audio quality. Similarly, digital books, magazines, and newspapers are replacing their analog counterparts at an increasing rate because convenient and instant access to content frequently supersedes aesthetics.
Now that the internet has helped to make content ubiquitous, we’re starting to see a shift back toward production value. Users want HD video, beautiful and fluid user interfaces, and they increasingly expect content to be presented in interesting and compelling ways. With features like regions, exclusions, balanced text, custom filers, and WebGL, content producers will no longer have to choose between reach and design. Working with National Geographic’s stunning visual content, Adobe has proven that the web of tomorrow will enable both.