In this post, I’m going to focus on some killer pro website tips to help you take your website from amateurish to amazing.
DOES YOUR WEBSITE HAVE A CLEAR NARRATIVE?
You know what it’s like. You’re casually browsing the internet, looking for information or inspiration and then boom! You stumble into a website that CAPTIVATES you. You read the home page and you can’t wait to dive in. Three, four, five link clicks later and you’re hooked.
You’re no longer simply information-gathering. You’re having an EXPERIENCE that speaks to you directly and makes you want to shout, “Hell yeah!” when you are invited to deepen the relationship.
Websites that do this well have embraced the golden rule of creating a compelling home page. They speak directly to their ideal client and they have crafted a narrative that guides their visitors to take action.
Take a moment to think about your own home page.
Do you have a clear and compelling positioning statement which tells people what you do, who it’s for and how you do it differently?
“If you’re a laid-back couple looking for unposed, romantic wedding photography and you want to remember every moment of your day forever – even the ones you might miss, then I can’t wait to get to know you better.”
Followed by a simple call to action, this client-first approach is way more effective than a keyword stuffed intro, written entirely for SEO and not for conversion.
I’m not saying don’t include SEO-friendly text. That’s important too, but it definitely doesn’t need to be the first thing your visitors read.
Focus on them, take time to set the scene and steer them gently but purposefully to your chosen call to action. In this way, you can control how they experience your site and begin to build a relationship with them, before they even contact you. And don’t forget a simple call-to-action at the end of every section.
IT’S ALL ABOUT THE SPACE, MAN.
A lot of people get nervous when they see too much white space on a website page. It’s so tempting to take out that padding, or ‘stick a swirl’ in that big empty corner.
Yes, someone did once ask me to do that. For designers, it’s right up there with ‘Can you make my logo pop?’
But these days, people are scrolling ninjas and they scroll fast. That negative space is there for a reason.
But apart from improving the scroll experience, white or negative space allows you to give each idea or section room to breathe, meaning that your content is more likely to be read and understood by your visitor, rather than skimmed.
Did you know that 70% of visitors always scan a new page and only 16% actually read it?
Not overloading your reader with too many ideas in one page section is vital.
If you’ve bought a theme and you’re trying to squeeze in more content that the demo layout allows, then don’t be tempted to just cram it all in there.
Long, dense columns of text are intimidating to read and you’ll lose your readers.
Hint: if you have a high bounce rate, large blocks of text might be a key factor.
It’s time to use design tricks to create pattern interrupt.
Limit yourself to one idea per section and vary background colours, content widths and insert images to break up those dense, unreadable blocks of text and stop the skim.
Finally, on an aesthetic level, allow yourself to enjoy the experience of negative space. Helping your readers to savour your content and enjoy the scroll, gives the perception of intentional luxury rather than busy, accidental design.
WHAT THE FONT?
I’ve got way more fonts than pairs of shoes, so believe me when I say it hurts to tell you that most people are using too many fonts, type sizes and styles in their website.
Don’t take it personally, nearly everyone does it. The good news is that it’s nearly always accidental.
You start by adding ‘your fonts’. (I mean, hopefully you’ve got a brand guide, but that’s a story for another time).
But your theme has also loaded its own default fonts, maybe even different fonts for all of the heading tags, so you might have let a few settings slip through the net.
You start to add your content. Maybe you tweak a few heading sizes.
Maybe you sometimes use uppercase and sometimes lowercase.
Maybe you’ve got a cute script font and you love it so much that you can’t help adding it in here and there and over there too…
By the time you’ve got to the bottom of your home page, things are starting to look a bit messy. But you persevere with the other pages.
Same process, same uneasy feeling and towards the end, you run out of steam.
“Whatever, that’ll do”, you say, as you add a couple of lines of text to your contact page and slap an image on it. At this point you can’t be bothered to even replace the default fonts.
Here’s how to avoid typogra-fail.
- Check all of your theme settings areas carefully to make sure you don’t miss any font settings.
- Set standard sizes for headings and subheadings for desktop, table and mobile, rather than setting them as you go.
- 2-3 fonts maximum is all you should need. Be strong!
- Vary your font weights, cases and letter spacing before adding extra fonts.
- Use decorative and script fonts responsibly. Less is definitely more.
UNLOCK DESIGN CONSISTENCY WITH A PIXEL PERFECT HOME PAGE
We’re all used to starting every build with the home page and naturally, that’s where we focus our energy, because it’s exciting. This is the first thing our visitors will see, so we want to get it pixel perfect.
And pixel-perfect is important because your home page should be the foundation of every other page in your website. It’s where you set out your brand roadmap and implement the consistent attention-to-detail you’re going to need to bring to every single page to give your website the professional, polished feel you’ve been craving.
All of the brand elements you are planning to use in the theme – colours, fonts and graphic elements need to be present in some form on the home page. There should be no design ‘surprises’ later as you go deeper into the site.
Now is the time to make decisions about font sizes, layout styles and calls to action and test them hard at every break point.
- No element should be overlooked. Style your links, buttons, borders and backgrounds now and set up global styles so that you can easily change these elements throughout your site if you need to, at a later stage. This level of design detail is what will give your site a polished, professional feel.
- Once you’re happy that your home page is rock solid on every device, you can take sections from the home page and quickly repurpose and expand them to create complete page layouts, safe in the knowledge that your design choices and responsive behaviours won’t need re-editing.
- There is nothing worse than having to go back through every single page, editing the same item again and again, because you didn’t take enough time with the home page in the first place. Been there, done it, learned the hard way!
- Finally, don’t run out of steam when you get to the ‘boring’ pages, like FAQs, testimonials and even your contact page. It breaks my heart to see unloved contact pages with no images and ugly-looking unstyled contact forms. And yet…this is the lasting impression you’ll leave your visitors with.
If you’ve laid your groundwork properly on your home page, rolling out your inner pages should be a breeze. Every page matters because (cheesy quote alert), ‘You don’t get a second chance to make a first impression’.
CALL ME OUT, BABY
Newsflash. You get to choose how people experience your website. If you craft a thoughtful, guided experience, people will generally follow the signposts you give them.
I’m talking about creating irresistible calls-to-action that aren’t remotely salesy. Calls-to-action don’t have to be obvious or shout ‘Buy Now!’
They can be subtle prompts to help your visitors consume your content in the order that is most likely to lead to a sale or enquiry and who wouldn’t want that?
You’ve probably heard that you should have a call to action on every page. Absolutely true.
But let’s talk about your home page, because home pages are longer and people are scrollin’ scrollin’ scrollin’.
Long home pages, or longer landing pages and sales pages might need more than one call to action.
Top tip: before you even think about designing your website, sit down with a pen and piece of paper and make a chart of your ideal customer flow and beside each step, work out what the call to action and desired result should be.
Here are the different call-to-action tools you can have up your sleeve.
The Dig Deeper CTA
An invitation to dive deeper into the subject they are reading about. Perfect for placing at the end of home page sections leading to areas like your About Me page or your Portfolio.
The This or That CTA
Prompts a choice between two topics or areas.
Eg. Web design or Brand Design
The Take Action CTA
The fast-action choice that takes them straight to a purchase or enquiry. Make sure your wording does what it says on the tin and doesn’t give them extra clicks.
If it says ‘Book Now’, don’t make them fill out a contact form. If it says ‘Call me’, make sure it prompts them to dial your number.
Go easy with this one on your home page BTW. Unless your home page is a sales page. In that case, go nuts.
The Set Them Free CTA
Finally, when you’ve taken them as far as you need to, it’s time to set them free to explore. CTA links at this stage would typically be to your blog or to a jumping off point, such as a collection of blog posts that showcase your expertise.
ARE YOU READY TO LEVEL UP?
There are no shortcuts to adding that extra layer of polish and style to a website that’s slightly missing the mark. Taking the time to be thorough and pay attention to the small details is time consuming (and a bit boring to be honest), but it will repay you handsomely by creating an immersive experience that your website visitors will love.
If you’d like to join an inspiring online community, you can find out more about Melissa’s online membership, The Marketing Fix, at www.themarketingfix.co.