Right, so you've received your website and it looks great (at least it does if you're one of our clients!). You've had all your training and you're all set to start adding content! Where do you start and what looks good? Here are some tips for keeping your website looking fabulous.
Headers! Headers! Headers!
Headers are great for usability. It is substantially easier to skim through website content and find what you're looking for, when the page has been clearly labelled. Try to incorporate various sub headers in your content, rather than just the main page title.
When using headers, make sure the size of the header is relevant to the text. For Example:
Zoo Animals (Main heading)
The Tiger (Sub heading)
What Do Tigers Eat? (Paragraph heading)
The Giraffe (Sub heading)
What Do Giraffes Eat? (Paragraph heading)
In Orbit, our CMS at Limelight online, we set up predefined heading styles so that our clients can layout their pages with ease.
Font Styles, Font Families & Font Colours
When it comes to font styles (bold/italic/underlined), font families (Arial/Trebuchet MS/Times New Roman etc.) and font colours, simplicity is best.
My personal rules are:
Bolded text - Use for headings and labels.
Italic - Use this if it's required. Do not use as a standard body font style. I personally love the font Georgia Italicised in headings.
Underlined Text - Links ONLY.
Font Families - Stick to one font family for your main content. Using a different one for headings is fine (so long as the same font applied to all headings).
Font Colours - Once again, stick to the same colour throughout all your body text, with the exception of headers and links. Headings should be a colour that looks good with your template and it is safest to stick with one colour for all headings throughout your site.
An example of what can go wrong if not following the above rules: (I may have been a bit vulgar in my choice of colours, but it gets my point across)
Zoo Animals
The Tiger
What Do Tigers Eat?
In the wild, tigers mostly feed on larger and medium sized animals, with most studies indicating a preference for native ungulates averaging 90 kg (200 lb) at a minimum. Sambar, chital, barasingha, wild boar, gaur, nilgai and both water buffalo and domestic buffalo, in descending order of preference, are the tiger's favoured prey in India. Sometimes, they also prey on other predators, including other large species such as leopards, pythons, sloth bears and crocodiles.
In Siberia the main prey species are manchurian wapiti and wild boar (the two species comprising nearly 80% of the prey selected) followed by sika deer, moose, roe deer, and musk deer. In Sumatra, sambar, muntjac, wild boar, and malayan tapir are predominantly preyed upon. In the former Caspian tiger's range, prey included saiga antelope, camels, caucasian wisent, yak, and wild horses. Like many predators, they are opportunistic and will eat much smaller prey, such as monkeys, peafowls, other largish, ground-based birds, hares, porcupines and fish. - Wikipedia
Centered Text? No and No Excuses!
One thing that I think looks really dated and unattractive on websites is centered text.
I really think there should be no excuses for it. I wouldn't even use it for headings on a page or for inserting images into my content like I have done below.
Ideally you should be either left or right aligning your images along with your text - I will touch more on this further down.
Ahhh, left alignment. Doesn't that feel better?
The Beauty of Bullet Points
Bullet points are great for outlining important content. Your information is clear, rather than losing your reader in amongst a waffly paragraph.
Which of the below do you find easier to read and more to the point?
Things I like about the Tiger - Example 1
It has stripes
It can run really fast
They are really strong
They have big sharp teeth
Things I like about the Tiger - Example 2
The things I really like about tigers are they have stripes all over them and they can run really fast. Tigers are really strong and they also have big sharp teeth! Tigers are my favourite animal.
Paragraph Lengths - Short & Sweet
When writing your content, try to keep your paragraph lengths restricted. Big long paragraphs can be hard to read and might put someone off reading the content on your page. Keep things short and to the point, this will ensure your reader gets all the important information you want them to read.
Tables
A great way to make use of the space on your page is by inserting some tables. This is especially great if you're listing items on your website.
For example look at the list below. This is a greater use of the space we have than listing all the animals vertically down the page.
Animals at the Zoo - (Yes, more Zoo references for you!)
Elephant
Monkey
Llama
Lion
Giraffe
Panda
Tiger
Hippo
Zebra
Picture Alignments and Padding
Pictures are a great idea for making content more attractive and to effectively show examples of what you are explaining. However, let's not get too excited, too many images could make your page appear cluttered. Use pictures that are relevant to your content, not just because they are pretty.
Try to make your images fit the text content you have on your page. If you have a few paragraphs on your page perhaps align your images to the right (see example on Lindisfarne Nursery website). If you are laying out a Team members page, perhaps have the images on the left, with the text about each individual on the right (see example on Front Page Ltd website).
Keep things looking clean by adding spacing around your images, avoid your text being hard against your picture. I aim for approximately 10px between images and text when inserting content.
Consistency
Last and most importantly keep things consistent. Use the same headings/font families and colours throughout your whole website to make things look professional and to tie your content in with your website design.
Please note, this is just a general guide. You should still feel free to get CREATIVE with your website and make the personality of your company shine through in your content!!