BrandingGraphic DesignHacks, Tips and TricksWebsite Design

16 DIY Website Design Mistakes Commonly Made by Entrepreneurs

16 website diy design mistakes
16 website diy design mistakes

I always tell entrepreneurs to get a website as quickly as possible, even if it’s very basic DIY option. 

Yet I also know, at some point to make that growth into 7-figures and beyond to 10-figures, you need something that properly reflects the professionalism of your brand.  A lot of times this means bringing in a professional.

Even until then, fixing some of these most common DIY website mistakes can mean a better experience for your prospects and customers, help them retain your information, and while increasing the “prettiness” of your website design doesn’t directly relate to more sales, making these errors can mean fewer sales because your site will be less user-friendly.

Design does not create Sales

 

Here are 16 of the most common design mistakes I see frequently on DIY websites.

I’ve actually seen some of these same mistakes made by paid website designers … but it is more common if you’re doing it yourself.

These things are important because we already know that Google has announced a search engine algorithm update for 2021 that has to do specifically with visitors’ on-page experience.  Some of your design elements feed into that.

It’s been proven that you don’t need to have a fancy, expensive website; but using design elements well can actually help your visitors find information more quickly – the information they need to convert from visitors to customers, and retain the information better.

So there’s a lot of good reasons to pay attention to the basic design principles that we’re going to talk about.

Bad Text Choices

Text Column Width

I see entrepreneurs often want to stretch their text all the way edge to edge of the website or screen other than a little bit of margin on each side.

That’s often one of the worst design mistakes you can make for your website visitors.

Having a headline stretch edge to edge, or using this strategically as a design element, can work.  However, unless you’re well-versed on when and where you can or should use this design piece, you’re better off sticking to standard text block widths.

It’s hard for our eye to reach the end of a line of text all the way to the right of a desktop or laptop screen, then have to travel far to the left to find the beginning of the next line. There’s a chance that you actually lose your place, which negatively impacts readability and retention.

Research has shown that narrow text columns help your readers retain more information than stretching your column width the full width of the web page.  If you think back to printed newspapers, and even magazines, they present the text in columns – for a newspaper it may be six to eight columns wide on a page, while a magazine may be three. But the columns tend to be around 2″ to 3″ wide.  That’s right around the width that has been proven to increase readability and retention.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces.

“Typographie”, E. Ruder Tweet

Bad Font Choices

The most common thing I see is having too many fonts, because it’s hard to make them all mesh together well.

But it can also be a problem if you use fonts that are hard to read, or conflicting designs between the different fonts you choose to use.

For the most part you want no more than three fonts, may even only two:

  • A headline font
  • A body copy font
  • An accent font

The problem I see is when there are different levels of headlines (H1, H2, H3) and each one is a different font.  That gets really confusing to the eye and actually detracts from your visitor’s ability to read and retain information.

Most people go with one serif font, and one sans-serif font. It can be harder to match two serif fonts or two sans-serif fonts and make them work well together.  Anything that becomes distracting to the eye is not helpful.

For example, if you have a really wide font for a headline, and a really narrow vertical font for body text, or in the reverse, those two more easily conflict with each other.  It can be done – you can use good mixes of multiple serif or sans-serif fonts and mixes of font widths and weights – but usually it’s a high-end designer who can make those choices work well.

If you’re not sure of your fonts, use one of the many font pairings out there, like the pairings in Google Fonts, to do some research.

Even my own website, I’ve gone through different iterations of font pairings, especially since something that may look good on paper or even on a font pairing website, once you actually put it to use on your website, it may not look as good as you had hoped.

This font guideline includes if you’re using a lot of images on your website that contain words (such as quote images) – our brain treats the words in these images the same way as words on the page, so take that into consideration as an overall part of your site design.

Copy Isn't Easily Scannable

And not by a mechanical scanner … but by your eye and brain.

This means using text design elements to keep the person moving down the page.

You want to do this because there’s usually more information further down the web page that they need, and you’re wanting to give them that information. Your call to action is usually a bit further down as well and you obviously want them to reach those.

But it really goes back to having them retain the information.  And having text design elements, used strategically, can help their eyes move down the page:

  • bold
  • italic
  • bullet points
  • underlines (not only in links)
  • strategic use of headings

This helps the viewer as they’re reading your copy.  If you have a word related to the the sub-topic that they’re reading in bold, their brain will pick that up quickly. 

And when their eye sees another text design further down, it will keep their eyes scanning down.  This also helps keep them on your site longer, which means reading information longer,  and most importantly retaining the information.

Grammar ... Yes it Matters

I understand that not everyone is good at spelling or grammar, and English class wasn’t their favorite subject in school.  

We’ve become lax in worrying about spelling and grammar partially thanks to social media.  There’s a BIG difference between being casual and social on those platforms.  Think of them like a social get-together at your home.  You likely aren’t worried about sentence structure while you’re speaking to your friends and having cocktails (and the more cocktails you have, the less worried you will be), and you aren’t thinking about spelling at all.  You’d come across as a bit robotic if you were.

But your website isn’t social media. It’s about processes and professionalism.  Poor spelling and grammar can be distracting to a viewer, so you need to take it into consideration.

This doesn’t mean that things like typos will never occur, but if you already know spelling and grammar aren’t your strong suit, copy your text and paste it into a site like Grammarly to have it point out spelling and grammar mistakes. Or ask a friend who enjoyed their English classes in school (they’re crazy, right?) to do a quick edit.  It enhances your perceived professionalism and helps your visitor when our text is accurate.

Lack of White Space

Related to the text going edge to edge is lack of white or negative space.

Something I learned in design long, long ago is that whenever there is negative space around some type of element, our eye and brain tends to fill in negative space, so an already cluttered design will seem even more so to your brain that is jamming more stuff into the few spaces available and it all becomes overlapping and detracts.

You need the white or negative space so that your eye and brain can fill in those spots.

Use your white space, and use it often.  White space next to and around and between design elements.  This concept also helps with mobile usability, since anywhere you need to click becomes easier and your visitor isn’t accidentally clicking the wrong thing.

Having a Dated Design

Even if you don’t know what the dated design elements are, you know when you look at a website that looks like it’s stuck in time in the 1990s.

The 90's called and they want their website back

This also relates to not following today’s website design norms and best practices. People expect, for the most part, for a logo to be in a certain place, a menu to be in a certain place, and the further you stray from that your usability will suffer, and the amount of time someone spends on your website will suffer, just because they’re having to navigate in a way that doesn’t feel normal.

You know it when you see it. Some of these businesses may have actually designed their website in the 90s and never updated or done a redesign; or they had hired a designer who was stuck in old design themselves.

If you haven’t done a redesign in many years, you may want to consider one now … not just because of the design itself but also for mobile responsiveness.  That responsiveness wasn’t built into websites very often even just a few years ago, so revisiting now can be beneficial.

And if you only have time or budget to refresh one thing, do the home page.

Too Much or Too Little Information

One of my friends came to me to help do a small redesign of a website that she had just had done by an outsourced web design company.  

Her front page / home page had a huge long block of text.  When I first saw it, I didn’t even want to read it – and I needed to because I knew I was going to have to use some of it during the redesign of the page.

Plus, most of the block of copy was wider (edge to edge), and the whole block was centered.  When it’s a block of body text, it’s worse to have it centered because instead of your brain knowing where the line starts when your eyes return to the left, you have to think about it and can more easily lose it’s place.  Centered blocks of text can be a design element when used strategically, but shouldn’t apply to your entire copy.

There was also no spacing between paragraphs, which made one long run-on paragraph. Different than how you would structure a book, a printed paper, something for a journal, website copy works best when each paragraph contains only a couple of sentences with white space between.  Your brain likes it that way and readability and retention increases.

Sometimes if you have too much information on any one page, you may be able to break it into two or three related pages. This may be easier on your visitor and their retention ability than reading one big block.

You also don’t want too little information.  Your website is a place for your visitors to get to know you, what you do, how you do it, why you do it, and what benefit you provide to your customers … so having too little information it’s possible that won’t be relayed to your visitors.

It’s all about being strategic and careful how you present it.

Mobile-Friendly Website

I’ve touched upon this briefly already.  Not having a mobile responsive site is a huge issue. More and more people are visiting your website first on a mobile device vs a laptop or desktop, so you need to have that mobile piece – at least friendly to visitors.

When you think back to the 90’s dated websites, when you open them on mobile, you’re getting the full-width website really tiny in that mobile view.  You have to try to stretch and squish it with your fingers to zoom in and try to read anything.

Also a big problem on mobile is links being too small to navigate – in the menu, hyperlinks in the text. You have to zoom in, and you’re trying to click one of the links, and it never fails you click the wrong one and feel like you have big fat thumbs and then you’re trying to go back.  Anything like that ends up too frustrating like this will make people give up and leave your website and go to a competitor that is easier to navigate.

Making it All About You

Focusing too much on yourself rather than your audience is also a concern.

For one of my long-time clients, we’ve been doing a lot of work on things other than her website, and the website work we had done was on the back end (processes). We reached the point of working through upgrades on her website front end (professionalism). One of the problems was the text on her front page was more appropriate for something like an about or bio page – it talked about her, her experience, her education and why she started her business.

All of this is great information for a visitor to get to know you a bit better, but doesn’t often belong on the home page because it’s about ‘me me m’e, rather than being about the reader.  So we had her move that to an “About” page, and we revamped the items on her home page to help the visitor find and navigate to the information they needed, and to understand the benefits of what she offers.

You want the website to be welcoming to your visitors and not just a boast piece.

Things You Forgot to Include

Missing Call to Action

Every website needs a call to action.  Often more than one.

I tell clients that come to me, before we start on delving into all of your technical SEO pieces, we need to get some CTAs on your site.  It doesn’t matter how many people I drive to your website if they have no idea what to do when they get there.

So I always have them add at least a basic CTA to every page of their website, even if it’s something as simple as call for an appointment, an email link, and having that information readily available such as on header, footer, or sidebar. 

No Search Capability

Having an easy way for your visitors to search is critical, especially if your site contains a lot of valuable information.

That’s one of the first things I had my client that I mentioned earlier (who we moved her “about” information off her home page) add, as we started looking at the processes of her website.  She had TONS of great information that she had released over the course of a couple of years, and often the information in one article would spur someone to want to read more related to the topic, yet there was no search box. There was no way to easily navigate to some of the other articles. 

There was an archive list of past blog posts in the sidebar, but if you didn’t know the date of what you were looking for there was no easy way to find it.  On the bottom of each individual blog post there were links to the blog posted before and after the one currently being read, but that only gave you two options and those may not have been related to exactly the same topic.

WordPress has built-in capability to include a search box.  It’s really easy to have that capability on other sites as well – and then make sure that your search box returns good results.

Important Website Advice for Your Small Business

I just got off the phone with yet another client with website issues, so I wanted to share important website advice on red flags for you to watch for when having someone build your website.

Website Branding

So many entrepreneurs are confused about branding to the point that we are completely updating our branding course.  But until then, here’s some basic tips for branding related to your website. 

Colors

While of the visual pieces of your brand are far from the most important, or only, pieces, you should pay attention to your use of color on this very visual platform.

The biggest problems I see are either using too many colors, similar to our discussion about the number of fonts, or using poor color choices.

Obviously your colors chould reflect your brand, such as using the colors in your logo.

Black and white are usually a given because it’s usually a white background with black text (hands-down best for readability) or a black background with white text (use strategically).

Not counting black and white, your will want to limit your color scheme to two or three colors (you can probably figure out at least two of mine pretty easily):

  • Primary color
  • Secondary color
  • Accent color 
It’s sort of like when you’re designing a room in your house, they say your carpet and walls (big things) should be around 70% of your color, your furnishings and other medium-sized items should be 20% of a second color, and your accents should be the final 10% of color. That’s similar to how you should think about your use of color when designing your website.  
 

Obviously there can be some variation to those ratios, but it’s a good rule of thumb to keep in mind.

If your website uses 10 or 20 colors right now, you may want to revisit and drop your color usage down to half or less.

This includes your images, if you’re using them in a blog or elsewhere, you also don’t want too many conflicting colors when those are considered as an overall part of the design that your eye sees.

I’m not saying that you need to go monochrome, although that can be really eye-catching when used well.  I had a client that we did a small redesign of their website, and their colors were black and white of course for background and text, images were shades greyscale, and then we added a pop of accent color using a burnt gold color, and it was really effective. 

You don’t have to go that extreme, but if you have muted, soft, pastel colors and then you have some images that are bright red and purple and green, that can be confusing to the brain.  Fixing that can be as easy as swapping out some of the conflicting images with well-chosen stock images if you need to.

What You Say and How You Say It

While so much more goes into branding than we will be touching upon here, a lot of entrepreneurs tend to stop at their logo.

What you say, and how you say it, is critical. It can also change over time.  There’s very few entrepreneurs who start their business on day 1 and have all of their branding set, and have it be exactly the same as their brand or brand voice  three or five years down the road.  Business changes, and your brand messaging needs to change along with it.

A great example is during 2020 the Covid pandemic, so many businesses had to pivot. Even we changed our messaging a bit, and it’s not the same as it was two years ago, although it’s pretty close. If you make a large change in your business or a pivot, you do need to go back and review the text on your website, check what you’re saying and how you say it.  Start with the home page, always, and then work your way through the pages that link directly from there.

Make sure you have clear brand messaging, primarily so that you don’t confuse your audience.

Image Considerations

We’ve touched upon images a couple of times, and we’ve also talked about how people have expectations about where design elements are located in modern designs versus more dated websites.

They’ve done studies that logos in the header that are centered get fewer clicks than those that are at the top left of the header.  Drastically fewer.  That click usually takes you back to the home page where you can often find the starting point of things that you’re looking for.  It was a difference around 90% of the time they don’t click a logo in the center of a header, versus around 5% of the time not clicking a logo on the top left.

The favicon is also important, and can be missed when doing your own website. This helps your visitor quickly see which tab is yours when they have several tabs open.

This is really easy to fix. WordPress has a built-in icon that is their logo, so you’ll see theirs in your website tab if you haven’t updated theirs (and so will your visitors), but it’s really easy to change.  Add that to your list if you haven’t done it yet.

Images that aren’t responsive is also an issue. Overall if your website isn’t responsive to mobile, you’ll have images that conflict when they view your website on mobile – they’ll either be way too big or way too small.

Technical Problems

While most of this post focuses on design elements, these technical pieces are critical to your website and are the ones I often see DIY website miss.  Remember, we focus on processes and professionalism, and this encompasses both.

Weak SEO

While SEO is meant to help get people to your website, a lot of the pieces now also focus on the experience they have when they get there. Google places importance on these because it relates to the visitor’s experience on your site but the speed does play into the algorithm a bit.

Not having https://

If someone visits your site and you have some unsecure elements on the page, it’s going to show them that the page isn’t secure (how this is handled exactly depends upon their browser), and they may assume that a hacker is trying to get into their computer, and they may never visit your website at all.

Slow load times

Your site doesn’t have to be the fastest around. 

A visitor is willing to wait a bit for a website that has great information of interest to them.  Studies have proven this, and Google understands this as well.

But if a visitor clicks to go to your website, and then they go make a cup of coffee, check the weather, and come back and your website is still loading, you probably have an issue that turns them away.  So you do need to pay attention to how quickly – or slowly – your website loads.

Bad Ad Experience

Some businesses host ads on their website for a bit of passive extra income.

Having too many ads on a website, or ads in the wrong places, can be a negative experience for your visitors.

The ones that are really annoying are when there are 20 different ads on the page, each one takes it’s own time to load, especially if it’s video, and slows down the page loading. #petpeeve

Even if there’s information you want on the site, you quickly start asking yourself if you want to click on a different page on the website and have to sit through the same 20 ads loading yet again.

Or the ones that have an ad that shows for a few seconds, and then it refreshes to show a different ad, and you’re now having to wait for that one to refresh (or for all 20 to refresh).  #petpeeve

Or the ones that have ads block the full page and it’s really hard to click away.

Don’t do this.

If you choose to include ads, carefully choose where they are on the page so that they don’t distract the visitor.

If ad revenue is the only way that you’re making revenue from your business, you may need more ads than some other entrepreneur, but you still need to be strategic about the experience for your user.

And if you think ad revenue is going to be the way you’re going to get rich from your blog … think again.  Frankly, we’ve never worked with an entrepreneur who has ads from their website as their primary income stream.  It takes MASSIVE amounts of traffic for ad revenue to build up, and most regular websites never reach that point … so take these notes into consideration.

Not Having Analytics Connected

Or, reconnecting analytics mutliple times with different analytics accounts.

A good example of why, is that I have Google Analytics on my website, and it’s the same exact account code that I’ve always had on my site.  So I can look five years back and see what keywords people were using to find my site, how much traffic I received … and how it compares to now, how things ahve changed over time.  It’s valuable information.

Google can’t track anything until the code is on your website. So if you just put the code on your website last month, you may not know what  your most popular page or piece of content – which is valuable information for planning additional content – because you’re only getting one month’s worth of website data.

One example of a client that I was providing SEO strategy although not implementing the work myself. The problem is, they’ve gone through three web designs in about three years, and each new design, whoever is doing the new design is putting a completely new analytics code on the website. So the information in analytics from three years ago, I can’t even pull up in their current analytics account. I can’t compare easily with just a couple of clicks what happened then or now. It’s also hard to seen trends that way. 

Their redesign could be using some design elements that is harming ongoing traffic, but we aren’t able to easily see those trends without pulling reports from three different accounts, merging all of that information into a spreadsheet and then manipulating the data there to try to find what we need.

So it’s important, that any time you change up your website, you keep using the same Google (and other) analytics codes.

Sometimes you’ll come across a designer who tries to tell you that you’ll benefit more from having “fresh data” … but that’s WRONG. There’s nothing valid about that. For some reason, some web developers just are hung up on completely erasing the prior person.  Don’t let them do this.  And don’t do it yourself.

If you don’t have analytics code, go add it right now.

Legalese

Obviously not design, but meant to protect your business, you need to make sure that you have items like:

Privacy Policy

A policy they can read, and an obvious link to it. This is required in some states, such as California, and is part of the GDPR.  I recommend a popup that a first-time visitor has the link and agrees to the policy.  This is relatively easy to add.

Terms and Conditions

Not all websites will need this page, but if you have ongoing memberships, for example, it may be one of the pages you need to add.

Return or Refund or Warranty Policy

people need to know if, when and how they can get their money back, or if you don’t offer refunds that should be spelled out on your website.

For the best advice on which of these pages you need and what they should say, you should consult with a business attorney.

Start Where You Are

I always recommend that you start wherever you need to … and a website is a MUST-HAVE piece for your business.  Don’t believe those people who say that you don’t need a website for your business and “oh just use social media” – I’ve shared some of the really bad experiences people have come to me with, which is why you never want to rely upon third-party platforms.

If you need to start by building something very basic yourself, do that.

At some point, you’ll need to revisit that as your business grows, and be a bit more strategic to get better results.  Processes and professionalism.

All of the companies that we’ve helped grown to multi-million and multi-billion-dollar businesses have moved away from any of the mistakes you see listed here. 

If you’re ready to move your website – and your business – to the next level and know you can’t do it alone, I recommend exploring one of these options:

DIY WordPress Website Course

Step-by-step on-demand video course walks you through how to set up your website and include the processes you need, based upon decades of experience and best practices. You’re not alone with space to ask questions of our team in the connected forum.

Done-For-You Essential Website

We combine vast marketing expertise with most innovative SEO practices, to make sure that not only can your business be found online, your website will be designed to convert visitors into prospects and eventual customers.

Leave a Reply