Accessibilty: Site Navigation

Left Sidebar

The following content is part of the left side-content panel.

Main Content

The following content is the main page content.

Web tips and tricks

Styling tips for web pages

in
Using proper headings and clear and consistent styles will help your page flow.Using proper headings and clear and consistent styles will help your page flow.

Illuminate ICT spend a good deal of time working on your site designs. When they leave us, we're usually very proud of what we've achieved and we've given you a sturdy platform on which to build rich and beautiful content - I may be getting carried away! However, this is where one of the pitfalls of a Content Managed website rears it's fat, ugly head.

Try and keep it professional looking

A professional looking site design can quickly be spoiled by content that changes font size, colour and type on a whim. It quickly looks less professional, which can damage people's impression of you, as an organisation. It also makes it harder to read and a good deal less accessible, which could be a particular problem if you are providing services to older people or people with disabilities or impaired sight.

Accessibility

Many people who have impaired, or no sight, use what are called screen readers to access content. These interpret and read outloud the text on your pages. So, for these people, it's really important that you use the right format for your text. For example, don't format a paragraph of text as if it were a heading. We've found that many people use heading format types to increase the size of their text. This can make your text very difficult to interpret by screen readers, and so could make your web pages less useful to people who use assistive technologies, like screen readers.

Finally, the tips and tricks!

Here are some fabulous tips to help you create beautiful web pages that are as easy to read as they are accessible to people who use any kind of assistive technology.

  • Be consistent. Sites that change colour and font size or type all the time can be difficult to read.
  • Format paragraphs as paragraphs, not as headings.
  • Using proper heading formats for your headings helps people who use screen readers to interpret the text on your website. You can also use sub headings to help structure your page. The heading formats range from h1 to h6, but you probably only need to use h2 and h3 as the title at the top of each page is already h1 and anything beyond h3 suggests that you need to split your page into 2 or more pages.
  • When you edit a page on your site, the text that you type into the Title box will appear as the heading for that page. Therefore, there's no need to repeat the title on the first line of your page. For example, we've found that many people will create a page that has the title "About Us" and the first line of text is another heading that says "About Mrs Miggins special pie company". I'd say, get rid of one of these. As the 2nd is more meaningful, I'd ditch the rather bland "About Us" and use the more explanatory text as the title.
  • Don't overuse bold and italic text. You completely loose the effect if everything is bold or italic. If you want to emphasize a few words, then you should use them, but use them sparingly.
  • If you use images on your pages, use them in a consistent manner. Try and keep the size and shape of your images the same. This may mean working with the images on your PC, before you copy them to your site, but this is well worth the effort. Try also to keep the images in the same place on the page and not dotted throughout the text. Again, it's about consistency.
  • Do make sure that the text you write is clear and concise - get someone else to read it through...
  • ...And while they're at it, they can check your spelling too! Many people get very turned off web content if the spelling is bad. More importantly, screen readers may struggle with badly spelled words.
  • Split long pages into shorter ones whenever you can - there's no limitation on the number of pages you can use, so just don't create pages that go on and on and on......

But, just before I break my own style rules..!

Glossary of terms

By the way, if you're puzzled by any of the jargon I've used on this page, like Assistive Technology or Screen Reader, have a look at our Web Glossary pages, where we try to take some of the mystery out of the odd words people use when they discuss anything to do with the internet. If there's a term that you're confused about and you'd like it explained, why not get in touch!

Converting colours for the internet

Converting coloursConverting colours

In most design software, especially when designing for the internet, colours are defined with values of Red, Green and Blue, often just called RGB. So, a red colour will have a high value for R, and lower value for G and B.

A bright red might have Red, Green and Blue values of 255, 0 and 0 (all the values have to be between 0 and 255). Blue might be 0, 0 and 255. The values are often simplified to, for example, 255/0/0 for bright red.

Web sites, however, normally reference colours in strings of 6 letters and numbers (called Hex), like FF0000, for the same bright red as before. It's not easy to convert between the RGB and the Hex, but luckily there's a REALLY useful website that'll help you do it.

For example, the blue we use quite often on our website has the following RGB colour: 94/130/171. Using the colour converter website, I can find out that the Hex version of the colour is #5e82ab (Hex colours normally have a # at th efront of them).

Visit Draac's colour converter to have a go.

Colour Schemes

Colour schemes based on a yellow-green colourColour schemes based on a yellow-green colour

Colour schemes can be really hard to arrive at. Do you select colours that are of similar hue (different blues for example). Or do you use colours that clash with each other (red and green for example).

The choice of colour scheme adds to the personality of your site and visitors may be completely switched-off your site if you choose the wrong colour scheme. For example, if you choose a scheme with greys and corporate blues for a youth oriented site, you shouldn't be surprised if your intended audience aren't very interested.

This is a site that helps you build colour schemes. It helps if you already have at least one colour in mind. Maybe you could take that from your logo, or a colour that your funder uses, or just a favourite colour. Visit the site now.

Enter your colour at the top of the page and click the button.

You may need our related page about colours for the internet to help you.

Getting round the problem whereby Drupal will not allow more than one account with the same email address

Accounts within a Drupal website must all have unique email addresses, which can sometimes be a problem when potential site users to not have access to email.

If this is causing you a problem, we suggest you use modified versions of your own email address so that each account can have a unique address.

Although these 2 addresses are unique as far as Drupal is concerned:

Most email systems will consider them to be the same - emails to the second address will still arrive in the first's email box. Anything between the + and the @ gets ignored.