6 Most Common Website Mistakes

6 Most Common Website Mistakes

Whether you have an e-commerce store, you offer a service, you’re a non-profit, you’re a candidate looking for a job or any other possible combination, these tips are the same for everyone.

Mistake #1

No one knows what you actually do

Customers will spend all of 5 seconds or less before making the decision if they want to keep looking.

In that 5 seconds, can I tell what you do or what you offer? If there’s no text or content that explains what you do, then probably not.

I also wouldn’t trust an image to do the talking for you.

What are they selling here? Clothes? Yoga mats? Yoga experiences?

A genderfluid person meditating
Photo by Zackary Drucker as part of Broadly’s Gender Spectrum Collection.
Credit: The Gender Spectrum Collection.

The image alone without context depends on the customer to interpret what you’re trying to say.

What if there was a headline that said ‘Soft, Flexible Yoga Pants’?

Now it’s clear, the image is representing a clothing store that specializes in Yoga.

You can get even more specific with ‘Soft, flexible Yoga pants for men, women and anything in-between’.

Now I know they have a large variety of sizes and they are an inclusive brand.

Mistake #2

The website isn’t engaging

Similar to what we talked about with Mistake #1, customers are only going to spend about 5 seconds on your page before making a decision if they want to keep looking.

Have you ever used a heat map before? I highly recommend HotJar.

Heat maps are a fun representation of data, in varying temperatures, over a period of time. They tell you visually what’s happening on your website and what areas are most popular (hot) or unpopular (cold).

As customers interact with your website, the more popular a section on the page is, the “warmer” it becomes.

So how does this help solve Mistake #2? Well first and foremost content will be essential in engagement. But you can write a compelling content and still have poor results.

My goal with the heat map, is to evaluate if customers are engaging with the website. Do they experience friction or can they navigate smoothly through the site because they understand what you are trying to communicate?

There are 3 types of heat maps and some questions to ask yourself when reviewing each one.

Click Maps

Do they click on buttons and links? If so, which ones?

Ideally, you’ll have a clear call-to-action (will discuss this later) which they are clicking on. I’ve seen some recordings where customers are clicking around vigorously because they can’t find what they are looking for. So yes, the website is getting clicks, but the clicks are out of frustration, not satisfaction.

Sample click map showing most clicked on sections.
Sample Click Map showing most clicked on sections

Scroll Maps

Do they scroll down and if so, how far?

Ideally, you’ll see a gradient of colors as you scroll, but I would still expect to see 20% of your visitors reaching the bottom. It’s possible that people are scrolling all the way down because they are engaged and want to see what else you have or because they are looking for your footer menus. It’s also possible that they are scrolling all the way down because they can’t find what they need and don’t know where else to look.

Heat map showing a rainbow of colors with red hot at the top to cold blue at the bottom
Sample heat map red hot to cold blue

Move Maps

Are they ignoring important pieces on your page? Is the page so distracting that they can’t/aren’t focusing on the main element on your page?

Move maps are only used on desktops at the moment because it requires the use of a mouse, but even then, not everyone uses a mouse. Move maps are similar to some proprietary software you may find that tracks eye movement (but cheaper). The theory being that customers usually are looking in the same place as their mouse.

If you don’t have HotJar or something similar installed, I encourage you to set it up. You’ll be amazed what you can learn from your customers and find new ways to optimize your website based on these results.

Mistake #3

Pages aren’t readable

We’re not talking about poor grammar or spelling which is essential too. Let’s talk about something that’s not as obvious unless you’ve got some design skills.

The design and readability

Many have heard the term UX or user experience. It’s not just a buzzword. User experience includes all aspects of the end-user’s interaction with a company, it’s services, and it’s products.

There’s a lot of ways to improve a users experience and there’s a whole profession dedicated to user experience. We’re not all UXers so let’s focus on easy ways you can remove the friction customers experience when visiting your site.

  • Body fonts should be similar to Helvetica Neue, Playfair, PT Sans, Lato, Roboto, and Montserrat
  • Body copy should be at least 16px though I usually aim for 18px
  • Avoid body content in light colors
  • Use high contrast with text for readability such as almost black text with almost white background or visa versa
  • Line spacing should be 1.5
  • Always add alt text to images
  • White space is your friend
  • If you must use a video, add close caption and turn off autoplay

Mistake #4

Lacking strong call to actions or CTAs

“Well I have a link to my contact page in the navigation bar. That’s enough, right?”

I wouldn’t consider that a CTA. Links in your navigation are helpful tools for your customers. A CTA is a section on a page that compels them to take an action such as filling out a form or making a purchase.

A weak CTA would say Click Here or Read More. It leaves the question click where, and learn more about what. Some ad space is limited, so it’s possible that a button may say Learn More or something similar, though it’s not ideal. Add other content that pulls the customer in.

Before you create a strong CTA, you first need to know what goal you’re trying to achieve.

  • Increase sales
  • Increase newsletter subscriptions
  • Increase visits to other pages on your site

Once you know your goal, it’s a lot easier to figure out what you want to say.

For example you could have a CTA that says:

All of this, just $5 with new membership — Learn More

Other great examples include

Reserve your consultation

Donate ❤️

Notice the emoji? Adding emojis, images, buttons and color can really help draw the eye to your CTA.

The good news is that you don’t need to be a writer to create a well-crafted CTA. Do a quick search in Google and you’ll find lots of great examples.

I’d recommend trying different ways to engage your customers and track what works and what doesn’t. Use something like HotJar that we discussed is Mistake #2 and/or track conversion rates in Google Analytics. What works for one may not work for another so testing is really important.

Check out your website. How many times do you say Learn More and what can you change so that your CTA is more compelling?

Mistake #5

Pages are lacking descriptive content

I’m not going to get into search engine optimization (SEO) as you can find gobs of information online about SEO and how it works.

Google doesn’t know your website from the person next to you. The only way Google will know that you are worthy of ranking higher up on Google search is through QUALITY content.

Notice how I put QUALITY in all caps? That’s because we should build content for users NOT for Google.

Google utilizes algorithms to check what keywords customers are searching for. Then, Google will review your website to see if the keywords they are searching for, match what’s in your site.

This doesn’t mean you should flood your website with keywords.

Write QUALITY content that answers the questions customers are looking for, and Google will organically (naturally) connect your site as something that is worthy of showing up in their search results.

There is no one and done solution for SEO. Advice in this article are my opinions and DO NOT guarantee results but my hope is that it gets you in the right direction. Creating quality content is ONE small piece to your larger marketing plan.

Here’s a few quick tips to get quality content on your site and increase your chances for organic search results.

  1. Create page titles that are clear and relevant
  2. Use body content that is clear, engaging and easy to find on your website
  3. Use alt attributes (remember this from last time) to describe images
  4. Add meta descriptions https://yoast.com/meta-descriptions/ to as many pages as you can with at least 155 characters (this keeps changing but 155 characters is a safe bet)
  5. If you have products, use product descriptions that are around 200-500 words https://www.littlestreamsoftware.com/articles/whats-minimum-length-product-descriptions-boost-shopify-stores-seo/
  6. Include all your business data such as name, address (yes a physical location even if it’s your home address), phone number, website address, business categories, hours of operation and more

Mistake #6

Pages are not responsive

Responsive means that your website has a flexible layout that will automatically detect the visitor’s screen size and orientation and change the layout accordingly.

Instead of talking about all the different ways to create responsive pages, I’ll address how to check your webpage for responsiveness.

Check for responsiveness

I always recommend using a mobile first (exactly as it sounds) development approach. Mobile first prevents the frustration of making a website look beautiful on your desktop, only to find out that all your wonderful designs, frankly look crappy on the phone.

This means that as you build a page, build it for the phone / tablet first then adjust for your desktop.

The best way to check your designs on mobile is to see it in real life. Let’s be real though. It’s not possible to have every type of phone / tablet at your finger tips.

Fortunately, many web browsers will allow you to see what your pages look like on mobile.

In Chrome, you can right click to ‘inspect’ your page. Then at the top, you can select the responsive options to view various mobile devices.

Ability to test what your website looks like in Chrome using Inspect will show multiple mobile and responsive options.
Chrome Inspect Tool

In Safari, it’s a bit more work. Open up a browser and in the menu bar, select Preferences -> Advanced. Then click on the option to ‘Show Develop Menu in Menu Bar.’ Then go to the webpage you want to check. Select Develop in the main menu -> Enter Responsive Design Mode.

Ability to test what your website looks like in Safari using Develop tab will show multiple mobile and responsive options.
Safari Developer Tools

The benefit to Safari, is you’re able to check responsiveness in other browsers such as Firefox, Internet Explorer and Microsoft Edge in addition to Safari itself.

Once you’re in responsiveness mode, test different views on different devices and make sure you check both vertical and horizontal views. Don’t just test Apple products. What do you see? Does your design translate the way you had expected? Are you able to navigate through the site as you had expected?

If you need some help with this, reach out. I’m happy to answer questions on how to do this.

Did you know that 50% of web traffic is done on a mobile device? Don’t ignore responsive pages or you could be missing out on sales.

Take a look at your site. Do you hit the mark with all of these easy ways to remove friction from your site? If not, get to it! You may also be “too close” to your website. I also offer a Website Review if you don’t have the time to take a look.

Back to blog
JSON-LD for SEO logo

Get more organic search traffic for your Shopify store