Adobe

decor

Web Platform Team Blog

Making the web awesome

Adobe Explores the Future of Responsive Digital Layout with National Geographic Content

Note: CSS Shapes syntax has changed. For the latest information, see CSS Shapes Module Level 1.
Note: Custom Filters is no longer supported in Chrome or WebKit Nightlies.

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.

Learn more about CSS Regions.

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.

Learn more about WebGL.

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.

27 Comments

  1. May 06, 2013 at 12:00 pm, Balaji said:

    Wow…there are many exciting things to come… great…

  2. May 07, 2013 at 10:27 am, Thoughts on TRENDS in web design and development | Geek Speak said:

    [...] The video above by Christian Cantrell demonstrates some brand new techniques in creating responsive layouts. You can read more about them here. [...]

  3. May 07, 2013 at 2:34 pm, netBrainiac - a tech blog said:

    Wow, awesome!! I had never heard of The President, but it’s story is quite amazing. Thanks for sharing!

    Ohhh, and the tech coming is awesome, as well… =)

  4. May 07, 2013 at 10:17 pm, Sean Davis said:

    I get so excited when I see CSS regions. I think about not having to constantly drop my sidebar below my content at responsive breakpoints. Instead, sidebar elements can strategically flow into the content on more narrow screen sizes.

    Outstanding.

  5. May 08, 2013 at 2:10 am, Today’s Readings | Aaron T. Grogg said:

    [...] a loooonnngggg time… But now-days, with browser versions iterating so quickly, things like what Adobe is doing with page layout could be in our grasp soon… [...]

  6. May 08, 2013 at 11:11 am, Nick Comito said:

    Really great demo. I love when stories are enhanced through digital techniques. Excited for more… keep it comin!

  7. May 09, 2013 at 11:48 am, Chris said:

    I am blown away. The design values are awesome.

  8. May 10, 2013 at 12:31 am, Revue techno de la semaine | Culture numérique said:

    [...] Abobe explore le futur du responsive design : un bon exemple de mise en oeuvre [...]

  9. May 10, 2013 at 12:34 am, Vasuneet said:

    It is really amazing.

  10. May 10, 2013 at 12:36 am, Vasuneet said:

    Really Nice article.

  11. May 10, 2013 at 4:39 am, Things from the Past Week 10/05/2013 | How We Scroll said:

    [...] National Geographic: The future of digital editorial design [...]

  12. May 10, 2013 at 6:05 am, Al Lemieux said:

    This is really cool and I really appreciate the attention to detail and the push to be responsive, but in the end, it’s really all about the content, right? I think this example shows how important that is. I think there’s a rush to move everything towards responsive design and technical enhancements with CSS. All of that is an achievement worth striving for, but the end user could care less about the technology behind it – for them, it’s all about the content, the experience.

  13. May 10, 2013 at 3:05 pm, CSS | Annotary said:

    [...] More from Paramdeep Dhaliwal: Tools Javascript Talks UI Sort Share blogs.adobe.com       1 minute [...]

  14. May 11, 2013 at 5:56 am, ידיעון הגינה האורגנית » Blog Archive » Adobe Explores the Future of Responsive… said:

    [...] Adobe Explores the Future of Responsive Digital Layout with National Geographic Content | Web Platfo… [...]

  15. May 12, 2013 at 3:20 pm, May 12, 2013: Weekly Roundup of Web Design and Development Resources said:

    [...] Adobe Explores the Future of Responsive Digital Layout with National Geographic Content: Using balanced text, CSS exclusions, and CSS regions, Adobe used content provided from National Geographic to demonstrate the future of responsive digital layout. [...]

  16. May 13, 2013 at 2:03 am, Marcel said:

    Great summary of new webkit features. I wonder which other browsers are going to adapt them and when we’ll be able to provide them to a wider audience.

  17. May 13, 2013 at 2:13 am, The Future of Editorial Design | Moving with digital. said:

    [...] More detail: http://blogs.adobe.com/webplatform/2013/05/06/adobe-explores-the-future-of-responsive-digital-layout… [...]

  18. May 13, 2013 at 2:24 pm, Jordan said:

    The work that is done with the CSS exclusions is very innovative. The text appears very clean when being formatted around different shapes.

  19. May 14, 2013 at 8:03 am, The Future of Responsive Digital Layout | NOTES said:

    [...] Adobe showing off what web content could be: [...]

  20. May 22, 2013 at 4:05 am, Dynamic Web Training said:

    Great Article…Thanks for sharing.

  21. May 28, 2013 at 4:06 pm, The Future of Responsive Digital Layout / National Geographic said:

    [...] 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. [via Adobe blog] [...]

  22. May 30, 2013 at 12:44 am, Collective #63 | DK Studio said:

    [...] [...]

  23. June 20, 2013 at 7:39 pm, Instagram Launches 15-Second Video Sharing Feature, With 13 Filters And Editing | whatsweb said:

    [...] Adobe Explores the Future of Responsive Digital Layout with National Geographic Content (blogs.adobe.com) [...]

  24. June 25, 2013 at 12:10 pm, Sten Hougaard said:

    Thank you so much for creating and sharing content of so high quality. You have made a brilliant showcase which fills out all hopes and wishes any web developer, designer and author may have. You succeed in delivering a balanced piece of online experience which where each part the content plays exactly the part which it is best at – not too much technique, not too much text nor too much or too strong illustrations. I am impressed and enjoyed! Thanks! :-)
    /Sten

  25. July 01, 2013 at 11:07 am, alarmas said:

    He leido Adobe Explores the Future of Responsive Digital Layout with National Geographic Content | Web Platform Team Blog con mucho interes y me ha parecido practico ademas de claro en su contenido. No dejeis de cuidar esta web es buena.

  26. July 05, 2013 at 1:29 am, Web Design and Development News, Tutorials and Tools – Issue#6 | Greepit said:

    [...] Future of Responsive Digital Layout with National Geographic Content [...]

  27. July 06, 2013 at 7:01 am, Web Design Updates said:

    [...] Adobe Explores the Future of Responsive Digital Layout with … http://blogs.adobe.com/webplatform/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 … [...]