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:
I use a fairly conservative HTML-format for all the pages, no frames, simple CSS, no Java scripts, nothing dynamic. Each page is a file in HTML-format with four major parts:
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 page contents are the part which differs for each page.
The page footer is fairly standard – customised for colour, index link, year of copyright, optional nextstory➤ 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.
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. Do not confuse the HTML-head with the page header. 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” in the HTML-head. The first title should be 18-90 characters long.
The second on-the-page title “pig” is a h1-tag in the page header.
The third is the last part of the breadcrumbs in the page header.
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 first description should be 50-200 characters long.
The second on-the-page short description “Just sometimes the word pig.” is a h2-tag in the page header.
Keywords are meta data in the HTML-head. The keywords should be 30-200 characters long.
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➤ 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. Every directory (folder) has at least one index page. 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 should have 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 most 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 the special index pages and has no external links, other than advertising (Don't go away!). It should be updated frequently.
site map is a list (menu) of all collections and multi-part stories, it links to all other index pages.
The following special index pages have grown rapidly in size. Each has been split into archive pages, which are seldom changed, and one active page.
contact – This page contain an email address as contact information and secondly a blog, newest news first. Lots of links.
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!
advertising – Most of the index pages carry advertising.
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 respectively.
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.