Some design mistakes are really obvious, but others can be more subtle. In fact, depending on how much pre-release testing the client is willing to pay for, the mistakes may not be discovered for months. And when you become aware, months later, that you had a live website out there with design mistakes on it, that can be embarrassing and frustrating. Most of us like to avoid embarrassment and frustration, so here’s a list of things to check before you hit that upload button.
It’s become fashionable, since Twitter burst onto the scene, to use pale and washed out colors. Up to a point this is fine. But a lot of people have misunderstood the point of it and use under-contrasted colors as a design features, which is a huge mistake, especially if you use it on content that is intended for reading.
Using slightly under-contrasted colors on regular text helps make headings stand out better, which makes it easier for users to quickly locate on a long page the information that will be most relevant to them. But some people take this too far. They dramatically under-contrast the regular text, and then sometimes even also under-contrast the headings, which defeats the whole purpose.
It can be even worse when links are affected. For example, the default link color in Bootstrap is so under-contrasted it’s almost not legible in certain light conditions. That’s another part of the problem, because if you’re designing a page on an iMac screen in your office, then everything is going to look fine to you. But trying to read the same content on a tiny phone screen in bright sunlight is a completely different experience.
So it can be acceptable, maybe even desirable, to employ a slight degree of under-contrasting, but to the point where somebody has to work harder to read the text.
2. Tiny font sizes
This is another one related to legibility. Harding coding very small font sizes should only be done when the text is not very important (and you’re using the diminished size to indicate the relative unimportance of that text). An example might be a copyright notice or something like that. That’s an example of text that needs to be on the page but is totally unimportant in terms of its relevance to the rest of the content.
As a general rule, you should be able to comfortably read a line of text on a standard desktop monitor from six feet away. If you can’t do that, your font size is probably not correct. Most people can read most non-decorative fonts from a distance of six feet is a size between:
- 16px to 18px, or
- 1.000em to 1.125em, or
- 12pt to 14pt
The above describes the “regular text” size, which is any normal content. Size text in relation to its importance. Each degree more important than regular text a particular other piece of text is, its font size should increase in a progressive manner. Google considers whatever appears at the H1 tag to be the most important bit of text on the page. Thus if your regular text is 18px, the H1 size should be 200% of base because H1 is 3 degrees of importance higher than regular text (which is equivalent in size to H4 under default conditions).
So if your base font size is 18px, your font size settings should be as follows:
Of course the above are just recommendations, and each project can have custom settings. But by creating a step-like hierarchy, you are providing a visual clue to the user about how important each individual piece of text is.
3. Bad line lengths and line heights
When lines of text span too much of the page, it’s more difficult to read them. You need to set constraints on line-length that make it comfortable to read the text. Generally, depending on your default font size, this will be somewhere in the range of 60 to 80 characters per line.
One of the problems you can get with short lines is when you use long words, the word wrap can kick in at unexpected places, causing artificially shortened lines which look wrong. The first way to deal with this problem is to use justified text alignment. The second way is to try and use the shortest words you can get your hands on. Used correctly, “text-align: justify” is almost always the best option.
Line height is also important, with most people not giving it any thought. The default line height puts lines of text too close together, making it more difficult to read. Make your line heights at least 1.4 and always check the result looks good at different resolutions.
4. Insufficient gutter between text and inline images
If you wrap text around images or float images to the left or right of text, then you need to make sure the text is not squeezed right up against the image. The same applies to text that flows above or below an image (except in the case of captions or titles for the image). Be sure to add margins or padding around an image.
5. Unclickable links
Every item you add to your page occupies a rectangular area, but unless the entire portion of it is filled with something, some parts of the rectangle will be empty and transparent. The pixels reserved for this space still exist, even though you can’t see them. Sometimes you might create CSS instructions that cause transparent pixels of an item to overlap the space occupied by another item on the page.
If the item that is under those transparent pixels is something the user would expect to interact with (a button, a link, a scroll bar, etc), the presence of the transparent pixels will block the user from performing the expected interaction.
You can check for this problem by adding a border to different items on the page and seeing if their bounding box overlaps anything it should not overlap.
After adding the border to the top paragraph, we can see the bounding box of it overlaps both the fruit image and the link. The key to fixing this will be found in the CSS settings of the element that is causing the problem.
6. Unmanaged scripts
This is one of the most annoying things that can be encountered on a web page, because it can interfere with the normal operation of the user’s computer, even to the point of crashing it and causing data loss. It’s perfectly possible to detect and manage errors in your scripts, and build in error handling, but for some reason on websites most people don’t bother going to the trouble.
This is another problem that can arise with scripting, where the script will repeat something infinitely because the condition that would cause the loop to terminate is impossible to reach. Here is an example:
Don’t actually run that, or you’ll be truly sorry. But the concept of this script is that it sets the value of i to 0 and then while i is less than 1, display an alert box giving the value of i, then subtract 1 from i. There are many more complicated ways to create recursion, and they don’t necessarily involve loops (eg: a function calling itself without any condition to prevent it from doing so. For example:
Again, you shouldn’t test that. It’s not a nice script.
8. Using the wrong character sets
There’s not much reason to use anything other than UTF-8 or UTF-16 (and the need for the latter is exceptionally rare).
In the first example, the use of an incorrect charset makes the text have errors that interrupt the flow for the reader, so even if they can figure out from the context what the correct words are, it’s still a chore to read it.
In the second example, the correct charset is used and everything displays correctly.
9. Smart quotes
The look horrible, and unfortunately they’re enabled by default in WordPress and many other systems. Avoid copying and pasting smart quotes from MS-Word documents into your web pages. It’s easy to turn off smart quotes in Word, and there’s no good reason to have them enabled. When smart quotes are shown on a website that hasn’t specifically enabled UTF-8, the result is horrific.
10. Using the font of a logo instead of the logo
This is a stupid thing to do, but it’s encountered more often than you’d expect. Fonts are meant to be dynamic, logos are meant to be static. You can’t expect a dynamic font to behave like a static logo, because it’s not in the nature of a font to do that.
If you use a font where a logo is supposed to go, it may not display correctly, which can be embarrassing for your client, because the logo is an important part of their business image. In the example above, a company called Mexacom has a logo that is created from a font, but that doesn’t mean you can just type it in that font and avoid using an image.
If you use an image and have taken care of responsiveness properly, when the user reorients their phone from landscape to portrait, the image will scale smartly. But if you typed it, this is what could happen:
The logo is treated as ordinary text, so it simply wraps over onto the next line instead of scaling, unless you take the time to add specific instructions to prevent that kind of thing.
header image courtesy of