DIYing a website is a very common occurrence these days. If you know you need a website but your budget is quite low and doesn’t give you the opportunity to get a custom one made, then creating something yourself is a way to get your website up and running quickly without breaking the bank.

Whilst going this route may be the quickest though, it’s also very easy to miss certain details and elements that can give away the fact that you’ve self-designed it over going the custom route.

Below are the top 10 mistakes I commonly see, plus quick action tips you can take to correct them.

Let’s jump right in!

1. Not optimising for mobile

It’s so easy to start creating a website and only focus on the desktop version, make it look fabulous and be close to launching it when you go to check it on mobile and it’s all a hot mess.

With over 50% of all Internet traffic now coming from mobile, it’s crucial that you pay attention to how responsive your site is whilst building it, rather than waiting until the last minute and realising your beautiful design doesn’t work.

Squarespace is really good at making it easy to check what your website looks like on mobiles and tablets with its Design view, but it’s also still worth checking all of your pages on an actual mobile and tablet and make sure everything is consistent and that you’re happy with the design.

2. Using too many fonts within your website design

This is a big one that can make or break your design so easily. When creating a website, you really don’t want to use more than 2-3 font styles maximum, as it can be very overwhelming visually otherwise.

As a starting point, choose two fonts that come with a variety of weights and styles that you can choose from. A great way to get contrast is with a serif and a sans-serif, for example:

Serif font for headings: EB Garamond

Sans-serif font for paragraphs: Montserrat

If you absolutely love hand-lettered or script fonts and want to add one to your branding, use it as an accent alongside your main header font so it stands out. Whatever you do, PLEASE don’t try and use it for your paragraphs! They can become very illegible/unreadable at smaller sizes, which is not what you want if you’ve spent ages writing copy that you want people to actually read.

3. Using low-quality imagery

Photos taken on your phone can look amazing at that smaller size, but as soon as you blow it up on a big 21” screen, you see nothing but a blurry image, which will not be a good look for your website… Unless you’ve got the latest iPhone 11 Pro with its insane 3 camera setup, in which case, snap away.

To avoid any issues with your images, look into using high-quality stock photography (popular sites include Unsplash, Pexels, RawPixel and Burst by Shopify), use a good quality camera or work with a professional brand photographer.

Squarespace have a great article on formatting your images that gives information on recommended image sizes and formats.

4. Automatic pop-ups

Have you ever found yourself interacting with a website for the first time, and before you’ve even started scrolling the first thing you see is a full-screen banner, demanding your email address before you’ve even had a chance to see what the website is about? Annoying right?

Yes, growing an email list is an important step if you want to build your business and grow an engaged audience. But, at the very least, give your visitors the opportunity to find out who you are and what you do before going in for the big ask. A good time to have a pop-up activate would be once they’ve hit the bottom of your homepage, or when they’re about to close the tab they’re viewing your website on.

5. A slow-loading website

Along the same vein as having a poor mobile experience, a slow-loading website is one of the biggest frustrations among website visitors. The culprits? More often than not it will be either:

Lots of images with huge file sizes
Huge video files
Every element on your website having an animation

Before I upload any images to my website, I check the pixel dimensions in Photoshop (aiming for between 1500px - 2000px on the longest edge), save them as JPGs which tend to have a smaller file size than PNGs, then run the image through an online compressor to make sure the file size is 500kb or less without ruining the image quality. My favourite is TinyJPG, but there are lots of others you can use.

Any images that are over 1Mb in size can have a huge impact on the loading speed of your website, so always try to compress your images before uploading them to avoid any potential issues.

6. Focusing on aesthetics over readability and legibility

Beautiful websites are amazing to look at, no doubt about it. However, if most of your visitors can’t see or read anything on there, is your website working well for your business?

Some of the key things to keep an eye on to make sure your website is accessible include:

Choose a font size that’s readable and legible. 16px is the ideal font size for body text, with anything less than 12px usually being too small (unless it’s for something like image captions). Remember that while you might easy to read, others may not. If you’re not sure whether your text is too small, print it out and show it to others for feedback.

Use enough colour contrast between your backgrounds and text colour so the text can actually be seen. A good way to check this is to use a contrast checker like Color.Review. This is a great website to see what your chosen colours will look like on a real webpage, and give you some background as to why choosing the right colours is important for accessibility.

High colour contrast vs low colour contrast

Not using enough white space. Don’t be afraid of white space, my friend! Not every pixel on your website needs to have something filling it and when used correctly, white space can help to attract your eyes to a specific element, balance the page structure and give your content some breathing room. In Squarespace it's as simple as using spacer blocks to add white space, so make good use of it where you can.

7. Using centred alignment for large blocks of text

If you’re going to have big blocks of text on a page, use left alignment instead of centred. Centred text does have a variety of good uses, but when used for large blocks of text it creates a ragged edge effect, making it difficult to move from one line to the next. As left aligned is the most common way you would see text, stick with it if you want to have good legibility.

Example of centre alignment vs left alignment. Which do you find easier to read?

8. Having too many broken links

Before you push your website to live, you really want to make sure that you test every single link, call-to-action button and contact form to make sure that they all go to where you want them to go. It’s easy to let this slip, especially if you’ve been using demo pages and have forgotten to change any links, but it will be better if you manage to change them before your website visitors encounter any problems.

9. Spelling mistakes and typos

Typos and spelling errors are a part of human nature, but constant mistakes throughout your website could look unprofessional. Make use of a spell checker (Grammarly is my favourite at the moment), proofread, proofread again, then get someone else to read over your copy in case there are any additional errors you might have missed.

10. Waiting for the perfect website before launching!

The best piece of advice I can give to anyone creating a website is this:

Websites are never truly “finished”, so launch the damn thing already!

It’s inevitable that over time you'll find yourself tweaking and editing it as your business grows, and that’s okay! Just don't let perfectionism get in the way of you having a live website. Progression over perfection I say.

Let’s bring your dream website to life!

Now that you’ve learned about the common DIY web design mistakes, if you want to refresh your website but not sure where to start, check out my Squarespace website services and let’s get you on the road to a beautiful online home!

Work With Me