Konstantin comes from Swiss-based company iA which has been developing a container model approach for use when designing websites.
Where does the inspiration come from?
The industrialization of our economy has created a need to transport goods. Each day tons of stuff need to be shipped from one place to another. Everything is shipped in containers, and it is generally agreed that these containers all follow certain standards, so that they can be easily stacked on top of one another, then arranged and moved when necessary.
The guys from iA drew an analogy between putting together a webpage and putting containers on a train car. They came up with a model they now use for most of the projects they work on.
What is the container model?
A container is a full width horizontal element containing content. Each container being full width means that the containers on a page can only be stacked one above another – never side by side. The most important containers are at the top, followed by the rest, i.e. the less important ones.
The containers are always autonomous. Whatever you change in one of the containers will not influence any other one.
When you apply the container model, you move away from thinking about the pages as such and how they might be filled with content. Instead, you think about containers, and the content within them, then just decide which containers to show on a page. This process allows you to move through the whole design process much more efficiently.
Konstantin has shown us an example of a website it created for architects. On this website, there is no separate page that lists all their projects, but rather a container that does that. The container appears on pages where such content would be relevant, such as the home page, or on a single project page, below the project description. This is a great example of how containers can be reused across many pages. The actual position doesn’t really matter, and if you want to change something in the content, you change it in one place and the change gets propagated across the entire website.
Containers work quite well if you’re building a responsive website. They themselves can be resized easily, and you just have to think about how to manage the content in each container. Just be careful about keeping consistent behaviour across all of them.
Owing to the way that the containers are imagined – if you’re planning to build a responsive website, and not only that but you want to start designing for mobile first, the container model is probably the one you want to have in mind.
Once you have all the containers, it’s time to decide on the order in which they’ll appear on each page. Remember – a user comes to each page with a task in mind. Know the task and what the user wants, then provide them with the content the way they’ll expect it.
Let’s agree on a stack, then discuss what’s inside.
Konstantin Weiss
Container model as a bulletproof approach to designing a website?
The short answer is no. As Konstantin tells himself, there’s no place for sidebar navigation if you’re using the container model. All of the navigation is at the top of the page – having a separate column on a page simply doesn’t work.
The container model is not the best way to design every website. Content-based websites can be built this way, but any website that is supposed to be much more interactive with the user might not improve the overall UX if built using this model. Take for example the Vodafone website – more specifically the page where you can buy a Pay monthly mobile phone. Following the container model to the letter, this page would have to lose many of its functions that aid the user in making a buying decision.
Examples of where it works
Of course, iA isn’t the only company in the world that designs websites this way. There are most certainly others using the same approach, just under a different name. Or maybe even the same name. However, the examples shown here are of websites designed by the iA team.
One example of their work is the website of Hosoya Schaefer Architects, and I also came across an article by Nick Haley, Director of User Experience for the Guardian, who wrote a piece about the new Guardian Beta, which is built on iA’s container model. Nick believes that the container model, used together with blended containers, gives them a lot more flexibility in how they think about their content.
Our ability to experiment is limited only by our ability to think of interesting new ways to curate and present our content. We believe this flexibility will allow us over time to create the best experience possible for our audience on any device they choose.
Nick Haley
Conclusion
The container model is a tool that iA is still developing. It works best if it’s used when appropriate. And the best way to know whether to apply it to a new project is to work with it so many times that you know instantly whether it would work again or not.
Video talk
Previous WIAD talk reviews
- IA – Reality, not a dream by Blagonic Brothers
- Foraging for creativity by Tin Kadoic
- Navigating the Mobile World by Merlin Rebrovic