The container model and blended content


One of the key differences between our new beta site and the current Guardian site is the way we approach content curation and presentation.

From the outset we knew we wanted to create a modular system. However we were wrestling with how we could maintain a consistent hierarchy of stories across desktop, tablet and mobile whilst still allowing a rhythm and pace as you move through the site, something we felt was lacking in other responsive sites. Initially just a rough sketch on a whiteboard our definition of a container became the following:

  • A container is a full width horizontal element which contains a collection of content.
  • Pages hold a series of containers which are stacked on top of each other, the most important at the top and the least important at the bottom.
  • Containers are self sufficient -and as a result can easily appear in multiple locations in a variety of combinations.
  • As the screen size gets smaller or larger, the content inside adjusts to the width of the screen.

I was fortunate to see Oliver Reichenstein (from iA) talk about this at the recent Responsive Day Out 2.

The container model and blended content – a new approach to how we present content on the Guardian →
The Guardian Beta →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.