1 Common 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.
# | 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 |
g | Section navigation bar | Links 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.
# | Link | Target |
---|---|---|
a | ♿ ☐ | Accessibil |
b | Home | Home page of the subsite if not on it |
c | Optional | Up to five significant internal or external links for pages that visitors may want to fast-track to |
d | Categories | Categories page, unless all categories for the subsite are already in the |
e | Subsites | Subsites page that lists all the subsites. Only shown if there are multiple subsites |
f | subsite name | To the named subsite's home page, unless it is the current one. Only shown if there are multiple subsites |
g | Links | Links section of page |
h | 🔍 | Text field in the |
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 |
---|---|---|
a | Copyright | Full name of the copyright holder, optionally as a link to their website if different from the current one |
b | Registration | Name: ID. Optional registration information, such as a business license number |
c | Author | Author of the current page if different from the copyright holder, as a link to their website if available |
d | 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 |
e | Created | Date the article was created, followed by the approximate elapsed duration since then, or the current date for anything else |
f | Updated | Date 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 |
g | Locale | Current locale, with a link to the Locales subsection of the page if more than one locale |
h | Keyboard shortcuts | Link to the Keyboard shortcuts section of this page |
i | Show | Shows the shortcut keys available on the page like ⧆ over the end of the elements that they trigger |
j | Help | Link 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.
# | 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: |
3 | Search | Text entry for searching the site. Results will be displayed in the Search page. Click the |
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 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
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
- 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.Help pages, by clicking on the
Help link at the bottom of public pages, or the ℹ in management pages. - d.The link in the
Name /Headline /Heading row of theDetails 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.
# | Page | Key | Description |
---|---|---|---|
a | Any | + | Toggles accessibil |
b | Any | - | Shows all the access keys for the current page in overlays like ⧆ where they apply. The |
c | Any | ! | Sets the focus to the page headline as a way of bypassing the subsite navigation bar |
d | Any | : | Sets the focus to the copyright footer |
e | Any | ? | Opens the online help page for the current page |
f | Non-home | = | Opens the home page for the current subsite. For management pages, it will be to the main subsite |
g | Any public | & | Opens the Latest articles page, if any articles for the subsite |
h | Any public | \ | Opens the login page |
# | Page | Key | Description |
---|---|---|---|
a | Work list | \ | Opens the last non- |
b | Non-Work list | \ | Opens the |
c | Management | ~ | Refreshes the current management page so that it retains its look and focus |
d | Management | < | Usually activates the final jump back to the |
e | Any page with fields | * | Save the currently active form. Only for a field with a * after its button |
f | Article head | _ | Activates the |
g | Article head | @ | Activates the |
h | Article head, History | & | Activates the |
i | History | @ | - If the - If the latest version is a WIP, activates the - If one of a - If the - If no - If the |
j | History | # | If any |
k | Article 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 |
l | Article 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 |
m | Article body | & | Goes to the spikes table if shown |
n | Article body | @ | Goes to the element block of the current element being edited. If no other element is being edited, goes to the |
o | Article 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
In general, shortcut keys are not recommended because they may interfere with assistive
Keyboard navigation△
There are many links to help those who want to navigate by keyboard.
- 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.The △ at the end of every third article glossary entry heading line links to the first character of the glossary's introduction.
- 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.
- h.Entry headings in glossary pages link to the article header.
- i.The △ at the end of some introduction lines link to their section or page header.
- j.The △ at the end of every third catalog entry heading line links to the first character of the catalog introduction.
- 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).
- l.Procedure article substep numbers link to their step number, which links to the
Steps section heading. - m.Test article question option letters link to their question number, which links to the
Questions section heading. - 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.
- 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. - p.The
Save button under some edit boxes will have a * after it. It indicates that while that text box is open, pressingAlt | 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. - q.There can be a lot of links in the
Links section to tab through. To minimise that, use the 🔍 in thesubsite 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.
- 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 theSave button, thereby including the text. PressEsc 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 theUsers checkbox for a task and clickingEnter | return will assign the master manager to that task for four weeks. This will help sole operators bypass having to tab through the options. - c.In most browsers, clicking
Home will scroll to the top of the page, andEnd 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, pressAlt | option +Shift +! to go to the article heading, andAlt | 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. - 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.
- 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 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.
- 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 thenEnter | 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.
- a.Changes text alignment from justified to make the ending edge ragged.
- b.Underlines links in the body of articles (not in what are obviously link-filled areas nor management pages).
- c.Increases line spacing from 20% to 50%
- d.Turns off automatic hyphenation, but not those manually added using embedded
character s. - e.Adds a grey tint to the page background for non-Dark themes to reduce glare.
- a.All links include the current accessibility mode so navigating around the site maintains the mode.
- b.Users with login access can specify their personal accessibility mode to be used across all management pages.
- 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.
- 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.
Copyright△
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.
- 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 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 itsdata-copyright attribute.[1] - e.If specified, the copyright holder's name is a link to their source page for the file.
- 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 a privacy or IP infringement on page 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, and are all reserved by the licensor.