Charles A Upsdell
Website Design
Colophon
This is the colophon for the www.upsdell.ca site.
This discusses issues related to the site design which may affect how the site appears:
This site was created and is maintained by Charles A. Upsdell.
Definition: “colophon: (a) an inscription at the end of a book or manuscript usually with facts about its production; (b) an identifying mark used by a printer or a publisher” — Merriam-Webster Dictionary
Page Layout
This section gives an overview of the page layout.
Because the layout depends somewhat on how well a browser honours the browser standards, better browsers render pages more faithfully. The following information is therefore prescriptive, not descriptive.
Displayed Web Pages
Page Size
The page width depends on the width of the browser window: the preferred width is 64 em units; but if this would be wider than the browser window, the width is reduced to fit within the window. The user should never have to scroll horizontally unless they browse with a device having a tiny screen, such as a cellphone or tablet, and even then the need to scroll horizontally is reduced by content that dynamically adapts to small screens.
Because an em unit is the height of a character in the user’s preferred font size, the preferred 64 em page width is wider if the user’s preferred font size is larger, and narrower if their font size is smaller. As a result, about the same number of characters will appear on each line, regardless of the font size, whenever the browser window is wide enough for the preferred page width.
Colours
Colour Theme
The colour theme is black, white, gold, and midnight blue.
Text Colours
Body text is black. Header text is gold.
Link Colours and Icons
Links to pages in the www.upsdell.ca domain are coloured medium blue (if not visited) or medium dark magenta (if visited). Links to other domains are coloured bright blue (if not visited) or vivid orchid (if visited). Blue-ish and purple-ish colours were chosen to conform to internet standards.
Text links are followed by the icon 
.
Exception 1: links to www.upsdell.ca,
www.upsdell.com, and
www.amazon.com lack the icon.
Exception 2: links to PDF, Word, and Excel documents are followed instead by 
,
, and 
, respectively.
Exception 3: links to Adobe, Apple, GitHub, Google, Microsoft, Mozilla, SourceForge, Unicode.org, W3.org, Wikipedia, and ZDnet pages are followed instead by
,
,
,
,
,
,
,
,
,
, and
, respectively.
Fonts
Font Sizes
Text is larger if the user prefers larger fonts, and smaller if the user prefers smaller fonts.
Most body text is the user’s preferred size.
Headers are larger, sized proportionately, with the h4 header φ em units, and with each header φ1/3 the size of the next smaller header.
Font Stacks
The font used depends on which fonts are installed or embedded. The site names a list of fonts (also known as a font stack): the browser uses the first font in the list which is available for which each character exists. Fonts are chosen for compatibility with Windows, MacOS, and Linux. The lists of fonts are:
For Headers: Optima and Optima-like fonts, then Palatino and Palatino-like fonts, then common serif fonts, then the generic serif font.
Sample: A quick brown fox jumps over the lazy dog
For Normal Body Text: Verdana Pro and other easy-to-read sans-serif fonts, then common sans-serif fonts, then the generic sans-serif font.
Sample: A quick brown fox jumps over the lazy dog
For Menus: common system and system-like fonts, then common sans-serif fonts, then the generic sans-serif font.
Sample:
For Code: good or common monospace fonts, then the generic monospace font.
Sample: A quick brown fox jumps over the lazy dog
For Fancy Ampersands: fonts with good, fancy ampersands, then common serif fonts, then the generic serif font.
Sample: &
Printed Web Pages
Page Size
The size of the page depends on how the user has configured the File Print function. Browsers typically let the user specify portrait or landscape mode, the paper size, and margin sizes. Printed pages will adapt to the printer settings.
Colours
Text is printed in black and white (or shades of gray) whenever possible. Things devoid of content are not printed: e.g., the masthead, menus, and decorative graphics. This reduces print costs.
Fonts
The font size for most body text matches the user’s preferred font size, with any smaller text being a tad smaller. Headers are sized proportionately.
The fonts used are the same as those of the displayed pages.
Content Issues
Spelling
This site uses Canadian English.
This site uses the diæresis diacritical mark, when appropriate, e.g. in the word reüse.
This site uses the grave diacritical mark, when appropriate, e.g. in the word markèd.
Header Sizes
Header sizes in this site are based on φ: e.g. the size of h6 headers is the size of normal body text, and the size of any other header is φ1/3 times the size of the next smaller header. Hence h3 headers are φ (⁓1.618) times the size of normal body text.
Special Blocks
Special blocks with notes appear specially formatted, e.g.:
Notes: special notes appear in blocks like this.
JavaScript Issues
Some pages have content that can only be generated dynamically. This is done using JavaScript, so Javascript must be enabled for this site to work fully: however, with JavaScript disabled, the site is still usable, and in fact you are unlikely to notice any lack unless you had previously visited the site with JavaScript enabled.
Dynamic content is generated, for the most part, by Javascript supported by even ancient browsers.
Browser Issues
Different browsers will inevitably display pages somewhat differently, with newer browsers displaying pages better than older, more primitive browsers. Modern standards-compliant browsers — Brave, Chrome, Edge, Firefox, Safari, SeaMonkey, Opera, and Vivaldi — will display pages nearly identically. And even many ancient browsers will display pages quite well, because: 1 although this site uses modern features, it does not depend on these features to work well; and 2 this site was created many years ago when browser support was poor and very uneven, and this site still contains special code to cater to ancient browsers.
Pages comply with the W3C xHTML 4.01 and CSS 3 standards. Exception: the CSS validator may complain about missing CSS files; these are files used only for local testing, and are not uploaded to the site. Exception: the Legal Notices page also uses dynamic xHTML 5 if your browser supports it, but is quite usable without xHTML 5 support.
