Last spring, we experimented with combining some amazing content from National Geographic with emerging layout features like CSS Regions and Shapes. We believe that the result — a feature called Forest Giant — was a really elegant and unique experience. However, like so many other popular long-form articles we’re now seeing on the web, it was hand-crafted and custom-designed around very specific content which meant it wasn’t easily repeatable. So for our next experiment, we wanted to see if we could do something that would integrate better with templating and content management systems. In other words, we wanted to see if we could develop some techniques for making all content on the web look better rather than just content that was hand-produced.
Our latest demo uses another amazing story from National Geographic about orphan elephants in Africa. Our goals for this project were:
- Responsiveness. We wanted the site to work on all screen sizes.
- Expressiveness. It had to showcase National Geographic’s rich imagery and content.
- Repeatability. The content had to be structured in a way that could be easily templatized or integrated with content management systems.
The answer we came up with was to combine viewport units and CSS Regions. Viewport units enable us to create pages that are the exact size of the browser’s viewport, or viewable area. That means each page completely fills the view on any screen (and in either orientation) when scrolled into position. We then decided to alternate between text pages and photographs in order to break the content up and to make it more visually appealing. For images, we use
background-size:cover to ensure that they take up the entire element and give us a professional, full-bleed look.
Since the height of each page is determined by the viewport size rather than by the text inside it, we’re using regions to flow text through each container. The entire article is actually inside a single element, but by creating a region chain with each element a full 100% of the viewport size interspersed with full-bleed image containers, it becomes really straightforward to create clean, readable, and responsive pages.
This approach can be easily integrated with a template or content management system, combining graphics and text in a responsive and visually interesting manner. When considering the investment required for custom-built articles, it’s clear that regions can be an integral component of a much faster and more cost-effective digital publishing solution.
While Adobe is extremely focused on making layout and graphical contributions to the web platform, our work with National Geographic has inspired us to make a contribution of a different sort. Adobe will donate $1 per tweet that includes the hashtag #ProtectTheElephants to the National Geographic society in order to help save endangered elephants. So go make Adobe donate some money!
If you want to see the Orphan Elephants project firsthand, go check it out on GitHub.