Home of Story Kettle

on the page

A simple and static
HTML page format.

StoryKettle » Notes » on the page

Copyright © 2010, Michael M Wayman

The Story Kettle website exists to publish my stories. It contains hundreds of stories, which are text-based and static. I have chosen simple and static page formats, simple HTML-formats, which are described below. See also:

simple HTML-format

I use a fairly conservative HTML-format for all the pages, no frames, very simple in-line CSS, an old fashioned blind-table technique, no scripts, nothing dynamic. Each page is a file in HTML-format with four major parts:

1 HTML-head similar meta data for every page
2 header similar for every page
3 contents different for every page
4 footer similar for every page

The HTML-head is fairly standard – customised for language, title, description, keywords, year of creation, colour etc.

The page header is fairly standard with the clickable kettle icon in the top left. It is customised for title, description, colour, year of copyright etc.

The contents are the part which differs for each page.

The page footer is fairly standard – customised for colour, year of copyright, optional nextstory> and <back links etc.

The standard links on every page are to the home page (which has no link to itself), to the top of the current page, to contact, to the site map index page, and to the corresponding index page (for content pages). No page links to itself, except for on-page links such as top and bottom.

The breadcrumbs at the top of each content page demonstrate the three levels and aid navigation. The breadcrumbs for this page:   StoryKettle » Notes » on the page

Note that printable (and technical) pages are simplified, eg. Herb and Spice Chart. On content pages much of the link text will not be printed – it looks nicer.

Titles, descriptions and keywords are unique and mandatory for every page on the website. The title and the short description are also used in links to the page, particularly on index pages. Try pig.

Title – there are THREE titles!
The first is the browser window/tab title, eg. “pig – the Story Kettle”.
The second is the meta data title “pig”. Both are in the HTML-head.
The third on-the-page title “pig” is a h1-tag in the page header.
The fourth is the last part of the breadcrumbs in the page header.
The first title should be 18-90 characters long.

Description – there are TWO descriptions!
The first is the meta data description “Just sometimes the word pig. A short story from the Story Kettle.” is in the HTML-head.
The second on-the-page short description “Just sometimes the word pig.” is a h2-tag in the page header.
The first description should be 50-200 characters long.

Keywords are meta data in the HTML-head. The keywords should be 30-200 characters long.

ordinary pages – Generally there are two types of pages (95% are content and 5% index) and these are grouped into collections such as Treacle and OTTer.

content pages contain stories and very few links. One story per content page. A multi-part story uses several content pages connected together with nextstory> and <back links, see Nurse.

index pages contain many links and little or no content. An index page links to content pages and/or other index pages. Most index pages are simple menus of story titles, lists of links to content pages. The special index pages are described below.

a collection contain stories in content pages and index pages linking to those content pages. A simple collection, eg. Shorts, has content pages and one index page in one directory; although Frau Alpert is all over the place. A big collection, eg. offcuts, has (more) content pages in several directories and several index pages. Every collection has its own colour scheme(s).

special pages – There are a small number of special index pages which are often updated:

home page – The very important home page links to all other index pages. It links to some content pages, such as the newest, “story of the moment”, the first story in a multi-part, extracts etc. It contains a picture and snippets of stories as teasers. The top part “above the fold” should be as attractive as possible.

The home page links to all the special index pages and has no external links and no advertising (Don't go away!). It should be updated frequently.

about this site contains general information about the website, eg. copyright and the Privacy Policy. There is also an about you page.

contact – This page contain an email address as contact information and secondly a blog, newest news first. Lots of links.

links – This page contains external links to other websites that are interesting to me and perhaps to you, such as software links. Every external link opens in a new window or tab.

offcuts – A large collection of bits and pieces, miscellaneous, odds and ends, jumble, all sorts, this and that, odds and sods, left overs, sundries, other bits, bits and bobs, titbits, snippets, words, pictures, tips, recipes. Some are even stories, most are what Big Tone would call “Pieces Of Nonsense”. Try offcuts for the newest offcuts and index of titles. Lots of links.

picture gallery – The picture galleries contain (small versions of the) pictures which link to the content pages containing the pictures. Click on a picture instead of text!

site map is a simple list (menu) of all collections and multi-part stories.

other stuff

advertising – Most of the index pages (but not the home page) carry advertising and a few very popular content pages such as GN-words.

external links – Some pages carry links to other websites (but not the home page). Every external link opens in a new window or tab.

German content – Some pages are entirely in German, other pages have parts in German (possibly marked with German flag icons). There is a German index page that contains all the German titles. The HTML-tags lang="de" and lang="en" are used to mark German and English text.

internal links – All internal links are relative, this enables local usage without a local web server (such as Apache). Most links (and images) have titles.

pictures – Many of the pages carry pictures (pix, images, graphical data etc.). These are mostly peculiar photos made with a cheap digital camera – I sometimes use a big white sheet and a tripod (Thanks Roger!). See note on hotlinking.

image manipulation – The pictures are cropped, manipulated, reduced in pixel size to suit a PC screen, and saved as reduced definition JPEG-format files (using GIMP). Some pictures are drawn with GIMP and saved as GIF-format files, see icons for more details.

technical stuff – There is a small heterogeneous group of files that the user does not normally see, pages to catch errors (especially the 404 “not found” error), pages to catch users looking where they do not need to (eg. every directory must have an index page), and text files to help search machines etc.



top
index
offcuts
  web design from the StoryKettle.com
Copyright © 2010, Michael M Wayman
  home
site map
contact me
next>