6 Web Design Fails Still Happening in 2018

We are officially a third of the way through 2018 and there are still a number of web design fails I’ve seen on other sites across the internet. It’s important, or should I say vital, that businesses and brands take their website seriously. We’re at that brink in time where everything is moving to a digital age, and your online presence is absolutely key to being successful in the fast-moving times of technology that we live in today. And just because you have a website doesn’t necessarily guarantee that you’re connecting with your customers in a valuable way. Here are ten web design fails that I’ve come across that are handicapping businesses from reaching their peak online presence due to a lack of attention to their website’s design.

Your website still isn’t optimized for mobile devices.

With users gravitating toward their online devices more and more frequently than their desktop counterparts, it is clear that we are experiencing a mobile revolution. Only thing is, the revolution started years ago and some companies have yet to catch up. Here’s just a few of the things that are affected by an unresponsive website design:

• Your users: Landing on an unresponsive website on your phone nowadays is a bad user experience and a crime against humanity. No one wants to try to navigate a desktop-optimized site through the cropped aspect ratio of their phone.
• Your search rankings: It isn’t mandatory for a responsive website to rank on Google, but boy is it a pretty significant factor. In fact, Google ranks mobile-friendly websites higher than others. So, if you want people to find your website on SERPs, ensure that your website is mobile-friendly ASAP.
• Your business: Knowing that the digital world is moving towards mobile, the number of potential customers and leads that bounce from your website due to a lack of an optimized mobile interface is enough justification to go out and ensure your site is responsive.

Missing favicon.

The favicon, or the icon that sits next to the page title on your browser tab, can easily be an overlooked element for any website since it doesn’t actually exist in the website itself. However, the devil’s in the details, and having a website without a favicon included can make a website seem unprofessional.

Missing open graph image.

Similar to favicons, an Open Graph image is the image you see when a link is shared through social platforms. Here you can check out a thorough breakdown by Neil Patel of what open graph meta tags are. In short, Open Graph meta tags are metadata for your webpage and show up in search results and whenever they’re shared socially. The image tag however is an important one to note, as this will be what catches the eye for users who see your link on their feeds. Although this isn’t directly associated with your website, it can be configured manually through your CMS. In WordPress, for example, you can configure the Open Graph image through Yoast, an SEO plugin. If your site is shared socially and there’s no image shown, it can have the same impact as a missing favicon to cause a business or brand seem unprofessional.

Source: Neil Patel

 

Unoriginal content and imagery.

Cliché headlines and heavy use of stock imagery is everywhere around the web. Users are good at identifying stock images due to their cheesy looks and overexaggerated characteristics, and when they’re associated with your website it can have a negative effect on your brand and reflect it as being unoriginal. Don’t get me wrong, stock images have their place and can be a viable option for businesses that don’t have the time or resources to use original imagery. Just stay away from the bad ones, and ensure that the ones you do use help support the content on the page.

Use of illegible typography.

Serif fonts are best used in print design, but do have their place in certain applications for the web as well. Large headlines using serif fonts draw intrigue and decorative details to make text seem sophisticated. Sans serif fonts do best in digital design, as they translate well when rendering in pixels and are altogether just easy to read. But script fonts… they have their place, just not in web design. As with anything, I’m sure there’s some website out there that can best utilize a cursive or handwritten font. When it comes to web design and trying to gather conversions and engagement from users, why make it hard on them by having them decipher what a headline says when it’s written in cursive. Ease-of-use and legibility should be the mantra for your website or landing page, so try and stay away from script, handwritten, and highly-decorative typefaces.

Improper use of text spacing and length.

This is more common than you might think, and requires a bit of a closer look at times in order to identify whether your website is affected by it. To best demonstrate improper use of text, here are a few definitions and examples below from 4over4.

• Kerning: The space in between two characters. Proper kerning entails that it isn’t too tight that the characters are touching, and not too loose to the point where it makes the space in between each letter seem visually inconsistent with each other.

• Tracking: The space in between words and phrases. This is similar to kerning, but is in reference to the negative space within an entire word or phrase. Be sure to use this carefully, as too much tracking can expand a word or phrase too much, making it look rather awkward.

• Leading: The space in between multiple lines of text. The rule of thumb that I was taught was that it’s best to keep the leading (or line spacing in CSS) 3px (or 20%) larger than the font’s size. Leading that is too tight can cause a harder time with legibility, whereas leading that is too loose can just look awkward.

• It’s also important to keep the line length in mind, especially for large blocks of text. This requires some adjustments with all three aspects mentioned above, as well as the font size. The rule of thumb I was taught was that 10-12 words per line is the ideal range you want to stay in when configuring your line text. It’s not too short where users get annoyed by reading onto the next line over and over again. And it’s not too long to where they’re moving their heads left and right trying to read the content on the page instead of moving their eyes left and right.

Closing Thoughts

First impressions count, especially for your business’s website. It’s and extension of your brand and is a salesperson in and of itself. But when your site isn’t optimized for a great user experience, doesn’t function properly for mobile devices, or just doesn’t look good altogether, then what does that say about your company? Take some time to evaluate your website with the topics mentioned above. Hopefully with these six provide you with a solid start on how to best optimize your site to look and function as a modern, conversion-oriented website.