About my website
- Site history
- Browsers, HTML & CSS
- Accessibility
- Spelling & grammar
- Navigation vexations
- Miscellaneous notes
- Site gallery
- HTML test section
- Links
This site is my personal site for my interests. It is strictly non-commercial and has no advertising, cookies, etc. The subsites were originally contained in the original “Kosmonavtka” (Russian for “lady cosmonaut”) site at Yahoo!, but they grew, as sites seem to do! It has grown organically and its structure reflects this.
New pages are added to the site only occasionally, and others removed if they lose relevance. My Journal is the most active section.
Site history
I only began using the Internet in 2001, aged 30. During that year I was writing some International Space Station-related fiction stories for myself and gathered a lot of material and links during my research, and thought that I could put this together in the form of a website. After teaching myself some basic HTML from a children’s book borrowed from my local library, the “Kosmonavtka” site was first created at Yahoo! Geocities under the URL http://au.geocities.com/kosmonavtka2/, and first uploaded on 21 September 2003. (That URL is now inactive – see an old version of the site at Archive.org.) “Kosmonavtka,” Космонавтка, is Russian for “lady cosmonaut”; I could not think of a site name so that was the best I could come up with. It was intended to to provide information about the Russian space program that I felt was interesting and (hopefully) useful. In 2010 I renamed it to “RuSpace” (Russian Spaceflight).
The site kept growing so it branched into separate sites. I created the Sergei Krikalyov site at http://au.geocities.com/krikalyov/ on 6 October 2004 and a couple of others (now defunct). I deleted these after opening suzymchale.com on 8 September 2005 and they are now subsites of this one. (Sadly, Yahoo! closed Geocities sites in October 2009, deleting a lot of the Web’s amateur user history – “GeoCities was the largest self-created folk-art collection in the history of the world,” Jason Scott – though some sites were saved by others.)
I chose the domain name because it seemed the logical choice (I am no good at inventing imaginative site names) and, though not a commercial site, the .com ending is easy to remember. An alternate choice was kosmonavtka.com, but I would be forever having to explain to people what a “kosmonavtka” was, so suzymchale.com was the more practical choice (and seeing as my spaceflight interest waned in later years, a wise one!).
Browsers, HTML and CSS
The HTML markup and CSS are all handmade by myself in a variety of website editors – no templates are used on my site. I have always written my own markup.
As of August 2012 I updated the site doctype to HTML5, but have preferred not to use the new tags as these are not supported in older browsers. Site encoding is UTF-8 (Unicode).
The site uses Cascading Stylesheets (CSS) for visual formatting and div’s for page layout. Tables are only used for tablular data. I also use a print stylesheet, which modern browsers should support. The header and footer won’t print as they are unnecessary.
It should display consistently in up-to-date browsers, though there may be minor display quirks. I have tested it in Chrome, Firefox, Internet Explorer and Opera. Older browsers, such as Internet Explorer 9 and below, will not display the styling correctly (or at all). The pages should still be readable, though.
As of 2015, I have also attempted to make the pages more mobile phone-friendly. I don’t own/can’t afford a smartphone, though, so any feedback on the display would be appreciated!
I have deliberately kept the site design simple to make maintenance easier, hopefully future-proof it and to load fast. I want to be able to read it offline without need of a server for my own archival purposes (setting up a local server is a complex and finicky process), so main navigation is via the hierarchical “breadcrumbs” at the top and bottom of each page. I put all .html files of a particular subsite in the one directory as I find this easier to maintain, compared to dividing them up into many topical subdirectories.
Accessibility
I have tried to make my site reasonably accessible by using structured semantic HTML markup (e.g. h1, h2, etc. for headers, p for paragraphs, etc.). I use the alt attribute for images. The site is readable in a text-only browser such as Lynx, and with images and style sheets disabled, using the philosophy of progressive enhancement or graceful degradation.
Spelling and grammar
I use a somewhat random mixture of American and British spelling and punctuation. Some examples:
- Spelling: I tend to use American-style (e.g. color rather than colour, program rather than programme), for the pragmatic reason that there are fewer letters!
- I use American double quotes (“”) rather than British single quotes (‘’) for conversations, etc.; I find the British style irritating. It also makes search-and-replace more difficult as the right single quote and apostrophe are the same.
- However I do use a British-style lower case letter after a colon (:).
Navigation vexations
One aspect of website layout I have some trouble deciding upon is navigation! I vary between having conventional links at the top of the page, to a minimalist approach with only the most basic links (a top hierarchical “breadcrumb” trail for navigating up levels, and links to the site map and home at the bottom of each page). The latter option is preferable for my own offline local use as the top global navigation bar needs a server to be included on each page (server-side includes), and setting up a server on my own computer has proven to be a difficult and involved task which I gave up on. So expect the navigation to change depending upon my mood! It currently only uses the breadcrumbs, and links to the Home and Site Map pages at the bottom; I have found these adequate.
Miscellaneous notes
- All links in the main content are underlined.
- “Disclaimer: Some pages contains copyrighted material whose use has not been specifically authorized by the copyright owners. It is my belief that this not-for-profit use on the web constitutes as “fair use” of the copyrighted material as is stated in section 107 of United States Copyright Law. If you are the original photographer/writer and would like them removed please let me know.”
- Xenu’s Link Sleuth has proven invaluable when checking for broken internal links on my website!
- Grateful thanks to George R. Kasica for hosting my site!
The ASCII text-based emoticons I use (some reference websites: Common Text Emoticons; List of emoticons). Hover your mouse pointer over these little “faces” for a descriptive tooltip. For accessibility, I wrap them in <abbr></abbr> tags and give them a title.
| Symbol | Meaning |
|---|---|
| >:-( | Angry, annoyed |
| :'-( | Crying, upset |
| :-*) | Embarrassed, blushing |
| 8-| | Eyeroll |
| >:-) | Evil/wicked grin |
| X= | Crossed fingers (hoping for good luck) |
| :-D | Grin |
| ¯\_(ツ)_/¯ | Shrug |
| :-) | Happy, smile |
| :-O | Shocked, surprised |
| :-P | Poke/stick out tongue |
| :-( | Sad, unhappy |
| :-S | Sarcasm |
| :-> | Smirk |
| :O= | Vomit; nauseous (literally or figuratively) |
| :-/ | Whatever, indifferent |
| ;-) | Wink |
My most-commonly used ALT Keypad Numeric Codes for Windows (reference: Windows – Alt Key Numeric Codes) – these require a separate numberpad on a keyboard to use. I am generally following the Wikipedia:Manual of Style guidelines on some non-ASCII symbols (e.g. using HTML markup for 2 – <sup>2</sup> – rather than the keypad ALT code). For the three-digit codes that can be entered as Windows ALT codes, I do this for the ones I use most; for less-used and more recent ones I type their HTML character entity codes. I am a bit inconsistent, but just go with what works for me!
| Symbol | ALT + numberpad code | Name (and ASCII substitute, if available) | Notes |
|---|---|---|---|
| … | 0133 | ellipsis (...) | I use the ALT code for these |
| ‘ | 0145 | left single curly quote (') | |
| ’ | 0146 | right single curly quote (') | |
| “ | 0147 | left double curly quote (") | |
| ” | 0148 | right double curly quote (") | |
| • | 0149 | list dot | Don’t usually use, but ALT code if I do |
| – | 0150 | n-dash (--) | I use the ALT code for these |
| — | 0151 | m-dash (---) | |
| ™ | 0153 | trademark (TM) | |
| © | 0169 | copyright symbol (C) | |
| « | 0171 | left guillemot (<<) | |
| ° | 0176 | degrees | |
| ¹ | 0185 | superscript 1 | I use HTML <sup></sup> markup tags for these instead |
| ² | 0178 | superscript 2 | |
| ³ | 0179 | superscript 3 | |
| » | 0187 | right guillemot (>>) | I use the ALT code for these |
| ¼ | 0188 | fraction 1/4 | I use the character entity ¼ |
| ½ | 0189 | fraction 1/2 | I use the character entity ½ |
| ¾ | 0190 | fraction 3/4 | I use the character entity ¾ |
| × | 0215 | multiplication/times (x or *) | I use the ALT code |
| é | 0233 | e acute | |
| í | 0237 | i ecute | |
| ë | 0235 | e umlaut | |
| ÷ | 0247 | division (/) |
I use the character entity ÷ |
| ⁄ | 2044 (needs hexadecimal Unicode input enabled) | Fraction slash (/) | I use the character entity ⁄ |
| № | 2116 | Numero sign (No) | I use the character entity № |
Site gallery
In this section are some captures of the front pages of my site over the years. I only have tiny versions of most of the early ones as I wasn’t thinking to archive my site’s appearance then. I am not the most original at web design, but feel my sites have been reasonably neat and non-offensive. I have always written my own HTML and CSS code, as opposed to using a template.
2003
Just starting out, and one site about Russian spaceflight at Yahoo! Geocities (http://au.geocities.com/kosmonavtka2/). After reading a beginner’s guide to HTML (one aimed at children!), I created a simple table layout with a starry background. I do miss Geocities now – it was basic but free, and I could upload my own HTML without interference. I detest site builders!
2004
Redesigns (still using a table layout, and learning some CSS) and added a site about then-active Russian cosmonaut Sergei Krikalyov on another Yahoo domain (http://au.geocities.com/krikalyov/).
2005
Added another Geocities site (http://au.geocities.com/suzymchale/) for my personal information. I was going through a Russia-obsessive phase (if it isn’t obvious!). I still like the colored by CSS scrollbars – unfortunately browsers disallow them now :-(
2006
I now had my own domain name, so I had a main portal page and 4 sub-sites (“Kosmonavtka,” “MKS” – about the International Space Station, a journal and Sergei Krikalyov). I was transitioning toward using CSS for layout rather than outdated tables.
2007
My themes were more harmonized. I merged the “MKS” site back into the “Kosmonavtka” one after its screenshot here. The sites looked much like this, with only minor design tweakings, for the next few years.
This personal site (no longer online) was done for a family friend. I still quite like the color scheme and design. Bill bought the domain name http://www.wjwaters.com/. It is long since defunct; the main page has been preserved at Archive.org. (I have merged the pages onto one page here.)
2013
Doing full CSS layouts now, and the site design hadn’t changed much in a few years. “Star Warrior” worldbuilding site added; “Kosmonavtka” renamed to “RuSpace” (Russian Spaceflight).
2014
A moderate site redesign (somewhat imitating a “flat design” look) and down to 3 sub-sites now; “Sergei Krikalyov” site deleted (but archived on my computer). I also have quite a few external sites (social networks, blogs, etc), though these aren’t often updated.
Some minor tweakings.
More journal redesigns.
2015
Still working with HTML and CSS only. I was aware of the latest web design fads and technologies, but found them a bit daunting to contemplate learning and preferred a relatively simple site that just sat on the screen quietly. As my site was quite large by now – a few hundred hand-coded pages – I periodically considered moving to a CMS such as Wordpress, but the thought of trying to convert all those pages was also daunting, and a CMS would add complexity and dependence upon more programs just to view and edit my site.
A redesign which I only kept for 3 days, though nothing very radical. I won’t include the other sections as layout was the same. Accent colors: Main – #9575cd; Journal – #ff9700; RuSpace – #6699ff; Star Warrior – #3fb87d.
A following redesign which also lasted less than a week! This was based on the Dokuwiki default template current at the time. I may reuse it sometime, though.
And another design, with a wider header and footer, and navigation at the bottom, but I went back to the more conventional layout a week or so later.
Screenshot, 30 July 2015. Colors for sections: #9575cd / rgb(149,117,205), #f06292 / rgb(240,98,146), #f57d00 / rgb(245,125,0), #6699ff / rgb(102,153,255), #3fb87d / rgb(63,184,125); grey colors: #131313 / rgb(19,19,19), #595959 / rgb(89,89,89), #a0a0a0 / rgb(160,160,160), #e7e7e7 / rgb(231,231,231)
2016
Screenshot, 23 November 2016; a simplified design. Colors for sections are the same as the previous image.
2017
Screenshot, 9 March 2017; still much the same design. Also on the right is a shot of how it appears in Internet Explorer 8 – some of the CSS styles don’t work due to the age of that browser version (and same for earlier versions), but the site is still readable (“progressive enhancement”).
2022
Screenshot, 2 September 2022; changed the background of each site section to its color theme. Colors for sections are the same as the previous image.
2023
Screenshot, 12 May 2023; simplified a bit more. Colors for subdirectories changed slightly to “web-safe” versions: #96c (purple), #f69 (pink), #f60 (orange), #69f (blue), #096 (green). Grey colors: #131313, #595959, #a0a0a0, #e7e7e7.
2024
1/11/2024
Site design still the same, but decided to change the hue of the colors to the web-safe versions of the classic iMac G3 fruit flavors! (See my 1/11/2024 Journal entry.) So now they are: #669 (Grape), #c06 (Strawberry), #f93 (Tangerine), #09c (Blueberry), #093 (Lime); #036 (Indigo) or #666 (Graphite); #099 (Bondi Blue). Grey: #ccc.
Screenshot of my website as displayed in the CERN 2019 WorldWideWeb Rebuild emulator of its original 1990 web browser – still visible and navigable (though no images as these were not in the original HTML specification back then)!
Screenshot of my website as displayed in the text-only Lynx browser; still accessible!
HTML test section
Below are the HTML tags I use most often, as styled for my website.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
- Definition List Title
- This is a definition list division.
- Unordered list
- Ordered (numbered) list
A blockquote. Following this, a horizontal rule.
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Links: External (to this page on my external website), local (this page), local anchor link (this page).
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Bold, Strong, Italic, Emphasis.
Keyboard input: Cmd
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Links
Some “About my site” pages of others that I have found interesting.
- Gwern.net: Design Of This Website
- James’ Coffee Blog: I love my website
- About the Moonspeaker
- Project Nayuki: Web site notes
Saturday, 7 March 2026 at 11:28:09 am