Mistakes that can be easily avoided when building websites

I love the internet. It's one of the reasons I do what I do. I also respect the internet. This is why I try to do what I do well. Due to the ease of creating a website, many people have taken it upon themselves to build their own. I can't blame them, it sometimes seems like the easiest option.

I'm not here to shame anyone that takes that route. I'm here to give some simple advice on how to know better when building it yourself, or what to look out for when a "professional" does it for you. As you'll soon realdise, it mostly comes down to typography and structure.

I give you, easily avoidable mistakes people make when designing and building websites.

Typography

Most of the websites that you'll encounter are heavily text based. Many of these websites don't respect some simple typographic rules. This makes it uncomfortable for the viewer to read the content on the page and potentially leaving your website.

Lines that are too wide or too narrow

Line length refers to the number of characters that exist in a single line of text before it wraps to the next line. There exists a perfect character count for online content. Just check Google results and it will show you hundreds of articles saying the same thing. I'll spare you the endless reading; it is typically agreed that anywhere between 45 and 75 characters (including spaces) per line is the optimal amount.

When lines are too wide it causes the reader to search for the correct new line each time they finish the previous one. There's too much distance between the end and the start and this tires the reader, giving them a discomfort that they will associate with your website and brand.

When lines are too narrow it breaks up the comfortable flow of the text. This causes reading to be done in quick bursts at a non-uniform pace, creating an awkward reading pattern.

Lines that are too close or too far from each other

Line-height refers to the spacing between lines of text in a paragraph. In the manual typesetting days this was referred to as "leading" because they would add pieces of lead between the lines.

The importance of adequate, but not too much, spacing between a line is to ease the effort needed for your audience to read the text. A standard that usually works well for body text is 150% of the font size (e.g. font-size: 16px; line-height: 24px). Heading text can have tighter spacing.

When lines are too close together a reader might reread a line multiple times or skip one altogether.

When lines are too far from each other they remove the visual grouping that shows these lines are related to each other.

The font size is too small

The default font size set by browsers is 16px, most people don't override this value. This default value used to be great when there were a limited number of fonts to choose from and mostly 900px by 600px screen resolutions. Today we have an endless number of available fonts and an equal amount of screen resolutions.

There is no standard size or formula that works here. But one bit of advice is don't not be afraid of larger font sizes. As long as it follows the rules mentioned above it's probably fine. Your best way of testing it is to read the content yourself and gauge whether it's comfortable or not.

When testing your text, don't use content that you've written out yourself (and definitely don't use gibberish). Copy some text from a Wikipedia page that you're interested in and try read that in the type settings that you've defined.

Light on light, dark on dark

It should go without saying that light text on a light coloured background and dark text on a dark coloured background would be difficult to read. But it seems that it needs to be said because there are too many websites that are designed this way.

Text laid out on a background that has a similar brightness to it doesn't have enough contrast to make it readable. Making it more difficult to find the edges between letter and not-letter. This strains the eyes of a reader.

There are many tools out there to test the contrast between colours.

Content structure

The structure of your content is one of the most important elements of your website. If your audience can't find what they're looking for they will quickly go on to the next one.

Starting with a sitemap

A sitemap is a set of pages and description on how they relate to each other. Normally drawn out as a tree with "homepage" as the main node. It results in a list of pages that need to be filled with content.

Most people start off structuring their content by creating a sitemap. Although commendable, this is rarely of any use. How can a sitemap be created if you don't know what content you have?

Starting with a sitemap will end up with you trying to fit content into those predefined pages. This causes you to have sections shoehorned into others just because they don't fit anywhere else.

A more appropriate place to start from is to simply start writing content. Find out what you want to say and promote about your business and start making points. Once you have a good idea of what content you want to present on your website see how it can be grouped together.

These groups will become the sections of your website. Based on the quantity of information and how it can relate to each other you'll either break it up into different pages or collect it together on single pages.

Knowing what you're going to have on your website is a better starting point than arbitrarily creating a structure.

No hierarchy

Organising your content based on the importance of it seems obvious. You have your headers, sub-headers, body text, etc. But hierarchy is not always linear on a website and it's not always about which text is larger than others.

Take a newspaper article as an example. There are the following elements: headline, article text, pull-quote, and image. What is the hierarchy of that information? Without any context of what this article is about, I'm going to guess it would typically be in this order: image, pull-quote, headline, and article text. Each one giving enough information based on the attention span of the reader. The image gives a fraction of the context for the least amount of effort for the reader. The pull-quote tends to give a snappy, terse, insight into what the article is about and is usually something to grab the reader's attention. The headline gives a better context of the article, and the article text says it all.

On a digital medium, you need to understand what is the most important thing for the viewer to focus on first for the least amount of effort. What will grab enough of their attention for them to say "ok let me find out more" and continue going through your website.

No order to how the user should navigate the website

Besides Choose Your Own Adventure books, the print medium tends to have a simple user journey. Much like a typewriter; left to right, shift down and repeat.

Similar to Choose Your Own Adventure books, websites should tell a story and give the reader, with your guidance, the option to decide their own flow.

You need to understand how your readers might interact with your website. What did they come here for and what do they want to leave with? Try to list the main reasons people will come to your website. Is it to get your contact information? Do they want to see the work you've done for others? Are they looking at your latest products?

Try to make it as easy as possible for your audience to achieve those goals.

Some additional comments

The above points should help with the areas that most people have control over when designing their own websites. There are some additional points that should be covered but don't deserve as much detail in an article such as this. Those are:

  • White space: Don't be afraid of it. A website has infinite space and giving your readers room to enjoy your content is a gift;
  • Stock photography: I don't expect everyone to hire a photographer and have images produced for their website. But it's easy to find free stock imagery that works well. You're telling a story and changing the cast in each image looks obvious. It's sometimes better to leave empty space than have horrible stock photography for the sake of adding images;
  • Adding value: Does your website add value for the reader? They've landed on your website for a reason. If they don't gain anything from it what's the point of it being there?
  • Uncontrollable elements: People like control. Doing the work for them may seem generous but in reality it's not cool. Automatic carousels, especially with text within them, means that a user doesn't decide how long they can focus on a single slide. You've made that decision for them.
  • Other people's opinions: This deserves a post on its own but I will summarise. It's easy for people to give their opinions on your website. The problem is that you don't know why they are giving those opinions or how valuable those opinions are. Did you guide their opinion with your comments? Are they using your website in the same way your audience would use it? Do they have a fundamental understanding of proper design and typography? So before giving it to your friends, family, and posting it on user testing websites, try to understand whether the responses will add any value.

If you've followed these rules then you should hopefully have a website that doesn't disrespect the internet.