Charles A Upsdell

Website Design

Colophon

This is the colophon for the www.upsdell.ca site. It 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.

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 60 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 web-enabled cellphone, 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 60 em page width is wider if the user’s preferred font size is larger, and narrower if their font size is smaller. The result is that about the same number of characters appear on each line, no matter what the font size is, whenever the browser window is wide enough for the preferred page width.

Colours

The colour theme is black, white, midnight blue, and blue-grey.

Links to pages within the www.upsdell.ca domain are coloured medium blue (if not visited) or patriarch purple (if visited). Links to other domains are coloured bright blue (if not visited) or bright purple (aka magenta) (if visited).

Online text links to other domains are followed by the icon external link. Exception: text links to www.upsdell.com do not have the icon. Exception: text links to PDF documents, Microsoft Word documents, and Microsoft Excel documents are followed by the icons , , and , respectively, and links to Wikipedia pages are followed by the icon .

Offline text links to other domains are followed by the ‘⧉’ glyph, in bright blue (if not visited) or bright purple (aka magenta) (if visited). Exception: links to www.upsdell.com do not have the glyph. Exception: text links to PDF documents, Microsoft Word documents, and Microsoft Excel documents are instead followed by the icons , , and , respectively, and links to Wikipedia pages are followed by the icon .

Fonts
Font Sizes

The font size is larger if the user prefers larger fonts, and smaller if the user prefers smaller fonts. The size of most body text is the user’s preferred size. Headers are sized proportionately, hence are larger when the user prefers larger fonts, and smaller when the user prefers smaller fonts.

Font Stacks

The font used depends on which fonts are installed. The site names a list of fonts (also known as a font stack), and the browser uses the first font in the list which is installed and for which each character exists. Fonts are chosen for compatibility with Windows, MacOS, and Linux. The lists of fonts are:

  • For Headers: Palatino LT Std, Palatino, Book Antiqua, Palatino Linotype, Source Serif Pro, Times, and the generic serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Normal Body Text: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Source Sans Pro, Verdana, DejaVu Sans, Helvetica, Arial, Fira Sans, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Menus: -apple-system, system-ui, Segoe UI, Selawik, Roboto, Ubuntu, Cantarell, Oxygen, SF UI Text, Ta­ho­ma, Helvetica, Arial Nova, Arial, Liberation Sans, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Code: IBM Plex Mono, Fira Code, Input Mono, Dejavu Sans Mono, Dark Courier, Courier New, Courier, and the generic monospace font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Fancy Ampersands: Palatino LT Std, Palatino, Book Antiqua, Palatino Linotype, Constantia, Baskerville, Bell MT, Times, Times New Roman, Tinos, and 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.

Spelling Issues 

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.

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 visted 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 — Chrome, Edge, Firefox, Internet Explorer, SeaMonkey, Safari, Ope­ra, and Vivaldi — will display pages nearly identically. And even many ancient browsers will display pages quite well, because: 1 al­though 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 not uploaded to the site. Exception: the Legal Notices page also uses dynamic HTML 5 if your browser supports it, but is quite usable without HTML 5 support.

Valid XHTML Valid CSS