Content-driven design is the process of using the content that you have to determine the design and layout of the site. For decades, it has been the normal order of things to create a great-looking design based upon demographic keywords (mood, feeling, industry, etc.) and then create content to fit that space.
Though there is nothing wrong with this, per se, it leads to a lot of frustration between designer and company. The designer works hard to create a strong design only to see compromise after compromise until his design is no longer recognizable. The flip side is that the design is so great that no one wants to compromise it with the content. Therefore, the company isn’t always able to say what it needs to in order to reach the target customer.
In comes content-driven design. Start with the content first and then let that lead the direction, feeling, mood, etc. of the design. It’s a more harmonious way to design for the Web, ensuring that both the design and the content work together instead of against one another.
There are two parts to content-driven design: content and design.
What is content? It’s not an easy question to answer. For a broad view of what many people think about content, read about an informal survey taken from several content experts via social media. I would define content more along the lines of information. If your website is a box, or container, the content is what goes into that container.
Unfortunately, this is sort of an old analogy that we should be trying to get away from in regards to content-driven design. It assumes you’re creating content to fit the box that you’ve created. What if you have a 10 x 10 x 10 box but your content is a floor lamp? You’re then forced to change the box or get out a saw. With content-driven design, you start to create the box based upon the lamp, creating a package that’s in harmony with the content.
Here are some examples of content:
- Social Media interactions
- Slideshows (PowerPoint presentations)
- Corporate documents
I’d say these are the main pieces of content that most websites will use. There are many others, especially as you get into specific industries. Of course, under each of these types of content there are many different variations used for specific purposes.
When you start a new website, your company should take all of the pieces of content that it has and begin putting them into boxes or holders. Most of you content is going to be digital. If it’s not then it will need to be put into an actual pile. Separate out the content into some logical folder structure.
I was helping my daughters organize their room yesterday. We used the same organizational methodology that you should use with your content. We took everything out and threw it into a big pile in the middle of the floor. Then we went through every single toy, piece of paper, doll, etc. and put those into category piles (toys, dolls, books, loose paper, etc.). Once we categorized the big pile into little piles it was easy for us to go through each small pile and choose which things we wanted to keep and which to throw away. If there are pieces of content that are old and no longer fit the direction you’re going with your organization, shelve it (i.e., archive it).
Once we figured out the content that we wanted to keep, my daughters and I began to place that content into logical places in the room. This is based upon the sizes of the girls, the size of the content, and the frequency of needing a particular toy or book. Things that are used the most should be put in places where the girls don’t need a parent to get it for them. Other things require more assistance because they’re more delicate. The content that you want more control over is like that.
Let the content that you’ve sorted out control how you layout the site. What is the most important content? Which things that you’ve created speak to the attitude and message of your company? What content represents a new direction for your organization? Be sure to leave room for that to expand as you create more of it.
Here are some helpful tips on creating the initial content, as well as keeping the content creation cycle going:
Now that you’ve sat down with your team and you have a list of content that you want to highlight on the website, it’s time to start the design phase. Whether you are designing for yourself or you’ve hired a web developer to help you put the site together, be sure that your content is placed into a logical folder structure with logical file names. This will help everyone out immensely through the design phase.
I develop sites using WordPress because of its flexibility and scalability. It’s simple enough for a personal blog and powerful enough to run corporate websites with multiple authors and users. It’s also one of the most SEO-friendly content management systems out there. The fact that it is a content management system also speaks to its importance in content-driven design. The content is leading the way so we want to use the best system for managing all that content, too.
In website design, remember that less is more. You don’t have to be minimalist to put this philosophy into play. Take a look at what two of the most used websites in the world do with their home page design and content:
Let’s look at Yahoo’s home page very quickly. The site has always been a portal for news, search, services, email, etc. They will continue to stay that way. There is a huge need for them to place a lot of information just at the surface and people need to be able to get into the part of the site they want very quickly. Looking at the way things are laid out and the sizes of the content areas, Yahoo wants you to stay on Yahoo.com for as long as possible. They put the large carousel of headlines and tempting news stories large and right in the middle of the page. It’s so easy to spend 20 minutes flipping through all the headlines. There is a mix of temptation stories and real news here that just seems to keep people going.
The site has also given priority to their services on the left-hand sidebar. They’re colorful and large. They’re also in a place where people will notice them immediately–left side of the page in a vertical orientation with lots of white space.
Though Yahoo has always been a search engine, the search options seem less prominent in the new design. The search box is at the top but gets dwarfed by the huge news carousel. There are also some trending links to the right that help searchers find specific searches, saving them some time and effort.
In-depth news stories are tucked away under the large carousel. For those that want more traditional, category based news, this is where they would go (probably after a quick sift through the carousel). For our purposes, notice that each story is a small thumbnail with a headline. They don’t give you everything so as not to overwhelm users. This is a key to both Yahoo’s site and Google (which we’ll look at in a minute). If you have massive amounts of content, you can’t hit visitors with it all at once. Tease and deliver after a click through. It makes the site scannable and a more enjoyable experience for users. (Read: They won’t hate you and curse you on social media!)
Finally, Yahoo provides users one-click access to personal features, such as email and their Yahoo account. This is pretty standard for subscription sites and is almost always located in the top right corner of the page.
Next, let’s take a look at Google’s home page.
Even though Google and Yahoo are in the same overall space (search) they take vastly different approaches. One of Google’s corporate principles is to do one thing and do it well. They are a search company. (At least, that’s what they tell us. In reality, they are an information archival company.) Their home page makes the one thing they do incredibly easy. Users type in Google.com in order to search for something. So the search box is prominently displayed on the home page.
Like Yahoo, Google also places account and personal information in the top right hand corner of the page. Instead of laying out all of their services, however, they’ve taken a much more minimalist approach to showing them. They are essentially hidden behind a drop-down button.
Finally, Google has included one-click access to its most popular service–Gmail–as well as links to Google+.
Now, we know from experience that behind that ultra-minimalist home page at Google.com there is a glut of information. The whole web is indexed. But what they’ve done is taken an anti-Yahoo, anti-AOL approach to searching the Web. They do one thing and do it well. Maybe that’s what your customers secretly (or not so secretly) want your website to be. Maybe they expect more in the way of news and information. That’s something that has to be decided before beginning a design. Every choice you make after that should determine the design that is produced in the end.
Here are some content-driven design questions that you should ask:
- What do users click on when they visit our site?
- How much information do users actually need to take the action we want them to take?
- How can we display the information so that it’s clear, concise, and not overwhelming?
- Is there content that is superfluous?
- Is there content that is useful but only in a secondary or tertiary way?
- How can we help all users who come onto the site?
Modern Design Rules/Elements
Website design has changed a lot over the years. Let’s take a look at a few elements and expectations that visitors have that will drive the design and content that you choose.
If your site is not friendly to mobile users, you’re behind and you need a new site immediately. It’s now true no matter where in the world your users are. Your site must not only look good on any kind of device, it should also function well on any kind of device. This means responsive design, large buttons, considering vertical scrolling, lightweight pages, and plenty of white space between elements, especially if there are interactive elements. This is just a short list. One thing that will help is to try out the demo of your design or theme on an actual mobile device. See how it works on a phone, laptop, and/or tablet. If it’s too hard to use then move on. If the information is too jumbled up, move on. There are really good designs that look great on mobile, too. Don’t settle for something inferior in this area.
Does your design incorporate video? If it doesn’t then move on. You want to be able to incorporate video into the design easily and ubiquitously. That means you can embed from your site or from a social site like YouTube or Vimeo. Not having the ability to incorporate responsive video will be a headache for your design when it’s translated to mobile.
Does your design include social media? It used to be good enough to put a few links to your social accounts. Now, there is no excuse for you not to be able to put your interactions onto your website. Don’t just link with social media, connect and integrate it, especially if you have an active user base in your social network. One of the most forgotten elements is giving people a chance to share your posts and pages via social networks. This can be done quite easily.
Does your design help bring clarity to your message? If the message is not clear and immediately perceivable by the user then you will lose visitors. You cannot be all things to all people, but for those who can benefit from what your organization has to offer, it should be clear how to get the necessary information and take some action on it. If content is king, then clear, concise, actionable content is a wise, benevolent, and powerful king. Test the clarity of your content by bringing in others to use the site. Tell them what the target action is and have them go through the site. Is it clearly laid out? Does it lead to what you want the visitor to do?
Finally, let’s talk about speed. The once advantage that Google has always had is that it’s fast to load. There are no images that clutter up the download of the page. Just as a primer of how the Web works, each time you “load” a page, you’re downloading an HTML file from a remote server somewhere in the world. That page might have several other types of files attached to it, as well. Each time you add something to a page (photo, video, cool interactive actions, forms, etc.) you are increasing the amount of data that needs to be downloaded by the user.
Not every user is on a 150 mbps data line (that’s really fast) but most now have some form of high speed access–that is, half of the users of your site. What do the other half have? 2G. 3G. 4G. They’re on a cell connection with a mobile device that is significantly less powerful (in terms of processing information) than a desktop or laptop computer.
What this means for your design is that is must be as lightweight as possible while still allowing for the data and functionality necessary to get visitors to do what you want them to do. This can be a very tricky space to be and requires some fancy footwork, at times.
What’s the big deal about page load speed?
Many mobile users have data limits. Heavier pages take up their available data each month. If you use up a lot of data, it better be worth it or the visitors will not come back.
Google now includes page load speed in their algorithm for determining which sites come up highest in searches. If you want to be on page one, the site should load quickly.
If your site gets stuck or takes forever to download on mobile, users will go on to the next listing. If you’re very special or highly regarded, they’ll wait. If not, visitors will go to someone else’s site. Make it load quickly and give more visitors a chance to get onto (and stay on) your page.
Designing for the Web is becoming a lot more complex than it used to be. Not only are there more tools available to access your website, but visitors are becoming more sophisticated. They require that your website become more sophisticated, too. They want you to help them solve their problem quickly and clearly.
If you are knowledge-based, your information needs to be clearly laid out, fast, and actionable. If you’re a product- or experience-based organization, you need to make sure the information gets the user quickly and efficiently to a trial or purchase decision. It all begins with the content and the content is amplified and held together by solid, user-focused design.