Your Online Presence > Designing A Site

Getting a Website - Planning the Visual Style of your Pages

By Lasa Information Systems Team

The design of your site says a lot about your organisation, including how committed you are to accessibility.

The web was originally created by scientists who wanted to share information between many different kinds of computer systems. They were concerned about the logical structure of information, not about how it appeared on screen. However, many people now designing web pages come from a graphic design background. They are used to having exact control over every aspect of a printed publication’s appearance, and they want to have the same control over their web pages.

You will obviously want your site to look attractive and professional. However, there is little point trying to perfect each page in detail, because it will look different on different computers from yours. There are many different options affecting how the screen looks in Windows or and Mac. For example, Macs display text at a different size from Windows machines, and display colours differently. Different browsers also display pages in subtly different ways and this can make things more compelx.

Visually impaired people also use hardware and software which changes the appearance of the screen, or reads text out loud. When your pages can be viewed in all these different ways, it’s futile to try and control their appearance exactly. In any case, users come to your site for the content of the pages, not what they look like.The best approach is to think how the visual style of the pages can make their content more accessible. In general, the design should reflect the structure of your site, and should be consistent on all the pages.

Layout

Your home page must download quickly, or users will get sick of waiting and go elsewhere. All the other pages on the site should download in a reasonable time. Large graphics are what usually slows a page down (see Graphics below). Many of the largest commercial sites break this rule.

Newspaper editors put their most important stories "above the fold" – in the top half of the front page. The same principle applies to web pages – the user may never scroll down to look for content that isn’t on their screen to start with. Put the most important information at the top of the page.

Bear in mind that pages may be much smaller when they display on someone else’s monitor – see the section below on Screen Resolution.  The screen is much smaller than a printed page, and can be as small as 640 x 480 pixels (and could be even smaller if people start viewing web pages on mobile phone screens). Make sure your design works at different resolutions.

Don’t use scrolling or blinking text, or animations which repeat over and over – they distract users from content.

Avoid using frames. They make it difficult or impossible for visually impaired people to use your pages, they often don’t print in the way you expect, and they make it nearly impossible to share the details of how to find the content with someone else. Frames also make it difficult for search engines to find pages on your site.

Make sure your pages print properly. For example, a user can scroll horizontally on screen to see the right-hand side of a wide graphic or table (although they will hate you for it). But if it’s off the right-hand edge of the paper when it prints, they won't be able to see it at all.

Graphics

Graphics can aid navigation, add interest to a page, establish an overall style for your site, and convey information with greater force than text. But they load much more slowly than text. Strike a balance between fast-loading text and slow-loading but attractive graphics.

• Minimise the time graphics take to load by resizing them. If you have a graphic that’s 200 pixels high and you want it to display at 100 pixels, use your graphics software to make the graphic smaller. Don’t include the 200-pixel version displayed at 50%.  It all still needs to be downloaded.
• Use "thumbnails" to link to large graphics, or include a warning that a link leads to a large graphic.
• If you need to be sure that a document will print exactly as you intend, create it as a PDF document – download and install the free CutePDF program to create your own.  Remember that PDFs are less accessible to visually impaired people than HTML.
• Use the JPEG format for photos, GIF for line drawings and pictures of text.

Accessibility

Most organisations already have a commitment to equal opportunities, and accept that visually impaired people have the same right to information as anyone else. The Disability Discrimination Act also means that organisations now have legal duties to make their services accessible.

For ten simple tips, see the article Making your Web Pages Accessible for Visually Impaired People.

Following guidelines regarding designing for visually impaired people also makes your site more accessible to many other users – for example, people with slow modems may not want to wait for imagemaps to load, and everyone benefits if text contrasts with its background.

A further benefit of accessible design is that it often results in higher ranking for your site in search engines.

Text Formatting

A mixture of upper and lower case is more readable than EVERYTHING IN CAPITALS.

Use the largest headings sparingly – they have more impact. Write as normal, and then add links where appropriate. For example, don’t write "we can advise you about Housing Benefit – click here for more information." Instead, write "we can advise you about Housing Benefit."

You should also consider using Cascading Style Sheets (CSS) to control how text and other elements are displayed on your site. Style Sheets (CSS) allow you to make global changes to elements such as fonts more easily. They provide a relatively simple way of changing the style of web pages (e.g. fonts and colours) without interfering with the structure of the page.

For example, rather than specifying the font type and size etc. on every page on your site, you can link each page to a style sheet. The style sheet contains instructions for how you want various elements to be formatted. If you later decide you want to change the fonts across the whole site, you only have to edit the style sheet rather than every web page on your site. Changes to the style sheet will then be reflected across the whole site when the style sheet is re-uploaded.

For more information see the next part of this article - Style Sheets.

This page is one part of a longer document about getting a website.

If you want to read through the whole thing, you'll want to start with the Introduction.