5 Most Common Website Mistakes

Every day, I make it a point to set aside time to visit at least 50 websites I’ve never visited before. This exercise provides several benefits: it allows me to keep my finger on the pulse of industry trends, gives a fuller view of the web business landscape, and is an excellent way to keep a sharp design eye. Inevitably, the websites I visit run the spectrum of quality, datedness, and the overall level of care given to them; and while in web development there are as many mistakes to be made as there are websites themselves, I’ve found that some mistakes are more common than others.

Here are the 5 most common website mistakes I see in my daily work:

5. Wrong Choice of Font

Ask any designer about what they notice upon first visiting a website, and almost all of them will mention font. Font is such a fundamental element of design, and what font you choose can either bring the whole design together or cause it to fall apart.

Fortunately, most modern professionals have passed Fonts 101 & realized Comic Sans is usually a poor choice (if you insist please consult this guide: https://www.comicsanscriminal.com/). However, this is a game of choosing the best font for the job, not simply avoiding the worst choices. Of course, what constitutes the “best” choice is largely subjective, and there might be multiple fonts that work equally well, but overall the font you choose should always help complement & communicate the brand you are building a website for — this will inform whether the font should be playful or serious, sharp or soft, loud or quiet, traditional or modern.

4. Poor Mobile Design / Usability

We all have smartphones. Around 50% of all website traffic comes through mobile. Yet, for an astonishing number of websites, mobile-responsiveness is treated as secondary to the desktop experience, which causes both the user experience & your brand image to suffer. Typically, poor mobile-responsiveness is caused by lack of testing throughout the development cycle. Every major web browser includes an easy-to-use inspector that allows you to view on all the common screen sizes, including tablets, iPhones, and Android devices.

Making sure your site is mobile-responsive is only one part of the equations, however. A great experience on mobile feels like the whole user experience was made specifically for mobile, rather than feeling like a brutish port of an old website. One way this shows itself is in the website’s information architecture and navigation flow; whereas pre-mobile websites were built to be interfaced with a mouse-and-keyboard, nowadays everything is swipes-and-taps. This means that most people who visit your website on mobile are unlikely to see anything but the homepage — if your best, most compelling content is buried in subpages, people are not going to see it. This was true even in the pre-mobile era — users often bounce after the homepage — but mobile exemplifies it even more.

People prefer to swipe, and they want the information as quickly and with as little effort as possible. This doesn’t mean you should remove your subpages, but each subpage should have a corresponding section on the homepage that links to it. Generally, less subpages is more — in my opinion, most websites should have no more than 5 to maximize user experience and avoid overwhelming visitors. Ever visit a website that has 10 subpages, and each of those subpages has 15 subpages? It feels like work, it’s confusing, and it’s exhausting.

Think about the visitor journey through your website. Keep it easy. Keep it elegant.

3. Grammar / Spelling Mistakes

Not much to say here. Typos, misspellings, and poor grammar aren’t a good look. If you don’t show a concern for detail on your website, why should anyone believe your product or services are any different? This is all just a grade school game of “double-check your work” — dot your i’s and cross your t’s. Oh…and you might want to check your zipper.

2. Large Photo/Video Files

The convergence of low-cost website builders with low-cost camera technology has allowed anyone with an internet connection to build & manage their own website. This is great, as it eliminates the barrier to entry and opens up access for the masses. That said, using low-cost website builders are not without their pitfalls and gotchas. For example, often these builders are in the style of drag-and-drop widgets that allow you to insert your own content, such as photos and videos. This is also great, when used correctly, but the problem is that millions of people are dropping huge photo & video assets into their website without first optimizing them, which can absolutely destroy your website’s performance. It is not uncommon to stumble across a website with image assets over 10x larger than they need to be, or with a video background over 20MB in size. Fortunately, for a good designer these optimizations are not difficult to do yet can make a difference as huge as those files you’ve been using.

1. Blurry Logos

Whereas large media files will slow your website down, blurry logos will just make it look sloppy & unprofessional. This, too, is most often caused by people uploading whatever logo file they have on hand, which makes raster images is susceptible to getting upsized, pixelated, and blurry. There are 3 ways to avoid this completely to ensure a crisp logo:
1. Use an existing, larger PNG/JPG — If you have an image file with larger dimensions at your disposal, try replacing the existing logo with the bigger one after making sure the file size is optimized
2. Create a new, larger PNG/JPG — If the current blurry logo file is the only logo file that exists, the only way to make your logo sharp & crisp is to create a new one with larger dimensions. This is the least ideal of the options and can be avoided by always starting with a large “parent” logo and scaling it down as needed.
3. Use an SVG - While the above 2 options can get the job done and fix your blurry issue, this is the ultimate, long-term solution that I always recommend. An SVG is infinitely scalable, so whether you want to show your logo on mobile or on the side of the Burj Khalifa, it will look every bit as sharp and clear.

These are 5 of the most common mistakes I see on websites. What did I miss? Drop a comment with a common mistake you see on modern websites.