Creating an online presence is easier now than it’s ever been. There’s a plethora of options to choose from and most have the capability to DIY. Designing your own website is very appealing as you can take full control of the look and feel as well as saving yourself quite a few dollars.
As a website designer, you might be surprised to know I’m not against DIY by any means. I love that business owners are willing to give it a go to boost their online presence. But, I’ve noticed a few common mistakes made on DIY websites that are hurting conversions and performance. Let’s take a quick look at some of the biggest DIY website mistakes and how to avoid them.
This is probably one of the most noticeable DIY mistakes I see. If you’ve ever had a branding board and professional logo designed for your business then you’ll probably know what I’m talking about. Good branding will be simple and resonate with your business. It will most likely stick to 2-3 fonts and a complementary colour palette that projects the vibe of you and your business.
The problem with DIY design is that not everyone knows that less is more and there’s an art to getting the design elements right. I’ve seen websites with 4 or 5 different fonts scattered about from script to sans and everything in between. The other problem I come across is poor use of branding colours or no branding colours at all. Colour can really brighten up a site, but be careful how and where you use it. We don’t want to distract our visitors before they’ve taken a look at our offerings.
- Stick to 2 -3 fonts and make sure they are easy to read. If using a script font, use sparingly in web design and make sure it’s easy to read.
- If you don’t have professional branding, stick to 2 – 3 classic colours and keep your design simple. Working with black and white or grey and white can be a good place to start with an accent colour to break it up.
- Keep your logo clean and simple. Remember once it shrinks to a mobile screen it might lose clarity and look more like a blob than a pretty logo.
- Use images that represent your brand. Pick images that have your branding colours in them or have a set theme – this is a good way to tie your brand in without trying too hard.
When it comes to design, less is more. This is probably the most useful tip I can give you. If in doubt, take it out. I see DIY websites that are full of content, images and text for days. I know it’s tempting to include every little detail about your business, but too much text and clutter turns people off. Think about what happens when your site squashes down to a single column on mobile view… those 2 columns of heavy text will turn into an endless scroll of words that people will quickly back away from.
- A clean, crisp design will always look more professional than a site that’s packed to the rafters. So, keep it simple and slowly add as you go.
- Use bullet points to summarise text so it’s quicker to read (like this!)
- Add headings – this helps to break up text and is good for SEO when you use the H2-H6 heading tags.
- Insert images to break up your text. Blogs can be an exception to this, but if images suit your blog topic, add them in!
- Edit your copy or have a copywriter write it for you.
The main problem here is there usually isn’t any! A lot of DIYers get so caught up in the design and prettiness that they forget the fundamentals in the back end. I’ll let you in on a little secret, one of the reasons web design takes so long is there are a lot of fiddly extras behind the scenes. Just like building a house, you can’t install the pretty white kitchen with granite benchtops before you put up the frame and bricks.
Adding security to your website is so important. It helps to protect your site from hackers, bugs and malware. There’re a lot of dodgy people out there just waiting to get into your site. To use the house analogy again, it’s like building the home of your dreams but forgetting to install all the doors. People will just walk right on in. There’s quite a few good, free plugins around to fix this problem in a jiffy.
- WordFence – I use this one on my client sites
- All-In-One WP Security
- iThemes Security
- Defender Security
This falls into the same category as website security, it’s a backend thing that often gets missed. Now, we all know SEO is a long windy road of complexness. But there are quick SEO wins you can do on your site at design time to help it on it’s way. Even setting up basic SEO on your website like correct headings, meta tags, descriptions and alt tags on your images can really help your website. Most web designers will (or should) do this during the build stage.
- Add SEO Yoast plugin to your website. This will help guide you on your SEO set up and tell you how to fix your pages and posts for better SEO. It works on a red light/green light system so it’s the one I recommend for ease of use.
- Add headings to your pages and use H2 – H6 heading tags. You will find these under the drop down where you see the word “paragraph” in your text area. They run in a hierarchy where H2 is for very important headings and so on down the line.
- Label your images. ALT tags are keyword phrases or descriptions that tell Google what the image is about because, as smart as Google is, it can’t read a picture! For example if you sell shoes one of your image ALT tags might read “ladies red leather boots by Converse exclusive to your business name“
5. Not Responsive on Mobile
Most people who sit down to design a website do so on their desktop or laptop. After all, they’re nice big screens to see everything and designs generally look much better. But, in said design we might have full width images, a few rows and columns and even some pretty background images under our written text. It all looks amazing. Now take that gorgeous design down to one single column and let’s see how good it looks.
I must admit, I still get caught out when designing for clients. I design a gorgeous homepage only to switch it to mobile view and find my formatting and alignment is all skewed. Having a responsive website is a must in 2021 because over 60% of people (most likely more) will view your website on mobile. Google also penalises sites that aren’t mobile responsive. A prime example of a non responsive mobile site is bom.gov.au. Check it out! You have to expand the screen to see anything because it’s literally a mini version of their desktop site!
- Design on desktop or laptop first, but switch to mobile view as you go so you can see how it looks and if it’s responsive shrinking down to one column.
- Limit your backgrounds to solid blocks of colour if in doubt, this will still break up your site but it will guarantee you won’t have image layout issues.
- Stick to a white background on your mobile site if the backgrounds aren’t working.
- Left justify your text – it’s easier to read. Limit your centre alignment to headings and subheadings if needed.
6. No Quick Intro or Text On The Homepage
I’ve seen a lot of sites, especially eCommerce sites that have lots of images and products on their homepages, but no text. I know it’s tempting to showcase all your wares, especially as a product based store, but again, Google doesn’t read pictures all that well. Good SEO practices say you need at least 300 words per page. That’s 300 words of good copy that includes keywords for Google and good copy for humans.
The other issue with not having any text is you’re not telling your visitors who you are, what you do or how you can help them. You have seconds to convince your visitor to scroll past the hero image and down to into your site. You have to sell yourself to them at the start. An elevator pitch near the top of your site (I usually pop them in just under the hero image – check out my homepage) will explain in 1 – 2 sentences why they need to stay on your site.
- Add an elevator pitch or quick introductory text to your home page just under your hero image. This will tell people who you are, what you do and what problem you are solving for them.
- If your website is eCommerce based, add a spiel or block of text further down your site just for Google. You can use this to strategically target keywords and explain in more detail your products to visitors who scroll that far.
There’s a lot that goes into designing a website and I’ve really only touched on the surface. The pretty design on the front is just what you see, there’s a lot that goes into the backend that makes a website an asset. But it gives you a few quick design wins you can make to your own website or mistakes to avoid when DIYing your next website.
Are you ready to get started now?
Learn how to build, design and manage your own WordPress website with my DIY Website Workshop starting Monday 6 Sept!