Join Morten Rand-Hendriksen for an in-depth discussion in this video Using content blocks, part of Mapping the Modern Web Design Process.
- If you look at any website, you'll see it's really just a collection of different blocks of content displayed together on the screen. You have the Header, the Sidebar, the Footer, and the Main Content area. Within each of these blocks, you may find several smaller blocks. In the Header, you have the Site Title and the Main Menu. In the Sidebar and Footer, you may have multiple blocks including Advertising, Navigation, and Content Links. And in the Main Content area, you'll find Article blocks each containing Title and article meta, the actual article, and interactive elements like Social Media sharing buttons and comments.
This is also how the browser sees the content. To the browser, the contents within a tag are considered blocks, usually displayed within a box. CSS is then applied to that box and the content within it. If you move the box, the styles follow automatically. When I spoke of approaching responsive web design as a process, I said that we should always work to display the content in the best possible way. The easiest way to do this is by working with each of the content blocks on their own.
Of course this will be done in strict adherence to the style guides to ensure consistency, and as you work on a block, you are doing so in context of the rest of the content in the browser. But even so, you work on each block independently. By focusing on one block at a time, you have the freedom to find out the best solution for that block, be that font sizes, positioning, or responsiveness. In identifying content blocks also allows teams to work together in a more seamless fashion.
With style and code guidelines established, one team can work on the Header, while another team works on the Sidebar or Main Content area, without having to worry about major discrepancies. The content block approach also makes it easy to build out the living style guide for the project. As blocks are designed in the browser, working samples of the blocks can be added to the style guide for future reference. That way, when someone wants to add content to the site, they can lift out the necessary code from the style guide, and slot it in where appropriate.
But the benefits of using content blocks go a lot further than content focus and teamwork. When you start thinking about the pieces of content in the view as individual blocks, you also realize that these blocks can be moved around, repeated, and reused at any time. Rather than parts of a whole, they become modules in your mind. Once you see them as modules, they become optional and interchangeable. The result is that building out new views for your site, the final step in the content strategy process, becomes a bit like building a Lego kit.
You take the pieces you need and place them where you think they fit the best. If they don't, you move them or replace them with other pieces. You'll realize that a webpage is not a page of content, but rather a view of a group of content blocks put together. That realization will change the way you approach web design from here on out.
- Understanding what your users care about
- Creating user personas
- Creating content priority hierarchies
- Testing wireframes and interaction patterns
- Establishing a three-track build process
- Incorporating accessibility principles
- Using content blocks
- Testing and revising your web design
- Optimizing for social media and SEO
- Launching your web design
- Getting feedback from users