Website design is one of our favourite subjects here on the blog and we love to cover it all - the good, the bad and the ugly. As we've mentioned, your website is often the first point of contact people have with you and your business, and it sets the tone with how your brand is perceived online. While your website will evolve and be updated over time, there are several features that you should avoid at all costs. Outdated technology and web design paradigms are usually the culprits when it comes to brutal web design choices.
Be sure to read through to the end of the article for a special bonus!
1. Old-School Mobile Sites
You know the ones I'm talking about...those awkward sites that display when you're browsing the web on your phone or tablet. The image below shows the difference between a responsive site viewed on mobile (left) and a traditional website viewed on mobile site (right).
The site might even have an entirely different URL (for example, m.sitename.com) which is confusing to both users and search engines like Google.
Mobi sites are brutal for many reasons, notably that they do not accomodate all device sizes and shapes, and they do not work well with SEO.
The current standard of mobile compatibility is responsive design and if anyone ever tries to sell you on another type of mobi site, run far and fast! Whether you opt to work with a web designer/developer or customize a WordPress theme yourself, there are so many options to include responsive design that you should never have to sink so low as the mobi site.
2. Narrow Website Design
Whenever I see narrow little website designs that have several inches of blank space on the left and right sides, I automatically know that these sites are dated and not well cared for.
Given that so many people browse or large laptops and desktops nowadays, these narrow designs date themselves the second the page loads. Back in the day, monitors were often much smaller so sites were built to be 1024 pixels wide. Those days are gone and displays are often 1900 px wide and display in high resolution!
We've already mentioned the benefits of responsive design above, but this is another case where RD presents a contemporary site.
Since responsive websites automatically expand to fit the size of the screen, there's no need to build sites that don't fill the page correctly.
See the image below for an example of a site that has a narrow build with lots of extra space on the sides (click to enlarge, image via):
3. Metaphorical Photos
These photos were ~totally on trend~ back in the late 90s so it blows my mind when businesses are still using these dated stock images on their sites!
Some businesses will take the easy and cliched route of putting an image of a chess board (usually in black and white for added serious effect) next to text about how "strategic" they are.
Or perhaps they'll talk about how different they are by including an image of a dog with a mohawk (see image below).
These stock photos are painfully obvious and since they are usually free or purchased for a couple of dollars, it shows that the web design was hardly considered.
4. Unwanted Music
There's nothing more annoying (and potentially embarrassing) than browsing online when all of a sudden, you open a website and it starts blaring music. This can be either native audio on the site or from a 3rd party ad. Hello, you're not Adele and no one wants to hear you!
I would wager than 99% of all site visitors are not interested in hearing unsolicited music on your site. Keep your site design simple (and silent!), and free from ads that will start playing audio without being initiated by the user.
If a visitor has to mute your site, there's a high chance they won't return.
5. Complicated Contact/Registration Forms
It's important to remember that users are one your site in order to get information they want, not the other way around! If they want to get in touch with you (whether through your Contact page, or by signing up for your newsletter), don't make it so complicated that they turn away or get discouraged!
The contact form that you're using should be a very simple contact form that captures only the necessary information.
We recommend collecting their First Name and Email Address, but take a few moments to think about whether you really need to get additional information.
The more required fields and validations you have in place, the more likely the user is to be frustrated away from finishing their inquiry or sign up.
The image below shows the contact form on this website, charlotteohara.ca. Note how simple the fields are and how there are only two basic required fields (click image to enlarge):
Bonus - 2 extra web design faux-pas
I've written an extra cheatsheet that includes two bonus examples of bad web design elements to add to the list above. To get this bonus, click the link below - it's free!
What are some of your biggest pet peeves when it comes to web design? Have you had to make changes to your website recently in order to fix those mistakes? We'd love to know so leave us a note in the comments!