Headings help users and search engines to read and understand text, so it’s important to get it right. I will use appropriate Headings – H1, H2, H3 – in this blog to demonstrate.
Why use different Headings? (This is H2)
Headings show structure (this is H3 as it’s a sub-heading)
Headings are signposts that guide readers through an article. Therefore, they should indicate what a section or a paragraph is about.
They are NOT just a way to add different size and colours of font, which we have heard said by more than one person!
Headings improve accessibility (H3)
By reading or listening to the headings in an article, visually impaired people can decide whether or not to read the full website page or blog. Here’s a great article about why your website needs to be accessible for all readers.
Do Headings get my website ranked mire highly by search engines? (H3)
Headings aren’t a specific factor in how search engines rank your website.
However, if you use Headings correctly and help the visitor find the content that is helpful, Google will value your content more highly, which is great for your website.
How to choose the right Heading
I’m using another H2 above because I’m starting a new section about exactly how to choose the right heading.
Use H1 only for Page or Post Title (H3 – another sub-heading)
The heading I have used is H3 because it is within the section all about choosing the right heading, but talking specifically about H1.
Use H2 for Sections
Think of H2 like Chapter Titles – use it for the main section headings in your page or post.
Use H3 is for Sub Sections
Now I am actually using an H3 to indicate that I am talking about where to use an H3!
Think carefully before using H4
Only use if you need to break up the content beneath an H3 heading into sub sub sections. (We don’t use any on our website.)
Don’t worry about H5 and H6
Unless you have very in-depth product specification, you won’t need H5 or H6 – don’t just use them because they are a different font or colour.
If you’re ready to start a website for your own business, click the button below to book a Quick Chat with Fred to chat through what package would suit you best.
You want your website to look fabulous and work beautifully too, right? That’s why it’s really important to use the right size website images for the right purpose.
For screens, the measurement that matters is pixels, and measures the height and width of your image.
For website images, think in terms of width.
The maximum width you need for a full-screen image – such as a Hero Image or background image – is 2500px.
The width you need for an image within a page is 500-1000px.
Think about where you will use the photo before re-sizing. A small image will be pixilated if it displays larger than the actual size, so don’t over-reduce your website image.
A large image can be displayed smaller, but your page will load more slowly if it is unnecessarily large – a website no-no!
Using the right file type for your website image is essential. The file type might be different for printed material.
JPEGs are best for website photos because:
- JPEGs support 16 million colours;
- JPEGs can be compressed in a way that means your file size can be smaller without losing quality – important to make sure your website doesn’t load slowly
JPEGs aren’t good for text on images because the compression method means that the text edges can be blurry.
PNGs are best for website graphics because:
- PNGs use a limited palette of colours with great vibrant colour depth;
- The limited colour palette means that file sizes can be tiny – great for your website;
- PNGs can also be transparent, which is ideal for logos and favicons.
Although you can save photos as PNGs, the file size would be enormous, so unsuitable for websites.
Large images are the biggest reason that websites load slowly.
And, given that people leave a website if it takes more than a few seconds to load, you need to make sure that all the website images you use are as compact as possible.
What is file size?
File size is measured in bytes – KB or MB (1MB=1000KB).
The maximum file size for a website should be 1MB. Your media library may allow you to load larger files, but your images won’t look any better, and your website will be slower.
If you take photos on your phone, a photo can be 5MB or more. If you use stock images e.g. Unsplash, photos can be as bit as 8MB.
Therefore, you need to reduce the file size by reducing the pixels and compressing the image.
3 great apps to compress website images
Optimisation = compression.
ImageOptim (for Macs) – drag in image(s), and optimization happens automatically.
FileOptimizer (PC) – drag in image(s), and click “optimize”.
Photoshop: open image, then click “File > Save for Web”.
Our support is second to none, and, if you buy one of our website packages, we will make sure you know exactly how to make your website look and work beautifully.
What is plain English?
Plain English is writing that people can understand the first time they read it.
The Plain English Campaign started in 1979 to challenge the gobbledygook and jargon of government and public bodies, but the good sense principles apply to your website too:
- no padding;
- no waffle;
- no unintended repetition.
The advantages for your website?
- it’s easier to read, so it’s better for your visitor;
- faster to write, so it’s better for you;
- you get your message across in a friendlier way, which is better for you and your visitors.
Improve your website content in with our 5 top tips.
1 Use we/you
Using first person (I/we) and second person (you) makes your writing more conversational and easier to understand.
The backing up of the websites is undertaken on a 24-hourly cycle.
We back-up your website every day.
2 Avoid Jargon
Jargon is a language that is only understood by a particular group of people. It can be a useful form of shorthand, but try to avoid using specialist jargon on the general public.
If you do use a specialist term, explain it the first time you use it.
Pre-notification correspondence regarding your bank charges
Letter about your bank charges
3 Avoid over formal language
If you wouldn’t use a word in normal conversation, think twice about writing it.
Going forward, we’re visiting the cafe to choose an appropriate beverage.
We’re off for a flat white.
4 Use commands
It’s the most direct and clearest way to give instructions – “you should do this” is less helpful than “do this”.
Alt tags should be added to photographs on the website.
Add alt tags to photos on your website.
5 Use short words
Long words will not impress your customers or help your writing style, so swap them for shorter words.
We will endeavour to provide additional particulars on request.
If you need any extra details, just ask.
Guest blog by Kate Hollingsworth photography in Sutton Coldfield
First impressions last
Visuals play a crucial role in how you portray your personal brand to your customers and clients, and how potential clients see you.
Customers shop with their eyes and will often make decisions based on their first impression of someone.
Personal branding involves influencing the way potential customers see you and view your products or services, which is why personal branding photography can have such a massive impact.
Benefits from taking professional personal branding photos
Professional photos are an asset and will serve you for years to come. A bank of on brand, professional, memorable and bespoke images will not only save you time, it will attract more of the right clients and make you more money into your business.
Here are nine ways that you would benefit from taking professional personal branding photos.
1 Send them with your press releases
If you usually send out press releases or are planning to in the coming year, professional photos will help your submission stand out.
2 Use them throughout your website
Businesses that feature professional photos of real people inspire more trust than those that use stock photos.
- Real life bespoke photographs, that are personal to you and your brand, also help tell your business story more authentically.
- Video clips and promotional show reels that your photographer has provided you with will provide real stand out on your site.
3 Your social media campaigns
For every post or social media communication, you can choose the right image, that will heighten the engagement that post gets. You can also use the graphics, video clips and promotional show reels that your photographer has provided to increase levels of engagement.
4 Place them in your email campaigns
Take your email blasts to the next level by including your brand photographs in them.
5 Include them on your landing pages
If you rely on landing pages to help you generate sales, adding personal branding photography to them can boost your results.
(Our Ristretto is a dedicated Landing Page website, which works brilliantly with a personal branding photo.)
6 Create a killer bio for events
Speaking at an upcoming event? Make sure that you have a professional headshot and branding photos on hand to send along with your bio.
7 Make your email signature memorable
Not everybody remembers a name but almost everyone can recall a face. Adding a photograph to your email signature can make it more memorable.
8 Add them to your printed marketing materials
If you print your marketing materials on a regular basis, a photograph can be used to make your brochures and business cards stand out.
9 Keep control of your brand and save time
This is your personal brand and you should have the final say in whom takes your photos.
- When you’re approached by a publisher, you want to have a professional photograph that you approve on hand.
- When you rely on publications to take your photos, you need to rely on their photographers, many of which are students.
- You save time in the sense that you don’t need to take additional time out of your day for the photos because you’ll already have them at your disposal.
Remember to refresh your photos often so that your personal brand is also reflected accurately.
We love to share our knowledge to help you get more from your website, and are delighted to share Kate’s expert advice here. Check out Kate’s website for more inspiration on personal branding photography.
For more tips on website branding, read our guest blog by Vardeep Edwards.
Why not check out our website packages to see which brew will match your brand?
A 404 Page might not be at the top of your To-Do List when you are setting up your website. But, we all make mistakes. And, if you have a missing page or broken link on your website, visitors will see this error page automatically.
Use this to show your visitors that you’re a friendly, real person:
- Include links to other helpful pages
- Give them ways to get in touch – include an email address, or your Social Media links
- Best of all, add in some humour – make the visitor pleased that this accidental page appeared!
Here are our favourite 404 Page examples to inspire you
Pixar chooses just the right character to express sadness and frustration – sweet and on-brand. And, if you’re an animation studio, it’s a perfect place to showcase your skill.
Simple as can be – but clever, too. Our intellect is appeased because we like recognising the nod to the painting by Magritte that is the inspiration. Perfect showcase for a clever computer programmer.
Victoria is a set designer. Here’s a 404 Page image is a mini-set which manages to tell a story, and immediately showcasing her talent.
Perfectly on-brand – re-load the page if you can’t see anything moving!
What do you do when you’re spoilt for choice, like Marvel, with so many different characters? Answer: randomly load different pages with different characters.
Is it wrong to have a favourite 404 Page….? This hits the spot, just as the ice cream hits the floor.
Everything is Awesome – of course! (But it would be even more awesome if the soundtrack played too.)
Nothing fancy – just an on-brand message, and a rather stunning image. Great example of simplicity.
It’s not just the animation that works here. The message is bold and clear: we’ve done something wrong, but we’ll help you find the right place. Seems like Mailchimp are friendly, helpful people, doesn’t it?
Figma create design tools. Here, the 404 itself demonstrates what they offer. (Warning: visiting this page can be seriously time-consuming….)
You might not have wanted to go to Slack’s 404 Page, but, as you’re there, you can explore a magical world by moving your mouse.
A reminder that you’re not disadvantaged because you don’t have your own animation team. Use a simple message, choose a clear image and include a Call to Action.
More 404 Page inspiration
Ready for your own 404 Page?
I have been running my own business for almost five years now – I launched as a content marketing consultant after many years of working in corporate marketing roles, mainly on the sales enablement side.
The reason I share this is that I still get scared and overwhelmed when I press publish my on next blog post – what if something I have said is incorrect? What if no one wants to read what I have to say? What if, what if, what if?
If you have recently launched your own business, you may have heard about the power of content in building the “know-like-trust” factor with clients and potential clients. However, it can still seem like an enormous task to start “creating” content, never mind sharing it, especially if you are busy getting all your business fundamentals in place too.
I want to reassure you that everyone feels the same.
The joy of digital marketing also is that you can always edit or update your blog if you learn something new or want to make changes.
Why should you be blogging for your business?
There are a range of benefits to blogging. In addition to driving valuable traffic and potential leads to your website, below are just three:
- Improves SEO (the way search engines find you and show your content to your audience)
- Positions you as a thought-leader so that your clients understand your value to them.
- Provides you with a juicy bank of content that you can use on your other channels such as social media or email marketing.
How on earth do I get started with my first blog post?
It’s all very well deciding to start writing blogs, but I am sure we have all sat and stared at an empty page and felt overwhelmed.
I have created this five step list to help you get going and write and publish your first blog.
Step 1 – Brainstorm
Some topics to write about:
- What do you want your audience to know about you?
- Why did you start your business?
- What are the trends in your industry?
- What are the most common questions that people ask about your product or service?
Step 2 – Research
Once you have decided your blog topic, take some time to research more detail and background:
- Use your audience if you have one. Ask questions and ask for feedback about what they would like to find out about.
- Check out what others have written on the subject.
- Have a look at sites like Buzzsumo or Reddit for sources.
- What are you competitors saying, how does your point of view differ?
- Note down some key takeaways that you want your audience to remember.
Step 3 – Plan your blog post
- How will your blog structure look?
- What key points do you want to make?
- What do you want your readers to do at the end of reading the blog post aka what will your “Call to Action” be?
- Do you need any further information or quotes?
- What keywords will you include to help with SEO?
- What images will you need to make your post stand out?
Step 4 – Write and edit
If you have the time, I always recommend writing on one day and then returning to the copy the following day, or at least after a break.
- If, like me you are a person that is easily distracted, please set a timer, perhaps for 25 minutes? Get writing, with all your notifications turned off. You will be amazed how much you can get written in 25 minutes. Have a 5-minute break and then start again and repeat the process until you are finished.
- Check that you have broken up text with subheadings and short sentences. If you have a WordPress site (from Penny and Fred!) then Yoast has a brilliant free plugin that can help highlight long chunks of text that are difficult to read.
- Read your copy out loud, this is a quick way of spotting typos or sentences that don’t scan well.
- Are your key words are included? You can go back and do this as part of your first edit. It is recommended that they should be in your Heading, first paragraph, at least one sub-heading, Snippet (the part that the search engines use) and the alt-text of the image you use.
Step 5 – Publish and Promote
This is the bit that often makes the nerves come on, but if you have followed the steps above you can be confident that you have created a useful piece of blog content and your objective now should be to help as many people as possible get to know you, your business and what you have to offer.
Be proud of your efforts!
- Publish your blog post – once you are happy with the post, hit publish. You can choose to schedule it if you prefer so that it goes out at a day and time that works well for your audience. There are often good posts on Pinterest about the right time to share a blog post, depending on your industry.
- Share it – it would be lovely if people magically came across your blog but it simply isn’t going to happen, so it is down to you to share the good stuff – social, email, your auto-signature, really wherever you think your audience are hanging out. In addition, check out some of your social media groups that you are part of as they often have a promo thread on a weekly basis.
- Re-purpose – see what you can use from the blog post, perhaps record a video, an Instagram Live! Or offer to do a guest talk in a membership group and so on.
I hope that you found this explanation useful.
If you would like to ask any questions or discuss further, please don’t hesitate to get in touch with me. I have a handy checklist to help you get started with your first blog, click to receive a free download of the Blog Brilliance checklist and sign-up to my mailing list to be the first to receive new offers and marketing tips.
We are so pleased to have Ruth’s advice here.
You can blog with either our Macchiato Multi Page Website or our Flat White eCommerce Website – click the button below for full details of what each package includes:
Choosing website fonts can be daunting.
But the choice you make matters. The fonts you choose on your website need to reflect the style of product or service you are selling, as well as being clear and readable on any size screen.
Here are my 5 Top Tips on to choose the best combinations of website fonts.
1 Choose the same font family
If you want to guarantee that different fonts you choose for your website match, choose two from the same family.
Roboto has three main styles, which all work together, and have a clean, contemporary feel.
PT Serif offers a great contrast to PT Sans, but, because the fonts have the same fundamental proportions, both still work together.
2 Combine a Serif font with a Sans Serif font
Serif fonts are designed for reading in volume – the serifs help encourage the eye to move along the line, a bit like joined up writing.
Sans Serifs fonts, which were first designed in the 19th century, are, as the name suggests, without the little serif lines. The clean looking fonts became key to modern design.
The classic choice for written content is Sans Serif font for headlines, which is combined with Serif font for body text.
But why not mix it up? I really like using a Serif font for headlines and Sans Serif for body text, for an more modern style.
Font Pair is a great resource to see how different Serif and Sans Serif fonts work together.
3 Choose website fonts with maximum contrast
Add real character to your website, and choose a loud bold display font for your main titles.
Display fonts are designed to be used sparsely, with just a few words, which means that these fonts are suited to Site Titles and Page Titles, rather than blocks of text.
For maximum impact, combine with a super-simple font for the main body text.
Use it as large as you dare!
4 Make use of free Font Combination tools
The web is full of typeface devotees who have made fabulous websites to share their love.
Scroll through and find some inspiration on choosing typefaces:
- Typotheque: extremely quick and easy to use – just drag and drop different fonts to see how they look.
- Typespiration: a huge range of examples, with filters to help you find what you need.
- Typewolf: a carefully curated selection – great if you don’t want too many choices.
- Google Fonts: hundreds of fonts, available for free, with popular combinations to test out.
All our Flat White websites come with the complete set of Google Fonts, so their tool is a great way to try out combinations and recommendations.
5 Find inspiration with other website fonts
Look at other websites for inspiration.
Have a good look for websites that use combination of fonts you like, then find out what fonts have been used.
Use the Inspect Element tool in Google Chrome. Firstly, right click on the website page, then highlight one or more words in the font you are interested in, and finally scroll down the right hand panel to find “font-family”.
Cabin Condensed is the font we use for both Headings and Body Text on our website.
Read more top tips for website branding in our guest blog by branding expert Vardeep Edwards.
Ready to take the next step on your journey to getting your website?
Find out all the options we offer – from a Landing Page website, which is the quickest way to get up and running, to a full multi page website with SEO analysis, Google Analytics, and full Stripe integration to sell goods and services.
Guest blog by Vardeep Edwards, The Branding Fox.
Your website is the most important part of your business’s marketing.
- It’s your virtual shop.
- It represents your brand and generates sales.
- It’s your one-stop-shop for everything to do with your business.
- And it’s yours. You own it.
Your website is the best place for you to own the branding of your business as well.
It will encompass all the elements of your brand – tone of voice, visual identity, customer experience, values etc – and not just elements of your brand, like you might see on your social media accounts or in your email marketing.
It’s your digital storefront for your business, and it pays to get your website branding right.
There are many ways for you to showcase your brand through your website, depending on your goals. Here are 7 tips to help you brand your website and stand out from the competition.
1 INVEST IN A GOOD LOGO
Your logo will one of the first things people will see when visiting your website.
It’s worth investing in a good logo design for your website. First impressions count here. If your logo looks amateurish, then so will your business and website. A recognisable logo will help customers recall your business and brand more easily.
It’s also important to consider the different formats needed.
Nowadays, it’s not enough to have one version of your logo. You need to make sure it’s responsive and will work on various screen sizes and still be recognisable when viewed at a small size.
Legibility is key here too.
Logos with fine or intricate details may struggle to be clear enough when viewed at a small size. So it may be that you need to have a logo version that is simpler when being viewed at a smaller size. This is where working with a professional designer pays, as this is something they will take into consideration.
And don’t forget about your favicon.
This is the little icon you see in the browser tab. I see too many that are unclear and hard to make out. And I don’t know about you but I often have several tabs open at once, so this is a great opportunity for you to reinforce your visual identity whilst competing for attention from your users.
2 PAY ATTENTION TO YOUR BRANDING COLOURS
Colour is highly emotive and an important consideration in your brand identity. People buy 80% based on their emotions and then back those decisions up with 20%.
Choosing your brand colours carefully will play a big part in your branding and will help elicit the right emotions in your target audience.
And it goes deeper than the stereotypical associations with certain colours.
It’s about the combination of the colours used, the tones, shades, hues and the relationship between the brand colours – how they make you feel and what they say about you as a business.
Have a look at these resources for inspiration:
Don’t forget to take into consideration the HEX colours needed for your website and make sure they look the same when converted to RGB and CMYK so that everything you have designed for your brand is consistent.
Pay attention to how colours work on screens, too.
Yellow, for example, can be hard to read on-screen, so you may want to use a different colour or create a version just for screen use.
You can also think about primary and secondary colours palettes, depending on what’s needed for your brand.
- your primary colour palette will be the colours that you use most of the time;
- your secondary colours are there to support.
Don’t forget to use accent colours for highlighting info, Call-to-Actions, or to break up your existing colour palette.
3 CHOOSE YOUR BRAND FONTS WISELY
The typefaces you choose for your brand will convey a certain personality for your business.
What type of impression do you want to give?
- Sans serif typefaces with homogenised proportions have become popular with technology brands in recent years.
- High-end fashion brands tend to opt for a more timeless, elegant look by using typefaces with smooth curves, hairline strokes and bracketed serifs.
I’d recommend sticking to 2-3 fonts. This way, you won’t be confusing anyone by using lots of different styles and you won’t be sending out mixed messages about your brand.
Think about what you will use for your headings, body text and any information that needs to be highlighted. What size and weight will you use for the different pieces of information? And will you differentiate the hierarchy of information?
Play with combinations on these resources:
4 DON’T FORGET YOUR IMAGES
Images can often get overlooked when considering a brand, but they are a key element of your branding and particularly important when it comes to designing your website.
I always recommend working with a brand photographer if possible, even if it’s to get 5 key images that are on brand and you can use on your website. Your website should use the best of the best in terms of your images. I call these your hero imagery – images that are completely on brand and can be used on your homepage and on the front of any marketing materials.
Think about the style of imagery.
- What will they look like? Flowery, serious, corporate, serious or fun?
- And what does the context of these photos need to be? Are they going to be office based? In a cafe or outdoors?
- Will illustrations or icons be needed?
I recommend creating a bank of images for you to work from.
So if you have had some brand photography done, then that’s great. But you can also add to this with stock photography and choose images that match the overall look and feel you’re going for.
Aim to have a bank of about 10 images as your base, and create a mood board, so that when choosing any further images, you can see if they match and follow the same style.
Have a look at Penny’s blog on How to Source Photographs for your Website, as well as these websites that offer royalty-free photos:
Always take into account the format of the photos you are using in different places on your website – hero image, page banner, blogs – and choose images that will work in these particular sizings.
5 TONE OF VOICE AND MESSAGING IS PART OF BRANDING
Knowing the tone of voice and key messaging for your brand makes it easier to know what and how to write for your website.
Using the intended style will help you align this with your visual identity and keep everything on brand and work together effectively. This also helps to build your brand, as well as give a cohesive feel to your website.
You can also think about your key messages here:
- What’s really important to you in your business?
- What values do you abide by?
- What are your non-negotiables?
- How will you communicate this on your website?
Your website is where customers can find out all they need to about you and a place where your brand story can shine.
6 BE CONSISTENT
Once you have decided on your fonts, colours, images and tone of voice, then it’s a case of being consistent with them.
Branding is all about creating trust in your audience and, when they know what to expect from you, it builds on that trust factor. So make sure you stick to your brand elements for your website. Even if you’re not 100% sure about it, familiarity is better than chopping and changing parts of your branding.
7 BRANDING GUIDELINES
Once you have established all the above points, then putting everything together into a set of brand guidelines will help you stay consistent and work as a reference guide for anyone else you work with.
This way, everyone knows what the brand is about and what’s expected of it. It also helps to have such a guide when you’re working with a web designer or photographer, as they will be able to understand what the website should look like.