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 four 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, 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 |
| 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 |
| # | 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 created, or the current date for anything else, followed by the approximate elapsed duration since then |
| 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 |
| 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:
- aThe target is an external site, such as for Related sites or an inline link in an article.
- bThe Search page as a result of typing into the Text field of the Search section at the bottom of any public site page.
- cManagement help pages, by clicking on a 🛈.
- dThe 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 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 navigation bars |
| 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 for 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:
- aPressing Tab when at the top of the page shows a link to the article header, bypassing the subsite navigation bar.
- bCheckboxes 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.
- cList item bullets link to the first character of the list's introduction.
- dIf a table has row numbers or letters, they link to their # column head, if there is one.
- eIf 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.
- fArticle 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 top of the page.
- gEntry headings in Glossary pages link to the top of the page.
- hThe △ 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 top of the page.
- iThe △ 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 top of the page.
- jIn 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).
- kProcedure article substep numbers link to their step number, which links to the Steps section heading.
- lTest article question options link to their question number, which links to the Questions section heading.
- mIn 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.
- nIn 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.
Accessibility△
Smallsite Design provides several facilities to help those who have disabilities, without interfering with those who do not.
The accessibility facilities provided are:
- aA checkbox (♿) on each page's top navigation bar to switch to turn on accessibility mode for those with visual or perceptual difficulties.
- bBackgrounds to all page elements are all of the one hue to minimise possibly clashing colour combinations.
- cExtensive extra links on all pages for keyboard navigation.
- dHidden ARIA labels for screen readers where symbols are used to minimise space.
- eWhen 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 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:
- aChanges text alignment from justified to make the ending edge ragged.
- bUnderlines links and jumps.
- cIncreases line spacing from 20% to 40%.
- dTurns off automatic hyphenation, but not those manually added.
- eChanges the page background for non-Dark themes to a light grey to reduce glare.
- fAll links include the current accessibility mode so navigating around the site maintains the mode.
- gUsers with login access can specify their personal accessibility mode to be used across all management pages.
- hFor sites dedicated to those with visual difficulties, the whole public site can be set to have disability mode on, though a visitor can turn it off for their session, and users with login access retain their personal mode.
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:
- aEach page's footer shows the copyright holder's name, and the author's name if different.
- bThe 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.
- cEach 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.
- dThe 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:
- aBy 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.
- bUnless 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.
- cThe copyrights for the material supplied with Smallsite Design are independent of those for the owner of the site and the material they provide.