• +27 81 790 2387
  • Mon-Fri, 08:00-5:00

Content-First Design

Content-First Design

Content-First Web Design-3 Steps to Effectively Implementing It

Do you think that having a responsive and elegant website design is all that you need to enhance your visitor’s experience? Well, yes, only partially! Without the right content to flaunt your web design, no matter how swift and smooth the website’s UI and UX experience is, it is bound to go wasted.

It is essential to have synchronization between the design and the content such that the design compliments the words, and gives users a quick idea regarding what the message is even without reading the content fully. This is what a content-first design focuses on.

I recommend you give this approach of design a try? Rest assured, the content-first approach would only bless your web design with significant visible improvements. Let’s have a quick insight into it in detail.

I: What is Content-First Design?

Content is the uncrowned KING of a website. It is the content that makes the users visit the website site and want to subscribe to newsletters as well as follow social media channels. If content is so important, why is it mostly considered the second choice? Consider, for example, you want to populate a slider.

There are two approaches to achieve that:

First Approach:  The slider is designed first as per the requirements and the content written accordingly.

Second Approach:  The content is written with carefully thought taglines and then the sliders background design is populated with suitable images to compliment the text.

Now, suppose, the website is an e-commerce business that sells women’s apparel. Following the first approach, the process would be to insert images of women skirts and tops on the slider background and would look perfect. Now, it is time to populate the content.

Suppose,  the decision is that the leading content was to talk about 100% customer satisfaction and payment guarantee, but, now you have to optimize this tagline as per the background image of women skirts and tops as well. This is nothing but the death of an idea! This is exactly what happens when a design-first approach is followed instead of a content-first approach.

For composing a story through design, you have to be aware of the message intended to communicate through the content. The website visitors will be frustrated if they find discord between content and design. Therefore, it makes a lot of sense to keep content on priority in the process of development.

Talking factually, Content-First design approach was founded by Jeff Zeldman in the year 2008. It emphasizes that content is to be determined ‘first’ before web design. For instance, any editorial designer starts working out only after the design book is written.

Similarly, an architect draws a blueprint after knowing the function of the building. Following the same pattern, a web designer should determine the ‘content’ first before starting the design. Briefly, the content-first design aims at knowing the purpose of design and how it can be achieved.

II: Effective Implementation of Content-First Approach

With all that has been said, do you want to implement the content-first strategy and keep the processes under control without disarraying the whole development cycle? Well, here are a few tips to sort this out!

  1. a) Preparation

The first and foremost step is to conduct an in-depth session between the client and the developer and establish the requirements. If a website is in existence then the discussion should revolve around the likes and dislikes of the current website. On the basis of the inputs received, make a collection of all required content whether they be plain text, rich text, image, video, and links and so on and evaluate this as per the criteria of likes and dislikes.

It is highly recommended to keep everything well-organized and streamlined. Create proper spec sheets with a brief outline for each page along with the stipulated timelines in accordance with SEO inputs to make sure that everything is completed on time.

However, to keep the processes on track right from the first step, it is highly recommended to involve the SEO professional who would help you in keeping site SEO optimized right from the beginning. SEO objectives and the design of a website implementing SEO from the start is of vital importance (Do some link bank to other article)

Take into consideration that not all web design companies have SEO experience or experts on board and the help of a outside SEO specialist may be needed.

However, if you are working on a big portal, it would be logical to make the entire team work on the home page first while sorting out other pages just to ensure that production is not halted at any point of time.

  1. b) Create

Creating a model for the content is as if the sitemap is being created. (I remember back in the late nineties sitting with a pad of paper and outlying each page on an A4 paper with a master sheet and crude arrows all over the place) The First strategy for the content should be such that, instead of focusing on pages, you give more attention to the types of content and their characteristics. It helps you in mapping out the content types, requirements and relationships among them.

For eliminating gaps between content and web design, the design process should be started keeping the conversion goals in mind. For defining the goals, evaluate the good and bad performers on the current website.

Do a complete content audit for creating a content plan by answering the following questions:

  1. What are the actions that the users are likely to take while visiting the website?
  2. Which factors are more likely to encourage the visitors to take this action?

The content first approach must appropriately answer these questions.

Once all the answers have been extracted, provide the required inputs to the writer, editor, and SEO experts.

Start the process by asking them to write content for header tags, calls to action, sidebars, and others. Make sure that the content is mobile-friendly too, in addition to the design. Content could be made responsive by writing briefly such that the mobile website doesn’t look crowded.

Make the content prototype in a Word Document Text file or Google Doc. The prototype should be tested by the website owner in conjunction with the web designer to find out if they are speaking in the same language assimilating the very objective of the content presented.

For the most effective prototype, you can Hire SEO Professionals such as content strategists and copywriters, who have adequate experience in working with a content-first approach similar to the one required. Keep in mind that unless the website owner is able to supply awesome content accumulated over the years pertaining to their industry the strategist and or copywriters would have to do extensive research into the industry that the website is intended for.

It is highly recommended that the approval of the content is done in small chunks rather than trying to approve it all at once. This would save web design team’s efforts in rewriting all of it and would further help in designing the website accordingly.

  1. c) Design and Develop

Now that all the content has been prepared, it is the right time to design and develop. Crafting a design which would help visitors enliven the conversation, irrespective of the technology adopted. Bringing into consideration the web design guidelines and select various design elements like typography, color, and images in accordance with the website’s theme. Further, it is highly recommended to place CTAs strategically in order to make sure that the website meets its objectives flawlessly.

The following are the challenges, which should be utilized as opportunities:

  1. Flexibility: For long headlines, a list view will work better. On the other hand, the legibility for texts on photos will improve with a shadow image or overlaid image.
  2. Content style guide: Add an entry to the style guide, backed by CMS functionality. A character count may be used to limit this or a 3-words-for-button-copy rule can be enforced. Help text can be added to explain the limitation.

But as it is said, everything comes with its own pros and cons

III: Pros and Cons of Content-First Design

1) Pros of Content-First Design

Needless to say, the content-first approach comes with an array of benefits that would surely boost the overall vision of a web design. Let’s have a quick look at a few pros that this approach might have:

  1. a) Higher quality content

With the adoption of content-first web design, you need not ask your writer to cut down extra lines just because the written text would overflow the already approved design. This further means that your writer won’t need to cut down his/her creativity.

  1. b) Greater consistency and streamlined process

If you consider design and content differently of each other, something tends to be lost in the union. Under such situations, contents are cut, the story is told with inconsistency and designs are reshuffled. But by adopting the content-first strategy, both the content and designs are synchronized to work together, as a whole.

The present process followed may indicate to be effective and efficient. But, if you are not building the sites around the content, then you may have to be confronted with unexpected timeline and scopes, which is ruled out by the content-first approach.

  1. c) Improved productivity and lower cost of design

Design-first web development leads to clashes between the stories narrated on the site. Besides, it leads to clashes between the team members because the content creator interprets the vision in some way and the designers in some other way.

Instead of wasting time pursuing each other’s points, they can increase productivity and improve lead time with collaborative working on the story of your site.

If the customers are not satisfied with the website, you will be the ultimate sufferer by losing your margin of money.

On the other hand, if you attend regularly to the complaints or revision requests made by the end user, the adoption of content-first will reduce waste and will provide more time to create well tough-out websites.

2) Cons of Content-First Design

Let’s have a quick look at a few cons that this approach might have:

  1. a) Restructuring process

Changing from design-first to content-first web development could mean a bigger change in an already triggered off project. This will affect time and money for restructuring. It will also affect the team members who are to be retrained.

  1. b) Additional cost

In case, you do not have trusted content writers, this might prove to be an additional overhead, but at the end, it is worth it!

Over to You

Needless to say, the content-first approach offers impeccable benefits over design-first approach. Some things are best achieved when done in a particular order, and website development is no exception here. It is thus highly recommended to develop the content first before designing the layout of the website, and see the wonders happening!

3 thoughts on “Content-First Design

  1. I think this is one of the most vital info for me.
    And i am happy studying your article. However
    wanna remark on few general issues, The site style is great, the articles is really nice :
    D. Good task, cheers

  2. That іs ɑ good tip esⲣecially to tһose new to thе blogosphere.
    Bгief Ƅut very accuate informatіon… Tһanks for sharing this one.
    A must гead article!

Leave a Reply

Your email address will not be published. Required fields are marked *