How to make a website

“Make it simple, but significant.”

Don Draper

Every brand has a website getting the audience to buy, sign up, donate, volunteer or vote. These ‘conversions’ are the goal.

Your website is the online backbone of your brand.

First, it gives an overview of your brand and its promise. Then, it gently guides your audience to a commitment, with a signup form or a web store. Finally, it’s a tool to analyze your user needs and preferences. That’s why:

We’ll start building your Brand Experience by making a website.

In this chapter I will:

• Outline some rules for websites.
• Warn you about agencies building your website.
• Show you the steps for designing and building a website.

The steps in this chapter will produce an affordable, user-friendly website that converts your audience. Ignore these steps and you’ll probably end up with an expensive mess that does nothing but damage to your brand.

Website functionality and design changes at a breakneck pace.

Yet people are still people. Their patience and capacity to process information are limited. Their fingers remain the same size. They still decide if they want to stay on your site within a few seconds. That’s why:

The principles of making websites remain the same.

Let’s explore a few of them, and draw some conclusions as we go.

The internet is of highly variable quality. Everyone knows this. That’s why:

Users spend their initial moments on your website in ruthless judgment.

Their only question: is this site useful or should I abort my visit?

The time spend on your website follows a Weibull distribution . The likelihood of leaving decreases with each second spent on your site. Users grow optimistic over time, much like the merciless judges on your favorite talent show.

The first 10 to 20 seconds on your website are critical.

However, if you manage to survive them, users can be willing to spend 2 minutes or more, an eternity on the internet.

Your user is always on a quest for relevancy. If the site is not relevant to her needs, she will bail.

To judge relevancy, users compare the words in mind with those on screen.

There should be a perfect match. If a user searches for ‘dog food’, your text should include the words ‘dog food’. These keywords contain a wealth of knowledge and associations, without you having to explain anything.

Use keywords in your header. Not synonyms, play-on-words or poetry.

Want ‘dog food’? Then ‘Pet meals’ or ‘kibble time’ are mismatches. Now users must spend mental energy linking their keywords with the words on your site.

The same goes ads and the landing pages they point to. Avoid any disconnect within the first 20 seconds of the visit.

There are tools to find out what  keywords your audience uses. Use them to decide on what words to employ for your headers and copy. Also, Search engines will reward content that matches better.

Given that your users are just passing by, and even the most generous of them will stay only a few minutes:

Make sure users grab the basics of your brand as they scan your site.

• Create visual hierarchies by structuring text with (sub)headlines
• Break your pages up in modules.
• Make your design as clean as possible by eliminating distractions.

Never underestimate the visitor’s need for clarity and brevity. Your visitor prefers to think about things that are easy to think about.

That’s why they stay when your website is easy to navigate and understand and leave when it’s not. Also:

Cut the waffle. No-one wants to hear you pontificate.

Users visit for their own benefit only.

• Keep it short & sweet. Every second of attention is precious. Strip every superfluous word, sentence, or paragraph.
• Be generous with headlines and sub-headlines to structure your text.
• Use bullets instead of long sentences, where possible.

Stuffy paragraphs merely serve as walls of words. They repel your user and give the impression that you need to read everything before committing.
Scrap them.

Conventions exist for every type of site: eCommerce, news sites, restaurants, and social media. Others in each category have run countless experiments to figure out the best ways to present information, structure sites and get conversions.

Conventions are your friend if you respect them.

Users have grown to expect websites in each category to feel and work a certain way. Every time you ignore a convention, they will need to learn something new.

User time and patience are best spent on your brand promise.

Don’t waste their cognitive ability by defying convention. If you do, be very sure there is (a) little learning curve and (b) the extra value is worth the friction. Since these are generous assumptions:

You are better off borrowing the best practices from your competitors.

Be strict with creative agencies. They don’t get peer recognition, industry awards or an exotic portfolio by meekly following ‘convention’. Nor can they bill a lot of hours. These are strong incentives to ignore what’s been tried and tested.

Finally, this is a mobile-first world. Even though you’ll design on a laptop or desktop, your visitors are most likely to come by phone.

Prioritize how your website looks and feels on smaller screens.

• Make it fast. Loading speed matters for users and search engine rankings. Compress your images and use caching.
• Make it readable. Smaller screens need large buttons and large text.
• Make it responsive. Have your layouts adjust automatically to any screen size, whether it’s a desktop, laptop, tablet, or mobile phone. Most templates and website builders automatically do this.

So design your website with the small screens in mind. Keep testing and optimizing, and not only on the device you’re developing on.

We now design your website before we build it, based on the above principles. I’ll show them some steps, each of which you can do yourself.

If you’re hiring an agency, beware of the ancient trick: quote a small amount based on your initial briefing and explain the need for more hours after the first invoice.

Without a complete briefing, agencies can try to lock you in with low quotes. The solution is to give them a full briefing with a sitemap, wireframes and detailed functionality (step 1 to 3), and ask for a fixed project price.

You should state a purpose for your website.

Don’t worry, this is not some feel-good exercise to get you pumped for the hard work ahead. Defining a purpose is vital, because:

Your site won’t do what you want if you don’t define what you want.

Sadly, ‘something awesome’ is not a purpose.

And neither is ‘informing and convincing people’.

Your purpose should be singular and measurable.

That’s why it’s the main measurable purpose (MMP). It provides both guidance and a metric by which to judge your efforts. Do not start building a site without it.

So what will be the MMP of your website?

• For a webshop, this might be
• For a subscription SaaS business, this might be
• For charitable and political sites, this might be donation

Or it could be brochure downloads, email signups, or incoming calls. You’ll notice a pattern:

Your website MMP is all about getting users to commit.

For BrandBuilding.com, the MMP is outbound traffic to booksellers. For Toby, my subscription dog food business, it’s 2-week trials.

You also might have secondary objectives, like recruiting talent or raising brand awareness. These are valid, but not as important.

Your entire site should be built towards realizing your MMP.

This is why big companies have a separate recruiting site or different sites for businesses and consumers. It allows them to efficiently move different target groups towards different MMP’s.

Next, you must come up with a page structure that serves your MMP. The fancy word for this is a sitemap. It provides an overview of your site’s content and ensures your pages can be intuitively navigated.

A. List all the pages you’ll need.

You’ll have a ‘home page’, and perhaps an ‘our story’, ‘referrals’, ‘shopping cart’, or others. Each should contain information that helps your visitor contribute to your MMP.

B. Structure your pages in a tree.

The sitemap can be a template for your navigation structure later.

Designing your website is time-consuming. So is building one. That’s why you sketch every page first.

These sketches are called ‘wireframes’. They allow you to change the layout when it’s still cheap and easy to do so.

You should wireframe each page in your sitemap before designing it.

Wireframes give pages a visual structure. They do not include content. Images can be represented with rectangles, whilst text can be visualized with simple lines. You aren’t using colors, logos or other artwork.

The shapes only represent these elements on each page.

Don’t include design elements. They distract from the purpose, which is deciding where things go, not how things look like. You’ll be coloring in the wireframe soon enough.

Wireframes must be in grayscale so only the layout is in focus.

Start again by listing all your elements to include on each page. Next, arrange them. You can use pen and paper, PowerPoint or a tool .

Naturally, content pages – like news items or case studies – only have to be wireframed once.

You bring your wireframe to life by adding your design elements. If you’ve followed these steps, and you have a Brand Identity ready, this step will be easy.

You can design the site in Photoshop based on the wireframes.

You can also go one step further and prototype your website. This means using a prototyping tool  instead of Photoshop. Only do this if you are going for high-end websites because prototyping itself is labor-intensive.

There are several options for each ambition level and budget.

You code from scratch. It’s the only way to get an exotic design or special functionality.

If you have coding skills, I don’t need to tell you that there are multiple frameworks to choose from, each with libraries to make your life easier.

Code yourself if:

• Your functionality or design demands it AND
• Skills (or funds) are

Coders are in demand and thus expensive. If you can’t afford them, you’ll have to make concessions in your design and functionality. Or sell a kidney to make it work.

The design or functionality of 95% of websites does not require coding skills. Both are available as templates or plugins respectively.

Better said, everything you want already exists.

This doesn’t mean you aren’t creative. You just don’t have to re-invent the wheel. Here, I walk with the herd and recommend a Content Management System (CMS) called WordPress.

A CMS is the Swiss army knife for creating and publishing web pages.

And WordPress is the most popular version on the internet. More than half (!) of all websites run on WordPress.

The CMS WordPress has an ecosystem of free and paid building blocks.

These building blocks make building your website as easy as playing with Lego’s. Heck, even my 84-year old grandmother runs a WordPress-powered site for her paintings.

Most designs can be built with a WordPress drag and drop page builder.

Now take your design wishes: whatever you have in mind, there is a 95% chance it can be built with a drag and drop page builder. I use the Avada template with its Fusion Builder.

Most functionality is available as plugins to WordPress.

Whatever functionality you have in mind, there is a 95% chance it’s available as a (paid) plugin:

• eCommerce platforms with subscription options exist.
• Real estate websites with listing filters exist.
• International trading platforms exist.

Use a CMS if:

• Your functionality is available in WordPress plugins
• You can learn WordPress or have some money to pay for these

Only need an online presence with no special design or functionality? Use a website builder like www.wix.com or www.squarespace.com.

Pick a website builder’s template and jam in your content.

Just strip away what you don’t need. Obviously, the templates of website builders won’t accommodate anything beyond the basics.

Use a website builder if:

• You have no resources, cognitive or otherwise
• You don’t care about how people perceive you
• You only have to show some pictures of your xylophone

Kidding aside, website builders are a valid option if both your requirements and your resources are very limited.

No matter the chosen method, there are guides available online to get you started. Go with what your resources and demands dictate, but with no more. There’s no need to waste money or time.

Also, if a large chunk of functionality is available within the CMS, you can always opt to have some custom code supplement the available plugins.

Websites must convert your visitor. They are only effective if they are designed for conversions from the beginning.

The principles of websites should be followed at all times. If they are ignored, your user ends up leaving frustrated.

Designing a website is straightforward and easy, and can be done by anyone. Conventions should be respected. Best practices can be borrowed from competitors.

Building a website can require skills, depending on the chosen method. The choice of method should depend on the available resources and the required functionality.

Step 1. Write down a main measurable purpose (MMP) for your website.

Step 2. List and structure your pages.

1. Make a sitemap by listing all the pages you have in mind.
2. Structure your pages in a tree.

Step 3: Sketch wireframes for each page.

Step 4. Design (or prototype) your wireframes.

1. Code it yourself (High skill or high budget)
2. Use a CMS (Medium skill or medium budget)
3. Use an online website builder (No skills or no budget)