on the page

A simple and static HTML page format.

StoryKettle » Notes » on the page

Copyright © 2010-2016, 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, simple CSS, no Java scripts, nothing dynamic. Each page is a file in HTML-format with four major parts:

HTML-head
similar meta data for every page
header
similar for every page, top of HTML-body
contents
different for every page, most of HTML-body
footer
similar for every page, bottom of HTML-body

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.

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. 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.

TIP – Please examine some content pages first; they are far simpler structually than the index pages. The home page is the most complex.

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> 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 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.

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

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.

links – This page contains external links to other websites that are interesting to me and perhaps to you, such as software 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!

other stuff

advertising – Most of the index pages carry advertising.

external links – Some pages carry links to other websites (but normally not the home page). Every external link carries the title "External link." (German "Externer Link."). See note on hotlinking.

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  Deutch 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.

UPDATE 2015 – I decided to make the website usable for smart/mobile phone users and simplify/consolidate all the pages. This meant dropping the old-fashioned blind-table technique and using more CSS.

The pages must display on big screens (1280x1024 and more), but also on mobiles (320x480 and more). This is possible with view-ports and more CSS. It requires more testing.

There is usually one CSS-file per directory. There are now less than twenty-five tables in use in over 800 HTML-pages. The Story Kettle icon appears in exactly the same position in the top-left corner of every page; this is important.