11 DIY Website Mistakes Nearly Everyone Makes – Here’s How To Avoid Them

Table of Contents

So, you’re keen to learn about the 11 DIY website mistakes almost everyone commits when crafting their initial websites. I’d be fibbing if I said I hadn’t fallen for them too. Over time, I’ve learned the essentials of building a robust website single-handedly and yes, I’ve made some ghastly errors myself.

It’s a wise choice to be here because I’m about to help you dodge these catastrophic DIY website pitfalls. If you decide to leave now and not dive into them, let’s just say, you might end up making mistakes that could cost your business a tidy sum of Benjamins.

Whether you have an existing website or are pondering over creating your first, you’re in the right place. In this article, I’ll help you sidestep common DIY website mistakes, giving you a head start and helping you progress quicker by sharing my top tips.

Time to put away those tissues—Are you ready? Shall we get started?

Sad Happy Hour GIF - Find & Share on GIPHY



Key Takeaways / TL;DR:

  • Mobile Optimisation: It’s crucial to ensure your website is mobile-friendly as most users will likely access it via smartphones. Test templates for mobile responsiveness before purchasing.
  • Image Optimisation: Opt for high-quality images but keep file sizes small to ensure fast loading times. Consider switching to formats like WebP to maintain quality while reducing file size.
  • Effective Use of Colour and Contrast: Choose the right colours and contrasts to maintain brand consistency and enhance readability and accessibility.
  • Text Layout and Readability: Ensure your website is easy to read with simple language and well-structured content. Optimal font size and spacing are crucial for readability.
  • Content Structuring: Avoid clutter by organising content properly and using white space effectively to improve the website’s navigability and appearance.
  • Navigation and Link Management: Ensure your website’s navigation is intuitive and clear, with well-labelled links and a structured linking system. Avoid broken links and provide clear calls to action.
  • Accessibility: Include features like alt texts for images and proper labels for form fields to make the site usable for everyone.
  • Alignment and SEO Basics: Maintain alignment for a coherent visual experience and implement SEO fundamentals like unique page titles and meta descriptions for better search engine visibility.
  • Visual Hierarchy and Design Elements: Establish a clear visual hierarchy to guide visitors’ attention to important elements. Avoid over-reliance on generic templates by injecting creativity and brand-specific design into your site.
  • Continuous Improvement and Professional Help: While DIY website creation is an achievement, continual improvement based on feedback and professional advice can enhance effectiveness.

11 DIY Website Design Mistakes

DIY Website Mistake #1: Poor Mobile Experiences

Once upon a time, when desktops with dial-up internet connections ruled… Okay, not that long ago, but still a while back.

Then came the wave of mobile devices!

Iphone GIF by Product Hunt - Find & Share on GIPHY



Over 90% of people use their smartphones to access websites. For all DIY website creators, it’s crucial to recognize that if your mobile site experience is merely satisfactory, you’ll likely see many visitors bounce, which effectively means you’re losing business.

Having an excellent mobile site experience is crucial to your success.

Imagine this: you load a website, and everything is disoriented, images half of the screen, buttons not functioning properly. What would you do?

Leave.

And move on to the next website that actually works.

Whether you purchase a template or create something independently, a common mistake is not testing website templates for mobile responsiveness. It’s good practice to do this before buying a template or before publishing your new website.

Pro Tip: If buying a template, resize your browser window to test its responsiveness. Observe how elements adjust in size and position as you scale the browser.

Pro Tip 2:

  • Open Google Chrome.
  • Load the website template you’re interested in.
  • Right-click on your browser and select ‘Inspect’.
  • Next to ‘Elements’, you’ll see an icon with a laptop and phone. Click this.
  • Your preview will switch to mobile mode, shrinking the view.

Take a look around using this device toggle to see what your template would look like on mobile. If it’s all good, then happy days. If not, make sure you know what you’re doing before purchasing it.

The key takeaway here is to ensure the mobile design of your website functions smoothly.



DIY Website Mistake #2: Poor Image Size & Quality

One of the common mistakes is imaging. We all want great-quality images on our websites, right? But it doesn’t occur to many that the size and quality of these images play a huge role in the overall website experience.

There are two considerations when you are using images on your websites.

Size & Format

Image Size: The size of the image mainly concerns the loading speed of your website. It’s common for people to download really high-resolution images from stock photography websites or use their own large-resolution images for their websites. The issue here is that if the image sizes are more than 1MB, over time your website will start to slow down.

I’ve dealt with websites that have professional images at around 10-25MB. Those are huge! As you guessed it, the website was loading slow as a tortoise.

Now what do you do if a website takes too long to load? Stand around? Come back later? Keep refreshing until it works? You leave. And then you find somewhere else to get the information you are after.

It’s important to shrink the images down to a size that is required for your website. A rule of thumb with image sizing is to stick to KB and not MB.

Have you heard of WebP? WebP is an image format introduced in recent years to replace PNG and JPG on websites. This format creates a beautifully small-sized image whilst maintaining its quality, making it a lossless format to use.

We use WebP for all of our website design projects here at StartSmall.work. You can use it too.

So how do you go about using WebP when all of your files are either PNG or JPG at this point?

I’ve got some tools in my arsenal that I’m excited to share with you. As a quick side note, I’m an Apple user so some software I mention may be exclusive to Mac. However, I’ll also mention browser-based tools you can use as well, so sit tight and don’t panic.

  • WebP Converter. Mac Software – This is a free tool for up to 10 images simultaneously. It’s great for converting images from JPG and PNG to WebP and vice versa. It’s simple and hassle-free.
  • Photo Resizer Pro: Mac Photo Resizer Pro is a god of resizing tools; it helps not only switch the format but also resize your imaging to a dimension that works best for your website design.
  • Free Convert: Browser-Based Tool: Works great for converting images to WebP too.

If you want my personal preference, I mainly use 1 and 2 for all my image work. Give it a shot and see what you think. In terms of the sizing, keeping similar style sizing is important to maintain consistency across your website.

Image Quality

Generally speaking, you should only share images you’re proud and confident with. Pixelated, stretched, and weird imaging should not be used on your website. It deters people from your products and services and gives the impression of an amateur.

At the end of the day, you run your website as a business and hopefully to make money. It’s important that you look as professional as possible whilst maintaining your brand’s voice and visuals.

Personally, I don’t like to use too much stock, it feels characterless to me but it’s a personal choice. Nonetheless, use quality photos. Don’t upload photos onto your site that are awkward in angles, too dark, too bright, or scruffy (unless that’s your flex).

DIY Website Mistake #3: Ineffective Colour Schemes and Contrast

For young businesses, startups, freelancers, and small brands, a common mistake is having clarity on their brand colours. The trouble is that when starting something new and on a budget, people tend to do a LOT on their own, like building their own website.

When it comes to branding, people associate it with just the logo. There’s more to it than that but as a new and small business, it’s okay to start with a logo, brand colours, and some guidelines so you can start to build on your brand in a consistent way.

For example, if my primary brand colour is blue but sometimes I choose for it to be brown or green—it creates an inconsistent design and look for your brand.

Here’s what I recommend and love sharing with people, have you heard of Looka? Looka is a god-sent design tool that helps businesses like yours create beautiful visual branding without the need to spend £10,000 – £20,000 doing it.

Now that we’ve looked at colour schemes, it’s also important to understand how to create contrast. If you’re not great with colours, use this free colour contrast checker to help you decide how to use and contrast specific colours.

Whilst you do this, it’s important to bear in mind the readability of your colour scheme and the accessibility of the colour palette too. The honest truth is that not all designers create for accessibility but it’s becoming increasingly popular in 2024 and you should jump on that if possible too.

DIY Website Mistake #4: Inadequate Text Layout and Readability

This may be new information, but people don’t spend too much time on websites. They come in, skim, and leave. This is true if your website hasn’t delivered the result that visitors are looking for when they land on it.

It’s really important to structure and format the content on your website and use language that is simple for the reader to understand. Poor readability suggests that it’s content that scares readers away if they feel you’ve loaded up a lot of text, gone too technical, or it’s overwhelmed them because of the language used.

Keep it simple, engaging and get to the point. The faster the reader can see value in your content the faster they will take action on what you are asking them to do.

Fonts, sizing, and formatting play a big role in this. Make sure that your font is nicely sized. Some people use 16px, but I prefer to use 18px or alternatively 1.25em on the body text of my website designs. To me, this ensures that pretty much anyone will be able to read the website contents without having to pinch to zoom in on their phones or go closer to their screen as if they were going into the fourth dimension.

Structuring text blocks on your website design helps format and read the text better. Running your sections from end to end of the screen isn’t intuitive and will come across as poor website design.

Having clear alignment of your text helps guide the reader through and makes text tracking much easier for them. Additionally, for the text on your site, having good enough line spacing makes the readability of your text easier.

At the end of the day, it’s all about the user experience. If the users have a great time using your website, the more effective it will be for your business.

In marketing, fluffy words are basically frowned upon. The reason for this is that it lacks clarity and can misguide the visitors.

For example:

Copy Example 1: We create an exceptional experience that elevates their zen vibes and enhances the positive energy from your mind, body and soul to give a serene and blissful experience.

Excuse Me What GIF by Nickelodeon - Find & Share on GIPHY



Copy Example 2: Our spa provides relaxing treatments that help you step away from the daily struggles and to rejuvenate your mind, body and soul. Book a spa day at Lotus Spa Experiences.

There’s no need to try and be sexy with things. People just don’t catch onto what you say. So, instead, just keep it simple and tell them all the wonderful things you can do for them.

Season 12 Abc GIF - Find & Share on GIPHY



Key Takeaways:

  • Use 18px or 1.25em as your font sizes
  • Keep a good line space between 1.3 to 1.5. (Gauge this depending on the fonts you use).
  • Use simple language on your website design

DIY Website Mistake #5: Cluttered and Unstructured Content

As a DIY website creator, I’m sure you’ve made every effort to put together your website whereby you include all the information necessary for a prospective client to buy from you. That’s fair and I get that 100%.

The way you present your information is going to be a game-changer. You can present paragraphs of text visually, with animation and in so many different ways where it makes the content of your website more enjoyable to consume.

Let’s be honest, if someone wanted to read a dissertation, they might as well go to the library and not your website right? But your website design is better than that! You may just need to refine it slightly to be the ace up your sleeve that sets you apart from your competitors.

There are two key things I am going to talk about here.

  • Incorrectly structuring content
  • White spacing
  • Use of headings and subheadings

Incorrectly Structuring Site Content

Structuring your content properly allows your website to be ranked well by Google and Bing search engines for SEO but it also creates a wonderful website experience for your visitors. Imagine them visiting your website, feeling comfortable with the site structure, text spacing, use of images, fonts and colours—it’s beautiful!

If things on your website are in a strange order that doesn’t make sense, it can make for a pretty whacky and ineffective website experience.

Headings and Subheadings

In web design, there is a systematic way to use headings and subheadings in your website content. One it makes it visually easier to understand the content and secondly it tells search engines how to read the topics on your website page too.

For example, all across this article you can see the use of headings and subheadings. They follow an order like this:

  • Heading 1: H1, the main heading only used for the title of the page.
  • Heading 2: H2, subheading. Used to introduce topics.
  • Heading 3: H3, subheading. Used as a subtopic to H2
  • Heading 4: H4, subheading. Used as a subtopic to H3
  • Heading 5: H5, subheading. Used as a subtopic to H4
  • Heading 6: H6, subheading. Used as a subtopic to H5

White Spacing

Over the years, I’ve found that many DIY web designers don’t fully grasp the concept of white spacing. White spacing is incredibly important for your layout and content during the web design process. It allows your design to breathe. It provides spacing between different elements that makes your content easier to read and guides the user through the journey of your website page(s).

When you create a section on your website, providing enough padding and margin plays an essential role in dividing up the content of your website. For context, I typically provide a 100px top and bottom padding to my sections allowing them to have enough space between each section but creates a noticeable difference when the user is scrolling along the page.

Relook at your designs and see how you, too can implement padding and margins in your site design.

DIY Website Mistake #6: Poor Navigation and Link Management

In marketing, it is said that you need to guide the user’s journey, you need to tell them where you want them to go.

When it comes to your website navigation, having a clear structure and labelling will help elevate the user experience. It provides the visitors of your website with a simple way to find the content that is the most relevant to them.

Overdoing your links and structure can build confusion, and your visitors, who may be extremely qualified leads for your business, may never find what they need. This can result in them leaving your website and going somewhere else.

So how can you improve your website navigation?

There are 4 things we’re going to discuss:

  • Labelling of your navigation
  • Creating a good navigation linking structure
  • Broken Links
  • Visual Cues

Labelling Your Navigation

It’s really important to clearly label your navigation links. A common DIY website design mistake is that DIYers use fluff to label their navigation links.

For example, if you are a plumber and you’re providing smart thermostat installations, and your navigation title reads “cosy home upgrades”. It’s now quite unclear what that means to someone.

Whereas if you had a section on your website as Installations > Smart Thermostats.

It’s much clearer for the user. They know they want to install smart thermostats. And just like that the user experience is improved because it’s taken the website visitor exactly where they need to go. A good navigation design is key for navigating and guiding your visitors to exactly where they need to go.

And with your kick-ass page design and content, when they get there, they turn into qualified leads.

Lastly, being specific about where your link takes your visitors is crucial. If you have vague links like “click here”, “go here”, “select this” and all the equivalents to these, it’s not only going to look weird but there isn’t enough specificity to navigate your visitor to the next section.

For example, if you want your visitors to book a virtual consultation but your button reads “Book Now” or “Click Here To Book” – you need to be absolutely clear about what you’re asking them to do, otherwise simply put, they aren’t going to do it.

Another example is my own website, on my homepage I’ve got a call to action section where I want my visitors to go and explore pricing options for the pay monthly web design packages we offer. My button could easily just read “View all” or “See More” but view or see more of what? So I’ve specifically mentioned “View All Pricing Options”. This way, it’s crystal clear what I’m asking them to do and there is an expectation of what they should see on the next page after clicking that.

Review your call to action. Are they clear for your users?

Creating A Good Navigation Linking Structure

Think of themes and grouping services. I’ve seen it several times before where DIY web designers have put all the links possible on the top of their website. It’s like throwing spaghetti at the wall and seeing how much of it sticks.

Noodles Spaghetti GIF - Find & Share on GIPHY



It’s not the right approach to take.

Your website needs structure, and so does your navigation.

Before rushing into building your own DIY website, it’s important to understand how the website is supposed to function, and which services, products, pages and posts are related to one another.

Creating a sitemap is a good way to have an understanding of the pages you need, the themes of your website and which pages will connect to one another.

diy website mistakes - sitemap



Below is an example sitemap we’ve constructed in the form of a mindmap for a local chemist.

Likewise, as a DIY designer, you will want to create a site structure of this kind to create a good navigation linking structure. Overall, this will give your website menu a simple and complete feel and remove any unnecessary pages, keeping it clean, tidy, and simple to understand.

Broken links are when there is a link to a page that no longer exists. This is bad navigation and bad web design. The user has been navigated to an area where nothing exists. In turn, that can build up frustration, loss of trust and a big slap on the exit button of your website.

You can use link checker tools like this to check if your website has any broken links. Simply enter your domain name and run the check. It will generate a report stating where the broken links are on your website. You can replace these broken pages with new ones or remove them entirely.

Either way, your users shouldn’t be navigated to pages that do not exist.

Visual Cues

Have you ever been on a website where you’ve hovered over a link or button but nothing happens? Cognitively our brains are now used to seeing something happen when you hover over a link or button. It almost makes us feel like there’s something on the other side of that button.

Static buttons and links tend to give off a vibe that the button or link does not work. Visual cues make for great user experience. Check back on your website to see if you’ve added necessary visual cues that aid your visitors to take action or move to the next step.

When it comes to buttons, there are three states to be aware of:

  • Normal: The normal state of your button
  • Hover: The hover state usually means that the button would change colour, increase in shadow, does a little dance or something like that.
  • Active: Active state is what happens on the click of the button.

Typically moving between the three states is a pretty swift and fast process but they are necessary for the overall experience.

DIY Website Mistake #7: Lack of Accessibility Features

At StartSmall.work we build our websites using Elementor Page Builder. This allows us to have complete design flexibility over our projects.

In the plugins section on WordPress you can search for accessibility plugins from there which are literally plug and play. There is one that we use here at StartSmall.work for client projects that might be helpful for you to check out as well.

Missing Alt Text

When it comes to imaging, many DIY web designers don’t pay attention to the alt text – because visually they don’t see it doing anything, but it actually does a lot. The alt text helps those who are visually impaired and use voiceover tools when using the computer.

So for example, if someone hovers over an image, it would read the alt text to help someone understand what it is. So providing accurate information in the alt text is important.

When you upload an image, be sure to add alt texts to your images. If you have not done this as a DIY website designer, go back and revise your alt texts.

Alt texts should describe what the image is about. On an SEO level, it also helps search engines read the image files you’ve uploaded so make sure they are contextually relevant to where you are using it.

Good Example: if you’re uploading an image for your pottery class and it’s of Anne (the instructor) creating a cool vase, your alt text should read, “Anne sculpting a cool vase in a pottery class.”

Bad Example: Pottery Anne making pottery case at Anne Pottery Studio in London. Pottery classes, pottery instructor. This is just diabolical because there is nothing to understand here. Be clear and concise, and describe exactly what the image is.

Form Field Labels Your site needs to be usable. Bottom line. Adding labels to your form fields improves the way people read the fields of your form and what you’re asking them to provide. Design trends can often be misleading when fields don’t have labels or a clear way to understand what information is required.

Make it easy. If you provide a way for people to fill out your form seamlessly, it will likely be filled out.

If you choose not to provide labels but want to use placeholders in your fields, make them visible enough for anyone to see.

DIY Website Mistake #8: Improper Alignment

Look out for design inconsistencies. To create a visual coherent experience on your website a seamless design is essential. The way your text aligns, the style of imaging used, the size of fonts and more.

If you’re aligning left, then align all the content in that container left. If it’s right then go right. But don’t use centre, right and left on three different elements in the same container. That will look crazy!

DIY Website Mistake #9: Missing SEO Fundamentals

You don’t have to be a digital marketing specialist to apply these SEO fundamentals, but you do need to understand their importance to ensure that your page is read properly by search engines.

You should apply some SEO fundamentals to every web page you create. This allows the search engines to read what your page is about and position you appropriately on the results page. It’s a common mistake people make when doing DIY website design but we are here to address that so you can improve your site!

Duplicate Page Titles

Avoid giving all your pages the same titles. If you give your page the same titles, Google and Bing will flag this as duplicated content and it will not know which page you actually want to rank for that specific topic and keyword. It’s crucial to have unique page titles for each of the pages and posts you create.

Meta Titles & Descriptions People often forget this, but it’s also not your fault. If you’re a newbie and you’re DIYing your website you wouldn’t know on a WordPress website that you need to install an SEO plugin. In platforms like Wix, they make it easier to understand this because in the section where you would add your page title, it shows you the SEO settings for that page that you need to fill out.

Providing each page with the correct meta title and description elevates your chances of ranking higher on the search engines.

SEO is an in-depth topic and is outside the scope of this post but stay tuned and subscribe to our mailing list because we’re going to be dropping a juicy post on SEO for small and local businesses. To make it easier for you, I’ve rolled out the red carpet and presented the subscription box right below!

Heading Structures

We’ve mentioned heading hierarchy already in this post. Principally, the same rules apply here. If you want to go back up for a refresher, go for it.

DIY Website Mistake #10: Visual Hierarchy

Imagine a piece of art. An artist could draw a perfect or imperfect line deliberately. But this line itself can tell a wonderful story. How does something so simple end up with a deep story?

It’s not really similar but just a thought I’m having whilst writing this part of the article. Visual hierarchy is important when it comes to storytelling with your website content. Allowing people to see what is important first comes with the size of your headings, the images used, the buttons and colours. As your website visitor goes down your website, try and notice what captures their attention, where do they spend the most time on the page?

Now you may be wondering how to do this and I’ll drop a nugget here that you go can go off and research shortly. Heatmaps. You can use website heatmap tools to learn more about how people use your website, which buttons they click the most, how far down the page do they scroll and so much more.

Here are 3 tools you can use for heatmaps:

DIY Website Mistake #11: Ineffective Design Elements

The final one, the biggest, the baddest, the ugliest, the meanest mistake any DIY website designer can make… Just kidding, it’s not all too bad but the overuse of generic website templates.

Creativity will play a big role in the design of your website. Buying templates online is still fine, but to have minimal customisation and doing something that looks apart and a part of your brand is vital to the perception of your brand overall.

Websites that look all too much the same start to feel impersonal and samey. Like in the gardening industry. Imagine everyone having similar-looking websites, similar stock photos, calls to action etc, there’s no room for differentiation. Especially if you’re providing “knock your socks off” services but look the same as everyone else, is not a good way to show off your value proposition.

Modern-day web design tools give you so much flexibility you just need to find the right inspiration and try and adapt that to your designs. If you feel like you want to look different, convey your proposition differently, you can always reach out to us here at StartSmall.work. We’ll be your Yoda, you can be Luke Skywalker. We’ll be your Dumbledore, you can be Harry Potter.

Let’s Wrap It Up

Though I’ve highlighted 11 mistakes DIY website designers make and provides some guidance on how you can improve and avoid these going forward, it’s important not to feel overwhelmed.

As someone who is trying something new and different, big congratulations to you. There are many ways websites can be designed and improved and it all depends on where you are in the journey.

If you feel that creating a website on your own was a necessity to get your business started, fair game. If you now feel like you need to be spending your time on the core parts of your business and need someone reliable, humorous, knowledgeable and funky for your business, then we’re also here to help.

In fact, StartSmall.work exists only to serve local and small businesses with affordable pay monthly website design services. You can contact us here for more help.

So what’s the next step in your journey now that you’ve got a DIY website for your business? Check out our brilliant 21 tips to help you promote your local or small business.

I hope this tidy-up meets your needs while keeping the spirit and humour of your original draft! If there’s anything else you’d like adjusted, just let me know.

Share Post

Facebook
X
LinkedIn
WhatsApp
Email

Start A Project

Build a beautiful website, without any design compromise at an affordable pay monthly fee. Starting from £150/month.

Want Digital Growth Tips Directly In Your Inbox?

More Reads & Resources

Scroll to Top