Content First Web Design: What It’s About and How to Get Started
If you’ve been around the world of web design, you’ve heard of the concept of “content first.” In this article, Karol K. explores what it is. About the author: he is a blogger and writer, published author, and founder of NewInternetOrder.com. Article source is blogs.adobe.com. Image courtesy of nongpimmy via Bigstockphoto.
There’s this incredible shift that happened in the history of cinematography around 1970-1980. Before that point, a big part of a given film’s credits went before the actual film – “opening credits,” the name was.
You can see this in Butch Cassidy and the Sundance Kid. You can see it in The Good, the Bad and the Ugly, and countless other masterpieces (or is it just me enjoying westerns here?).
But then, there was a transition towards an entirely different look. If you go see Guardians of the Galaxy, for example, you’ll notice that it takes exactly 6:30 minutes before you get to see even the film’s title. And until you see the full credits? That’s 113 minutes – the entire length of the film.
You get action right away. The movie starts right away. Like there’s no time to lose! And looking at the title of this very post, you might already know where I’m going with this…
Yes, content first!
Films have been “content first” for years now, giving us what we came for right up front. Of course, you might quite enjoy that vintage style or whatnot, but you do have to agree that things have shifted in a more attention-grabbing direction.
But what about web design? Should we also think content first? Should we start with the content – or at least the concept of the content – when we’re working on a new website design, and treat that as the most important element?
[spoiler alert]
Yes.
We’re going to get into the why and how in just a minute, but if I were to summarize this in one sentence, it would be this:
Telling a web designer to work on your site without giving them the content is like telling an interior designer to work on your living room before you buy an apartment.
The benefits of content first design
1. Content gives you constraints
As web designers, we’re constrained by nothing.
I mean, sure, there are screens. There are resolutions. But those aren’t real constraints. You can still make your design a zillion pixels long if you want to. Well, okay, there’s maybe the RGB pallet that’s somewhat limiting when it comes to the possible color range that you can use. But your eye isn’t capable of seeing more colors anyway, so that’s not really a constraint either (unless you’re mantis shrimp).
But content, on the other hand, does impose some serious constraints and limits your creativity in a certain way. Or maybe “limits” is not the best word, but it puts your creativity in a confined box and forces you to operate within that box.
In a very real web design scenario, you will have a specific volume of content to work with. A specific number of headlines, sales messages, body text, and etc. With all that, you can plan out the graphic part of the design better, and thus make sure that every individual piece of content simply fits like it should.
2. Content first design is better for the story
Every website has a story, or a message that it wants to convey to its visitors. This all connects back to the goals of the whole website, the brief that the client gave you, the niche it’s in, and so on.
But at the end of the day, to be able to resonate with its visitors on any level, the website needs a core (and good) story.
And it just so happens that content – and text content in particular – is much better at storytelling than anything else.
Even though a picture is worth a thousand words, text is always going to play the most important role on any website.
The content-first approach in web design focuses on storytelling – on making the design a tool to tell the story, and not the main focus in itself.
In the best case scenario, you need to have the story straight before firing up Photoshop, and then design around that story, instead of building a design prototype and then trying to hack the story into it somehow.
3. Content first gets rid of many further-down-the-road problems
In a traditional web design setup, it’s very common for a project to go back and forth multiple times later down the road, once the real content needs to be incorporated.
Very often, we find ourselves in situations where that final content doesn’t fit at all. Or is of the wrong format to be showcased effectively. Either way, as a result, we can be forcing ourselves into having to redesign multiple elements of the website completely, and effectively do the work twice.
If you think content first, you’re removing this possibility altogether. Starting with the content, you’re making your work more effective time-wise, and in many cases also more optimized for the site’s goal and purpose.
4. It improves your chances of building a mobile-friendly design
This one’s a long shot, but bear with me.
I’ve been talking about the importance of mobile for quite a while now (1, 2). The fact is that mobile is still growing rapidly, and that for many people, their phones *are* actually their main “Personal Computers.”
For that reason, making your website design mobile-friendly is even more important than making it desktop-friendly. And I stand by that statement wholeheartedly.
Now comes the kicker. Mobiles still don’t – and probably won’t – have enough of screen real estate for you to work with. Hence, we are forced to fit the most important pieces in a very limited space.
Content first just works for that. The whole idea of content first is to build the design to fit the content perfectly and to make that content even more noticeable. Maybe somewhat as a byproduct, but content-first thinking makes it easier for you to make the design responsive and to scale well on mobile.
How to do content first design
1. “Content first” is not just “text first”
The first thing we should probably set straight is that content first doesn’t necessarily mean text first. Yes, I know, I said that text is your best tool when telling a story, but in this day and age, graphics and images are not only used as structural elements of a website design. They serve as content as well.
So depending on the specific website and its goals (more on that in a minute), your main content could be images, videos, or even audio (especially since podcasts seem to be the hottest flavor of the summer.)
2. Know thy purpose » have content to make this purpose possible » design
The second a visitor arrives at a website they’ll have some questions. A good website will provide them with all of the right answers at the right time. But in order to do that, the design should reinforce the content andmake it more accessible. By itself, the design won’t provide any answers at all. It’s just the vehicle.
When designing in a content-first way, make sure that the content you get has a good grasp on the answers it indeed needs to provide. Then, take it and make sure that the answers are delivered in the most effective way possible. This is good design.
Which brings me to:
3. How to think content first? Think conversation first
The best way to figure out what sort of content should appear on a website, what answers it should provide and in what manner, is to imagine a conversation taking place between two actual people. And in the real world.
- If you’re speaking with a potential visitor – a person who’s the target for the site – what would that person ask?
- What do they need to know to understand what the site has for them?
- What angle to take when explaining the topic of the site?
- Is the person already knowledgeable about the issue, or do you need to bring them up to speed?
Create your own list of potential questions and then put them against the content at hand. Do they match? What can you do to deliver the answers in the best way humanly possible?
4. Create a content board
To start designing content first, you obviously need to begin with the content of the site (duh). But what to do with it?
A good approach is to create a list of all the content elements that are going to be used throughout the website (on each of the individual pages). Or, better yet, create a board instead of a list. Or, even more better yet, get some pieces of paper, turn them into representations of the content, and start working with them on the floor (see header image for example).
Start by aligning and realigning them to get the perfect content layout and make for the friendliest content consumption scenario possible. Being able to just grab the notes and move them around is going to be much quicker and better for your creativity than working with a software tool.
At this stage, the thing doesn’t need to look anything like an actual site design. You just need a good document structure that makes for potentially the best reading / content consuming experience from the user’s point of view. Then, take that early version, “design around it” and digitize it.
5. Design to make the content more prominent
Once you know what the main content of the website is going to be, and of what type it’s going to be, you can do a lot to make that content look even more prominent.
For example, if during all the previous steps you’ve figured out that putting a spotlight on some video content will make the information more digestible for the visitor then you will be able to focus more on making sure that those videos indeed look great. For instance, you can give them additional control options (lightbox, fading, auto-play, etc.), all to make them easier to consume.
Without knowing what the content is, you won’t be able to do such a thing right away.
6. Don’t use “lorem ipsum”
Lorem ipsum is one of the more tricky design tool/shortcuts. On the one hand, it does help you get through the content parts that can’t be filled in beforehand. But on the other, it also gives you a false impression that the content is already there in its final stage, and that the only thing that needs to be done is switching to “real words” later on.
The problem is that it’s not the case at all. You are very likely to find out that things simply don’t fit once the final content needs to be included. For that reason, you need to integrate that real content as soon as possible, and not speed up the design process artificially by using lorem ipsum everywhere.
Also, lorem ipsum creates one more danger: using it, you often end up including exactly the amount of it needed to make the design look great. The thing is, however, that you don’t always get the most optimized amount of content for the real site. Your content amount expectations will actually, literally never get met.
What’s the future of content first web design?
Content first isn’t a new concept by any means, but it did pick up some speed in the recent years, with no signs of slowing down. The popularity of mobile devices and declining attention spans of a species called homo sapiens probably have something to do with that.
