1. Common 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.
| # | Area | Description |
|---|---|---|
| a | Banner | Subsite 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 |
| b | Article header | Contains the article headline and optional byline |
| c | Introduction | Paragraph giving an idea of what the page is about |
| d | Subsite navigation bar | Various links for navigating around the subsites |
| e | Category navigation bar | Links 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 |
| f | Article navigation bar | Links to sections of the article, if any |
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.
| # | Link | Target |
|---|---|---|
| 1 | ♿ ☐ | Accessibility: Toggles display of link underlines and non-justification of text for the remainder of the session |
| 2 | Home | Home page of the subsite if not on it |
| 3 | Optional | Up to five significant internal or external links for pages that visitors may want to fast-track to |
| 4 | Categories | Categories page, unless all categories for the subsite are already in the Optional links |
| 5 | Subsites | Subsites page that lists all the subsites. Only shown if there are multiple subsites |
| 6 | Subsite | To the named subsite's home page, unless it is the current one. Only shown if there are multiple subsites |
| 7 | Links | 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.
| # | Area | Description |
|---|---|---|
| a | Category navigation | Links to the named previous and next articles for a numerically ordered category |
| b | Related articles | Links to related articles and categories from the site. Those for an article appear first, followed by those for its subsite. Maximum of five shown |
| c | Footnotes | List of footnotes for the article, if any |
| d | Page meta-data | Various contextual information about the page |
| e | Related sites | Links to related pages from external sites. Those for an article appear first, followed by those for its subsite. Maximum of five shown |
| # | Item | Description |
|---|---|---|
| 1 | Copyright | Full name of the copyright holder, optionally as a link to their website if different from the current one |
| 2 | Registration | Name:ID. Optional registration information, such as a business license number |
| 3 | Author | Author of the current page if different from the copyright holder, as a link to their website if available |
| 4 | Rights | What 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 |
| 5 | Created | Date the article was created, followed by the approximate elapsed duration since then, or the current date for anything else |
| 6 | Updated | Date of the viewed release of the article, followed by the approximate elapsed duration since then |
| 7 | Locale | Current locale, with a link to the Locales subsection of the page if more than one locale |
| 8 | Keyboard shortcuts | Link to the Keyboard shortcuts section of this page |
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 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.
| # | Letter | Unit | Example | Meaning |
|---|---|---|---|---|
| a | s | second | 35s | At least 35 seconds ago, but less than 36 |
| b | m | minute | 24m | At least 24 minutes ago, but less than 25 |
| c | h | hour | 3h | At least 3 hours ago, but less than 4 |
| d | d | day | 4d | At least 4 days ago, but less than 5 days |
| e | w | week | 48w | At least 48 weeks ago, but less than 49 |
| f | y | year | 2y | At least 2 years ago, but less than 3 |
Links△
This section contains various links and functional blocks.
| # | Name | Description |
|---|---|---|
| 1 | Latest articles | Links to the up to three latest articles in the current subsite, latest first. The heading opens the Latest articles page for the current subsite |
| 2 | Site links | Groups of links for: Custom subsite – optional utility articles providing subsite information Subsite-specific – Contact, Glossary and Policies, if they exist and are enabled Other – Categories, Feed and Site map |
| 3 | Search | Text entry for searching the site. Results will be displayed in the Search page. Click the Exact checkbox to search for the exact phrase |
| 4 | Locales | List of links to locale-specific versions of the page. Only shown if more than one locale |
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.
External links△
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:
- a.The target is an external site, such as for Related sites or an inline link in an article.
- 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.
- c.Management help pages, by clicking on a 🛈.
- 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.
| # | Page | Key | Description |
|---|---|---|---|
| a | Any | * | Toggles accessibility mode, where links are underlined, page backgrounds greyed, and paragraphs are non-justified to help the visually impaired |
| b | Any | ! | Sets the focus to the page headline as a way of bypassing the subsite navigation bar |
| c | Any | ? | Opens the online help page for the current page |
| d | Non-home | = | Opens the home page for the current subsite. For management pages, it will be to the main subsite |
| e | Any public | \ | Opens the login page |
| # | Page | Key | Description |
|---|---|---|---|
| a | Work list | \ | Opens the last non-Work list management page accessed |
| b | Non-Work list | \ | Opens the Work list page |
| c | Management | ~ | Safely refreshes the current management page |
| d | Article body | _ | Toggle 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 |
| e | Article body | # | Toggle 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 |
| f | Article head | @ | Activate the Update button to jump the the History page, ready to assign a task |
| g | Article body | @ | Jump to the element block of the current element being edited |
| h | Article body | & | Go to the spikes table if shown |
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.
Keyboard navigation△
There are many links to help those who want to navigate by keyboard.
The links for keyboard navigators are:
- a.Pressing Tab when at the top of the page shows a link to the article header, bypassing the subsite navigation bar.
- 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.
- c.List item bullets link to the first character of the list's introduction.
- d.If a table has a numbering column, each cell of it links to the first character of the table's introduction.
- 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.
- f.Article glossary entry headings link to the △ at the end of the glossary's introduction, which in turn is a link to the glossary's owner, being the nearest section heading or the article header.
- g.Entry headings in Glossary pages link to the article header.
- h.The △ at the end of catalog entry heading lines link to the △ at the end of the catalog's introduction, which in turn links to the article header.
- i.The △ at the end of glossary type entries, or whatever might be there instead, like in categories, link to the first entry, which then links to the article header.
- j.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).
- k.Procedure article substep numbers link to their step number, which links to the Steps section heading.
- l.Test article question options link to their question number, which links to the Questions section heading.
- m.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.
- n.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.
Useful tips△
While not all exclusive to Smallsite Design, these tips may help with doing things more smoothly.
Some useful actions are:
- 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.
- 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 a lot of keystrokes.
- 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 eventually get to the article heading is still required. Pressing Alt | option+Shift+! goes straight to the article heading.
- 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.
- 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.
- 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.
Accessibility△
Smallsite Design provides several facilities to help those who have disabilities, without interfering with those who do not.
The accessibility facilities provided are:
- a.A ♿ checkbox at the start of each page's subsite navigation bar to toggle accessibility mode for those with perceptual difficulties.
- 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.
- c.Extensive extra links on all pages for keyboard navigation.
- d.Hidden ARIA labels for screen readers where symbols are used to minimise space.
- 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:
- a.Changes text alignment from justified to make the ending edge ragged.
- b.Underlines links and jumps.
- c.Increases line spacing from 20% to 50%.
- d.Turns off automatic hyphenation, but not those manually added using embedded characters.
- e.Changes the page background for non-Dark themes to a light grey to reduce glare.
- f.All links include the current accessibility mode so navigating around the site maintains the mode.
- g.Users with login access can specify their personal accessibility mode to be used across all management pages.
- h.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.
- i.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.
Copyright△
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 exposes the names of authors and copyright holders by:
- a.Each page's footer shows the copyright holder's name, and the author's name if different.
- 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.
- 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.
- 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:
- 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.
- 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.
- 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.