That depends on what your website is meant to do. What’s your purpose – your ‘why’? There are a few different kinds of site, which perform very different functions:
Designed to impress, rather than to inform, these sites are image- and graphics-heavy. They may load slowly, and typically have interesting interactive elements and unintuitive scrolling behaviour.
These sites are like a peacock’s tail – designed to show off your values and/or the premium quality of your brand, product or services. They aren’t focused on sales and may not have an obvious path to payment. These are sometimes created as ‘microsites’ or pages within a hub website, e.g. MacBook Air, Cartier, HitParade.
+ Brand recall, brand equity
– Conversion, SEO, navigation
Designed around conversion, these sites are essentially an online shop, with purchase pages for each of your items. They aren’t trying to promote the brand itself, but rather your individual products and services.
Customers land straight into a storefront, rather than learning about your company. This design gets users through the sales funnel very quickly, but many may not even notice your brand. That means you’ll have more trouble establishing a reputation – which could be a good thing if you specialise in cheap, low quality items! Many online and physical retailers take this strategy with their websites, e.g. Suregreen, Protyre, The Range.
+ Conversion, navigation
– Brand recall, brand equity
Like a showcase, a hub website gives customers access to information about your brand, but it also includes a store, allowing you to sell directly online. It’s really the best of both worlds.
This kind of site is optimised for search, to push you above your competitors on Google. On this site, you’ll offer more than just brand and product information – with guides and news, you can target customers earlier in their buying journey (‘higher up the funnel’). Hubs contain much more content than stores or showcases, which means good menu design is important. Purplex has built many hub websites, like Mobile Eco Tuning, Clearvision and Towens.
+ SEO
– Navigation
There are some pages that are a no-brainer on a business website, regardless of the size of your business. Let’s walk through these…
Every site needs a homepage – that’s the page that you land on if there’s nothing after the ‘/’ in your URL. Not everyone will land on this page when they first visit your site, especially if your other pages rank high in search engines. In WordPress, you can set this homepage manually under Settings/Reading.
Sometimes this feels like a bit of an old skool page, but many people want to know more about your business before they make a purchase. This is the place to write about your history and values.
Remember the adage ‘show, don’t tell’ – customers will be more impressed by a story about your work supporting a charity than by a ‘commitment’ to be charitable. Like any rule, there are some exceptions, like official accreditations – B Corp, 1% for the Planet etc.
Whether or not you have individual product and service pages, it’s also worth creating a Contact Us page. If you sell things, this provides users with a way of contacting customer support. Whether you sell things or not, it lets potential clients, collaborators and the media reach out when they have a question for you. A contact form is the best way to style this page, as any email address published online will be spammed to death within a few years.
Sure, blogs aren’t the thriving medium they once were, but nowadays they’re written not so much to attract an avid audience of fans, but to feed the algorithm. To a search engine, a blog is a pot of keywords, and recent content tends to perform better in search results. That makes blogs ideal for SEO – you can create lots of content related to the keywords that your customers are searching for, and you’ll appear higher in search results.
Speaking of search – it’s good practice to include a search box on your own website, and if you do that, you’ll end up with a search results page – on WordPress, this is called an ‘archive’. You can often customise this archive page to make it look more professional and more user-friendly.
So you’ve set up a homepage, but you want to make sure it converts effectively? There are a numbers of things to remember, that will help improve user experience (UX) on this page:
A menu which looks great on a massive desktop computer screen will be unusable on a phone. But that’s OK, because some genius invented the hamburger menu. If you’ve seen an icon that looks like this –> ☰ then you’ve seen a hamburger menu. Click on it and the nested menu items will drop out, allowing you to navigate through the site. It’s still worth optimising the nested list for mobile – keeping it to the minimum number of items, to make sure this menu isn’t taller than a phone screen.
Why should users trust your website? Trust is one of the biggest factors when it comes to purchasing decisions, so it’s crucial to get trust signals out in front of users as soon as they land on the site. What is a trust signal, though? They come in all flavours, from your average Google Business review score to quotes from satisfied customers (‘social proof’); from testimonial videos to accreditations, awards and the year you were established (if it’s long enough ago!). All these signals will indicate to a potential customer that you can be trusted to deliver on your promises.
A CTA button or ‘call to action’ is something you can click or tap to jump further down the user journey. If you’re on the homepage, maybe it’ll take you to the contact page, or an individual product page. If you’re on a product page, it’ll add the product to your shopping basket. And so on. The purpose of many pages is to get a user to click on the call to action. Yes – even this page! So it’s important to scatter CTAs across a page – just don’t use too many, and keep the style consistent and highly visible. You don’t want the design to start looking like a mess as this will be a negative trust signal – it’ll make you look desperate for conversions!
No, we don’t like them either – this panel of buttons often gets relegated to the footer. But it’s an useful part of each page. This row allows a user to share the content directly to a social network. That’s the theory. In reality, only a tiny fraction of people will actually click on these buttons, but these clicks don’t really cost you anything and they could generate a few extra sales.
It’s not essential, but if you have a bigger website, it’s certainly a good idea to add a search box to your homepage. Even the presence of a search box can be a trust signal, as it shows that this is a large, premium website with lots of content. The best search boxes use autocomplete and filters, providing on-page results. But even a bare bones search box is better than nothing!
If you’re running any special offers, or have launched a PR campaign, the homepage is a great place to raise awareness. It’s most likely the highest traffic page on your website, but most people who land on the page won’t scroll below the top banner – they’ll dive straight into the menus. So this banner acts like a town square – the perfect place to promote news, campaigns and offers.
People aren’t all designed the same way, so when we design for them, we should take this into account. It’s just common sense to make sure that everyone who visits your website can actually access the content. Anything less, and you’ll be missing out on traffic and sales. So, what do you need to consider?
There are actually three kinds of accessibility and they’re pretty simple to understand:
Physical ability – e.g. sightedness – what people usually think of. Can the content be perceived/interacted with by people with different sensory or physical impairments?
Mental ability – e.g. dyslexia – is the content formatted and written in a way that’s clear and easy to understand?
Situational ability – e.g. noisy rooms – will this content work for all users in all places? If not, provide alternate formats – e.g. subtitles for video or transcripts alongside podcasts.
When people with visual impairments are using a website, they may need the help of a screen reader. Instead of looking at a page, the information is read out loud. That means any pictures will be ‘read out’ in the form of their alt text. Alt text is metadata which is stored for every picture on a page – filling it in with relevant, useful information is not just good for people with visual impairments, but also for SEO.
Some people see colours differently, so if you stick green text on a red background, not only would you be guilty of committing a crime against good taste, but also your content would be impossible to read by someone with protanopia. There are a number of different forms of colour blindness, and you can easily test your site design for free at toptal.com.
Perhaps you’ve experienced that feeling of nausea when traveling in a car or on a boat, when the world outside is going a different direction to the thing you’re staring at? Welcome to the world of motion sensitivity – for some people, this is a daily reality, as they take medications or have conditions which make motion sickness a constant issue. As web designers, we can do something about this – by minimising animation to places where it is actually necessary. And as for sideways-scrolling pages, well – they’re not friendly to most users, let alone people with motion sensitivity!
Tiny font isn’t very user-friendly, and, though font size will be rendered differently on different devices, the general rule of thumb is that 16px is as small as you should go for body text.
If users aren’t using their fingers or a mouse to navigate a website, they may be using the tab key and space bar. Perhaps their mouse is broken, or perhaps they’re using accessibility kit. Either way, it’s worth considering focus states – that’s the colour a button goes when it is tabbed onto (selected), before being clicked. It will usually look like a deep blue ring around the outside – if your page background is also deep blue, that could pose a problem for usability.
You want your website visitors to convert into buyers, service users, donaters etc. But how do you get them into your sales funnel? Once they’ve landed on a page on your website, how do you entice them to click on a call to action?
A call to action is any button that moves someone further along the sales funnel – pushing them on to the next step towards becoming a paying customer. For example, a CTA button on the homepage might read ‘Get more leads!’, but clicking on it might land you on a page with another CTA – this one could read ‘Download guide’. The CTA is the purpose of the page – everything else on the page is subtly designed to entice your user to click on that magical CTA button.
There is no universal design for an effective CTA. What works on one website won’t work on another. And what works in one year may not work as effectively a year or two later. Over time, performance is likely to decrease as people begin to mentally filter out the design of a new button. That said, there are still general rules which can improve conversion rates.
Anything that moves is more likely to get attention, so an animated button could improve your conversion rate. It’s certainly worth testing. But there are some caveats here – animations shouldn’t move the button away from the mouse. If they’re highly distracting, they may act as a negative trust signal, reducing the perceived quality of the website. And animation on mobile isn’t as easy to pull off as on desktop.
With any good website, you’ll have a set colour palette to work from. This will make sure that the design looks consistently good and content is easy to read. It may be worth reserving one of the colours from your palette for buttons. This will make CTA buttons that extra bit more salient (noticeable) in contrast to the other content on the page. You’ll may have seen a lot of information from ‘colour scientists’ about the best colour for CTA buttons. But the fact is that the best colour will vary from site to site, depending on the surrounding colour scheme. The only way to tell if a button works is to test it.
You might be surprised by how many people are visiting your site on their phone or tablet. But then again, perhaps you aren’t. It’s worth looking into the data – you should be able to find the stats by asking Google Analytics for ‘users by device type’. If you have any users at all on mobile, it’s important to make sure that they’re experiencing the site in a way that aligns with your business goals…
Correct spacing for call to action buttons on desktop may feel cluttered or too spaced out on mobile. The highest converting websites will always have a visible CTA on the screen – probably in the header menu. If your CTA buttons have really long text on them, this will wrap (folding onto multiple lines) or, worse, extend outside the edge of the button on smaller mobile screens. So try to keep this text short and snappy!
We’ve already described how Responsive Menus are an essential element of a modern homepage. These tend to collapse down to a hamburger icon on mobile and tablet screens. Clicking on the ☰ icon expands it out to show more items. If instead you try and squeeze text links into a mobile header, they’ll just wrap or overlap, creating a jumbled, multi-line mess that is impossible to use on smaller screens.
When you navigating the site on a phone, it’s a real pain to jump back up to the top of the page. You can fix this particular pain point by inserting a sticky header – that’s a header block, with a menu and primary CTA, which follows you down the page. It ‘locks on’ to the top of the screen, allowing a user to quickly and easily jump around the site. You could even add anchor links to this header menu, which would let a user jump around a particularly long page!
If you’re creating rich SEO content for mobile, anchor links are your friend. With a 3000+ word article like this one, you’ll find that users struggle to navigate through the text to find useful content on mobile. Placing a prominent contents menu or text links at the top of the page and connecting it to ‘anchor links’ within the body of the page allows users to jump straight to the relevant section.
An anchor link can jump you to a specific heading, block or piece of code on the page – you can insert an ‘anchor’ to link to, or link directly to an existing heading. This will land you at a different URL, on the same page – the URL will end /your-page/#your-anchor-link
WYSIWG means ‘what you see is what you get’ – it describes the kind of website editor where you can drag and drop text and pictures around on a webpage. A website editor is usually called a ‘CMS’ – a content management system. It holds the text, images, video, code, pages and structure of your website, and lets you change any of these things.
But there are two different camps for how a CMS should work – those using WYSIWYG editors get a lot of control over how their pages look. They can change the appearance of most – perhaps all – of the page by physically moving things around and interacting with it. This is very handy for marketing experts and people who have time to edit their sites. It’s particularly great for those with a marketing agency as it allows for easy landing page creation.
An alternative to WYSIWYG is sometimes called YAFIYGI – ‘you asked for it, you got it’. This describes a different kind of CMS where you can’t see what the page looks like until after you’ve made changes to it. You can edit text and image fields in the back end, then click publish to check what the site looks like. But the back end is usually a collection of nondescript text boxes and image upload fields. You may be able to shift these fields up and down on the page.
At first, this seems like a worse option – it’s like driving a car by texting the instructions to the driver, then watching the vehicle through binoculars. But this approach makes for a much faster site, with more consistent styling and more efficient code. It’s harder for a user to break these pages – in fact, it’s more like there’s a professional driver behind the wheel of the car, interpreting your instructions in a way that matches the driving conditions.
“Dekko has grown from £6m to £20+ over the last 8 years and we simply couldn’t have achieved it without Purplex. Our brand is well recognised and the exposure we get through the press, social media and online consistently puts us in front of good quality prospects.”
Kurt Greatrex - Sales Director, Dekko Window Systems
“I use Purplex Marketing for my company’s PR, digital and creative requirements and have always found them to be diligent, proactive and efficient. They are open to learning in-depth about our products, have a good understanding of our industry and take on board feedback which makes it easy to work with them.”
Charlotte Hawkes - Head of Marketing, Edgetech
“Purplex have really shown their worth since we started working with them and they did a fantastic job on our website. They have helped us increase our brand exposure and delivered consistent results. When it comes to building products, Purplex know the industry and what works, and re-signing back up was an easy decision and one we believe will help us keep pushing forward”
Warren Muschialli - Managing Director, Newton Waterproofing
