• Home
• TheWeb
• Linux
• Microsoft
• SiteMap
• Work
• Musings
• Recipes

• Using a text editor
• Crowded text is hard to read
• Contrast makes blocks and points stand out
• Make your page navigable both internally and externally
• You should use a font that allows easy communication of information
• Space lines so they don't sit on top of each other
• How wide should the view area be?
• Are there some good Webmaster tools out there that don't cost an arm and a leg?

Introduction:   This is my first web site. [I bet you didn't need to be told that!]. I've Googled up a lot of information and these tutorials are my way of achieving some focus from all the advice out there [and of remembering some of the important bits]. I sure hope that other newbies to CSS and HTML can get a sense of focus or clarity regarding the logic of elementary web page design from these Tutorials. Here's the first one.

Readability:  There's not much point in putting a lot of effort into placing blocks of content around the web page with CSS if the messages in the blocks are hard to read. If you can simply type your messages, undistracted by technical issues, you can focus a bit on the style and power of your language. [A corrolorary is that you will benefit from using a text editor that recognises code. I mention some that detect CSS and HTML in the section on Webmaster Tools. Check out Allin Cottrell's amusing rant.

• Crowded or poorly spaced text is not very readable.

I've obviously used space to separate important blocks and pieces of information. Imagine how hard this page would be to follow without this discretization. Further imagine how impossible the situation would be if I took out too many of the line breaks, whether inserted automatically by block elements or specifically by me. Enough said I hope.

• Use contrast to indicate flow and to highlight main points in the content.

There are lots of HTML tools for structuring text: I have used dot points, line separation, indents [via a <div> element in this version and ul & ol in the non-CSS version], simple list structures and symbols to make the important points stand out. I hate tables and I don't like dot points much so it's a good thing for me that they can be largely replaced by CSS styling later. For now these techniques allow me to optimise the structure and flow as I compose the HowTo. These are the tools that were commonly used years ago. It would be unwise to forget them entirely.

Here's a very nice HowTo [to illustrate non-CSS layout] using tables, bolding, indents and dot points. It's from the pre-CSS days and IMHO is quite effective even if a bit distracting. It's called Litt's Lilo Lessons.

Navigation:  Don't trap your readers in a page where the only escape is to exit to another web site, because they, like you and I, will simply leave. Here is what I did to make my readers comfortable and to present information to them that lies within the page, within the HowTo, within the web site and outside the web site:

Links to the top of the page [ ↑top↑ ] facilitate freedom to move to a reference point where readers can "regroup" if confused or in need of a "refresh".

The navigation list at the top of the page gives access to broad subject areas within the web site.

The page is littered with links to relevant external references [on reflection it's maybe a bit crowded].

The navigation list at the bottom of the page gives access to other chapters of the HowTo.

Fonts [& Line-height]:  When I tried to preview what I had written in a browser I couldn't easily see the text because my sight is a not AAA. So the first question that I addressed in my css style sheet dealt with appropriate useable/accessible fonts for web pages. Since the purpose of a HowTo is to convey information the fonts have to be

Easy to perceive, i.e. not too small
Easy to read, i.e. a well designed face
Easily available, i.e. standard in Linux, Windows and Mac OS

To cut short a long story here are three good articles that lead to [my] three choices.

The Wrong Size Fonts by Stephen Poley
WebAim Guide to Web Accessibility [Utah State U - Center for Persons w Disabilities]
Code Style • Org's font pages.

Some care is needed when playing with line-height. The browser default view is about equivalent to a line-height of approx 125%. I use 140% because wider spacing improves readability. However if you set to much larger than this the situation becomes strange for the normally sighted person. The combination of 140% on height with 95% on font results in the text occupying much the same page area as it would if you altered nothing -but- the readability is nicely improved.

My choice for optimised CSS code is: {font-family: verdana, arial, helvetica, sans-serif; font-size: 95%; line-height: 140%;}

Monitor Resolution - Page Size:  Fewer than 1/2% of users have 640x480 screens and about 80% currently use 800x600 or 1024x768, according to accessibility guru Jacob Nielsen. This points to two of the most common layouts, namely a fixed width of 800 px or a liquid layout that adjusts the text wrapping to the width in pixels of the browser's window. You need to accommodate Microsoft Internet Explorer's peculiar, non standard box model. when choosing absolute widths. See Wikipedia and  Jennifer Kymin's excellent CSS resource for more on that bug.

It's hard to get a concrete recommendation but the essence seems to be that you should design for monitors from 800 to beyond 1024 px page width. But how does that define layout? Don't expose readers with very wide screens to too much technical content at once in very wide lines. This will be more of a problem as better technology becomes cheaper. To allow for most current and near-future contingencies I advise this:

• Use a Liquid layout but with a maximum width that keeps reader's exposure to new concepts within limits, perhaps 1024 pixels max including fancy borders, browser edges and so on.

Line Width:  Please bear with me while I say one last time: If you make your lines too wide, readers like me with short attention spans will be put off, especially if the information is complicated. This problem is mostly avoided if you set your page widths within reasonable bounds. Looking explicitly at line lengths gives another slant to readability. Check out Svend Tofte's. words on the topic and his browser-oriented solutions.

The CSS version of this page uses a fixed width layout that fits snug in IE, Mozilla and Firefox browsers with screen resolution set to 800-x-anything.

That's all for this HowTo. In the next HowTo I move fully to CSS and complete the layout that I use for HowTo's/Tutorials throughout the Swerdna • Net site.

Links to Great Webmaster Tools

I use and recommend all of these. None are advertisements and all are FREE and downloadable via the links provided.

If you have any suggestions, criticisms, comments about this or any other page on the website I'd be glad to hear from you by email on the address below. If you have similar content my visitors should see, let me know the web address too please.

Cheers, Swerdna.