6 Web Design Mistakes You May Not Realise You're Making
To the un-trained eye, implementing an effective website design is pretty easy. Combine some cheap hosting with a $50 theme and you’re good to go right?
These days, simply having a visually pleasing website design is not enough to attract, maintain or grow your business online. You have to be smarter than that, and it’s the smallest areas of your page designs that can make or break an effective website implementation.
In this article we’ll walk you through 6 simple web design mistakes that are widespread online. From ensuring you have acceptable page load times, to implementing a mobile-first strategy, to limiting the number of clicks your website visitors are required to make, by the end of this article you’ll have a handy list you can use to evaluate how effective your website design actually is at present and what you can to improve your site.
1. Slow loading pages
If you’re new to website design you may not know that the recommended load time for web pages today is between 2 and 4 seconds. Any longer than this and you risk alienating your users, especially when they’re accessing your site on a mobile devices which will generally run a little slower than when they're sitting in their office on a high-speed internet connection.
To test your page load times, there's a quick and easy test you can implement. If you’re using Google Chrome, right-click on your page and select ‘Inspect’. From here open the ‘Network’ tab and check the ‘Disable cache’ checkbox. When you’re done, reload your page and you’ll be able to see exactly how long the elements on your page are taking to execute, which elements are taking longer than others, and where you can make improvements such as decreasing the number of items you're need to include.
Generally speaking you'll need to engage an experienced web design agency to get assistance improving load-times, but at with this knowledge you’ve got a starting point to go from.
Check out the load speed on our ‘Web Design’ page. Generally, we see load times of less than 2 seconds which is really great and something to aim for!
2. A lack of a mobile-first strategy
On March 26, 2018 Google rolled it’s mobile-first indexing guidelines.
What this means is that if you’re ranking on the first page for a particular phrase when search Google on a desktop computer, you may not rank at the same position on a mobile device, meaning you need to build content that is optimised for smartphones and tablets.
The easiest way to do this is by implementing a responsive mobile design. You can check to see if your site is mobile responsive by either loading it on your phone, or by dragging your browser window in to mobile width.
If your site is not optimised for mobile devices, you need to make sure it is. A great tool to check the mobile performance of your site is Google’s Mobile-Friendly Test. Just enter your URL and see how you perform.
Generally most sites these days pass this test but there are usually some suggestions which this tool makes that are quite useful and if implemented correctly can enhance your user experience, load-times and overall usability.
Even sites within Google's own stable of sites have a few areas they can improve upon as shown to the right of screen.
3. Breaking the three-click rule
Since the Internet began, there has been a whole bunch of discussion around how many clicks it should take a user to get from where they are to where they want to go. Is it one click, two or three clicks? The answer, as few as possible.
Surprisingly this issue is still a widespread one for many website owners and a major web design concern. By simply spending half-an-hour or so navigating your site and testing how many clicks it takes to reach key points on your site you'll soon see how useful an exercise this is.
Some common scenarios worth testing include:
- How many clicks it takes to add a product to your shopping cart and finalise check-out, and whether this could be reduced?
- Can a user contact you for support in less than 2 clicks?
- Is your navigation seamless without holes (adding a crumb trail can solve this), and
- Whether you have any broken links on your site causing click-through issues (Hint: try running the W3C’s Link Checking service)
4. Failing to offer multiple contact methods
If you’re a regular visitor to our site, you may have noticed that we offer a number of methods of contacting our business. By no means do we offer every possible channel for making contact with a company, but we do offer the channels we’ve identified that work best for a web design and development agency.
In our case this includes; email, phone, various contact forms, Google maps and social media.
And although at face value this seems like common sense, there’s actually a much more sophisticated reasoning behind why we offer so many methods of contact. For example, we know that some of our customers are more comfortable calling us directly to discuss their challenges, others prefer to submit an email or a contact form, and some just need to know where we are when they’re coming in for a meeting.
Our analytics show that phone and contact form submissions are the most popular channels for enquiry into our business and is why we have links to these items in our header, footer and on pages such as our contact page.
By giving our website visitors comfort in their choice to contact us, and not dictating to them which channels they should enquire by, we field a well distributed array of enquiries each week as oppose to when we simply offered a contact page on our site. This simple UX fix can go a long way to boosting enquiry on your site, so take some time to experiment with your contact channels.
5. Managing the gap between mobile and desktop devices
Remember tablet devices (i.e. iPads and Galaxy Tabs)? It’s surprising how many websites fail to implement responsive website designs that support these devices.
Yes, tablet use is on the decline thanks to plus-size mobile phones, but many millions of businesses and consumers still use them; so you need to make sure you’re supporting tablet dimensions.
If you’re not sure what the standard dimensions of tablet devices are, many developers have a different take this because of the ever-changing tablet landscape. However if you consider the following, and ensure your responsive designs look good across each of these pixels ranges, you should be well served:
- Mobile: Anything less than 768px wide
- Tablet: Between 769px and 1024px wide to be safe, or up to 1200px depending on your target audience, and
- Desktop: Greater than 1024px or your upper tablet limit (i.e. 1200px)
If you’re using a layout system such as a Bootstrap’s column layout, you should be able to test your tablet implementation quite easily as you decrease your browser width. This is a handy trick to get used to building for tablet pixel ranges.
6. Failing to design for purpose
When building a website, it’s really important that you design for purpose. What I mean by this is that your design is suited to the overall goal of your website.
For example, if your website is for informational purposes only (i.e. a brochure-style website), then this kind of site is suited to a much different design to that of an eCommerce site built in Shopify or WooCommerce.
Website’s of this type are heavily product based and will generally include featured specials on the home page, include product categories, and are drastically different to that of a brochure-style site or blog in terms of content flow.
By studying successful sites in your niche, you can gain some really great ideas which you can implement on your own site. The key is to ensure you’re innovating within your ‘site style’, but not offering a website design that is too foreign to what your audience may be expecting from you.