This is a test of the SSI broadcasting system.
Saturday, 04-Feb-2012 17:11:25 MST

CSS3 Opacity works in Ff1.5 and Saf2! (ie gets a hack, opera is clueless) nicetitle1 nicetitle2 nicetitle3

Page Design Document

This page will serve primarily as a summary of the thought process I went through in creating the design of my fledgling site, and secondly as a guinea pig for testing the new layout on a text-heavy page. It is not a polished document but rather a collection of thoughts loosely organized into sections.

Todo,indents

This page will serve primarily as a summary of the thought process I went through in creating the design of my fledgling site.

1. see if we can use clearfix in fewer places. currently it's in all rb-content
2. DONE Put padding of plain/clearboxen in the box css, not in the per-block (p, h1, etc). already done?

• see if we can use clearfix in fewer places. currently it's in all rb-content
• DONE Put padding of plain/clearboxen in the box css, not in the per-block (p, h1, etc). already done?

• see if we can use clearfix in fewer places. currently it's in all rb-content
• DONE Ahhhhhhhhhhhhhhhhhh put padding of plain/clearboxen in the box css, not in the per-block (p, h1, etc). already done?

indented p

This page will serve primarily as a summary of the thought process I went through in creating the design of my fledgling site, and secondly as a guinea pig for testing the new layout on a text-heavy page. It is not a polished document but rather a collection of thoughts loosely organized into sections.

Intended Audience

This necessarily involves two things: the visitor and the visitor's computer. They are at times related but generally have different needs.

The Visitor

When designing for humans, the foremost goal is to present the desired information efficiently and pleasantly. Efficiency requires an understanding of the visitor's desires and in turn an understanding of what the site has to offer.

The purpose of this site is to test and serve my software projects and miscellaneous documents and files. Visitors are likely to be friends, colleagues, family, or users of the software. Thus organization and ease of navigation are important.

Pleasant, aesthetic design is not my strong suite, so I will attempt to draw as much as possible from other sites that I like. As a web surfer, I know more about the functional aspect of design. For example, the site logo should link to the front page, text should always be placed against high-contrast backgrounds, and links should stand out in an obvious fashion.

After making an effort to present the site's information pleasantly and efficiently, another important consideration is accessibilty. As my site is very low traffic, and I do not expect to have many visitors who would use accessibility features, I consider it important as a matter of principle and respect. Thus images should either have replacement spans or alt tags, colors should be chosen to have contrast regardless of the visitor's color perception, and form elements should have appropriate attributes such as accesskey and alt.

See also:

1. Accessibility scanner

The Visitor's Computer

Another type of accessibility is important when the visitor's computer is considered, and once again this depends on the visitors that a site should expect. Since most users have at least 16-bit color on their computers now, and my intended audience would likely have 24-bit color, the use of the web-safe palette is not important. My intended audience will have a horizontal screen resolution of at least 1024 pixels, though for pleasant presentation of text I may opt to use considerably less for the primary content area. Likewise most visitors will have a vertical screen resolution of at least 768 pixels, so I should have navigational elements appear well within the top 600 pixels or so of every page.

Perhaps controversially, I will choose not to support old browsers. First, my intended userbase exclusively uses up-to-date browsers, but any user who uses an old, buggy browser is a threat not only to himself but to the entire Internet. Out of principle I will not cater to old browsers' rendering quirks, but at the same time I will not reject them entirely.

Primary Goals

After considering the purpose of the site and the intended audience, some high-level goals can be drafted. Specific features will be considered later. These include:

1. Visual consistency between parts of a page and pages of the site
2. Generally clean, uncluttered page design.
3. Site renders as intended in Firefox and Safari.
4. Site looks and functions decently without Javascript and CSS.
5. Ease of integration with planned software features such as auth/authz.
6. Site is lean in terms of images needed, total size, complexity.
7. Useful properties of previous sites should be retained.
8. Barring IE bugs, site renders as intended in IE. Consider IE7 script.
9. Lastly, other browsers should render the site as reasonably as practical.

Page Layouts, and Inspiration

There are four overall styles that I am considering. All layouts have two columns, as I don't anticipate having enough site-wide content to properly populate three columns.

Centered, contained

This is a simple and elegant site design, used to good effect by Mozilla, among others.

Centered, wide

This is mostly like the above, with the exception of wide header and/or footer bars that extend the width of the screen. This allows for graphical trickery and branding opportunities.

Left-justified, wide

As above, but the body is bound to the left side of the screen. Examples are LANL and alistapart.

Left-justified, contained

This is a somewhat unusual design where the entire page is left-justified and does not extend the full width of the page.

He's not fat, he's got big DIVs

There are four ways of managing block widths that were considered for the site. Starting with the most popular, they are:

Absolute/fixed sizes:

This involves specifying explicit pixel sizes for block widths. A layout targeted for 800px-wide windows might have a 520px-wide main column, a 200px-wide navigation column, and gutters, margins, and UI elements like window borders and scroll bars would fill out the rest.

This is by far the most popular layout because it is stable across browsers and guarantees the same look in almost every case. Additionally, it makes graphical design easier, as a 200px-wide column can have a fixed 200px-wide header image as its background. An example of the pros and cons of this style is:

Mozart @ CSS Zen Garden

What could possibly be wrong with the most popular method? If someone has impaired vision and wants to use extremely large fonts, this rigid structure will not scale at all. If someone is using an unusually small browser window size, this design will overflow its window even if font size is scaled down. If someone is using a wide browser window, this design will not be able to make use of the room. At worst, a user with a large window and large fonts might see:

Fluid Layouts

This method makes the layout take up a percentage of the window width, usually 100%. Individual columns can be scaled with fixed pixel/em widths or given a percentage of the window width. The name comes from substances like gases and liquids that change shape to fill their container, and is sometimes refered to as liquid layout.

This style is able to make use of 100% of the window regardless of its width. Oftentimes, it can be designed to display well on narrow windows as well, to support users with small screens.

Love is in the Air @ CSS Zen Garden

What if the user's window is very wide, and the text size is very small? Wide blocks of text are hard to scan and read. Scanning involves quickly glancing over a document to pick out keywords and concepts. It is easily done with narrow columns of text so the eyes can quickly move down the page. With a wide block of text, the eyes have to scan side to side as well as top to bottom. Wide columns are harder to read as well, since the eyes have to reposition themselves vertically every time they make the long trek to the left edge of the text.

Elastic sizes

This method is similar to absolute sizing, but instead of defining widths in pixels, they are defined in relative sizes such as ems or exes. This allows a user with a smaller screen to reduce font sizes and those with larger screens to increase font sizes. By using relative widths, the entire layout will scale along with the font size, as in:

Elastic Lawn @ CSS Zen Garden

Jello Layouts

This layout, pioneered by Mike Purvis, approximates the behavior of fluid layouts while providing cross-browser minimum and maximum total width properties.

Jello Layout Introduction

Door Number 1, 2, or 3?

We will try to combine the benefits of elastic design with the interactivity of a jello layout. If everything pans out, we'll end up with a user-friendly site with an easy upgrade path to fluid layouts when min-width and max-width options become more widely-supported.

Desired Features

These are "neat" features that I would like to have, but are at times inappropriate or impractical.

1. Tabs to go to the main sections of the site.
2. Neat blockquotes.
3. link classes for external and pdf (and possibly other mime type) links.
4. Display of authentication status.
5. Friendly error pages.
6. No more boring form entry boxes.
7. Use ems for width of divs as well as for font sizes for a truly scalable site
8. Print list of links when printing a page.
9. Do something neat with the logo text.

Color Choices

Black backgrounds remind me of late 90s gaming sites, and are too stereotypical. White backgrounds are very common for commercial sites, but a screen of white hurts my eyes. I will likely opt for light gray or pastel backgrounds.

A popular color scheme (again used by lanl and alistapart) is a group of similar grays and blues with orange/red highlights. While my intended colors will be more blue than gray, the contrast is useful. Here's a good color picker.

Credits

Might as well start to keep track of this crap.

Utility Images

Images not mentioned here entirely new creations by me.

	This image is my own design, inspired by this image from the Blix wordpress theme by Sebastian Schmieg.
	This image is my own design, inspired by this image from the monobook Mediawiki theme (GPL) by Gabriel Wicke.
	These images are my own design, inspired by the many other sites that have similar images.

Web Sites

Colors, Fonts, Images

Best color scheme creator on the web

Get da fonts here

Unfortunate name, good resource

Button maker

CSS Examples

http://www.digital-web.com/

http://csszengarden.com/

css optimizer

Standards-related

List of doctypes

Funny symbols

Larger testing area

Fixed-width fonts

Widdle pre.  Aww wookit the widdle pre.

1. # Sample using class="pre"
2. # 2005-02-11
3. #
4. # naively spoof referer force .html
5. # get prerequisites \ extension for
6. # don't get parent \ \ html docs Spoof User Agent
7. # \ \ \ \ /
8. wget -N -l inf -r -np -p --referer $1 -E -k -U 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)' $1
9. # / / / \
10. # / | / convert links for local viewing
11. # | | recursive get
12. # | infinite recursion
13. # don't get unless newer than local
14. #

1. # Sample using class="code"
2. # 2005-02-11
3. #
4. # naively spoof referer force .html
5. # get prerequisites \ extension for
6. # don't get parent \ \ html docs Spoof User Agent
7. # \ \ \ \ /
8. wget -N -l inf -r -np -p --referer $1 -E -k -U 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)' $1
9. # / / / \
10. # / | / convert links for local viewing
11. # | | recursive get
12. # | infinite recursion
13. # don't get unless newer than local
14. #

1. # Sample using class="code", with a long line
2. # 2005-02-11
3. #
4. # naively spoof referer force .html
5. # get prerequisites \ extension for
6. # don't get parent \ \ html docs Spoof User Agent
7. # \ \ \ \ /
8. wget -N -l inf -r -np -p --referer $1 -E -k -U 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)' $1
9. # / / / \
10. # / | / convert links for local viewing
11. # | | recursive get
12. # | infinite recursion
13. # don't get unless newer than local
14. #2345678901234567890123456789012345678901234567890123456789012345678901234567890

1. // Sample of "real code" to show indentation
2.  
3. int a = 5;
4. int b = 2;
5.  
6. for (int c = 0; c < a; c+= b;) {
7. if (c == 2) {
8. if (c - b == a) {
9. cout << "unlikely";
10. }
11. }
12. }

Text and quotes.

Lucida Grande
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Verdana
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Geneva
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Lucida
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Arial
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Helvetica
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Plain (probably inherited from text.css)
Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi.

mmmmmmmmmM mmmmmmmmmM mmmmmmmmmM

Cats sleep anywhere.
Any table, any chair.

Top of piano, window ledge.
In the middle, on the edge.

Open door, empty shoe.
Anybody's lap will do.

Sitting in a cardboard box.
In the cupboard with your frocks.

Anywhere, they don't care.
Cats sleep anywhere.