Let’s be honest: Running a website is a pain.
You are working 7 days a week, but these website visitors just take it for granted.
You don’t get fan mail or even a “thank you” for the perfectly aligned images or working links. But try and mess something up, and off they go, closing the browser tab, already forgotten about you.
Indeed, if you want to keep your prospects on your website, get them to visit your sales pages and hire you, you have to do gazillion things right. Which are the same gazillion things waiting for you to screw them up.
And while you’ve read about most common website mistakes plenty of times already, some of the annoying website mistakes rarely get mentioned.
Here’s a list of 5 website mistakes that you may have failed to notice but that are frustrating your visitors into leaving your website to never return.
Mistake #1: The main text area is too wide
Here’s an example:
If the text runs all the way from the left to the right on your screen, it’s impossible to read it without moving your head.
What is the ideal line length for a web page?
You may have heard that it’s between 50 and 75 characters, but I’m not buying into this.
Three reasons:
- First, the sources that use the 50-75 characters per line argument (like this one or this one) say this length “widely regarded”, which is not an argument. Where are your studies? How many people you surveyed? Did you check the differences by age?
- Second, those studies suggest that 50-75 character things applies to printed and not electronic text (oh, so that’s why they don’t name any studies!)
- Third, 50 characters in what font size, color and screen resolution? You can’t just take a recommendation for the printed media and announce it to be valid for the electronic devices.
So no surprise that there are studies (like this one) that have shown that long lines can be read faster than short lines with no change in comprehension.
Without starting a debate around the line length here, I think the ideal line length for a web page depends on 2 things:
- An objectively noticeable extra effort your readers need to make to read your text. For example, turning their head left and right to follow the lines (line too long, as in the example above), or moving their eye pupils too fast (line too short).
- A subjective preference of every reader. This may depend on their eyesight (thus, age), and how used they are to reading text online, for example.
You can’t do much about #2 except speculating about what your readers might like best.
But there is a solution for #1.
How to adjust the line length on your web pages?
Good news: You can fix it by adding 2 lines of code in your custom CSS file.
Bad news: If you have no idea how HTML works and your theme doesn’t offer this within its “Customize”-interface you wouldn’t know what those 2 lines are.
The main principle is this:
You need to find an element that wraps around your body text and increase the left and the right padding for it using CSS.
In the example above, adding this code to the custom CSS file will do the trick:
.container {padding: auto 220px !important}
@media only screen and (max-width:600px),
only screen and (max-device-width:600px) {
.container {padding: auto 10px !important}
}
… which in human language means:
“On a desktop, leave top and bottom padding as it is and set left and right padding to be 220px. On a smartphone, same thing but make it 10px instead of 220px.”
This will give the text some white space to breathe and your website visitors won’t have to suffer.
If you have to take care of your website yourself but can’t / don’t want to hire a web developer, you have to learn a bit of CSS and HTML sooner or later.
This PDF with fun examples I called “CSS Crash Course for Fearless Bloggers” will help you get comfortable with using CSS.
Ok, enough with the line length. Let’s look at the next website mistake.
Mistake #2: Top-level navigation stretches over several lines
Here’s an example where the main navigation unexpectedly breaks into multiple lines.
Quick question: Are you an online store?
Then you don’t need more than 7 menu items in the top-level navigation (the maximum number of items we can hold in our short-term memory), not to mention several lines.
The more items compete for the website visitor’s attention, the less attention each of them will get.
Even worse, multiple lines of main navigation is something your website visitors don’t expect, and your “orphan” items in the second line will be completely overlooked.
Solution?
- Make sure your top navigation consists of not more than 7 items. If necessary, combine the content of several pages on one page with multiple sections.
- If you have less than 8 items in the top navigation and it still doesn’t fit in one line, move things around. For example, your website tagline can go below your logo and free the space in the top menu. Or you could place your logo above your navigation and center it.
The point of this exercise is to make your navigation look like your users expect it to look and make sure that no navigation labels are placed in unexpected places (otherwise they will be likely overlooked).
Mistake #3: Negative priming
Have you heard of priming?
It’s something you say or show on your website that influences the subsequent short-term thoughts, emotional reactions or actions of your visitors in non-obvious ways.
Saying “click the button below” isn’t priming. It’s too obvious of a stimulus.
But what is priming then?
I’m going to steal an example from the folks at Nielson Normal Group:
This is a website of a private school up to 8th grade. But because they featured only the photos of young children on their homepage, many people assumed that this is a pre-school and didn’t bother to explore the website.
Now, this is priming because the reason for the website visitors “thinking the wrong thing” isn’t obvious.
But priming can be also positive.
And here I have a nice example from a post by John Espirian “What is technical writing?”:
This image looks like those chats with ridiculously funny exchanges. You know, like this one:
So, based on your previous experience of those chats being funny, you’d feel compelled to read this one, too, before you even think about it.
How to spot negative priming
– “OMG, I just spent an hour creating a perfect headline. Now I also need to worry about priming, too? That’s insane…”
– “Yeah, I know… Tough life, man, tough life! But you can always ask me to critique your website and point out all your website mistakes, you know.”
The most typical examples of the negative priming are images that contradict the message of the page instead of supporting it. So, next time you are using an image on your page:
- look at it more carefully and think about (better, write down) what associations it triggers
- see if one of those associations contradicts the message on that page or evokes an emotion that may prevent your visitors from taking action
You may also want to go through important pages and check your existing images.
Mistake #4: Bullet points that look like one endless paragraph
You’ve heard many times that you should use bullet points in your text to make it easier to read.
Yeah… about that:
Truth time: Do you have enough space between the individual bullet points on your website? Or do they also look like one giant paragraph with some dots on the side?
If the latter is the case, there is an easy solution to this problem, namely some code you can copy-paste in your custom CSS file.
Mistake #5: Telling people to go look where to click
…instead of providing the link on the spot.
Funny story: In the example above, “Register”, “Buy”, “Reach out to us” aren’t links but just text.
It’s a mystery to me why people still do this when you don’t require any technical knowledge to insert a link, thanks to the great user interface of WordPress & Co.
Whatever you say or do on your website, make it as easy as possible for your visitors to take action. Click To TweetWhatever you say or do on your website, you need to make it as easy as possible for your visitors to take action. And “go find that link somewhere on this website” obviously isn’t doing that.
So, if you really want your visitors to register, buy or reach out, make those calls-to-action clickable.
Bonus mistake #6: And then there is Derek
This is my favorite hero image of all times:
I don’t know what Derek is going for here and why he decided not to look us in the eye.
Maybe this image is supposed to support his claim of him being “a badass”. You know, by showing us his buttocks. Yet, this also fails because the image gets cut off right before we get to see “the proof”.
Derek, we believe you. Now, would you please turn around?
(Also, what’s up with exclamation marks on the CTA buttons?)
On this cheerful note…
I feel like this would be a perfect moment to say something profound to motivate you to fix those website mistakes. But I trust that you have your website’s best interest at heart and will do that without any reminders from my side.
So instead, I’d like to suggest a game:
- If you found at least one of these mistakes on your website, tweet this article.
- If you aren’t making any of these mistakes you get to ask me one question about your own website, even if it’s unrelated to this article. Just leave a comment. I always reply.
Are you in?
Great post Gill! #1 is also a pet peeve of mine. Sometimes it feels like watching a tennis match on websites with very wide text areas. Not good for your neck :).
Haha. Indeed. Thank you, Michiel 🙂 Glad you found it useful.
Thanks I am a mother and very busy! This helped me alot!
Great post! Many websites I have corrected with all of the above!
Thanks, Duncan.
Thank you for posting the code to narrow line with! Just what I needed to point people to who don’t have a programmer at their disposal.
I think lines can hardly be too narrow, Gill. A lot has been written about eye movement and optimum font size – but really what it comes down to, I guess, is that your eyes do not like to travel distances that are so wide you lose track of the meaning of what you are reading. So you can safely set a line width in centimeters. And I always think we like to read Penguin pockets for a reason: their line width is what I strive for. By and large.
My pleasure, Kitty 🙂 Regarding the code to narrow the lines: Unfortunately, there is no universal copy-paste solution that will work on any website (even on any WordPress website). It depends on a particular theme and how the developer “named” that main area that you need to narrow. Yet, “container” that I use in the example is the conventional name, so chances are, it will work more often than not on a WordPress website.