Besides keeping your web site focused, it is also import to consider accessibility. Some of the people who visit your web site will be suing different monitors that yours or running it at a different resolution. More importantly, however, some users will have poor eyesight or even completely blind. How do you ensure that your web site is user-friendly to people with these limitations?

You might need to make some changes to the way you code your site to sthat you don’t alientat this group of users. It is possible that they may be using a screen reader which reads the words out loud. Some screen readers are more advanced than others but in all cases you should do your part to help your web visitor. Stick to the guidelines given here as well as clean HTML and CSS and your web site should be more accessible.

Navigation

This is one of the most challenging aspects of your web site to your users with disabilities. If you use Flash or JavaScript for your navigation bar, screen readers may ot be able to interpret the links. An easy alternative is to use CSS.

Users may also want to increase font size or remove the display of images (text-only) to make your web pages easier to read. If you use images for your navigation but any text embedded with them will not be able to be read by the screen reader.  The easiest way to fix this is to always use the <alt> tag for every image. For example if you designate a little house icon for your home page or even have the word “home” embedded in the button so it is no longer text, the screen reader can’t “see” it. If, however, the tag for you image is <img alt=”link to home page” …> the screen reader can describe the image to the user with disabilities. Also when images are turned off in the browser the alternate text will be displayed.

Also be careful in using tables in your page design. Screen readers often have difficulty understanding them. Tables can be made accessible by keeping them simple and not using empty cells.

Hyperlinks

You can also provide short cuts to navigate your site by including the accesskey attribute in your links. For example, <a href=http://capproservices.com/ accesskey=”H”> lets the user press Alt or Ctrl plus H to follow the link to your home page. Don’t try to do this for all of your links — just for the main navigation bar. JAWS, the most popular screen reader, can read Accesskeys aloud allowing users to access pages more quickly.

Another attribute to add to links is <title>. This will indicate to the user the destination of the link.

Using the right colors is also important for navigation. There are many people who are color blind. Tools such as http://colorfilter.wickline.org will simulate how your web site pages appear to someone who is color blind.

There are also tools to help you check to be sure your web site adheress to the Web Accessibility Initiative (WAI):

• Accessibility check
• Accessibility Tools

Since this articles is about writing, however, and not publishing other’s work, let me remind you to use that word processor on your PC to its fullest extent. All of the really good ones provide tools to check spelling, grammar and punctuation. If you don’t have one of these good ones, I suggest that you check out OpenOffice.org for their free software suite.

Many people find it difficult to read from a screen rather than paper. They also seem to have a much shorter attention span.

There are three ways to choose a color scheme:

1. Pick one of the ones already developed by other Kuler users
2. Create a new one using the color wheel
3. Create a new one based upon an image (one you upload or select from Flickr)

Let’s look at each of these three and how you would use them for your web site.

Using Existing Color Schemes

Using the menu or search box on the left of the screen, select an item or enter in a search term, e.g., blue or water. In the second column from the left select one that you like or go to the bottom of the list and use the navigation icons to view more results. Click on the one that appeals to you in this column and then click on the box that directs you to “Make changes to this theme and view color values” that is over the description of the color scheme you selected in the main center column. You can make adjustments to any of the displayed colors by using the sliders below each color or by draggin its circle on the color wheel. When you have all the colors the way you want them, note the HEX characters displayed below each color swatch. This is what you will enter in your Cascading Style Sheet for various design elements for your web site (more on this later).

Using the Color Wheel

Click the Create link in the first column. Select one of the six “rules” at the top of the color wheel page. In the color wheel, drag the dot with the circle around it to your primary color choice. The other dots will move to new locations based upon your rule and primary color choice. It’s fun to play with all of the possibilities.

Using an image

Click the Create link in the first column of the Kuler home page. Select the “From an image” link in the upper left. Either upload an image using the “Upload” button located below the default image or select the flickr button. Select an image and then use the suggested colors from the photo or move the dots around the photo to pick up the colors you want to use. You can also change the “mood” to get a different set of swatches.

Harvest Orchard color scheme

Color schemes

If you are not an artist, you may need assistance in picking the colors for your site. If you are a complete novice or know that you tend to match stripes with plaids, you are probably better off using a predesigned template. If you do have color sense, you will still need to keep a few “rules” in mind when designing your site. Stick to a few key colors: three to five are best. Complementary color schemes work very well, e.g., blue and orange. Monochromatic or analagous color schemes will also work. See Kuler article for more on picking color schemes.

Font schemes

Did you know that you only have a handful of fonts from which to choose if you want your visitors to see the same as you see on your screen? Most of us have dozens of fonts installed on our personal PCs from various software programs. The trouble is that the visitor must have the exact same font installed on their PC in order for it to be displayed in their browser. For this reason, it is important to stick to the following fonts which I have grouped into two main categories: serif (w3c.org definition:  “Glyphs of serif fonts, as the term is used in CSS, have finishing strokes, flared or tapering ends, or have actual serifed endings [including slab serifs]. Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the ‘sans-serif’ generic font family.”) and sans serif (w3c.org definition: “Glyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain — without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the ‘serif’ family.”). Cursive (w3c.org definition: “Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.”), fantasy (w3c.org definition: “Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters [as opposed to Pi or Picture fonts, which do not represent characters].”) and monospace (w3c.org definition:  “The sole criterion of a monospace font is that all glyphs have the same fixed width. [This can make some scripts, such as Arabic, look most peculiar.] The effect is similar to a manual typewriter, and is often used to set samples of computer code.”) are also supported font types.

Page layout

Another design element which will give your web site a unified look and feel is page layout. Page elements (banners, menu bars, navigation bars, pictures, number of columns, footers, etc.) that are located in the same place on every page will achieve this. Again, predesigned templates can assist you greatly in this task.

Browser compatiblity

There are many browsers in use around the world. Here are the statistics for September 2009 for this web site:

Top 10 Browsers

1. 50.4% – Microsoft Internet Explorer (41.5% of the total are still using version 6)
2. 32.1% – Unknown
3. 6.8% – Opera
4. 6.4% – Mozilla
5. 2.3% – Firefox
6. 1.1% – Safari
7. 0.3% – LibWWW
8. 0.1% – Lynx
9. 0% – Netscape (1 hit)
10. 0% – Wget (1 hit)

Based upon these statistics we need to test on a variety of browser versions because different browsers (and their versions) support different web standards.

Limiting Design

Your web site design should help people find the information they are seeking. This is really two separate categories. First, you will want to make sure that you have a consistent design throughout your site. This can be accomplished through a template or cascading style sheet (more on this in another article). Secondly, you will want to keep your pages short, less than 1,000 words.

Keep vertical scrolling to a minimum — a sales page and blogs seems to be the accepted exceptions. Horizontal scrolling, however, is never acceptable. The “standard” width is currently designed to work on a 1024 x 768 monitor resolution. This amounts to about 960 usable horizontal pixels. Keeping your design narrow is ideal as it is difficult to read across wide columns of information. There’s a reason newspaper columns are so narrow!

Limiting Pages

This doesn’t mean limiting your site to a few pages. Content rich sites make the search engines happy. What this does mean is sticking to your topic and breaking up long pages into several pages. It also means you should combine very short pages that only have a paragraph or two of information. “Perhaps the only thing readers hate more than having to sccan thousands of words onone page is constantly havingto click to a new page, because there are only a few words on each one.” (Martin, 2008)

Limiting Language

Who will be visiting your web site? What language will they use? Do they understand technical terms specific to your topic? You may need to provide a glossary or links to Wikipedia to explain unfamiliar terms. Also be careful not to talk down to your audience.

I’ve used a lot of different products over the years including NetObjects Fusion and Dreamweaver. I currently use Dreamweaver CS3 for most of my web development, mostly because of its tight integration with Flash, Photoshop and Fireworks. I am hoping to learn the entire Microsoft Expression Studio as I’ve read lots of good reviews and I find the interface comfortable.

Top New Features in Adobe Dreamweaver CS4

• Live View
• Code hinting for AJAX and JavaScript
• New user interface
• Related files and code navigator
• HTML data sets
• Adobe InContext Editing (extra service)
• CSS best practices
• Adobe Photoshop smart objects
• Subversion (source control) integration
• Adobe AIR authoring support

New $399

Microsoft Expression Web 2 Features

• Professional web design environment
• Standards based site design
• CSS layout
• CSS site templates
• CSS style application
• CSS Management
• Property task pane
• Rich data presentation
• ASP.NET 3.5
• Edit PHP pages

New $299

Namo Web Editor 8

• New user interface – ribbon menu
• Effective presentation features
• Teaching plan wizard
• A variety of quiz features
• Easy statistics learning
• DIV tag through visual not just code
• Rich design resources
• Connect to a blog

New $99

CoffeeCup HTML Editor 2008

• HTML and CSS code completion
• Project management
• Quick tag help
• Quick start from layout
• Optimized resource tabs
• Cleaner, valid markup

Full version $49

NetObjects Fusion 11

• AJAX UI components
• AJAX effects and transitions
• Data source XML binding
• Databind to any object
• XHTML 1.0 publishing
• Automatic code hinting
• Integrate custom scripts
• Image gallery
• Google site traffic tools
• Integrated web apps

Full version $199.95

NetObjects Fusion Essentials

• Drag and drop layouts
• Site Management Tools
• Upload files with built-in FTP
• Form builder
• Photo Gallery
• e-commerce tool
• Custom shape tools
• Rollover images
• Insert custom HTML and scripts
• Flash, QuickTime, and more

Free download

Once you have registered your domain name and arranged your hosting, it is very tempting to dive right in putting pages on your new web site. Without proper planning, however, you will quickly find that the web you have woven has become very tangled.

The first think to consider is the focus of your web site. In general, is your web site to share information, sell products or build relationships? Who is your primary audience? You also need to consider how technically savvy your readers are? What age group or social demographic? What information will your readers expect to find on your web site? What information do you have readily available for your readers? What types of information do you expect to put on your Web site, e.g., calendar, newsletters, staff profiles, etc.? Who will be the “webmaster” — the web manager — of your web site? Will you have assistance in maintaining your web site? How often do you expect to update the content on your web site? How much time per week or per month will you dedicate to updating your site?

Map it out

One very effective way to plan your web site is to map it out using pencil and paper. (If you are comfortable using software, Microsoft Word has a great organizational chart feature that you could use instead. See example at right.)

Decide what information, in a general sense, will be on each page. Connect other pages to the home page with lines and you will begin to see a navigational structure. A good “rule” to follow, is to limit each level of navigation to seven pages. As with almost all rules, there are exceptions.
You’ll notice in the example that I have a single page hanging off the home page: About Us. Pages that should be available from every page in the web site should be at the same level as the home page.

If you are going to use a content management system (CMS) like Joomla, you won’t need to be concerned about a file or folder structure. On the other hand, if you are going to upload the pages of your web site manually, you will need to have some kind of structure. At the very least, create an images folder.

Looking good

Put away your paper and pencil (or Microsoft Word) and hit the web. Spend some time, perhaps an hour or two every day for a week, browsing the Internet. Take note of sites you like and why. Perhaps you like the way one site handles navigation or how another one uses color. You might also note things you don’t like and why.

According to Nielsen Norman research, “users visiting a new site spend an average of 30 seconds on the homepage and less than two minutes on the entire site before deciding to abandon it. They spend a bit more time if they decide to stay on a site, but still only four minutes on average.” If they have to spend 15 of their 30 seconds figuring out which link to click on your home page, you’ve probably lost them. He says: “Thus, websites should have almost no features: focus on the words.”

Now you are finally ready to begin sketching some page designs. Start with your home page. Keep in mind the things you liked and noted in your earlier research. You probably noticed in your research that most web sites have a logo in the upper left corner of every page which links back to the home page. Depending upon your audience, you probably will not want to deviate from what most users expect to find on your web site. Other elements common to most web sites is left-hand navigation that may change as users travel further down into your site’s structure, and global navigation at the bottom of the page in the form of text links.

Unless visitors arrive at your site via a search engine, most of them will arrive through your front door: your home page. Think about the images you can use. Do you have a logo? If you’d like them to come back, you will need content that is fresh and frequently updated.

Now that you have your plan, it is time to create your web site.

Navigate to http://sites.google.com with your browser. You will need a Google account to create a free site. If you use any of Google’s services, such as Google Mail, you already have account. Click on Create site.

You will be presented with a form to complete. Enter the name for your site, a short (optional) description and select a theme. If you don’t want anyone to see what you are designing, select “Only people I specify” for Share with. I didn’t like the themes so I clicked on the More themes link and was presented with about two dozen themes.

Finally, you will need enter the code displayed. This is to prevent automated programs from maliciously creating a bunch of sites on Google’s servers.

Click the Create site button and you will be presented with Google’s site building tool. Click the Edit page button and begin typing.

Navigation is crucial

The components that make up the navigational structure of a web site are known as navigational elements. The first thing to consider is your domain or company name. If your company name is well branded, potential visitors may enter it into their browser’s address bar or a search engine. So although your name isn’t normally considered a navigational element, it becomes one when used to locate your web site. If this is a possibility for your site, keep your web site name short, don’t use punctuation or unusual spelling. You should also keep your subfolder names short, too, and for best search engine rankings, use keywords.

Usability studies show that a visitor’s path through a site frequently takes him back to the home page. Some visitors will start here but many may arrive at a page deep within your site. As they browse this page, if they find what they were searching for they may click on other links on that page. If they want to check out the site as a whole, they will want to start at the “beginning” which for web sites is the home page. For this reason, it is important to have a link to your home page on every page of your web site. This conventional navigational element is usually found on multiple locations. The usual locations for these links are: (1) the upper left, usually a graphical link; (2) in a text link at the bottom of the page, usually part of a horizontal menu bar; and (3) sometimes as part of a breadcrumb trail.

Links

During the infancy of the World Wide Web, pages were displayed in 16 or less colors, using mostly text and sometimes including very simple graphical images. Users expected all links to be blue underlined text, like this. Today, web designers have done all kinds of tortuous things to links: like this (click on “this” to see where it takes you), or this or even this. (For this last one, it is a white text with a red background, a black-dotted border and it BLINKS! You won’t see the blinking in all browsers, e.g., Internet Explorer.)

There’s nothing wrong with having distinctive links for your web site as long as your visitor can easily find them! Make sure they are in a different color from standard text. If a visitor looks at your web site and can’t immediately tell where all the links are, they won’t like it and won’t stick around very long.

The simplest form of HTML pages, also called static HTML, can be created by anyone with a text editor. For example, Windows users could use the built-in Windows Notepad application to create web pages. Although you could use this application, there are other HTML editors available which are much easier to use. Notepad2 is a free, lightweight editor that includes syntax highlighting for a number of programming languages including HTML. A more comprehensive editor is Arachnophilia, which is built using Java so that it will work on a number of different operating systems.

Most word processing applications, like Microsoft Word and OpenOffice provide a way to save regular documents as HTML documents but they usually contain a lot of extra code to support the formatting you have used.

Quite a few of the web hosting companies offer site building tools but you will quickly find them limiting. See Yahoo! GeoCities or Google Sites.

Even if you decide to purchase a software package to assist you, I recommend that you learn at least the basics of HTML coding.

The following are some commonly used text editors that may be used to create web pages (must know HTML):

WYSIWYG (What You See Is What You Get) web authoring tools