Written by Joe Hastings

In April we published our top ten tips for building a learning website in a reasonable timeframe and on a reasonable budget. Well, since then it seems like everyone at Saffron has been hard at work on website building (and not just ‘reasonable’ ones either!), so the logical conclusion was… ten more tips. This time we share some of the secret sauce that goes into a flamin’ hot website so good your audience will want to eat it up!

Want to know the difference between a one-hit-WordPress-wonder or getting into the HTML-Hall-of-Fame? Then you can’t afford not to read the tips below:

1. Content is king

While great design and graphics are important, they should never be to the detriment of the content itself. In the last few years web content has climbed ever-greater peaks of personality, artistry and power. It’s no longer about recycling printed materials – it’s about telling a story your audience won’t find it easy to forget. So be ruthless! Don’t stop until you have some jaw-dropping content. And if you don’t feel confident about the quality of your content, get a great web copywriter and work them hard! Above all, expect people to bounce right off your site if your content isn’t presented in a clear and concise way.

2. Text formatting

Properly formatted text is crucial for a number of reasons (and gets further mentions below!) When formatting the text on your site stick to using “clean” HTML.

If it’s the main title of the page make it a h1, and if it’s a subtitle make it a h2. It seems simple, but often bold or underline styles are added with extra line breaks. Not only will this make the content look messy and inconsistent, it’ll make the developers loathe you when they’re trying to style your website.

This tip applies for all HTML tags, use them as they were designed to be used! Don’t try to get the effect by using a work-around like changing the font-sizes directly.

3. Make the mobile experience equally as good

With the use of smartphones and tablets becoming so widespread, responsive design is a must. Users must be able to access information quickly and easily.

What is considered ‘easy to access information’ is changing all the time. User’s experience with the mobile website should be just as engaging and informative as the desktop version.

 4. Create a journey for the user but let them get off at any time

Long scrolling pages are great for achieving this, as well as being very on-trend at the moment. They let the user follow through the story of the content, often with interactions or animations flying in along the way. This can be a great way to take the user on a journey, but they need to be able to get off at any time.

If you are going to use long scrolling pages, it’s also important to remember to include some quick navigation buttons and don’t make important content difficult to find.

5. Get users to act, not click

You want your users to interact with your site and you want potential clients to contact you. It’s no good including links that read “click here to contact us” or “Find out more”; use descriptive calls to action. For example, a button labelled “Submit a request for proposal” is more likely to make someone do something than a “click here” label. Your website should be geared towards maximising interaction and generating business, and calls to action are a great way to achieve this.

6. Keep Search Engine Optimization (SEO) in mind from the start

SEO is a tricky thing to get right, but there are a few simple things that can be implemented from the start to improve SEO on your site:

●     Make your titles concise

●     Add relevant tags to all of your images

●     Use heading tags correctly in your content
(search engines and screen readers will appreciate this, see tip #2 for more)

●     Get your keywords into the first paragraph so they’ll be picked up by search engines more easily

There are many more tips and tricks on SEO so it’s worth looking at some online guides. A lot of these things are very difficult to implement once the website is finished as it means going back through all the content, but if it’s kept in mind at every stage, you’ll save yourself a lot of time in the long run!

7. Keep it on brand

Stick to using the brand colours, don’t add in too many different shades and try to keep the colour palette small.

If your business has a particular personality, try to incorporate this into the design of your website and balance this with the personality of the clients you want to attract. For example, a website designed to attract accountants won’t also attract teenagers. Know your audience and aim it at them.They will have expectations of your brand, so make sure your website lives up to them.

8. How to check accessibility

There are a number of online accessibility checkers available which can provide a thorough report of your site’s accessibility performance. You can also do some quick checks offline; testing the colour contrast of your text, for example light grey text on a light blue background is not going to be suitable for anyone to comfortably read your content).

It’s also important to consider how a screen reader will navigate around your website. You should be able to use the tab key to navigate through all the links on your page. This also ties in with the point about calls to action. Links should describe what they do or where they go -  simply writing  “click here” won’t be much help to users.

9. Social media “integration” - not just links

Make the links to your social media obvious and place them in a prominent position, such as the header or footer.. Also think about placing links to social media in relevant places like the end of a blog post. Including a Facebook or Twitter feed somewhere on your site is a great way to keep the website fresh with up-to-date content.

10. Test with Browserstack

If your website is going out into the world wide web you’re really going to want to support all browsers, even those as far back as Internet Explorer 8! This can be a real pain to test because no one has every version of every browser installed on their own machine.

A great way to overcome this is to use a service like Browserstack that lets you boot up a virtual machine using any operating system or browser. It can even emulate mobile devices so you can see how the site will look on the latest iPhone or an old Android.

With a free 3 month Browserstack trial available, there really is no excuse for your site behaving unexpectedly in an old browser.

That’s it for now, thanks for taking a look at my top tips, I hope they’ve been useful and made you think of some improvements for your latest web project. While a couple of these tips are as old as the hills it’s amazing how often they can be overlooked or ignored - don’t be next to fall into the trap!

Do you have any of your own tips you think everyone should know about? It would be great to hear your pet hates and top tips for websites you’ve seen or worked on so far in 2014.

…oh and if you know of any other great new tools with free trials, I’d love to get my hands on them too!