Many people think that the design of a Web site’s layout comes first and the content just gets dropped into it. To be honest a lot of Web sites do get designed layout first and content second. But that doesn’t mean it’s the right way.

The concept of pages

We probably think this way because in traditional graphic design we know how big the page is. If we’re designing a brochure it’s usually A4 or A5 size.

The Web doesn’t work in the same way though, we don’t know how big the page is. In fact the whole concept of pages is actually artificial on Web sites. It’s just there to try and help us understand Web sites more easily.

People can look at our site on a variety of devices from smart phones with small (3 inch) screens to desktop computers with huge (27 inch) screens. Not only do we have to worry about size, but most smart phones and tablets can be used horizontal or portrait.

Responding to devices

Early in spring 2010, Ethan Marcotte published an article called Responsive Web Design. In the article Ethan talked about how the design and layout of a site could and should respond to the device it was being viewed on. This meant doing things like changing from a 3 column to a 2 column layout on smaller screens and even a single column layout on really small screens.

Responsive Web Design was an important step in the evolution of Web site design. But the evolution wasn’t over yet. We were still thinking about the page first and how to squeeze our content into it.

Designing from the content out

In January 2011 at the New Adventures in Web Design conference, Mark Boulton introduced us to his concept of a new canon for Web design. Mark suggested that instead of working from the canvas (or page) in we should should be designing Web sites from the content out. In his article A Richer Canvas, Mark goes into much more detail about this concept.

I believe he’s spot on. We need to make the design compliment the content, not just make something that looks pretty and pour the content into it without creating a relationship between them.

So that is why I ask for the content before designing the layout. I’ve always tried to get the content first but now I believe it’s more important than I ever have before. Instead of creating a good Web site, let’s build a great Web site.