Web page design tips

The notes below are designed to give Webmasters a framework for development of RAYNET websites and encourage a roughly consistent look, plus giving some basic design tips.

Please note that it is NOT the intention of The Network to enforce any standard approach to web pages and nothing in this document should be viewed in this way.

Webmasters should feel free to use all their creative skills, however all we ask is that when using Network logos and other artwork, you do not change them or produce local versions.

It is desirable that pages belonging to Network RAYNET groups should include The Network logo and a link back to The Network's main page (http://www.raynet-uk.net/). Remember that sites should contain verifiable fact, not opinion.

Sizing and basic layout

A basic design framework should be established for all pages on the site to ensure a common 'look-feel' to the site. A suggestion is made as follows.

• Constrain everything to a maximum of 740 pixels wide.
• Provide a left-side navigation window 160 pixels wide, making the main text area 580 pixels wide.
• Place a Network logo, 120 pixels wide, in the top of the navigation window.
• Main page background - pale Yellow, web colour #FFFFCC.
• Navigation bar - very dark Teal, web colour #003333
• Include Webmaster name & e-mail, last updated date and a copyright message at the bottom of every page.

Work your design for an 800x600 screen. 90% of users now run their systems at this resolution and if anyone is using a smaller screen, they need to be encouraged to upgrade!

If the text is allowed to spread, unconstrained, to the width of your screen, a 15" monitor will show text that will be unreadable due to the distance your eyes have to travel reading a line.

Constrain the page width to 740 pixels. This allows for browser boarders, scroll-bars and other application clutter. A simple table can be used to achieve this.

Include a statement at the bottom the title page to the effect of 'This site is best viewed at a resolution of 800 x 600 or higher'.

Navigation

Navigation is everything to a website, but is not complicated to do well!

A couple of options are available for simple navigation.

1. Use frames, making the left frame 160 pixels wide for the navigation page and the right 580. A top frame can also be added for 'headline quick-links'
2. Use a table with 2 columns, left side 160 wide for the navigation page and the other 580.
   Navigation does not need to be complicated, but it should always be possible to jump, at least to a major topic heading, from anywhere within your site.

Navigation should be 100% consistent throughout your site. If you have an editor that supports templates, this is very much easier to implement.

Having a critical look around other sites will give you good examples of the good, the bad and the downright ugly! Worst of the Web can give plenty of inspiration in this area!

Check your links, internal and external, every time you update the site. Remove any broken external links straight away and (if possible) inform the Webmaster of the site. Most web packages have auto link checking options.

Try to avoid long lists of widely spaced links on a page, instead grouping them tightly into similar topics on either separate pages or cells of a table.

Designing the navigation tree

Pick up a large pad of post-its, write down every topic heading and item you plan to include and spend some time shuffling them around a white-board. You can then add the navigation lines as well.

Don't make the tree too deep, otherwise people will loose where they are, but do group similar topics under a smaller number of sensible headings.

Time and care taken at this stage will make the task of building the site very significantly easier.

Don't forget to plan the tree for future expansion!

Fonts / Colours / Backgrounds

Avoid using the Times Roman font, it looks awful on most screens! Browsers will default to Times Roman so you will need to force the text into Verdana or Arial. Arial is a safe bet as almost everyone will have it on their machine.

It is recommended that you put in the following font list to cover all eventualities, the browser will examine the list and pick the first font that it has available.

face="Verdana, Arial, Helvetica, sans-serif"

Suggest the default font size be forced to 8 point and make the headings etc. a relative +/- change from this.

Stick to the standard 224 'web safe' colours.

Avoid hard-to-read colour combinations such as Red or Blue on Black background or Red on Blue (yes, some sites do!).

Always try printing from the browser during development, as some colour combinations don't print how you would expect, particularly on monochrome printers.

As RAYNET sites have a mainly functional purpose and provide factual reference, a professional-looking light background with dark text should be used.

The adopted standard for the national site is background is a pale Yellow, web colour FFFFCC. This combination looks OK with most colours of text.

A darker colour (suggest very dark Teal, web colour #003333) should be adopted for the navigation bar background to distinguish it from the rest of the page.

Browsers

Make sure you preview the pages in both Internet Explorer and Netscape. They will give you surprising (and different) results, neither of which will look like the page in your design software, unless it is very good!

Try to avoid browser-specific behaviours, unless you code for both.

Filenames

Always use lower case for web page filenames.

Unix (which is the core operating system on most web servers) uses lower case as its' default and almost everything on the web is case-sensitive.

Design software

Many web design packages are orientated towards raw HTML coding and provide basic GUI interfaces. Unless you are a programmer these are best avoided.

Packages such as Dreamweaver provide a superb GUI design environment, however they are expensive (£400 - £500) but are very good at what they do.

Microsoft FrontPage will do most things, however be aware of the 'tacky' looking default themes and problems with templates and achieving a 'common look' if you don't use the inbuilt themes.

Don't believe that pages developed in FrontPage will display correctly in Internet Explorer (even though they are both Microsoft!) and it can also produce some very strange results in Netscape.

Effects

Don't try to be clever!

Simply ask yourself - Will this trick / plug-in / graphic / effect etc. improve the functionality and usability of the site. If it is not a big YES, don't do it!

Graphics

One golden rule must be: Don't re-size a graphic to fit your page; it just messes up when displayed in the browser.

Network logos can be provided in any size and format, just contact us with your requirements. Sets of various sizes are available in the download section of the National website.

Remember to reduce your images to 72dpi and 256 colours; otherwise they will take too long to download and a better image adds nothing to screen quality.

Site development

Web pages should be developed off-line. If it is needed to upload incomplete pages for others to check before going live, it is recommended this is done to another folder and not linked from the main site navigation.

It is strongly recommended that you do not have any pages that are "Under construction" as this makes a site look unprofessional. It should be either the completed page or nothing!

Web design resources

The web is full of resources for web designers, from simple HTML tutorials to Java and VB script applets. The simplest way to find this is to use a search engine and look for the specific topic that you need help with.

Finally, if you want to see how not to design a website, have a look at Worst of the Web for some inspiration!