Why content-first design makes better websites

Let’s talk about the “content first” approach to web design.  

What is it good for? 

What does it look like? 

What is it NOT? 

What is content-first design?

Simply put, it is the belief that we should start with the content (words, pictures, videos, etc) before we tackle the design. This methodology is ever more popular, but it is not a new idea. 

Jeff Zeldman said it beautifully in 2008, when he tweeted: “Content precedes design. Design in the absence of content is not design, it’s decoration” – and his words ring true for more than just web design, too. 

You can see the content-first approach in countless other industries where form follows function… 

  • A script is written before filmmakers start work on the visuals and cinematography 
  • A building’s purpose is determined before an architect starts drawing blueprints
  • A book is edited before an editorial designer starts laying out the pages
  • An apartment is built (at least virtually!) before an interior designer starts work on the living room

In each case, we can see how the “content” of the project (the story, function or purpose) informs the design. When it comes to our industry this translates to collecting and organising as much real, actual content as possible BEFORE we start designing the website, sales funnel, landing page or whatever digital media we are creating. This is sometimes easier said than done, and we’ll get to that in a minute – along with a possible middle ground for those of you still on the fence.

The idea is simple: we cannot create a truly exceptional user experience without first focusing on exactly how to present the actual information in the best possible way. In other words, means we need an intimate understanding of the “function” (content) before we create “form” (design).

Why does it matter?

Come launch day, a website will have a certain amount of text, pictures and videos, it will have a specific number of headlines and bullet lists (or other elements) and most likely it will also have some very deliberate sales messages and calls to action sprinkled throughout. 

In an ideal world, all our choices would have been made to suit exactly that. The layout and flow, colour and typography even particular elements would have shaped by the content.  “Making visual choices based on logical reasoning. Now THAT’S designing” [6] – Laura Elizabeth, DesignAcademy.io

Knowing what we have to work with puts us in a much better position to deliver a hard-hitting, goal-smashing end result. This is true whether we are designing a landing page or an entire website – or even a hollywood blockbuster!

Think of it this way…

Can we really promise a business owner a “high converting website” if we don’t know WHO they are trying to persuade, to do WHAT, and HOW they intend to go about convincing them? What makes us so sure that our design will do all that, when we haven’t seen the content yet?

Now, I’m gonna be bold and say that James Rose and the rest of the Content Snare team agrees with me here. Mainly because they pioneered this kick-ass tool that makes it easier to get content from clients but also because they said so:

“Content is not an afterthought. Your client’s content strategy should work hand in hand with a site’s design and technical aspects.”

Caroline McCullough – Website planning KonMari-style

Yea, but…

Despite all this – I’m guessing some of you still aren’t convinced.
Maybe it sounds good in theory but you’re thinking things like:

  • “Won’t we hold up the project, waiting on content?
  • “What about the clients who aren’t that tech savvy, or aren’t great at writing? I’m not the content expert either, I just want to get on with designing good websites (please and thank you)!”
  • “And what’s wrong with building a flexible design? I’m a pro, I can adapt the site to suit the content later…”
  • “Sorry, I don’t think my clients will buy it – most of them want to see a design first as this helps them understand what content is needed where, how and why.”
  • “Plus, aren’t we just adding extra work for ourselves?”

I know, I hear you. 

I had the same concerns too. 

And, to be fair, we worry about these things because none of us were born yesterday. 

We know that in reality, many clients WILL expect us to “start putting something together” while they “think about” the content. We know there is a risk we might lose the project if another designer is happy to start building right away. We’re know clients getting uneasy when they don’t “actually see” anything for a while and that something like that can kill a project before it even gets off the ground!

If you’re having reservations about any of the above, you’re not wrong. 

The good news is that each of these problems comes with a brilliant solution too. We’ll get to those in a minute – but first, let’s look at the benefits of content-first design…

What’s in it for you?

“I like my process the way it is… why should I switch to a content-first approach?”

Excellent question. Depending on how your projects are currently managed, this might be a major change for you, your clients or your team. So, what’s the gain? And will it be worth it?

Let me describe why I think the answer is YES!
Here’s how content-first design will…
1. solve a bunch of problems you’re probably familiar with
2. radically improve all your projects (in too many ways to fit in this bullet point)
and
3. help you charge more and serve better – with strategic marketing-driven websites!

1 – Content-first design will solve a bunch of your problems

It solves having to redo design or dev work (after the content comes in)

When we build a website, landing page, enquiry form, or anything else really, without knowing enough about what it needs to support, we often find the final content doesn’t fit our design at all. Or at the very least, we’ve missed an opportunity to showcase it more effectively. 

This is a shame because then we have to choose between forcing the fit (either by compromising the content or the design) or doing the work twice by effectively redesigning the solution completely or at least redoing multiple elements. 

It solves “off topic” client meetings (and focusing on the wrong things ourselves!)

“Without any sort of structured content, building the site will be a more time-consuming and frustrating process.”

Jeff Cardello 

Jeff’s warning rings true not only for us, but for our clients too. Without content to give us focus, we’re more likely to become distracted by things that are wholly unimportant – or at the very least, not relevant yet. 

You’ve probably experienced this in some form or another… perhaps the classic “can we have redder red?” when you’re trying to get feedback on something else entirely. When either party gets invested in the ‘detail’ too early in the project lifecycle, we run the risk of spending time on functionality or elements that just end on the cutting room floor. At best, this can be tedious and time consuming. At worse it can derail an entire project, sending it down a long and winding track that bears no resemblance to the route to our final destination. 

It solves not wanting to share a ‘live’ portfolio (because “the client changed a few things, so it doesn’t really reflect my work…”)

This is something many of us struggle with. 

To some extent, it will always be a factor if we have clients who want to update their own sites, especially if they want control over the presentation too. But the truth is: sometimes it’s not their fault. Sometimes we simply end up in a situation where our designs are not working the way we intended. 

This problem was illustrated by Laura Elizabeth, UI/UX designer, writer and speaker earlier this year when she shared a breakthrough with her own projects:


“I realised it wasn’t the clients messing up the design, it was me designing something that wasn’t realistic, or even usable for their business. I’d try to design a website for my product, Client Portal, and I’d hit roadblock after roadblock. I realised my design was restricting me. And if that was happening to me, it must also be happening to my clients! So I completely changed the way I did things. Suddenly things like content and customer research were no longer optional – they were mandatory.”

Laura Elizabeth 

2 – Plus, it has these other benefits that rock…

You get better UX, accessibility and mobile-first design “out of the box”

“Describing content with HTML is not only about lists, paragraphs and headings. It’s also about choosing between buttons and links, dropdown and radio buttons, tables and definition lists. It’s about outlining all functionality with HTML first.”

–  Rik Schennink 

When we start with the content, we are forced to think a bit differently. We immediately focus on categorising and prioritising, which helps us establish a content hierarchy and then we start considering which formats (bullets,paragraphs, tables, quotes, numbered lists etc etc) would best suit each piece of information. 

This helps us structure and present our content in a meaningful way. It leads to a truly semantic design that is typically more accessible and responsive by nature, and ultimately sets us up to design better user experience.

A content-first approach helps the whole team work together in new ways

Starting with the content has a surprising ‘side effect’ in that it reduces dependencies and helps us avoid “tiny secret waterfalls” which often cause projects to run over time or over budget.  

With content-first design, developers can start building out certain modules and components while designers continue composing layouts for different viewports. You might even find opportunities to enhance design or development on the fly, as a result. Some design problems are solved surprisingly easily by CSS so working in tandem allows us to quickly test things in the browser and pivot accordingly.

Meanwhile, content creators and designers are empowered to produce stronger work when they both understand how all the pieces work together – after all, requirements and limitations in one will affect the other, and vice versa. It even helps your client think of the big picture and contribute more effectively too. Awesome!

And it’s great for SEO as well!

If you’ve studied or practiced Search Engine Optimisation you’ll know that both the content and the design are important, when it comes to maintaining a good ranking. That’s because both bots and humans alike need to understand – and value – what’s on the site. The key to this is first making sure that the content fulfils a need (solves a problem, inspires a belief, answers a question, whatever the case may be) and then ensuring both the semantic design and visual design work to communicate this.

“Content acts like a lighthouse for web crawlers — it signals a site’s relevance and provides the information web crawlers need to sort and rank a website. A content-first approach that prioritizes SEO leads to better search rankings and a better user experience.”  

Jeff Cardello 

3 – But most of all – it just makes sense…

At the end of the day, content is why people visit a website. Your client is most likely hiring you because they want to leverage their website to make sales, raise awareness or convert traffic to some other result.

This means our job is to present their content in the most compelling way. Our job is to use our design skills as a tool to help tell their story – not just as a means to add functionality and style. When we design ‘last’ we can focus on presenting the content in a way that communicates meaning and drives action. 

Perhaps best of all – this is where you can create immense value for a client – and charge accordingly! 

No longer are we just creating pretty pictures of web pages or building out cookie-cutter solutions (which look amazing, I’m sure, but that’s only half the point). Instead we’re making informed decisions, based on logical reasoning and real-world situations. We’re designing strategic solutions. This is what separates the ‘implementers’ from the ‘consultants’. 

This is where you can step into the role of the expert and become the designer your client deserves, not the one they (think they) need.

Sound good?

Now, Let’s bust some myths

Myth #1: Content First = Design Last

Yea, the name kinda does imply “design last” – or at the very least, “design second” – and honestly, sometimes this one hurts because we all know HOW IMPORTANT DESIGN IS.

We’re often at the front line of a brand’s attempts to market themselves, and we see first-hand the difference that a strong design has to sales conversions. We also take pride in our design skills because we know what an important role they play in the projects and businesses we are involved in. And I think that’s true. But I also think of it this way:

It’s precisely BECAUSE design is so powerful, that we’re better off wielding this tool on the real content – it’s how we can do our best work! 

And let’s be real for a sec. Content is why people visit a website, after all. Content is what gives the design meaning. 

👉 The message (meaning) is the key. 

👉 The content (words, videos, images etc) is what delivers the message. 

👉 Design is what makes people pay attention to the content. 

Design is what guides the user from one piece of content to the next, and helps take them on a journey the business owner (or marketer, or teacher) needs them to take.

This is why great designers are not only worth their weight in gold, but why I do truly believe that design can make or break a project. But so can the content.

Myth #2: ‘Content First’ is all about the written word

Content is not just copy. 

“Content” includes all sorts of media that comes together to tell the brand’s story. It’s the videos that show how a product works, the photos that invite us into their world, the blog posts and sales pages that and guide the reader on their journey.

It’s their logo, testimonials, products, embedded social feeds, downloadable PDFs, blog posts, podcast audio, interview transcripts, picture slideshows, infographics, enquiry forms, book reviews and all the interactive elements throughout the website too.

When you think of it this way, it becomes even more clear what a difference content makes to design decisions. 

I’m sure you’d approach a site with 100+ videos very differently to a site with a single explainer or highlight reel on the homepage. Right? But even when the contrast is not quite as stark as that, we still find enormous variation within content of any given type. Take testimonials for example – how many do they have, are they similar or different lengths, do they all have pictures? This is the kind of information we need about our content, even if we can’t get our hands on the final content itself.

Myth #3: It’s hard enough getting content from clients, I don’t want to make it harder by doing it all upfront!

Okay, fair enough. This is a pain point that many of us relate to – including the Content Snare team, whose website you’re reading this on. 

Content Snare exists right at the intersection of web design and content creation. They’ve made it their business to make it easier for web designers, digital agencies and other organisations to collect content for their projects. As a result, the team has a backstage pass to the difficulties we all experience in this area, but also to the solutions, tools and methods than can help ease this process. 

Luckily for us, they also wrote about some of those ways here: How to get content from your clients easier by design

Content Snare is a tool that also helps you collect content from clients, which is the biggest bottleneck in the design process.

Start your Trial here

I LOVE this system for acquiring information from clients. So much of it is already done for me and with a few tweaks, I can send the form and the client know exactly what they need to provide.

Jennifer Ward

J WARD DESIGN STUDIO

I think the secret is just that we’ve made it easier for clients to give us stuff. There’s no barrier, there’s no friction. People haven’t even complimented us on that. It used to be a fight to collect stuff.

Jarrod Robinson

THE APP MATCH

Myth # 4: We risk delaying our projects if we rely on a content-first strategy

Yes, if we did nothing until all the content was ready, in it final form, that would definitely cause a big delay. But thankfully, that isn’t what a content-first approach suggests. 

Instead, there are plenty of things we can get started with, while the content is in development. (And this is actually one of the most overlooked benefits of this approach, because it means multiple fulfillment teams can be working in tandem, this avoiding “tiny mini waterfalls” in our otherwise agile approach to web design. More of than in a minute…)

Here’s a few examples of what you CAN get busy with:

  • Identifying the ‘types’ of content expected, working with the client to develop a content strategy and mapping out the information architecture 
  • Designing the overall look & feel of the site (mood boards, colour palettes, aesthetic styling) without going into individual page layouts
  • Upselling your client on content curation and creation services (stock photos, banner images, web copy)
  • Basically, everything except the actual flow of content and placement of elements on each page. Think wireframe vs mockup. 

As Mark Boulton, author of Designing for the Web, points out: content-first is about knowing the structure and format of the content we’re designing for, NOT about waiting for the final draft before we do anything. Kyle Van Deusen, who you may know from popular WordPress podcast The Admin Bar also explains this well:

Myth #5: Lorem Ipsum is a good enough placeholder

Alright, this one is tempting because it feels like a good middle ground, right?

But, like anything that sounds too good to be true, Lorem Ipsum can be a pretty dangerous trap. Why? Because we often end up including exactly the right amount of text (or the right shape images, for that matter) to make the design look great. This gives us the false impression that all we have to do is “switch it out” for the real material, later – but unfortunately, the odds of the final content fitting nicely are about 1000 to 1 (or worse probably, I just made that up but it sounds reasonable enough to me 😂

Using Lorem Ipsum feels like speeding up the design process, but it’s not. It’s an artificial fix that just moves the hard work from one end to the other. It means you’ll increase your likelihood of redesigns (or revision rounds that are more like total “do-overs”) and that you’ll probably find yourself awkwardly mumbling “oh the client maintains that site now…” when it stops looking like it should for your portfolio.

Myth #6: I’ll probably alienate my client (and possibly lose the project!) if I insist we focus on content over design

Okay, actually you make a good point there. 

Content can be one of the biggest points of contention between team members working on marketing and design projects and can create absolutely friction in the customer relationship too. So why would you want to make it “worse”?

The good news is, it doesn’t have to be that way. It all comes down to setting expectations, having easy-to-follow systems, and positioning yourself as the expert so your clients trust and follow your lead. This is easier said than done, which is why we decided this topic deserves a post of its own. Stay tuned for ‘how to sell your clients on content-first design’ coming soon! 

Ok, what next?

We believe the content-first design approach is a kick-ass way to build things because it empowers web designers, agencies and marketing professionals to create a solution that has real meaning for the project. 

But it’s not just us. 

When a bunch of smart people we know where chatting about this, they made some pretty good points too. So if any of you are still left sitting on the fence, here is what they had to say:

And perhaps the most succinct among us:

Quotes used with permission from the following people: Kyle Van Deusen from OGAL Web Design, Adam Hempy from Better Proposals, Tim Maulden from Virtue Design, Oliver Martin from Wunderful Designs, Anita Van Den Bos Smit from Talent and Skills affordable webdesign, Mel Telecican from Loyalest, Joel Pena – Multimedia Designer, Doug Seidl from Straight-up Digital Marketing

Content-first design is a powerful approach that typically results in a cleaner, more intuitive design, a better user experience, improved accessibility, easier SEO and responsive design – and ultimately a website that best serves the needs of the client and their audience. 

A bit hard to argue with that!

So now you might be wondering whether you can feasibly make the switch – are you going to be in for a world of pain, or will the transition be easier than expected? That answer depends a lot on your current processes – but the good news is, we have plenty of help and resources coming on that front too. Watch this space for “part 2” which will break down the HOW of content-first design and set you up for success with this approach!

Or, if you’re ready to dive in feet-first then we invite you to check out the free trial of content snare and see what a difference it makes to your next project!

Get content from clients on time, without email

Content-first design begins with… well… content. But the process of getting content from clients, writers or stakeholders is a grind. It often results in project delays, which wastes your time and something means you don’t get paid.

Content Snare provides a seamless way to organize your content and collect it from people, without productivity-killing email trails.  Try it for free by clicking below.

Try Content Snare

Georgia Mountford

Georgia is an avid tea drinker and lifelong fan of all things pink & sparkly. She’s also a digital strategist and creator who helps people bring their business to life online.

She built her first website at age 11 (after deciding that the internet needed another Harry Potter fansite) and continued pursuing all things nerdy and creative until she found herself in a full-stack developer role 10 years later. Georgia took a break from programming to learn the ropes of small business management in 2011, which turned out to be the start of a new love affair with marketing and communications as well.

As a seasoned traveller who still can’t pack light, Georgia is most looking forward to the day she has a robot to pack her wardrobe for her.

Get help, totally free

Have questions about getting more clients, the best hosting, building sites faster or just need a shoulder to cry on? Come join us in the group, hang out and get answers.

Are your clients taking forever to send you content?

Content Snare helps digital agencies get website & marketing content from their clients on time, in the right format, without email

A free weekly email with amazing resources to help you grow your web agency

Thanks for all the great insights and tools. There are not too many people I take notice of when they post stuff. Thank you.

Daniel Doherty
Content Kitchen

  • Tips on how to get more leads and convert them to sales
  • Best tools to use in your business
  • Improve your processes to get more time and have a life again

Learn More

x
64 Shares
Share
Tweet
Share