What elements make up a good website? As the internet gets older every year, one thing is clear; the design and use of websites are changing rapidly. How are you going to stand out in a busy digital world?
What Makes A Good Website?
The components of good website design are
- Visual design
- Technical setup
- Use of Web Tools
We might’ve broken them up into what seems 3 easy core categories, but there’s far more that goes into website design, and we’re going to cover all of them in this post. First things first, before you start designing any website, you need to know the purpose of the website (and every web page) and understand what you want to achieve from a website redesign.
Visual Web Design
The aesthetics of your website are the second thing noticed by users who land on your page – second to the load speed – so you need to impress here with a beautiful eye catching design.
Got an existing Brand? Pull those designs through to your website too and align with your offline business. But branding isn’t just your logo – no. Think about every colour choice you make and preferably make it a colour that’s in your brand’s guidelines.
When branding your website, you don’t want to shove a load of colours at your visitors, it should be obvious how much colour is too much colour, so leaving some whitespace on your web pages is absolutely fine – It actually makes your website appear less cluttered, and helps direct users to your main purpose, the content.
Choosing a few font typefaces to be used on your website is also a branding choice that you should be thinking about. Take a look at Google’s web safe fonts for ideas on fonts that would suit your brand. Quick tip: Keep your most legible font as your primary font for the content such as paragraphs, and use your more fancy font for your headings. You can see this is what we do with our text body and headings too.
Now, if you haven’t got any branding to start with then this is completely a blank canvas for you to create what you want but keep in mind, every colour has an associated emotion, and every font has its personality. There are other branding devices you can use in your website design, check out our guidance on brand archetypes.
Imagery & Graphics
Every image added to a website is better with a purpose. If there isn’t a need for it or it doesn’t add any value to the web page then don’t add it.
Images are best placed next to the text they are relevant to, or where they aid in the user experience of the web page – like in these landing pages for Ad campaigns.
If you feel it would work on your website, we’re real fans of using images like the one below, of people that seem to direct users.
Using images should be proportionate to how much text you’re writing, as we said, images should support the content on the page. It’s also important to optimise your images by using high quality photos, scaling them to an appropriate size and compressing the images to help with your load speeds; we’ll talk more on this later.
Call To Action
I know we keep going on about each page having a purpose, but what’s the point in making pages that don’t do anything? Adding call to actions on each page encourages your users to perform the desired action. For example, if I wanted them to contact me, not only would I make my contact details are easy to find, I’d make a big button that makes it clear I want people to contact me.
Wanna see some great examples of this? Check out these websites.
Using a different colour for your CTA is the best option as we’ve done with our website for The Tube & Bracket Company.
Drawing users to click on buttons and complete your desired action.
When we talk about personalisation, we mean both personalised for the user and adding personality to your website that sets it aside from the rest of your competitors.
Yes, part of the Website’s personality would come through in the branding of the site, but also think about the tone of the text, and how you’re phrasing things. Adding an about us page is essential and can be used to add personalisation. The about us page is where you can talk about yourselves as a business and forget about the customer for a second.
Personalising a website for users can be a lot harder as to some degree you’d need personal information to go off of. But we can make certain additions to a website like adding location pages to target customers in a specific location and using more of ‘you’ and ‘your’ when talking about your customer.
If you want to make a website more people-focused, then add images of people to your site and take quotes off of customers to use as testimonials. You could also add your team photos.
Consistent information is key to good website design throughout your Site. Keep a simple and clear message with limited amounts of detail, such as only a couple of phone numbers and a few email addresses. In addition to your contact details being consistent, your website content shouldn’t contradict itself either. If you have a service page that’s no longer a service you do – take it off the Site!
Technical Web Design
Responsive and Mobile Friendly
In 2019, it’s really not unusual for us to see websites being accessed on mobiles more than on desktops, suggesting people love browsing the web on their phones.
Gain a competitive edge over your competitors by making your site responsive. Responsive means your website can be viewed on all devices easily, and the experience would be optimised for the User’s device. Adding responsiveness is a huge part of making a site mobile-friendly and will definitely help boost your Website’s favourability with users and search engines; so it’ll be much easier to capture potential customers whichever device they choose to use.
Test your website using Google’s Mobile Friendly Test and check if your website works well on mobile.
Fingers crossed you get a report that shows:
Another great tool you can use (completely free) to check your website for mobile usability issues is Google Search Console. As Google searches websites it’s bots can detect mobile issues for your website.
Manage your website on Google here and check Mobile Usability under the Enhancements tab.
Fast Load Speeds
Your load time is the first encounter a user has with your website. As a user loads a web page, their patience wears thin real quick!
Google’s John Muller recommends a 2-3 second load time; anything more would put you at a disadvantage to your competitors.
So what affects your load times? You may want to check your load speeds, and that’s fine, some tools you could use are Pingdom, GTmetrix, and Google’s PageSpeed Insights. As for what actually affects load times, some areas to look into are:
- Compressing Images
- Scaling Images to the optimum pixel size
- Reducing the number of HTTP requests made
- Reducing your page file size by consolidating multiple HTML, CSS, and JS files into one
- Minify your code
- Choose a cache plugin for your website
- Use cache on your server too
There’s some to get you thinking, running your website through the tests above will also give you areas to improve on.
Not really in the web design category, but security is definitely what makes a good website. Your website should be secured from hackers trying to steal yours and your User’s sensitive data.
There’s a number of ways to go about securing a website but to start with, the logins to your content management system should be complex and guarded against being viewed by anyone, if you’re using WordPress or you’re using a standard username like ‘Admin’ then change this right away.
Part and parcel of securing a website is installing an SSL certificate onto your site. This means any data passed from your users to your database is protected via an encrypted system. You can learn more about insecure websites by clicking the ‘i’ icon or the padlock in a websites address bar
Alternatively, it’s easy to spot a secure website as the web address will read http:// (unsecure) or https:// (secure).
If you are using WordPress as your chosen CMS, then adding a security plugin like Wordfence is a must-do task.
Finally, marrying your Website’s security with the security of a good hosting provider could also be considered. Cheap shared hosting providers place your site at risk on shared servers that hackers actively use to try and enter your website. Upgrading your site to a private server environment can give that added protection and speed your site maybe after.
Content Management System
I think there’s no doubt, that as a specialist WordPress agency, we’re gonna go with WordPress on this one. But there are other options open to you like Shopify, Magento, Opencart, Joomla, Drupal. There are loads of options, but why do we love WordPress? Around 34% of all websites are run on WordPress. This is because it’s the easiest to use and most versatile CMS on the market.
It’s not just for blogging. Installing Woocommerce will allow you to create eCommerce websites to sell your products, and there’s plenty of other adaptations that can be made to your site using WordPress too.
Since its introduction, GDPR has been a grey area online, and it’s not exactly clear how to be fully compliant online or if it’s even necessary. But we feel this will be changed soon to become the norm so it’s best practice to sort this out ASAP. Here are some GDPR ideas that could be implemented on website design (we use these for our clients too)
- Limit the amount of data you’re collecting to the absolute minimum
- Protect your site with the SSL certificate mentioned
These tips keep you and your users protected online, so this is the best practice to use in your website design.
Site Architecture & Navigation
Users don’t want to be searching around for web pages. Your navigation should be easy to navigate, flow well, and provide an effective user experience.
Have you not yet planned your site architecture? Use Slickplan. It’s a tool that helps map out site pages and content – Or you could use an old fashioned pen & paper combo. Your main navigation should join your main pages and be ordered logically. Then within these archives or sectors, you can link to further pages, creating a funnel almost.
Links are what tie your website together so spread internal links throughout your content where appropriate, and this will help users navigate your site and significantly improve your page views per session.
A secondary reason for having good site architecture is to make your website search engine friendly. What we mean by this is helping search engine bots crawl and index your website.
The top errors bots encounter when crawling site architecture:
- 301 redirects
- 404 errors
- No sitemap
- No Robots.txt
Installing the Yoast SEO plugin into your WordPress site will create a robots.txt and generate an XML sitemap for your website, we’ll talk more about Yoast’s features in the next section. Another tool for crawling your website to find site architecture errors is Screaming Frog. This will reveal your status code errors like the 301 redirects and 404s we saw in the top errors list.
Adding buttons to your web pages throughout will help users also navigate, so be sure to add these sporadically throughout.
Search Engine Optimisation.
A good website gets visitors from Google, Bing, Yahoo, and others. If your plan is to implement the suggestions we’ve made so far, then you’ll already have an edge here as some of what we’ve covered are ranking factors.
What are Ranking Factors?
These are aspects of a website that will affect the ranking in a search engine. You can read Google’s document on their webmaster guidelines here.
If you’re looking for a simpler way of optimising for search engines, then install Yoast on your Website. Here you can manage and implement things like Schema, Indexation, SEO analysis of your content, Sitemaps, Robots, and more.
Though Yoast helps you manage some aspects of the on-page and technical SEO, it sure as hell doesn’t cover half of the rest. The sphere of search engine optimisation is huge, but if I had to tell you about 3 things, it would be these:
- Focus on the User’s experience
- Build your Website’s authority and relevance
- Have a technically sound website
Use of Website Tools
Make your website do what you want it to do. Web tools give added functionality to websites, including adding booking systems, games, third party integrations, and lots more. Adding these integrations can increase engagement and help your users achieve what they want on your website.
If your users are dying to get in touch with someone, or you notice they’re consistently going to your contact page, or constantly emailing you questions, then chatbots may be the solution for you.
We’re sure you would’ve come across a chatbot at least once, and maybe even used one yourself. They’re convenient when users are in a rush for information to give the best customer service you can.
Social Media Sharing Buttons
Sharing buttons aren’t anything fancy; they are simple buttons, and they work. Of course, they’re not suitable for every page. You should probably use them on blog posts, or other shareable content only.
But even by adding the social media buttons you’re encouraging that extra engagement you wouldn’t otherwise have. (They can also look super cool if you brand them)
Installing Analytics on a website is a relatively painless process, it’s free, and it gives you lots of useful data about how your website is being used by visitors.
You can head over to the Google Analytics website to follow the setup process. It’s a simple setup procedure, but you will have to add a little bit of code to your Website’s codebase. Adding this will allow Analytics to verify you’re the webmaster for your Site and pull and monitor data.
We’ve covered a range of web design factors that would make great additions to your Website, user friendly design, and web usability.
The components of what makes a good website can be explored further and we’ll update this post in future with more considerations, so check back in a few months for more tips.