Why You Need to Consider to Content-First Web Design

Why You Need to Consider to Content-First Web Design

Having a powerful website and a fantastic UI is important—not only for your visitors’ experience, but also for SEO purposes. That being said, without the right content in place, all that well-planned and laid-out design and development work will go to waste.

You want to tell a story through the website you’ve built, right? But how can you compose a story through design if you don’t even know what message you’re communicating through the content? My suggestion: Approach the building of your website the way you would approach a blind date:

Think about your website like a movie. The content would be the words spoken by the actors; the website design and functionality like the setting. What would happen if George Clooney whispered words of love and admiration while hiding out from a psycho killer in his grandmother’s basement? You’d probably be confused, maybe even cursing Clooney for tricking you into seeing what was supposed to be the feel-good movie of 2017. Right?

Discord between your design and content can lead to similar types of confusion and frustration among your visitors. That’s why content should receive top billing in your WordPress website’s development process. Without those words (or at least the underlying message behind them), you won’t be able to effectively build a website around them.

In 2017, how about you give a content-first mentality a try (if you’re not already)? You may be surprised at the improvements it brings to your process, how easy it is to design and develop when you have guidelines to work around, and how much happier clients are at the end of the day.

Weighing the Pros and Cons of Content-First Design

At first, you may feel reluctant to re-shuffle your development process around. After all, everything seems to be working just fine right now. But if you haven’t tried to put the crux of your website (the content) ahead of everything else, how can you really be sure your process is fully optimized?

Let’s consider the pros and cons of a content-first WordPress development process:

The Pros of Content-First Design

Clearer Guidelines
While you may feel more restricted in how creative you can be in terms of design, this is good. You need a rigid structure in place and a story to follow when building a website. By designing around content, you’ll no longer have to change a design to accommodate content that glaringly contradicts or contrasts it.

Higher Quality Content
With content-first design, you’ll no longer have to ask your writer (or client) to cut down on or pad content because what was written doesn’t fit the already-approved design. Your site’s messaging can be preserved in its original, intended state as you creatively build the design around it.

Greater Consistency
When each piece is built separately from one another, there tends to be something lost in the union. Content gets cut, designs get reshuffled at the last minute, or the story is inconsistently told. Content and design should work together as a whole, and that can only happen when content comes first.

Improved Productivity
Design-first web development doesn’t just lead to clashes between the stories told on-site. It also leads to clashes between team members as content creators interpret the vision one way and designers another. Instead of spending time arguing each side’s point, you can be more productive by collaborating logically on your site’s story.

Streamlined Process
The process you follow now may seem efficient and effective, but if you’re not building your WordPress sites around content, then you probably have to deal with unpredictable project scopes and timelines. You’ll be surprised how easy it is to streamline your process by putting content first.

Higher Profit Margin
If you had to guess where your business loses the most money and momentum, would it be fair to say it comes from the client? They don’t like how something’s written. They don’t think the design works with the messaging they made you revise. Or they’re unhappy about how long all this took even though they asked for more revisions. If you regularly field complaints or revision requests from your clients, content-first design will cut down on waste and give you more time to focus on creating well-thought-out websites.

The Cons of Content-First Design

Restructuring of Process
Switching from design-first to content-first web development will no doubt lead to a big change in how you approach each project going forward. This will not only affect you in terms of time and money spent to restructure, but it’ll affect team members that need to be re-trained as well as clients as your team adjusts to the change.

Additional Costs
If you don’t have a reliable source for content creation right now, you’ll need to find one. Not all writers are expensive, but you may be hard-pressed to find one willing to work for pennies.


Manage unlimited WP sites for free

Unlimited sites
No credit card required

More Patience
If your business model relies on clients to provide content, then you may find yourself feeling frustrated as some clients keep you waiting around for the lynchpin of your site. This means you’ll either have to put your project on hold or you’ll need to get creative with “creating” placeholder content so you can move on to design and development in the meantime.

The bottom line? Content-first design will take some adjustments, but the payoff is worth it if you want happier clients, less revisions, and higher profit margins.

How to Effectively Implement a Content-First Approach to Your Process

You want to keep your process under control, costs in line, and everything running logically and smoothly. Create the heart of your website first, and then let your design creatively fly around it.

Want to implement a content-first approach without throwing your entire business into disarray? Here is a web development checklist that will enable you to shift your focus and make the transition smoothly. You’ll find that all of the work you already do is here, it’s merely reorganized.

Step 1: Prepare

  • First and foremost, discuss strategy with your client. Then discuss the relevant points with everyone else involved on the project.
  • Create a style guide, if your client doesn’t already have one.
  • Review your client’s current site and assess what sort of starting or reference points you have to work with.
  • Define which pieces of content need to be created based on the customer’s journey through the site map.
  • Create spec sheets that include each page of the website and a brief outline for each.
    Develop a project timeline, starting with the content creation.

Note: For larger websites, you may want to focus on getting the home page copy done first. That way you won’t unnecessarily hold up production on the whole site. Be sure to include this consideration in the planning and preparation phase of your process.

Step 2: Create the Content

  • Provide writer, editor, and SEO (if different people) with the spec sheets, style guide, current client website, and any other reference material you have. Remind them about the site’s mission and goals.
  • Write the content, including header tags, metadata, calls-to-action, sidebar content, and more.
  • QA the content and make sure it answers your visitors’ questions right away.
  • Also, be sure to review content for its mobile-friendliness. While a well-written website may seem great at the time, less space on mobile means content should be kept brief and to the point for all platforms.
  • Review content with the client and get their sign-off before moving on. Content rewrites take time, but they also ensure you don’t waste time later having to both rewrite content and redesign your site.

Note: If you’re anxious about the content creation or rewriting process holding up your timeline, consider using placeholder content while you design. This does not mean you should use Lorem Ipsum. All you need is something similar to what you’ll eventually have on your site. Consider using drafted text from your writer, content from the client’s current site, or even copy from a competitor’s site.

Step 3: Design and Develop

  • Build your site’s design around the content. Use the initial project specifications as well as general design best practices as your guide. These could include:
  • Client’s design preferences
  • Strategic use of white space to highlight content
  • Selection of design elements that align with story, like:
    • Color scheme
    • Images
    • Typography
  • Inclusion of content breaks and page formatting to improve readability of content
  • Development of customer journey through strategic placement of CTAs
    Responsive design choices
  • QA the design and content in conjunction with one another. They need to tell the same story in order to be effective.
  • Review the site’s content and design with your client.
  • With client’s approval, complete the development of your website using your usual process.

Wrapping Up

Content, design, and development are all closely related, but that doesn’t mean they can be tackled in whichever order seems the most convenient. If we’re looking at the process of building a website logically, content should come first. By being more strategic and focusing on creating a consistent story throughout your WordPress site, you can begin using this content-first design approach in your own process today—and reap the benefits in no time!

Over to you: How many times have you missed a project’s delivery date due to content revisions?

Brenda Barron

Brenda Barron Brenda is a freelance writer from Southern California. She specializes in WordPress, tech, and business and founded WP Theme Roundups. When not writing about all things, she's spending time with her family.