How is your site designed and organized?

Last updated: early 2006 (?)
Level 2 update on Oct 15, 2007 (notes on degree of updates added in section 2.1.1)
Level 1 update on Dec 12, 2007 (section redone, adjusted some)

1 Introduction

Starting in early July of 2005, I've changed my website's design quite drastically. This big change means a big change of style. Here's what version 6.0 of my website is like and how it's designed in a more extensive view.

Website requirements: due to the simplicity and lack of scripting, my website is compatible with most browsers. I design and test in Firefox, a browser (free) that keeps strictly to the rules of HTML. You could view at almost any resoultion, but at least 800x600 is recommended for the minimum and I suggest using 32-bit color, though 16-bit color is also acceptable (though you may notice some odd things). If you can see the tables in full at the bottom without a horizontal scroll bar, you are viewing at an accepted resoultion. Most systems run at 1024x768 or 1280x1024, both of which are acceptable. I view my website (and Windows in general) at 1920x1440 at 32-bit color, but I use mathematics to figure out optimization at 800x600. If you don't know what color depth you use, you can test it here. If the top image appears very smooth, you are using 24- or 32-bit color. If you see some minor distortions, you are using 16-bit color. If the distortions are huge, you are using 8-bit color. Avoid 8-bit color - it looks horrible. If you want to see the full true color palette, which contains every possible color (16 7/9 million), go here.

This section describes my website's layout in great detail - it's consistant everywhere with tiny changes depending on the type of document.

2 General layout

This sample webpage gives an idea on the general layout that is common throughout my entire website. It describes the basic layout in detail.

Last updated: early 2006 (level 9 update)
Level 2 update on Oct 15, 2007 (list of recent updates and quick update summary)

Question or statement [usually a question] that tells of the content of the page

2.1 The top section

2.1.1 The top (header)

My website consists of four parts on all pages, some areas have more than four, but these four are common on all pages. At the very top is an image, usually of no importance. The image is of importance when it is referenced to from within the main document you're reading. Not all pages have an image, but must do. Below the image is always a question or a statement which basically tells of the content of the page in a logline sort of way. In the pages since about late 2006, any updates to the page are listed above with the bigger updates (higher levels) being above everything. The "last updated" one is reserved for massive updates, levels 8 and higher, where roughly half of the document is modified. Level 0 through 2 are very small updates and aren't really worth going over the page. 3 through 5 are moderate-sized and rereading the areas changed is somewhat worth it. Levels 6 and 7 are large updates to a good chunk of the page and would be worth rereading. Levels 8 through 10 are massive updates where the document has undergone a major rewrite (sometimes a complete rewrite from scratch (a level 10 update)) or lots of content was changed and is definitely worth rereading the entire document. My site's main FAQ explains this in greater detail and the approximate degree of change.

2.1.2 The main body Footnotes

The central area is the main document, the important part. This area will have footnotes*C08-02* which, when you click on, moves the bottom frame, the footnote index, to where that footnote is located. The format is simple. Always located between two astrisks (aka "stars" as they look like stars) is the important area. C08 indicates the category, category 8 in this case. The 02 part indicates the exact footnote being referenced to. Sometimes, footnotes may appear within this area, these just link to the footnote being referenced to within that frame. Sectionizing

As you may have noticed already, you see bluish banners with a number at the beginning. These are sections. When a footnote points to something, the section being referenced to is of great use. Sections can be divided to many sublevels (this is the third level). There will never be a section with only one item in it, unless the page had only one section in all. That is, you won't see a 2, 2.1, 2.1.1, 2.1.2, then a 3 without seeing a 2.2 first. This sectionizing splits long documents (even short ones) into different sections for better organization and making better use of the footnotes.

2.1.3 The bottom (footers) General description

The bottom area of the main body is the footer. Here, you'll find a collection of two or three images, usually three. These short-lasting animated GIFs link to the indexes or the FAQ page. The one on the far left is always the home icon, taking you back to the main index. The center one, in the case of seeing three images, returns you to the category index. The one on the right takes you to the FAQ page. Only the main index doesn't have this area and category indexes only have two. The different images

There are quite a few different images used, each with their own relation to the index. Here's a list of each of them. Main index link

This is the main index link. It's of a house with neon lights on it in a night setting. House is home if you think about it that way. Tips and tricks index link

This is the tips and tricks index link, which takes you back to the tips and tricks index, or category 1. It's of a magic trick going into a magic hat. A plunger brings text down from above which then shinks, rotates and falls into the magic hat. It's like a magic show. Think of it as a magic trick. Features index link

This is the features index link taking you back to the features index, or category 3. It's of a book flipping through pages. Since this category is of a bunch of reports, and such things are in books (usually a collection of reports), that's where this idea came from. About me index link

This is the about me index link taking you back to the about me index, or category 4. It's of an alarm clock going through the hours at high speed. Originally, this was mostly my history, but it later on was for my dreams in which the count suddenly was going up very quickly. The concept may change soon, however. The the text flashing effect is like that of the flare effect ever-so-rarely mentioned. Games index link

This is the games index link taking you back to the games index, or category 5. This is of my self-created cartoon-style nature-theme playing cards, used with any such associated games. Since these games are not computer or electronic (involving cards, coins, or dice), it suits the category well. I originally had a chess game, but it was flawed and I replaced it on Dec 12, 2007. Stories index link

This is the stories index link taking you back to the stories index, or category 6. It's of a story book with the text fading in and out like it does on my mind game's map (with the position marker). Game design index link

This is the game design index link, taking you back to the game design index, or category 9. There is none for categories 7 and 8. The image is of a platform-like game where the player needs to use a platform to cross a pool of deep water to reach the goal. As of Dec 12, 2007, it needs to be somewhat redone, mainly the background. Other index link

This is the other index link, taking you back to the other index, or category 10. Also, I don't have any decent ideas for an index for this category, but the link still works. FAQ link

This is the FAQ link, taking you to the FAQ page to view common questions you and others may have. The image is of a big Q, a question, and a big A, an answer to that question. Then, the "Frequently Asked Questioned" logo from version 2 or version 3 of my website comes on and disappears.

2.1.4 Organization

All images and tables are centered among the page. All other things are left justified.

2.2 The bottom area

2.2.1 Description

This is the footnotes index. It's of a frame that is separate from the main document. This area is where all footnotes are listed. When you click on a footnote from the top area, this area will jump to where that footnote is. If there's a footnote within here, it'll jump to where that footnote is. If you click on a regular link within here (or the top area), it'll open in a new window.

2.2.2 Why have it like this?

I get asked this a lot. The reason is quite simple actually. Since many pages on my website don't get updated in several months or so, perhaps longer, the footnotes referencing these infrequently updated pages often have incorrect or inaccurate information. Another reason is repetition. Some footnotes occur like 15 times total pointing to the same thing. References to, for example, hit points, the FAQ page, or my dreams, occur quite often. Having it this way means having to only edit the footnotes once instead of repeated copying and pasting. Plus, I can expand on explanatory footnotes if needed. Also, it helps save disk space and bandwidth at the same time as the document only needs to load once instead of the footnotes having to be loaded like 4 or 5 times in all. The list of reasons is strongly on the positive side. There is one negative side to this, however, but it's minor. Because search engines can't index a frame too well, and since this document is of practically no importance at all to be indexed, it shouldn't matter too much. The top part is just a regular HTML file so it'll index and that's the most important part to index.

2.3 Summary

The top area of my website is the main body which consists of a header, the main body, and images to take you to the indexes or FAQ page. Footnotes are marked like this*C08-02* and cause the bottom area to jump to that footnote. Each page is sectionized to help you find a certain piece of content quickly and easily from footnote references. They are always in a blue banner with the numbers at the beginning denoting the section. Images and tables are always centered, everything else is left justified. The footnotes index on the bottom area contains a list of every footnote on my website to help keep up with change and improvements.

3 Layout of indexes

To get anywhere on my website, you need to go through an index. This explains the various indexes and their layout and design.

3.1 About indexes

3.1.1 Indexes in general

Indexes are special as they aren't really much of a document, though they get you between documents quite quickly. Indexes are organized by the category, subcategory sub-subcategory, etc. followed by the individual pages of a report (except paginated documents), and the sections, subsections, sub-subsections, etc. within a page.

3.1.2 Types of indexes Main index

There are three types of indexes. The main index is the home page. It lists just the categories and contains any recent updates (with shortcuts to the updated page) or future planned updates within the categories. The main index also has a news feature which simply tells you what I've been up to between updates. These items are moved into my blog. You came to this document through the main index. Category indexes and the site map

If you click on one of the category links, that category will get expanded leaving the others collapsed. These are category indexes. They list all documents, reports, and pages within that category. If pages contain more than one section, the individual sections are listed. The format is simple. An example of a format is this: The first part before the hyphen ( is the category index position). Following after the hyphen is the section, subsection, sub-subsection, etc.. This would mean that, on my mind game report, on the menu screens page, this is section 2.9, which relates to the map.

The third index is the site map. The site map is just that, a map of the entire website (except the individual pages on paginated documents, documents that have been split into multiple pages relating strongly to each other). The exception to this is just the first page being listed. It's exactly identical to category indexes, only with all categories expanded. Because of this, this document is very big meaning that it'll take quite a while to download it entirely.

3.2 Example of the design

This is an example of the design of a category index or the site map. It's quite straight forward. We'll use X to denote the category, an imaginary one.

X Category X index
X.1 A category within this category
X.1.1 First report within this category having multiple pages
X.1.1.1 First page of first report
X.1.1.1-1 Section 1 of the first page of the first report
X.1.1.1-1.1 Section 1.1 of the first page of the first report
X.1.1.1-2 Section 2 of the first page of the first report
X.1.1.1-3 Section 3 of this
X.1.1.2 Second page of the first report having to sections (short)
X.1.1.3 Third page of first report
X.1.1.3-1 Section 1 of the third page of the first report
X.1.1.3-2 Section 2 of the third page of the first report

X.1.2 Second report within this category having only one page or is paginated

X.2 A multi-page report within this category not part of the X.1 group
X.2.1 First page of the X.2 section
X.2.1-1 Section 1 of the X.2 section
X.2.1-2 Section 2 of the X.2 section
X.2.1-2.1 Section 2.1 of the X.2 section
X.2.1-2.2 Section 2.2 of the X.2 section
X.2.1-2.3 Section 2.3 of the X.2 section
X.2.1-2.3.1 Section 2.3.1 of the X.2 section
X.2.2 Second page of the X.2 section
X.2.2-1 Section 1 as usual
X.2.2-2 Section 2 as usual with big gap to separate main categories

Y Category Y index

This is a simpliflied version of an index with no real titles and stuff being used. The site map is similar except that all categories are expanded. The yellow-orange parts of the text would be links. Sections within a page aren't linked to, otherwise you'd end up with a much bigger file to download. Just remember the part after the hyphen for the section.

3.3 Summary

There are three types of indexes. The main index lists all categories, recent updates, and future plans. It also lists recent events between updates. The category index lists all documents within that category, including the individual sections within a page. Paginated (split) documents don't have their pages and sections listed, except the first page. The site map is the same as the category index, only with every topic expanded entirely (except paginated documents of course).

4 Layout for reports

Reports are like paginated documents with the exception in that the pages aren't strongly related to each other.

4.1 Similarities among the general design

Reports are basically just that. It's a very long article. They follow the general design concept (section 2) with only minor differences. The top is the header, the center area is the body, the bottom is the footer, but, just above the triplet of images is what the difference is.

4.2 Links

4.2.1 Differences

The difference with reports is that they have links to the different aspects of something like the history of my mind game on one page and the description on how I see things in my mind game on another. The design is quite simple, again.

4.2.2 Next and previous

At the top of the links section are two links (or one if you're on the first or last page). These two links are next and previous. They take you to the next page or the previous page, depending on which link you click. They follow the same order of the list of links on the bottom.

4.2.3 All links

Below the next and previous links are the main links to jump multiple pages or to get to a specific category faster. The design is quite simple as well.

Base page of the report - this is where you go to the main page of the report you're viewing, always on the top.
Unclicked link or unviewed page - A link of this color indicates that you haven't viewed this page yet (or haven't viewed it in a long time or after a system restore).
Clicked link or viewed page - A link of this color indicates that you have visited this page before. Of course, you can click these to return to something if needed.

4.3 Summary

Reports follow the general design concept with one small difference: links to navigate between pages or sections of the report. The top part of this has a next and a previous link to proceed to the next page or the previous. The base page is always the top link of the main group, yellow-orange links are unvisited, Red links are visited.

5 Paginated documents

A paginated document is any document in which the content is very closely related, but is extremely long, sort of like a single page, but split up into multiple pages. There's little difference between report pages and paginated pages.

5.1 Why paginate?

You might wonder, why paginate a document? Well, unless you want to be downloading like 400 KB of files wasting bandwidth (and paying for it), it's to save bandwidth. The Windows screenshots section, my dreams section, image collection section, and, in a similar but different way, my blog. Sometimes I paginate to make things simpler, as with my blog. It's to always help save bandwidth otherwise documents would end up extremely long.

5.2 Navigation between pages

5.2.1 Regular pages

If you were to visit a paginated document on my site, you'll see things like 1, 2, 3, 4, 5, 6, +10, +25 at the bottom. This is page navigation. The rule is simple. The regular page count increases by one up to five pages out from the current page. The +10, +25, -10, and -25 just tell how many pages to jump at once. +10 means to jump ten pages forward while -10 is the opposite: jump ten pages backwards. If you're on page 12, for example, clicking the +10 will make you jump to page 22. Clicking the -10 will make you jump to page 2. If, for example, there were only 17 pages available and you were on page 12 clicking the +10, you'll get a 404 error. Don't report it as this is intentional. Why? When a page is later added, I don't have to keep going back dozens of pages just add this. It simplifies my workload and reduces the amount of time needed to update these kinds of pages.

All paginated documents (except the blog) contain 10 items per page. To know the highest possible page you can visit, know the number of items available. If there were, for example, 137 objects, you'd have 14 pages. Before page 23 becomes available, you'll need at least 221 objects. The rule for naming files is also simple. The file name simply ends in a number with leading zeros on low page numbers. 03 at the end simply means page three. 28 on the end means page 28. Simple, ain't it?

5.2.2 The blog

The blog is very similar to regular paginated pages, except months and years are listed instead of page numbers. +1 year replaces the +10, +2 years replaces the +25, etc.. Outside this, everything else is the same.

5.3 Summary

Pagination is done to help save bandwidth for pages that would otherwise be very lengthy with a big file size. At the bottom of a paginated document, you'll see page numbers which branch out 5 from where you current are. The +10, -10, etc. allow you to jump that many pages forward or backwards. The blog follows the same principal only dates are used instead.

6 Galleries

A gallery is a specialized kind of paginated document. They consist of a photo or screenshot with a description following. These galleries are always paginated documents unless there are 1 to 10 objects.

6.1 About galleries

Galleries consist of 10 photos or screenshots per page. At the top is the image, a description, or caption, follows, then a divider with the next image following after that. The design is very simple. When large images are used, such as photos or Windows screenshots, I shrink them down using the width and height attributes to prevent unneccessary scrolling. To view the full-size image, simply click on it.

6.2 An example

Here's an example of a typical layout - the Windows screenshots page. From viewing this page, you can see a 01 at the end of the file name before the extention. This indicates page 1. Then notice how the layout keeps consistant?

6.3 Summary

Within each section, the photo or screenshot is on the top, a caption (description) is on the bottom, and dividers separate the groups. Large images are scaled down - click them to view the full size version.

This is how my site is convieniently designed. So well-improved to all other versions. Now that I've got stylesheet on my hand, I can instantly change the looks of all my pages by editting only 2 files [one for the general layout without the need for a special table color, and another one without the table's data].

This section will be removed and replaced with the footnotes index.