Web builders like Strato and content management systems like WordPress make it easy to build a website. Unfortunately, many do-it-yourselfers make design mistakes that undermine their website. PC-Active shows you how to recognise, prevent or repair the biggest errors.

Alex White

1 – Not having a plan
If you don’t know what kind of information you want to put on your website, it becomes difficult to make a good one. It’s like setting up a shed without a building plan. The building plan for your website does not have to be complicated. Put on paper in advance what information should be on your website. Then divide this information into logical categories. For example for a football club website: welcome info (home), different teams, match schedules, contact. In this way you also immediately ensure that your website has a good structure for navigation (see 6 – Cluttered menus). Write some texts for the site in advance and choose a number of suitable photos.

WD Figure 1 2

Keep your texts clear with white lines and headings

2 – Put text in a solid block
You come across them regularly: road pages on which the writer has a lot to say. There is nothing wrong with that, as long as all the text is not in a solid block of letters. This makes it tiring for visitors to read and easy to lose track of. Therefore, use blank lines to divide larger pieces of text. Placing an illustrative photo or a new headline every so often also helps. For very long texts, for example more than 2000 words, divide them into several subpages. You refer to it with a number link at the bottom of the page.
In WordPress, you insert a headline by clicking + | Header. You choose the size of the head by clicking on H2 and choose a different heading level.

3 – Using a wrong font
It’s tempting to make your website stand out from the crowd by using an exotic font. Unfortunately, this often does not improve readability. Easy-to-read fonts for websites include Arial, Verdana, Georgia, and Times New Roman. A bit boring perhaps, but definitely: especially with longer texts.
Also make sure that you do not choose a font size that is too small for the text. Your text should be pleasant to read and that is not the case if you need a magnifying glass or extra glasses. Also keep in mind that your text must be easy to read on the small screen of a smartphone. A size of 12 or 14 px is a good choice.
WordPress uses an easily readable font by default, but themes sometimes offer all kinds of special fonts in the theme settings. In addition, you can use font plugins to put all kinds of special fonts on your site. Nice, but so be a little conservative with this.

WD Figure 2a

Choose from different color schemes with a theme

4 – Wrong color combinations
A website brightens up completely with beautiful colors, but they have to fit well together. A wrong color combination works like swearing in church on a site visitor.
If you use a theme in WordPress, you can often choose from different color schemes in the settings of that theme. In addition, the colors have already been chosen well together by the theme maker.
If you want to determine all the colors yourself, this free online color combination tool can help you: https://coolors.co
Choosing the right colors for your text and background is very important for readability. Text with a light color on a light background is difficult to read. For example light yellow on white. The same goes for dark text on a dark background. So make sure you have enough contrast.
Also watch out for a light color text on a black background, for example. It may be legible, but as a visitor you sometimes suffer from the afterimage of the text after a while, even though you have already left the website. That is not always pleasant.

An unsafe website

As an internet surfer, you now know that you have to pay attention when visiting a website https or the lock icon at the beginning of the url. This indicates that the data traffic between the website and the visitor is protected with the SSL protocol. Without SSL, your website becomes easy prey for hackers and malware. This can have unpleasant consequences for your website and the data of the visitors.

You can easily arrange your website security by installing an SSL certificate. Some hosting providers install this automatically, but with others you have to request it separately or install it yourself through your hosting control panel. An SSL certificate is free or costs a few euros per year.

5 – Wrong photos
Photos and images are the first thing that catches your eye when you come to a website. That means that it is also quickly noticeable if something is wrong with it.
First of all, you have to make sure that photos and images are sharp enough. This means that the resolution must be sufficiently high: enough pixels in horizontal and vertical direction. For example, using a 50 by 50 pixel image might be fine for a logo on your site, but not for a clear large illustration. In short: make sure that the photo or image you choose also remains sharp at the size in which you put it on the web page.

WD Figure 3 2

A photo with the wrong aspect ratio

Another common problem with photos and graphics is an incorrect aspect ratio. You can recognize this by a stretched image. This occurs when an image is placed in an image holder on the site with a different aspect ratio. For example: the image is 800 by 400 pixels and the image holder 700 by 400. In such a case, crop the image to the correct image size. Or just choose a better fitting picture.
Another cause of a stretched image is that you resize an image, but forget the aspect ratio (width to length ratio) the same. You solve this by using the aspect ratio to recover.
Also a kind of wrong photo is a photo that is too small or too large. A photo that is too small is annoying because you can’t really see what’s on it. An oversized photo is one that fills half of the entire web page. Think of a photo in the title bar. This disturbs a good relationship between image and text. In addition, visitors are more likely to click away from your site if they only see a large photo first on their screen.
You can edit an image in a program like Paint or Photoshop, but it can also be done in WordPress. Upload the image or go to the media library from the main menu (Media | Library) if the image was already uploaded. Click on the picture and Edit image. You get all sorts of editing options for the image. When you’re done: click Save.

WD Figure 4 2

You simply fix a photo with the WordPress editing tools

Wrong photos part 2

Besides too large, blurry or stretched photos for your website, there is another category error what you should keep in mind. Then it’s about it copyright. It’s tempting to grab some photos from the internet for your website via Google Search, but that can be expensive for you. Commercial photo providers, such as Getty, scour the internet day and night for photos to which they own their rights. If you have used such a photo, you will not be the first to receive a hefty invoice of hundreds of euros in the mail or letterbox. Often there is little choice but to pay it, because otherwise you can get a lawsuit that you will almost certainly lose. It is therefore wise to get your photos from free photo sites such as www.unsplash.com and commons.wikimedia.org. Pay close attention to the rules and state the photo credits on your site.

6 – Cluttered menus
A clear menu is indispensable for good navigation to the different pages of your site. If you have five or fewer pages, you can get by with a menu consisting only of the headings with the links to the pages.
With more pages you usually have one dropdown menu necessary to keep it clear. In that case it is wise to first make a paper overview of all web pages (see 1 – Not having a plan). Then think about which pages fit well together in a category. Put them together under a heading in the drop-down menu. Also keep a logical order for the menu headings. So not FAQ – Contact – Home, but Home – FAQ – Contact.
In WordPress, you customize your site menu from the main menu: Display | Menus.

WD Figure 5 2

If your menu is a mess

7 – Too many moving parts
Nowadays it is easy to add all kinds of moving parts to your website. This can be in the form of moving images such as gifs, but also as specialized ones plugins inWordPress. For example, you can easily add a slider or a carousel please. Images or texts alternate automatically.
These types of moving parts can be useful in, for example, a web store, where you review various products. On regular web pages, it’s a good idea to take it easy with moving images. These will quickly annoy a visitor because they distract from reading text on a page. Therefore, only use moving parts if they really add value to your web page.

8 – Too many heavy parts
You should always bear in mind that not every internet connection is equally smooth: think of WiFi. This means that a web page containing large photo files, among other things, will load slowly. If that is too slow, visitors will drop out.
Therefore, pay attention to the number of Mb’s of photos and keep it as low as possible, without compromising the image quality. Fortunately, photos on a web page look good enough quickly, so reducing Mb’s isn’t much of a problem. You do this by reducing the size of the photo in a photo editing program – Paint is sufficient – ​​and possibly saving it in a different file format: for example jpg or png instead of bmp. Make sure you keep the original.

WD Figure 6 2

A loose slogan at the bottom of a web page is not a good call to action

If you use a photo from the internet, such as from Wikimedia (see box Wrong photos part 2) then choose a version with a lower number of pixels or px when downloading.
Also watch out for all kinds of extra parts, such as plug-ins and advertisements ad servers on your site. They also slow down the loading of web pages considerably.

9 – An unclear call to action
A call-to-action is one of the most important parts on commercial websites. But also regular websites, such as those of a football club or hobby club, sometimes have a call-to-action. This one call-to-action is a link in the form of a text, button or image that calls the visitor to do something, for example buy a product, take out a subscription or become a member. An unclear one call-to-action does not call for action or invite clicks. So make the call clear enough in text and images and put it in a clearly visible place, preferably at the top of your website and on several pages.

WD Figure 7 2

Check that your site fits well on different devices

10 – Unsuitable for various devices
Since you usually build your website on a PC, it’s easy to forget that a lot of visitors come from tablets and smartphones these days. That’s why you need to make sure your site looks good on mobile too.
Most WordPress themes nowadays already take this into account and the site is well compatible with multiple devices. You can check this in the settings of the theme. WordPress itself has a handy tool in the editor that allows you to edit your web page. Click at the top right Example and choose the desired device.

WD Figure 8 2a

Make sure your site is secured with SSL