Reindeer Riot

Web Design | Graphic Design | Branding | Illustration

Website basics

Creating a plan for your website

Before you start working on creating your website, either by yourself or via a web designer, it helps to have a clear plan.

In this post we will go through the different sections of your website. Get a pen and paper ready!

Navigation

What menu items will you feature in the top nav?

You won’t normally list all your pages in the top navigation of your site, so have a think about the most important pages, the ones that will move your visitor through the content in the way you want.

Main call to action

What do you want the visitor to do first?

The top right section of your website is prime real estate for a call to action button with the most important action they can take. If they did nothing else when landing on your site but click this button, what would you like them to do? Some examples are:

  • Call you
  • Shop latest collection
  • Book an appointment
  • Email you
  • Book a call

Above the fold

Above the fold is a term meaning the area that is seen without scrolling when you first land on a website. It has become tricker to determine exactly what that is now that there are so many different sizes of screens, but the main point is to have your most important message at the top of your website, and a call to action.

There is normally an enticing image here, an easy to understand blurb that explains what you do, and a button to take the visitor to the next step.

What image or illustration will you use here? 

Foolproof tip: Make it something that relates to what you do, includes humans and is positive.

Add your easy to understand blurb

Foolproof tip: Make this a sentence or two max, and finish it with a call to action, preferable in a button so it’s clear for the visitor that this is what the next step is.

Selling your product or service

Your website should be an employee that never takes a day off, always wears a smile and is forever singing your praises.

Foolproof tip: List the How, What and Why of your product or service on the front page.

The How

List the benefits of your product or service. How will you solve the customer’s problem?

The What

List the features. What does your service or product do?

The Why

List the ways you will build trust. Why should they choose you?

Introductory text

Slight negative – concentrate on the problem
Introduce the solution – how will you solve the problem?

Positive image

What will their life be like after they have engaged your services/product? Short blurb.

Testimonials

Who can you ask for a testimonial? Can they do a video? Do you have a picture of them?

Your step by step process

In 3-6 steps, explain how working with you or using your product works.

Blog posts / Articles

Will you feature blog posts on the homepage? Do they need creating?

Footer

What additional info will you feature here?

Social Media

What social media platforms will you feature, if any? In icons, or a feed?

Opt-in

Will you feature an opt in on the front page? Does this need creating?

Other pages

Some common pages are:

  • About page
  • Contact page
  • Services pages
  • Testimonials
  • Blog page
  • Portfolio
  • Products/Shop
  • Legal/Terms
  • Sales page/s

Images and your website

Images. One of the most important features of your website, and one of the trickiest to get right. Below I’ll go through the list you need to tick with each image on your site.

Where do I get great images?

The best thing is to create your own images. Your smartphone can be a great photographer buddy. You can invest in a professional photographer to take some photos of you for the website, and of the things that make up your business, be it service or product based. Or ask a patient friend you feel comfortable with, chances are you need to take a lot of shots to get some great ones.

I get it though. We can’t all afford professionals when we’re starting out. And we’re not all brilliant photographers. We’re not all flatlaying like a boss and able to place that succulent just right on our pristine desks. Sometimes (or most of the time, let’s be honest here) it would be nice to just have some great images to play with.

Fear not! They exist. For free!

Unsplash is a weird new thing where photographers are letting us mere mortals use their divine images, copyright free and for absolutely gratis. You can also buy stock images at Shutterstock for example, or Adobe Stock. Just google stock images and you’ll find a ton of paid options.

Here’s what you don’t do. Find an incredible image on Pinterest/Google and use it on your site. It’s not enough to state somewhere, image source Pinterest. You can end up with a fine and possibly legal action so please make sure you know where your images came from, and that you are allowed to use them.

Images and SEO

Size

Ok, so you’ve got some great images. Now don’t be tempted to just upload these on your website. They need a bit of preparation first. They’re going to need to be re-sized and ideally, the quality should be lowered.

There are a few ways we can do this. If you’re on a Mac, you can use Preview for this. See this article. If you’re on a PC, see this article. You can also use the free version of PicMonkey

The largest computer screen is 1920px (pixels) across. Full screen images don’t need to be any wider than this, and seeing that lots/most people will view your website on a phone or a tablet, I normally make full-screen images 1400px wide. This way you keep the file size down, and the image stretching to fit the screen that extra width on a larger screen is hardly noticable in the image quality.

If you’re using images in a blog post, they generally don’t need to be wider than 800px.

Ideally, we should get the images down to 100KB or lower. This can be tricky without the proper tools, but a good rule of thumb is to keep them under 500KB and never ever over 1MB. Saving as a .jpg rather than a .png will reduce the size further.

A great way to reduce the file size even further is to run the image through Tiny PNG before you upload it to your site.

Naming files

First we need to name the file something that makes sense. We don’t want DSC98734.jpg EVER.

Google reads this information so we need to make sure it knows what it’s looking at. Remember Google doesn’t have eyes. Name the file before you upload it to the site.

Call it a descriptive name of what the image is, if it’s a reindeer walking on a beach at sunset, call it reindeer beach sunset.jpg or reindeer-sunset-beach.jpg, the keyword here being reindeer.

Place the keyword first but make sure it relates to the text in the article or page. Have you ever clicked on the images tab in Google search when you’re searching for something? That’s where your images could be showing up, driving traffic to your site.

I recommend you save them into folders on your computer so they’re easy to find. Have a folder called My Blog/Business and create new folders for each section. Front page images, Blog posts, then folders in this for your categories etc. If you start out organised you will save yourself a lot of time down the track.

Alt text and Captions

The alt text describes the image when it can’t be displayed to the visitor.

Wikipedia says: “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.”

Always add alt texts to your images. The alt text should include the keyword for that page and it should describe the image.

If you’re on WordPress, using the Yoast SEO plugin will very niftily tell you if you’ve missed doing this.

Captions are great to add a bit of extra information. Lots of people skim read articles and the images stand out to our brains. The captions are often the main thing read when skimming. Now, you don’t have to add captions to all images in your blog posts or articles, just when it makes sense to the reader.

A general point here: Always have the reader in mind. It’s easy to get lost in technical terms and there are more and more how-to guides to get more people to your site with tricks and magic. By all means, learn all you can! But in the end, it’s about you and your content connecting with another human being.

Sharing on social media

If you want to change the image that’s shown when you share on Facebook or Twitter you can do so in the Yoast settings, just click the icon underneath the traffic light icon to the left of the Yoast box. If you have trouble with the wrong image shared go to the Facebook debugger here.

Summary:

  • Use images that are a good match for what your blog post or article is about
  • Name your image file with a descriptive name and include the keyword in at least one image in the post
  • Make sure the dimensions of the image (pixel size) is as small as it can be and still fills the space/looks good
  • Reduce the file size for faster loading with tinypng.com
  • Add captions if suitable, for skim reading of the post
  • Use an image alt text on all images

How to utilise step by step guides on your website

This is the 5th and final part of a series to help you clarify your website messaging

In part 4 we got clear on how to be a mentor to your customers. Part 5 looks into creating a step by step guide to make it super easy for your customer to commit.

To make it easier for our Avatar to make the final commitment to work with us or buy our product, we’re going to give them a step by step plan.

It’s not easy for most people to click that Buy now button unless they know clearly what’s going to happen when they do.

By adding a step by step plan outlining very clearly and simply what the process is we will alleviate any final fears the Avatar has about clicking that button.

We want to keep the steps to 3 or 4, although you could add up to 6 steps. Any more than that will just be confusing so keep it short.

An example:

  1. Book your appointment
  2. Meet with one of our staff
  3. We create a plan together for your success

This plan can be tailored to many different service based businesses.

A product based business might have:

  1. Identify your skin tone
  2. Decide on our A, B or C makeup palette
  3. Order it online and get it delivered to your door in less than 3 days

Now write your own step by step guide to working with you. You can use one for the homepage to broadly explain what you do, and one for each service.

The mentor role in messaging

This is part 4 in a series to help you clarify your website messaging

In part 3 we talked about how to solve your customer’s problem in relation to your business. In part 4 we are delving into how to be a mentor to your customer.

As a business, you want to be a mentor; a helper; a guide to your customer.

Think about your customer as the main character, the hero, of a story. Their story. To your avatar, their life is everything. They have dreams and hopes and a fire burning inside, they are special, have untapped potential and are the most important part of their own story.

You {your business}, on the other hand, are not in that place. You’ve moved past that internal struggle to a place of wisdom, you’ve made the mistakes and travelled that journey ahead of the avatar. You can tell them about it and guide them on their way through this challenging time, on their way to fulfilling their destiny.

It might sound bizarre to be thinking this way when all you want to do is sell underpants/pens/pizza, but if we can get in the headspace of thinking about our customers as struggling heroes that need our help and guidance, the way we present ourselves/our business to our customers changes to a whole new dynamic.

Instead of feeling desperate to sell, we’re coming from a place of service.

Always focus on the success of your customer in your website copy and marketing, instead of the success of your business.

Most people, unless they are your mum 😄couldn’t care less about the yearly revenue in your business. They are not interested in helping your business grow, they are interested in getting help on their own personal journey.

Nobody goes out there looking for a cool company they can pour their hard earned money into the pockets of, they go looking for a mentor to help them with a problem.

If your business is the best at communicating this in your space, chances are they will choose you.

The mentor vs the star

The star sounds like a great role to play. Everybody wants to be the hero of the story. But if we dig a little deeper, we see that the hero is never the one who has it all together. He/she is always the one who is torn and troubled and goes through all the challenges, the one who’s fighting and unsure if he/she can really do this??

The mentor is the wise one. The one who’s been there, done that. The one with the answers and the right questions to ask. The one with authority.

Which one do you want your business to be?

Empathy and Authority

The more empathy we can show (I understand your problem and how it makes you feel) and authority (I know how to deal with your problem and I’ve done this successfully before), the more trust and likability our businesses will grow.

Empathy:

Your business needs to use empathy to show you understand the way your Avatar is feeling about the problems they face. That’s why you’re offering the products and services you do.

Tell the Avatar you care.
We understand you and want to help you find a solution

Authority:

You want to present your authority in a way that shows you know what you’re doing, but doesn’t bring too much attention to yourself/your business. Get the balance wrong and you will be positioning your business as the star instead of your customer, and ultimately lose their trust.

On your website, you can demonstrate authority by:

  • Listing testimonials from happy customers or people you’ve helped in the past
  • Displaying logos of well know companies you’ve worked with, or been featured in
  • Awards you’ve won
  • Any statistics you have for your products and services, percentages of growth after working with you, numbers of people you’ve worked with, number of people who’ve bought your product or uses your platform etc.

Do this in an understated way, for example:

“1.570 happy customers trust our diaries to plan their daily lives”

No need to brag or use fifteen exclamation marks. Subtle but clear and strong wins the race here.

Write down the answers to the questions below, and keep in mind:

Your business is the mentor
Your customer is the star

EMPATHY

Look at your Avatar’s internal problem and complete the sentences below suitable for your business:

  • Like you, we are frustrated by:
  • Nobody should have to experience:
  • We understand how it feels to:
  • Life is too short to:
  • When you X life can feel:
  • X should be:
  • You deserve:

You can then turn these into marketing messages by using the statements in different ways depending on what suits your business.

  • Are you experiencing..?
  • Are you sick of..?
  • Are you frustrated by..?
  • We are too
  • We understand
  • We offer
  • We have a solution…

Write down some ideas for question and answer statements.

Here is an example of a header text and introductory text for a carpenter website I built:

Header text above the fold:
We bring the beauty of the natural world to your backyard
Quality carpentry. Natural materials. Service you can trust.

Call to action button:
CALL US TODAY

Introductory text:
Life’s too short to not enjoy your surroundings. Your home should be your sanctuary, where you feel at peace and you can relax with your friends and family. You deserve beautiful things and quality workmanship. Carpenters who live by their word and that you can trust. We’d love to show you what’s possible.

Call to action button:
CALL US TODAY

Now practice writing your own.

  • Header text above the fold:
  • Introductory text:
  • Call to action

AUTHORITY

How can you show authority on your website? Brainstorm and write down answers to the following:

  • Who can you ask for testimonials, or do you have some you can use?
  • Have you won any awards?
  • What statistics can you show?
  • Do you have any company logos you can list?

Customer Problem and how to solve it

This is part 3 in a series to help you clarify your website messaging.

In part 2 we worked out what it is deep down that drives your customer’s desire. In part 3 we will look at the problem and how to solve it.

When you market to your Avatar, keep this quote in mind:

“Sell them what they want
Give them what they need”

Humans work in mysterious ways. Often we don’t know why we’re drawn to certain things and why we buy what we buy.

Think about the problem your Avatar faces as the villain in the story. We want to make it the big bad wolf that we’re fighting with our products and services.

Some examples of problems/villains:

Headache – Panadol saves the day
Taxis are too expensive, slow and inconvenient – Uber to the rescue
Dieting is hard/Overweight – {Brand here} diet shakes makes it simple
Bacteria in the kitchen – Antibac wipes sweep in

You can probably see the ads for these in your mind, the problems being painted as villains and the solution that comes in for the rescue and makes everything ok. There’s a fine line here where you want to remember that it’s the customer/Avatar who is the hero, not your product/service, and your product or service helps on the way to success.

There are three levels to the problems you solve.

  1. External – the obvious problem your business solves
  2. Internal – the frustrations arising from the external problem
  3. Philosophical – why is it unfair to experience this?

To give you an example, this is how it looks for my business:

Bad Guy: Crappy websites
External problem: I want a nice looking website that works
Internal frustration: I want to feel like I have it together and am in charge of my website
Philosophical: I shouldn’t have to be a web developer or pay a fortune to have a nice website

Points to remember:

  • The problem is the enemy – the villain in the story.
  • The external problem is the obvious problem your business solves.
  • The internal problem is about the frustrations your Avatar is experiencing because of the external problem.
  • The philosophical problem is about ought and shouldn’t, good vs evil.

Write down the answers to the following questions. Determine a single focus for each answer.

  1. What is the enemy your business is against?
  2. What external problem is the enemy causing your Avatar?
  3. How is that problem making your Avatar feel / How do they want to feel?
  4. Why is it not fair for your Avatar to suffer this problem?

Figuring out Customer Desire

This is part 2 in a series to help you clarify your website messaging

In part 1 we figured out who your customer Avatar is. Part 2 is about what your Avatar wants.

You may offer many products or services but first of all we want to nut out what the main desire of your Avatar is, that your business provides a solution to.

We want this to be:

  • Something simple and relevant
  • Have one single focus
  • Be relevant to human survival

Write down the answers to the following questions:

  1.  List all the things that your Avatar wants.
  2. What is the overarching desire? Simplify all the Avatars wants down to one main desire.
  3.  Make sure it fits within at least one main area of human survival – listed below:
  • Making money / Increasing revenue
  • Saving money
  • Saving time
  • Building community
  • Status
  • Giving back
  • Meaning