Website Guidelines

mattmatic 21^st May 2004. epz@photon.me.uk

General guidelines

Depending on the operating system of the machine that is actually hosting the website, the case of filenames may be important. It is a very good idea to save all images in lowercase only – that way they will work on all systems.

In addition, when referring to the images and pages from within the html pages, make sure all the references are lowercase too!

Saving text

Prepare each piece of text in PS.

· Create a new layer with the background colour you have chosen.

· Place the text on a new layer (keep it layered).

· Then use “Image / Trim” to trim it down to the perfect size.

Save for web

· Hide the background and/or colour layer (only the text should be visible)

· Use “File / Save for Web”

· Choose GIF, transparent.

· In the “matte” section, set this to the colour you will be using on the web site – very very important. The text will be transparent but will fade out to that matte colour.

· Pick a relatively low number of colours – 16 is pretty good for text.

· Save the GIF as a sensible name

This ensures the text can float anywhere in the html document, as long as the background colour matches the matte colour.

Note: In some circumstances, you’ll want to make all the text areas exactly the same dimensions so they can fit into a table cell ;-)

Saving Photographs

Photos should be saved in JPG format. Again, use the “File / Save for Web” option and go for as low a filesize you can get away with.

If necessary, increase the “blur” setting in the dialog to smooth away some of the JPG artefacts.

Organising

You’ll have a collection of images – both JPG and GIF. Save them all under a subdirectory “images”.

Personally, I find it useful to keep just the “index.html” file in the root, and place all other html documents in a subdirectory “html”.

If you want to keep higher resolution photos, place these in another subdirectory.

This organisation will help you when it comes to maintaining the website.

Style sheets

Style sheets are an extremely useful part of consistent web design. The style sheet defines text and background colours, as well as font names, margins etc. By using the style sheet you do not have to specify the individual font colours and sizing (and indeed you should not). Keep the html documents “plain”, and use the style sheet to force the formatting to the website’s look.

Additionally the style sheet can colour the scrollbars.

You need to create a text file in the root directory, something like “mine.css”.

Each html document that needs to use the style sheet should include the line:

in the <head> section.

The style sheet itself will contain entries that look like this:

body {

font: 100% "Trebuchet MS","Tahoma";

margin-left:3px;

margin-top:3px;

color: #ccbf88;

scrollbar-base-color:#a99da7

scrollbar-arrow-color:#676374;

background-color:#a99da7;

background-position: top left;

background-attachment: fixed;

}

The above section overrides the body text format. Additionally the h1, h2, h3, th (table head), and td (table cell) formats can be overridden.

Make sure you set the background-color to match the matte specified in the transparent GIF saves.

You can also specify your own styles by putting a period first:

.indented {

margin-left:50px;

margin-right:10%;

margin-top: 5px;

margin-bottom:25px;

}

These styles can be used by enclosing text like this:

<p class=“indented”>This is indented</p>

Note: The colours are the same “#” colours specified in Photoshop (RGB in hex).

Frames

To create a framed layout, create the “index.html” file. This defines how the frames should be laid out on the screen, and what their individual properties are.

<html>

<head>

<title>Frame demo </title>

</head>

</frameset>

</html>

The first <frameset> specifies that we want to create two columns, the first column taking 200 pixels (200px), and the other column taking the rest (*).

Within that frameset, the next line declares the left column, which we have named “menu”. Notice it also defines the starting html page for that frame. If the menu structure is relatively short you can keep scrolling=“no”. However, if some screens cannot accommodate the whole menu, set scrolling=“yes” – make sure you use the stylesheet to specify the scroll bar colours. Alternatively, scrolling=“auto” will show the scroll bar only when needed (which will change the layout when the scroll bar hides and shows).

The right column is defined as another frameset. This time it is split into rows of 100 pixels, and the remaining.

This layout yields a full height menu on the left, a remaining width top bar, and a final area in what’s left in the bottom right hand corner.

Links

Since the “menu” and “top” named frames are unlikely to ever change, their content is defined only here in index.html.

However, the named frame “main” is important – any <a href=…> from within the menu must specify that the target is “main” to load the content in that frame.

So, within the “menu.html” page, any graphic or link should contain the following:

target=“main”

e.g.

<a href=“new.html” target=“main”>New items</a>

Tip to getting it finished

Place all the images and html into a subdirectory. If you have specified root level items, you can create a SUBST’d drive

e.g. from a command prompt, type

SUBST Z: “C:\Data\My Web Site”

This will create a new drive, “Z:”. Open up your internet browser and point it to Z:\index.html

Now, keep the browser open. Make changes as needed in an editor, and flick back to the browser and refresh all pages (Ctrl-F5 or F5, or Ctrl-R depending on the browser). While getting the frames correct you’ll need the full refresh, Ctrl-F5 in IE, not just the F5.

It’s always a good idea to try out the design in Netscape, Internet Explorer and Opera. They are all freely available and once the site works well in all three it should be fine on 99% of clients.

Additionally, it’s a good idea to temporarily switch your screen resolution to 800x600, 256 colours to see whether it works (or at least try this on another PC).