To main heading

Smallsite Design

Online visitor help

1Common page elements

Except for the main content, all Smallsite Design pages share the same elements.

Top of the page

The top of a page is the first part of page seen, so it contains significant information about the page and its context.

The areas of the top matter of a Smallsite Design page are:
Top of a sample Smallsite Design pageabcdef
aBannerSubsite banner, meant for branding information to be seen across all pages for the subsite. Locales and other subsites can use all, part or none of the main subsite's banner
bArticle headerContains the article headline and optional byline
cIntroductionParagraph giving an idea of what the page is about
dSubsite navigation barVarious links for navigating around the subsites
eCategory navigation barLinks to the Categories page, the Category page for the current category, and the previous and next pages in a numerically ordered category. Only shown for an article page in a non-default category
fArticle navigation barLinks to sections of the article, if any
gSection navigation barLinks to subsections of the section, if any. Not shown here, but looks similar to those for sections

Banners and article headers scale with the width of the page, so their elements stay in the same spatial relationship to each other and won't suddenly wrap around at narrow widths.

The links on the subsite navigation bar are:
a♿ ☐Accessibility: Toggles display of link underlines and non-justification of text for the remainder of the session
bHomeHome page of the subsite if not on it
cOptionalUp to five significant internal or external links for pages that visitors may want to fast-track to
dCategoriesCategories page, unless all categories for the subsite are already in the Optional links
eSubsitesSubsites page that lists all the subsites. Only shown if there are multiple subsites
fsubsite nameTo the named subsite's home page, unless it is the current one. Only shown if there are multiple subsites
gLinksLinks section of page

The accessibility checkbox, like all checkboxes in Smallsite Design, includes a label that can also be clicked to change the checkbox state in addition to clicking on the checkbox itself.

Article footer

The article footer contains related links, footnotes, and meta-data about the article.

The items found in the article footer are:
Sample article footerabcde
aCategory navigationLinks to the named previous and next articles for a numerically ordered category
bRelated articlesLinks to related articles and categories from the site. Those for an article appear first, followed by those for its subsite. Maximum of five shown
cFootnotesList of footnotes for the article, if any
dPage meta-dataVarious contextual information about the page
eRelated sitesLinks to related pages from external sites. Those for an article appear first, followed by those for its subsite. Maximum of five shown
The various items of meta-data about the page are:
1CopyrightFull name of the copyright holder, optionally as a link to their website if different from the current one
2RegistrationName: ID. Optional registration information, such as a business license number
3AuthorAuthor of the current page if different from the copyright holder, as a link to their website if available
4RightsWhat rights the copyright owner holds over their content of the site, optionally as a link to a document describing the rights. Note that copyrights for the Smallsite Design framework itself are separate from the site owner's
5CreatedDate the article was created, followed by the approximate elapsed duration since then, or the current date for anything else
6UpdatedDate of the viewed release of the article, followed by the approximate elapsed duration since then
7LocaleCurrent locale, with a link to the Locales subsection of the page if more than one locale
8Keyboard shortcutsLink to the Keyboard shortcuts section of this page


Elapsed durations are shown in a compact form to minimise space.

There are two ways to show dates and times: absolute as per a calendar and clock, or as the duration between now and then. For articles, which have both creation and update dates (and hidden times), knowing the durations elapsed since those can be useful for gauging whether they are still current enough to read. Durations are also more useful than absolute when comparing dates.

Durations don't have to be accurate to be useful, so they are shown as a number of time units with the unit being shown as the first letter of the English word for the unit. This makes them compact and fast to read, especially since some languages don't use abbreviations for time durations, which would make them far less compact. The numbers are rounded down to the largest whole number for the largest duration unit smaller than the actual duration. The durations are as at the time the page was accessed, and will not change until the page is refreshed.

The unit letters and durations are:
assecond35sAt least 35 seconds ago, but less than 36
bmminute24mAt least 24 minutes ago, but less than 25
chhour3hAt least 3 hours ago, but less than 4
ddday4dAt least 4 days ago, but less than 5 days
ewweek48wAt least 48 weeks ago, but less than 49
fyyear2yAt least 2 years ago, but less than 3

This section contains various links and functional blocks.

The subsections of the Links section are:
1Latest articlesLinks to the up to three latest articles in the current subsite, latest first. The heading opens the Latest articles page for the current subsite
2Site linksGroups of links for:
Custom subsite – optional utility articles providing subsite information.
Subsite-specificContact, Glossary and Policies, if they exist and are enabled.
OtherCategories, Feed and Site map
3SearchText entry for searching the site. Results will be displayed in the Search page. Click the Exact checkbox to search for the exact phrase
4LocalesList of links to locale-specific versions of the page. Only shown if more than one locale

Latest articles will only include non-subsite-specific articles, and excludes the current article.

While search engines profess to scan the web, Google will typically completely ignore 70-96% of a website, except for the most popular. This can be checked by searching for the domain name for a site prefixed with site:. This should list all pages that have not been blocked from being searched, but doesn't. Bing used to be better at only 50-60% ignored, but as of August 2023 lists 100%, with no 200 pages limit that Google imposes. Smallsite Design's search facility will show all pages that include all the search words, ordered by those with most numerous occurrences first.

Smallsite Design opens external sites in another browser window/tab to facilitate visitors not losing their current place on the site.

Links can have a HTML target attribute that specifies where a page is opened. If the attribute doesn't exist, the target page replaces the current page, which is normally fine as that is what visitors would expect. However, there are some situations where that would unduly interrupt the reading or work flow.

The situations where Smallsite Design will open link targets in another window/tab are:

  1. a.The target is an external site, such as for Related sites or an inline link in an article.
  2. b.The Search page as a result of typing into the Text field of the Search section at the bottom of any public site page.
  3. c.Management help pages, by clicking on a .
  4. d.The link in the Name/Headline/Heading row of the Details section of the Subsite/Article head/Category page for an article/category in management.

In Smallsite Design, all links to external pages open in a new tab|window by default, and are formatted like external link to distinguish them from an internal link. However, the search facility at the bottom of each page also opens the resulting Search page in a new tab|window, though any searches on that page will not, and any links in its search results will not.

Keyboard shortcuts

There are a few keyboard shortcuts available within Smallsite Design.

The keyboard shortcuts available on any page are:
aAny*Toggles accessibility mode, where links are underlined, page backgrounds greyed, and paragraphs are non-justified to help the visually impaired
bAny!Sets the focus to the page headline as a way of bypassing the subsite navigation bar
cAny?Opens the online help page for the current page
dNon-home=Opens the home page for the current subsite. For management pages, it will be to the main subsite
eAny public&Opens the Latest articles page, if any articles for the subsite
fAny public\Opens the login page
The keyboard shortcuts only available in the management pages are:
aWork list\Opens the last non-Work list management page accessed. If for an Article body page, the element block for the last edit will be opened
bNon-Work list\Opens the Work list page
cManagement~Safely refreshes the current management page
dArticle head_Activates the History button to jump to the History page
eArticle head@Activates the Update button to jump to the History page, ready to assign a task
fArticle head, History&Activates the Latest button to jump to the Article body page for the latest version
gHistory@If the Update button is displayed, activates it to allow a task to be assigned
hHistory@If the latest version is a WIP, activates the Draft button of its row to make it a draft
iHistory@If one of a Written, Translated, Edited or Reviewed buttons is displayed, activates it to go to that phase
jHistory@If the All done button is displayed, activates it to allow release
kHistory@If no All done button is displayed, but any Done buttons are, activates the first to mark its locale as complete. Repeat as required
lHistory@If the Release button is displayed, activates it to release the article
mHistory#If any Purge buttons are displayed, activates the latest to delete that release and any drafts that led up to it. Repeat as required
nArticle body _ Toggles whether the selection areas of hover buttons are indicated by a partially-transparent green background. Click or touch the background to directly select the element
oArticle body#Toggles whether the hover buttons of all the children of the current element are displayed. Deletable children will have a starting checkbox in their hover button
pArticle body&Goes to the spikes table if shown
qArticle body@Goes to the element block of the current element being edited. If no other element is being edited, goes to the Article element
rArticle body^Opens the editing block of the current element's parent
sArticle body*Submit the currently active form. Only for a field with a * after its button

Which keys need to be pressed and held while pressing the shortcut key will depend upon the browser and operating system used. The Alt | option key is always required, but the Shift key may be required if it is used in normal typing to get the shortcut key. Firefox always requires the Shift key. Keyboards for some languages may not have all these keys available, and so might need an onscreen US-style keyboard to use them.

In general, shortcut keys are not recommended because they may interfere with assistive technology keyboard shortcuts. However, they usually use letters, while Smallsite Design uses these symbols exclusively, so there should be no conflicts, unless the assistive software's default shortcuts have been changed to use some of them.

Keyboard navigation

There are many links to help those who want to navigate by keyboard.

The links for keyboard navigators are:

  1. a.Pressing Tab when at the top of the page shows a link to the article header, bypassing the subsite navigation bar.
  2. b.Checkboxes and radio buttons have an adjacent label whose text can be clicked to activate the control in addition to clicking on the control itself. The only exception is the delete checkbox in hover buttons due to the limited space.
  3. c.List item bullets link to the first character of the list's introduction.
  4. d.If a table has a numbering column, each cell of it links to the first character of the table's introduction.
  5. e.If a figure has labels, the labels are bidirectional links to the letters of the row or item of the table or list that has the same Prefix field.
  6. f.Article glossary entry headings link to the first character of the glossary's introduction.
  7. g.If there are five or more entries in a glossary or catalog, there will be a link to every fifth entry at the end of the introduction.
  8. h.Entry headings in glossary pages link to the article header.
  9. i.The at the end of some introduction lines link to their section or page header.
  10. j.The at the end of every third catalog entry heading line links to the first character of the catalog introduction.
  11. k.In potentially large lists, like for glossary pages, when there are more than five items, a navigation bar will show the total number of items, followed by a link to every fifth item. In management pages, such links are hidden until exposed by checking the total checkbox to reduce the number of keystrokes until needed, unless there are less than 15 items (only two links).
  12. l.Procedure article substep numbers link to their step number, which links to the Steps section heading.
  13. m.Test article question option letters link to their question number, which links to the Questions section heading.
  14. n.In management pages where there are lists, there will periodically be a link to get back to the start of the list or its owner. Most of those lists are hidden until a 👇 checkbox is clicked, so that they are easy to skip over by keyboard.
  15. o.In management pages, for actions that are not easily recoverable, if at all, instead of a single button or a dialog box, a checkbox is shown. Clicking that reveals another, which when clicked reveals a Confirm button, which is then clicked to perform the action.
  16. p.The Submit button under some edit boxes will have a * after it. It indicates that while that text box is open, pressing Alt | option+Shift+* will save the current contents, regardless of whether it is currently in view. There is only ever one such button on a page.

Useful tips

While not all exclusive to Smallsite Design, these tips may help with doing things more smoothly.

Some useful actions are:

  1. a.Some browsers suggest text as typing proceeds. Pressing Tab will include the text. If not wanting the text, this presents a problem in multi-line textboxes because the only way to save the content using a keyboard is to tab to the Submit button, thereby including the text. Press Esc before that to clear the unwanted text.
  2. b.Editing controls exist in a HTML form element, and as long as all fields or selections in them have values, pressing Enter | return will submit the form. Each task on the History page has its own form with default selections, so tabbing to the Users checkbox for a task and clicking Enter | return will assign the master manager to that task for four weeks. This will help sole operators bypass having to tab through the options.
  3. c.In most browsers, clicking Home will go to the top of the page, and End to the bottom. This helps those using a mouse quickly get to those areas, but it doesn't help keyboard users as the focus doesn't change, so tabbing, moving down by menu navigation links, and up by the links to get to get around the page is still required. Pressing Alt | option+Shift+! goes straight to the article heading.
  4. d.Double-clicking a word will automatically include any spaces that follow, but moving the mouse slightly towards the start of the word before releasing the mouse button of the second click will let go of the spaces.
  5. e.When clicking in text, moving the cursor before releasing the mouse button will continue the selection, but when moving the mouse before releasing the button of the second click of a double will extend the selection by a word at a time.
  6. f.Triple-clicking selects a whole paragraph, and moving the mouse before releasing the third click will extend the selection by a paragraph at a time. Takes a little getting used to the timing though.


Smallsite Design provides several facilities to help those who have disabilities, without interfering with those who do not.

The accessibility facilities provided are:

  1. a.A ♿ checkbox at the start of each page's subsite navigation bar to toggle accessibility mode for those with perceptual difficulties.
  2. b.Colours and backgrounds for the main page elements are all of the one hue to minimise possibly clashing colour combinations, though headings can have their backgrounds accented with minor off-hue shifts for effect.
  3. c.Extensive extra links on all pages for keyboard navigation.
  4. d.Hidden ARIA labels for screen readers where symbols are used to minimise space.
  5. e.When a page is opened, pressing Tab then Enter | return puts focus to the page's main heading.

The accessibility mode is mainly for those with adverse sensitivities to many spatial design artifacts that most find preferable. It will not be suitable for those with severe sensitivities or visual impairments who should continue to use their preferred accessibility software or browser plugins to override page CSS settings with those that suit them better.

When enabled, accessibility mode:

  1. a.Changes text alignment from justified to make the ending edge ragged.
  2. b.Underlines links and jumps.
  3. c.Increases line spacing from 20% to 50%
  4. d.Turns off automatic hyphenation, but not those manually added using embedded characters.
  5. e.Changes the page background for non-Dark themes to a light grey to reduce glare.

Some extra facilities for accessibility are:

  1. a.All links include the current accessibility mode so navigating around the site maintains the mode.
  2. b.Users with login access can specify their personal accessibility mode to be used across all management pages.
  3. c.For sites dedicated to those with perceptual difficulties, the whole public site can be set to have accessibility mode on, though a visitor can turn it off for their session, and users with login access retain their personal mode.
  4. d.For links to other Smallsite Design sites, if their URLs have been defined with a path ending in /-/, the current locale and accessibility mode will be included in the URL so that the visitor experience is consistent between them.

For those wanting to bookmark pages with accessibility mode on, turn it on and then save the page as a bookmark.

Smallsite Design provides multiple means of showing copyright holder names.

In most jurisdictions, copyright exists as soon as a work is created, regardless of whether it is published (publicly revealed) or not, or whether it has a © and a name. Copyright is about control of the form and mediums in which the covered material is available. The laws backing copyright are designed to give the copyright holder time to earn a living out of their work, among other benefits, before the rights revert to the public domain for the benefit of all of humanity.

While technically not relevant here, unfortunately many trade agreements, especially under pressure from the US, have incorporated extended copyright terms, withholding widespread public benefit for generations. Such terms have often been at the behest of media organisations that spent decades exploiting creators through manipulative contracts.

Note that copyrights are separate from moral rights, which are about ensuring that the rightful creator of a work is identified, regardless of who may currently own the copyrights. They can usually only be revoked in writing by the creator, such as when contracting out their labour, and there is an explicit clause in the contract that revokes their moral rights. They came about because the same media organisations used to nominate authors of works who did not create them.

It is exactly because of this long history of abuse of creators that Smallsite Design facilitates exposing the names of authors and copyright holders by:

  1. a.Each page's footer shows the copyright holder's name, and the author's name if different.
  2. b.The author's name is that for the page, else the subsite, else the site. If the author is a current authorised user of the site and has a website that is not the current site, their name may be a link to it.
  3. c.Each file stored on the site can have the copyright owners name and an external URL or article to be used to link to the owner of the file.
  4. d.The copyright holders name, as a link if able, is usually under each instance of a file's use on a site. Regardless of whether shown under an image, its alt attribute in the page's HTML ends with © and the holder's name. For any other media, the holder's name is in its data-copyright attribute.[1]

Note that:

  1. a.By default, the copyrights for all pages are fully reserved by the holder. However, on a per subsite basis, more liberal usage may be configured, with the copyright notice in the page's footer nominally indicating their nature, possibly with a link to their governing clauses, typically to Creative Commons pages.
  2. b.Unless explicitly stated, all other copyrights are assumed to be owned by the copyright holder cited in the page footer. If any copyrights seem to be misstated, there should be a report option on the Contact page to notify the site owner.
  3. c.The copyrights for the material supplied with Smallsite Design are independent of those for the owner of the site and the material they provide, and are all reserved by the licensor.
  • Glossary page
  • Subsites page
  • Site structure
  • Contact   Glossary   Policies
  • Categories   Feed   Site map

  • This site doesn't store cookies or other files on your device when visiting public pages.
    External sites: Open in a new tab or window, and might store cookies or other files on your device. Visit them at your own risk.
    Powered by: Smallsite Design©Patanjali Sokaris