To the main heading-

Smallsite Design

Online visitor help

1Common page elements

!

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

The maximum width of a browser window required to use Smallsite Design is 660 pixels. Any wider will just show more background.

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
where:
#AreaDescription
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 will not suddenly wrap around at narrow widths.

The links on the subsite navigation bar are:
#LinkTarget
a♿ ☐Accessibility: Toggles to display text as non-justified, grey-tinted backgrounds, more line-spacing and underlines of links in articles 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
h🔍Text field in the Search section of the Links 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
where:
#AreaDescription
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:
#ItemDescription
aCopyrightFull name of the copyright holder, optionally as a link to their website if different from the current one
bRegistrationName: ID. Optional registration information, such as a business license number
cAuthorAuthor of the current page if different from the copyright holder, as a link to their website if available
dRightsWhat 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
eCreatedDate the article was created, followed by the approximate elapsed duration since then, or the current date for anything else
fUpdatedDate of the viewed release of the article, followed by the approximate elapsed duration since then. Not shown if the article has never been updated since its creation
gLocaleCurrent locale, with a link to the Locales subsection of the page if more than one locale
hKeyboard shortcutsLink to the Keyboard shortcuts section of this page
iShowShows the shortcut keys available on the page like over the end of the elements that they trigger
jHelpLink to the descriptive page in this documentation for the current page. Only shown for public pages

Durations

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 do not 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 do not 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:
#LetterUnitExampleMeaning
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:
#NameDescription
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 does not. 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.

If many locales, the list in Locales will be scrollable. The locale codes link to the master locale name to bring it into view.

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 does not 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.Help pages, by clicking on the Help link at the bottom of public pages, or the in management pages.
  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 several keyboard shortcuts available within Smallsite Design.

The keyboard shortcuts available on any page are:
#PageKeyDescription
aAny+Toggles accessibility mode, where line-spacing increases, links are underlined, page backgrounds tinted grey, and paragraphs are non-justified to help the visually impaired
bAny-Shows all the access keys for the current page in overlays like where they apply. The Show link in the article footer also shows them
cAny!Sets the focus to the page headline as a way of bypassing the subsite navigation bar
dAny:Sets the focus to the copyright footer
eAny?Opens the online help page for the current page
fNon-home=Opens the home page for the current subsite. For management pages, it will be to the main subsite
gAny public&Opens the Latest articles page, if any articles for the subsite
hAny public\Opens the login page
The keyboard shortcuts only available in the management pages are:
#PageKeyDescription
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~Refreshes the current management page so that it retains its look and focus
dManagement<Usually activates the final jump back to the Work list page in the breadcrumb chain that begins the page navigation bar, but for pages only accessed from an element's page, such as Links, activates the jump back to that owning page. If the element has been deleted, activates the parent element's jump to the Work list page
eAny page with fields*Save the currently active form. Only for a field with a * after its button
fArticle head_Activates the History button to jump to the History page
gArticle head@Activates the Update button to jump to the History page, ready to assign a task
hArticle head, History&Activates the Latest button to jump to the Article body page for the latest version
iHistory@- If the Update button is displayed, activates it to allow a task to be assigned.
- If the latest version is a WIP, activates the Draft button of its row to make it a draft.
- If one of a Written, Translated, Edited or Reviewed buttons is displayed, activates it to go to that phase.
- If the All done button is displayed, activates it to allow release.
- If no All done button is displayed, but any Done buttons are, activates the first to mark its locale as complete. Repeat as required.
- If the Release button is displayed, activates it to release the article
jHistory#If any Purge buttons are displayed, activates the latest to delete that release and any drafts that led up to it. Repeat as required
kArticle 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
lArticle 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
mArticle body&Goes to the spikes table if shown
nArticle body@Goes to the element block of the current element being edited. If no other element is being edited, goes to the Article element
oArticle body^Opens the editing block of the current element's parent

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, which means that some shortcuts may not be available if the shifted key is also an access key, such as - which shifts to _. Keyboards for some languages may not have all these keys available, and so an onscreen US-style keyboard might be needed to use them.

The access keys for the current page can be displayed in overlays like where they apply by either:
  1. a.Pressing the Alt | option+- keys.
  2. b.Clicking the Show link in the footer of the page.

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 non-alphabetic characters exclusively, so there should be no conflicts, unless the assistive software's default shortcuts have been changed to use some these characters.

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.The at the end of every third article glossary entry heading line links 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 the first and 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 three 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 Save 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.
  17. q.There can be a lot of links in the Links section to tab through. To minimise that, use the 🔍 in the subsite navigation bar to get to the rough middle of the section, then tab forward or backward from there.

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 Save 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 scroll to the top of the page, and End to the bottom. This helps those using a mouse quickly get to those areas, but it does not help keyboard users as the focus does not change. Instead, press Alt | option+Shift+! to go to the article heading, and Alt | option+Shift+: to go to the copyright footer. Otherwise, tabbing, moving down by menu navigation links, and up by the links to get to get around the page is still required.
  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 unselect its following 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 practice to get used to the triple-click timing though.

Accessibility

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 in the body of articles (not in what are obviously link-filled areas nor management pages).
  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.Adds a grey tint to the page background for non-Dark themes 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.

Links are not underlined in obviously linked-filled areas like navigation bars, related links, and the Links area. They are not underlined in management pages because they are everywhere, presenting extra clutter, and users would be expected to quickly become familiar with where they are and what they look like. However, when hovered over, links and buttons will still show an underline, with links in red and buttons with a blue halo.

Smallsite Design provides multiple means of showing copyright holder names.

In jurisdictions that are signatories to the Berne Convention, 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 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]
  5. e.If specified, the copyright holder's name is a link to their source page for the file.
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 a privacy or IP infringement on page 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.
Links   Latest articles&Subsite linksSearch

This site does not store cookies or other files on your device when visiting public pages.
External sites: Open in a separate page, and might not respect your privacy or security. Visit them at your own risk.
Powered by: Smallsite Design©Patanjali Sokaris   Manage\