Here on my personal Web site, I create Web pages as an archive of my technical computer support notes as well as including articles and pages on my other interests. My goal is to follow Internet standards as closely as I can to make the pages widely available. The learning and development process is ongoing and I update pages as my skills improve and as I find better information. (I have additional links to information on HTML, CSS, and more on my Web Development Reference page.) By the way, don't print this page. It is getting quite long at this point.

When I first connected to the Internet, I used lynx, a text Web browser, that I still use on occasion today from my MacOS X computer. I realize that visitors use Blackberry, cell phone, text reader, and other non-standard browsers. So, I am aware that Web pages can get confusing for users if one develops only using the latest graphical browsers. I also realize that response time is very important. I remember talking to a South African colleague by phone a couple years ago and he told me he accessed the Internet over a slow modem paying by the minute. Until recently, my sister was on a modem dial-up connection. I showed her how to disable image loading and how to load individual images, if desired. I browse the net with Javascript disabled via the NoScript extension of Firefox, choosing to enable it on a site-by-site basis, if I so desire. I am reminded that these types of users exist as I create my article and page designs.

There is an article, “What is Web 2.0”, by technical publisher Tim O'Reilly that describes features and a pattern language of web services and applications that feature simplicity, collaboration, device independence, open source characteristics, and more. It is a long article, with many links to references, but valuable reading.

By the way, since we are talking about web design, make sure your pages don't show up on the Web Pages That Suck site. Big name sites appear here more often than you might think. You also want to consult with or hire professionals if it is more than a personal site. You don't want to rely on “nephew art“.

Web Site Design

The Basics

When first developing Web sites for my job, I discovered Jakob Nielsen's AlertBox web site. In reading a lot of the articles and implementing some of its suggestions, I found users had fewer problems finding information when the pages were more intuitive. I found a number of reference sites valuable; they are definitely worth your time. (By the way, designers take issue with Jakob. Read the discussion at DesignByFire on Nielsen's link guidelines.)

The current recommendation is to break the task of implementation into four areas:

Content Creation - the information created by authors and editors. The web requires a more compact version, as users don't read, they scan pages.
Semantic Structure - the relation of the content components to each other in a hierarchical layout (headings, subheadings, paragraphs, etc.) HTML coding organizes the information.
Presentation - how the information appears on the page, screen, or device. CSS style sheets describe how.
Behavior - interaction and dynamic actions are controlled by Javascript, usually, or some server-side delivery, like PHP. This should enhance or extend functionality, not coerce it. (i.e., "You must have...")

(You can get an overview of the history of Web design at Wikipedia.) I set the document type, check syntax in my editor, use the validators, and then test in the local Web browser—Mac or Windows—and then check display in the lynx text browser from a Unix command-line. For an example of seeing content separated from presentation, use the Firefox web browser and visit www.transparency.org, the MSN homepage, or the WestCiv CSS Tutorial and select "PageStyle:No Style" from the Firefox "View" menu. The settings change will only affect that page and you can use the browser back and forward buttons to compare the two views of the same page.

By the way, if you have users accessing your site using a modem and a dial-up connection, you might want to follow the old rule-of-thumb of keeping the total page size—text and all images—below 56k, which is a bit radical these days. The accessibility testing tools below will show you estimated time for total page download. I believe Adobe Dreamweaver (formerly from Macromedia) shows such information in its "status" bar in "Design" mode. (The ABCNews homepage was 208.8k and 30 seconds and MSNBC was 182.16k and 26 seconds on a 56k modem when I checked.) You might want to read "Statistics from Around the Web" to get a sense of how many users are disabled, using dial-up connections or alternative browsing devices. MarketShare lists browser statistics.

A number of months ago, I found it aggravating to use my sister's computer with its dial-up connection. I had her turn image loading off to browse more efficiently over the slow connection. I also noticed how few designers take the time to include ALT tag information (alternate text) for images. A talented web graphic designer would know techniques to reduce images to a very compact size while remaining attractive and informative. Don't simply re-purpose printed publication techniques. The Web is a different environment.

One strategy for assembling your resources to learn the techniques and complete a project is to think of these three groups of resources:

Get a good book - these fall into three categories: theory; reference; cookbook. Theory books are more a mix of editorial comment on the 'why' along with details of implementation. A reference is more like a dictionary listing syntax, terms, and properties and, in the best case, included examples. It may be included in the appendix of a how-to/cookbook. Theory and references may be combined in one book. There are posters and pocket references of tags and attributes available. References might include:
- code reference - listing tags/attributes/values (html); selectors/properties/values (css); functions/properties/etc. (javascript)
- vocabulary/jargon reference - until terms are second nature, these are handy. I usually find these online, like Eric Meyer's CSS glossary. Webopedia is a good overall computer term reference site that I use occasionally. Wikipedia is also useful. (The Web Design page, mentioned earlier, was interesting reading.)
Cookbooks will contain projects, possibly with files you can download, that describe real-world issues and hands-on practice that test your knowledge and skills. Often authors write online articles that are a good preview of the information and their writing style and ability to make the complex understandable. Some of the links here are for online articles.
Get a good tool - when editing HTML, CSS, or Javascript, having an editor that has syntax coloring (to delineate tags from content text) is essential. Tool palettes, text look-ahead or tag-completion features are nice. Validators are essential as are built-in reference guides or pick lists. Browser or internal editor preview, and a Javascript debugging window are helpful.
Find a mentor - this could be an experienced friend who is an email or phone call away. A good book might fill the need, but it is more likely that you would benefit from an online community resource like a newsgroup, email list discussion, or forum. The Off-topic page at CSS-discus lists a few.

This page is all about listing resources that meet these criteria. I'm a bit weak on the 'access to a mentor' aspect but the web sites listed here and books often have 'additional resources' sections that will help.

Identify User Community

First, you need to identify who will use your site and what tasks they want to complete. Create a character profile of who they are, their reasons for using the web, what equipment they use and how they connect. This is called developing a persona. The Merriam-Webster definition states “a character assumed by an author in a written work“. The standard approach is to identify representative user personas and scenarios that describe their tasks, like gathering information, getting support, connecting with others, and/or purchasing goods or services.

PersonaDesign: This is one of a series of Wiki articles in a knowledge base for the topic of information architecture. It links to many other pages and off-site resources. It is a good place to start. Writing is clear and concise.
Three Important Benefits of Personas: A short article on User Interface Engineering that describes why to develop user personas.
What's the Problem: Article introduces use cases, a method all stakeholders in the web development process, from management to coders can use to understand and discuss task implementation.
Use Cases: Part II - Taming Scope: A follow-up to the "What's the Problem" article that discusses increasing complexity as a site develops and includes more features.

Naturally, members of your target user community would also be good candidates for usability testing. The rule-of-thumb is to "test early and often" for most benefit in creating an effective site layout and page element design.

Inventory of Content

Once you have your user community identified, the next step should involve taking an inventory of content. This might involve

interviews with members of user community
review of current online and paper forms and processes
descriptions of process elements to create a standardized vocabulary
assembling lists of articles and documents for online availability

You might also review the Wikipedia entry on controlled vocabulary. It is usually mentioned as a component of the database development process and part of the information architecture review (see below.) As the web expands, developers add metadata to pages and site resources for better indexing. When you interview and review existing forms, etc., be observant about what terms are used to describe groups of information, site items, etc.

I recently finished reading a book, "Creating Your MySQL Database: Practical Design Tips and Techniques", that covers effective interviewing, and grouping content in preparation for creating a database. The author noted conflicts in terminology and discussed how to resolve it in your design. The book is concise, understandable, and well illustrated. I wish I had this book when I took a graduate database course a number of years ago. That course used the Elmasri “Fundamentals of Database Systems“ book, which I found incomprehensible. Where that book is theory-heavy, this book is powerfully practical.

A search on Google found the Priorities and Schedules page of the Webcontent.gov. The home page lists several article areas that might prove useful in a web development effort.

Information Architecture

Information architecture (the structure of information) and the user interface (the presentation of that information) are both essential components of an effective web site. Here are several online articles that give an overview:

Organizing Page Content and Producing Effective Web Copy

A very brief article on "5 suggestions for writing and organizing an effective web page." This is a good place to start in developing a strategy.

Creating Semantic Structure

A brief article that covers the basics of defining the information hierarchy on a typical web page. The goal is for maximum availability and device-independence. This is on the WebAIM site, a group that works on accessibility for users with disabilities. The article has a link to the W3C validator, detailed version, and suggests you check the box for Outline and then validate your page. The outline would be at page bottom.

Be aware that there is disagreement on implementation of headings to create a linear hierarchy for a document. i.e., do headings connote importance or sequence? See Eric Meyer's Pick a Heading article and the comments discussing the article. See also the "Structure and Presentation" page of "Developing with Web Standards".

Another article on the SitePoint.Com site, "The Hard Facts About Heading Structure" discusses the issue with valuable commentary from practitioners/readers.

In addition, you can add value to your content by exploring Microformats. You can use these to identify information on your pages in a standards-based format that browsers and other tools can recognize. Its hCard format is similar to address book vCard formats, for example.

WebPatterns.Org

This site is collecting resources and including discussion of design patterns and web development. For example, most sites follow a tradition for placement and presentation of navigation items: tabs or buttons, etc. See the "Books on Patterns" in the sidebar of additional material.

Introduction to Information Architecture

A one-page article on publisher SitePoint.Com that covers the basics:

The information architect is solely responsible for (in small Websites), or, in medium to large Websites, leads a team of people that are focused on delivering some or all of the following:

Competitive Analysis

Site Requirements

Site Goals with the help of all stakeholders

Personas

Wireframes and /or Use Cases for task flow

Navigation and Labeling

Prototype

Vocabulary (if any)

Sitemap

Usability Testing of prototype and wireframes

Information Architecture for the World Wide Web

This book from the technical book publisher O'Reilly, describes "how to blend aesthetics and mechanics for web sites and intranets that are easy to navigate and appealing to your users, scalable and simple to maintain."

As information architects, we organize information so that people can find the right answers to their questions. We strive to support casual browsing and directed searching. Our aim is to apply organization and labeling systems that make sense to users.

This book has a support web site with another interview and a chapter excerpt. As mentioned earlier, there is a short online interview with this author and the author of "Don't Make Me Think".

Topics: User Science: Information Architecture

An index to articles on information architecture on the A List Apart site for web design professionals.

Usability and Interface Design

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition: by Steve Krug; This book is essential reading for the web designer, developer, or anyone on the team discussing the task of assembling a Web presence. The book is targeted at e-commerce but its concise (197 pages) approach and many varied illustrations make it a must read for anyone developing personal or business Web sites. It covers how users don't read, they scan and click. (Years ago, Apple Computer found users didn't even scroll down when visiting pages. In newspaper parlance, they stay "above the fold." See "Improve Usability for Older Users" for a similar finding.) It discusses where you need to place items to improve user success at your site and more. This is one of those "If you only read one book on web design." i.e., this should be it. It has a number of additional resources in an appendix. The support Web site is at http://www.sensible.com/ and there is an excerpted chapter, Organization Systems.
The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience: by Douglas K. van Duyne, James A. Landay, Jason I. Hong; This book describes a highly regarded approach to web site creation. From the site: "a resource for anyone on a Web development team, from business executives to advertising managers to software developers to content editors. The best possible team will understand and buy into the customer-centered design philosophy because every person on the team influences how the Web site is shaped and formed." See also Design of Sites page on Amazon for user comments.
Alertbox: Current Issues in Web Usability: A weekly column that is part of the UseIt.Com Web site. Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he cofounded with Dr. Donald A. Norman (former VP of research at Apple Computer). The site describes itself as "usable information technology". There are many top ten lists, suggestions, examples, reviews of sites that work and those that don't. The design of the site is spare but the articles are essential reading for those developing Web sites. For an example, read "The Need for Web Design Standards," which describes standards and conventions on Web sites that users expect.
Topics: User Science: An index to articles on accessibility, information architecture, and usability on the A List Apart site for web design professionals.
Viewable with Any Browser Campaign: This site explains the need for Web pages that can be viewed in any browser and why these created pages should degrade gracefully rather than state "This Web site best viewed in xxx Web browser." There is an extensive design guide.
ArsTechnica Articles Feature: The cutting edge technologist at ArsTechnica has a Javascript-based button toolbar at the top of his articles that allow the user to increase or decrease font size, switch display layout from black text on white background to white/colored text on a black background and more. The small buttons have title attributes that give hints to purpose when you hover over the button with your cursor. All his articles appear to have this feature. This is such a thoughtful feature! Much handier than memorizing keyboard shortcuts or finding menu items. By the way, I find this solution more elegant and thoughtful than the text widgets on Wired.Com, which don't look like buttons.
Bulletproof Web Design: This book's subtitle is "Improving flexibility and protecting against worst-case scenarios with XHTML and CSS". Covers implementation of XHTML and CSS for device-independence, accessibility and standards-compliance; well-written and short.

Text Contrast, Color and Readability

Lately, I visit Web sites that are attractive but difficult to read. I find the sites are using style sheets to modify the page presentation for attractiveness, leaving the HTML code for the underlying document structure, as recommended. The problem is that the background color is white, while the body text color is gray and this results in not enough contrast to read the content.

Here is a table of different popular gray text color values contrasting each and black text against different background colors and the word 'brown' is wrapped in the 'strong' tag. (Note, I'm using styles to display the background and text color, so you will have to have stylesheets enabled):

Contrasting Different Body Text Colors Over Pastel Color Backgrounds
Gray Text over #FFCCCC (pink)	Gray Text over #FFFFCC (yellow)	Gray Text over #FFFFFF (white)	Gray Text over #CCFFFF (blue)
The quick, brown fox... - #CCCCCC gray The quick, brown fox... - #AAAAAA gray The quick, brown fox... - #999999 gray The quick, brown fox... - #666666 gray The quick, brown fox... - #333333 gray The quick, brown fox... - #000000 black	The quick, brown fox... - #CCCCCC gray The quick, brown fox... - #AAAAAA gray The quick, brown fox... - #999999 gray The quick, brown fox... - #666666 gray The quick, brown fox... - #333333 gray The quick, brown fox... - #000000 black	The quick, brown fox... - #CCCCCC gray The quick, brown fox... - #AAAAAA gray The quick, brown fox... - #999999 gray The quick, brown fox... - #666666 gray The quick, brown fox... - #333333 gray The quick, brown fox... - #000000 black	The quick, brown fox... - #CCCCCC gray The quick, brown fox... - #AAAAAA gray The quick, brown fox... - #999999 gray The quick, brown fox... - #666666 gray The quick, brown fox... - #333333 gray The quick, brown fox... - #000000 black

Note, revisiting this page a year later after finding "transparent" text on a web article, I found my previous example sites (Xandros, transparency.org, VMWare) cleaned up their act and now use good contrast text... except Apple who is committed to this component of design. You can still find plenty of examples, though, such as an article from FineWoodworking.Com on Japanese paper or another article on a working in a small workshop. See a captured portion of the screen. Despite boosting the font size, reading the grey text is still a chore.

Apple Computer uses grey—#76797c, recently #808080—on white for text content, seen in the past as text images, which will not scale up for the visually limited user. Promotional pull-out sections use grey text on a grey background. Note, the legal pages "Terms of Use" and "Privacy Policy" are in high-contrast black-on-white, while the links to them are light blue on white.

Lighthouse.Org: This is an organization that covers medical and accessibility issues on visual impairment. There are two articles on the site I found very informative: "Making Text Legible - Designing for People with Partial Sight" and "Effective Color Contrast - Designing for People with Partial Sight and Color Deficiencies".
Try Vischeck on a Webpage: While I'm on the subject of contrast and its impact on visual limitations, this simulator on the Vischeck web site returns an image of your page as someone with color vision limitations might see it. Enter a URL in the form, then check the simulation image link.

Using Standards-Based Javascript

Unobtrusive Javascript quickly describes the roles in web presentation:

Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up "what is this text" and the CSS "how should it be displayed". Javascript adds a new dimension, the "how should this element behave".

The Operation Cleanout in Progress article on the site describes the progress on web design in separating content from presentation and behavior, the role of Javascript and suggested techniques for writing problem-free code.

In browsing the Web, I see a number of high design sites that only show content if Javascript is available, or that rely on Flash animation, which requires Javascript. Web sites for upcoming movies or TV shows often fall in this category. If a user visits with Javascript disabled or with a browser that doesn't support it, they get little or nothing. More importantly, if you are not cognizant of accessibility, you will never know there is a problem as it won't appear in your server logs as an error.

You can disable Javascript—I use the Firefox NoScript extension to allow/disallow Javascript as I browse, or the Web Developer toolbar extension's "Disable" menu. Here are examples of problem sites for non-Javascript users (last visited on 4-Aug-07):

Method.Com - while the site states "We are passionate about design", it notifies you that you have to have Flash, and therefore Javascript (not noted), to see it.
Arbinger.Com - content appears briefly, then redirects to a "Javascript needed" page. While other sites re-display fully when Javascript is enabled on-the-fly with a tool like NoScript, this does not because you were forced to an error page, which refreshes. In another outrageous example of this Elsevier's page on Writing for Multimedia and the Web presents the same behavior. (Apparently, irony is lost on them.) A better, more standards-based approach would have "Javascript-needed" content appear in a NoScript section on the content page.
Federation of American Scientists - the visitor gets only a blank white page with a text URL link. (I get nothing in lynx.) The underlying Javascript code redirects the browser to the actual content page.
LivePerson.Net - this online support service site shows "linked" text. The cursor icon changes to a hand icon but no link address appears in the Status bar and nothing happens when clicked. I found other sites that show "#" links that have the same behavior.
Voting Machine Companies Attack Review or just about any Forbes article linked from Google News. You can read the un-styled article just fine but if you want the Forbes banner and attractive, styled layout, you need Javascript. Once enabled, you are redirected and forced to see a flash ad, then the article.

Creating Accessible Javascript

If you decide to use Javascript for linking, navigation, interaction behaviors, or form processing and control, you need to read this extensive article from WebAIM (Web Accessibility in Mind.) It briefly describes Javascript and how its implementation might impact accessibility for disabled users. It discusses guidelines, steps to disable/enable Javascript for various Web browsers (for testing your pages), recommendations for navigation being device independent (i.e., user may not use a mouse), specific Javascript handlers, and more. There is much information on this site. It is a must read.

By the way, the WebAIM folks also have a page on Creating Accessible Macromedia Flash Content that is worth reviewing.

Creating Accessible JavaScript Alternatives

You must include a NOSCRIPT block for users that disable Javascript or users with browsers that do not support it. Javascript is also covered in the Scripts and Applets section of JimThatcher.Com, an accessibility consultant. (For an example of a company that doesn't get it, disable Javascript and visit the Proctor and Gamble web site. You'll be sent to a please upgrade your browser page, with no mention of needing Javascript.)

The NOSCRIPT block will deliver content to users that have no Javascript support or have it disabled. The book Javascript Anthology: 101 Essential Tips, Tricks & Hacks from SitePoint.Com covers Javascript best practices, along with a related SitePoint article, "Quality Javascript from Scratch". Here's a quote from the book's first chapter:

Although [using NOSCRIPT is] a sound idea, in practice this solution has become less useful over time, because NoScript cannot differentiate by capability. A browser that offers limited JavaScript support is not going to be able to run a complicated script, but such devices are script-capable browsers, so they won't parse the NoScript element either. These browsers would end up with nothing.

A better approach to this issue is to begin with static HTML, then use scripting to modify or add dynamic behaviors within that static content.

They are recommending separating content from presentation, where Javascript enhances the latter but still delivers content for the non-Javascript or limited Javascript support user. If you want to use dynamic menus, there is a script-free solution on the GRC web site for your review.

Avoiding Evil Javascript

This provocatively-titled article is an excerpt from the SitePoint Tech Times e-newsletter by one of the authors of a book for beginning Javascript developers. It concisely describes the issue accessibility vs. high-end features. The reader comments after the article are also valuable.

A much better way to solve accessibility issues is through progressive enhancement, where you start by building something that works in the simplest, most accessible environment (in this case, a browser with JavaScript disabled), and then progressively enhance it with features that will improve the user experience in browsers that support them, or silently fail in browsers that don't.

The above quote is from a follow-up article in issue 159 of TechTimes. The author states Javascript isn't evil but can be used to exclude and frustrate users.

Graceful Degradation & Progressive Enhancement

A several page article on developing for the web in layers of enhancement, which gives basic functionality to limited web browsers and adds to that foundation.

More on Javascript in the Reference page.

Developing in a Team

Strategy and Division of Labor

There are a number of books and articles out there and it can get overwhelming. I am still reviewing. To summarize strategy and implementation, the current practice is to separate content from presentation. Additionally, you may include interface behaviors for more dynamic interaction with the user. Javascript is usually the way this is accomplished. You may be working alone or with a team. Here is an article and two books for your team:

Effective Project Management for Web Geeks - this article briskly covers the subject in two pages with illustrations and a practical approach. The author also publishes a blog, Geek | Manager, with more project management tips.
Deliver First Class Web Sites: 101 Essential Checklists - describes itself as "a complete compendium of best practices drawn from the author's own experience and dozens of expert third-party references. It's the ultimate roadmap for web developers, project managers, and anyone involved in the process of building web sites." I find it very accessible and can get ideas from brief sessions with the book. Content is compact, targeted, and useful. Review the sample chapters on the book's site. Once you purchase, you can download checklists—without the book commentary—as PDFs.
Web Redesign 2.0: Workflow That Works - attractively laid out with good content flow, sidebars, expert commentary and examples of needed project forms. (The project forms are downloadable from the book's web site.) While the book is about re-design, showing before-and-after illustrations and brief commentary, the focus is on the process: defining the goals, deliverables, roles and responsibilities, and much more, making it valuable for any team.

I see the tasks divided into the following:

Content Editing - creates the words on the page and gives folks reason to visit your site. The content author may not be an HTML coder. There are content management systems (CMS) out there, possibly using entry forms for non-HTML-savvy authors. (See the article "CMS and the Single Web Designer" for an overview.) Editors, like Dreamweaver, have visual editing environments that hide code creation. (You will notice I don't cover what content should go up. Be aware that Web users often "scan and click" rather than read Web pages. Read “Don't Make Me Think” for more on this.)
Semantic Structure - lays out the relationship of the page content for web display in our structure-presentation-behavior model. You use HTML coding to create containing elements with enclosing "id" attributes that represent that structure, or define related items with "class" attributes.
Presentation - displays the graphic design with appropriate images and page styling using CSS creating the "look" of the page. Editors like StyleMaster even allow you to create a CSS stylesheet skeleton from a structured HTML page, as well as inserting the appropriate "link" line in the HTML file itself. (See the CSS tutorial on the WestCiv web site.)
Behavior - enables presentation of dynamic content via Javascript. Web 2.0 and AJAX (Asynchronous JavaScript And XML) personify this approach.

It is worthwhile to visit Apple's Web Page Development: Best Practices page for an overview of issues and techniques in using HTML, CSS, Javascript, and more.

The line between the various tasks and roles is not rigid. Presentation and behavior will interact. Content may be dynamic, etc. I am trying to include a basic procedural strategy on "how do I get this done" as many articles cover implementation techniques. Following the programmer's dictum "release early and often", I recommend using paper prototyping and other usability testing early and often to ensure you are aware of user needs and behavior.

Data Integrity and Backup

Most web site hosting providers include on-site backups, for hard drive failure, and off-site backups, for facility catastrophe. i.e., they are prepared to recover from problems on their site or services they provide. You need to develop plans and procedures to ensure data integrity and recovery from human error or malicious behavior.

Resources for Professional Web Designers

A List Apart: For People Who Make Web Sites: This web site has numerous articles on the issues and techniques for creating great, standards-based web sites. There are topic sections on: Code, Content, Culture, Design, Process, User Science.
Information Architecture Institute: A non-profit volunteer organization dedicated to advancing and promoting information architecture, the design of shared information environments.
American Society for Information Science and Technology (ASIS&T): Their web site slogan is "The Information Society for the Information Age". They present the Information Architecture Summit conference.
Usability Professionals Association (UPA): Web sites for more resources. I attended a meeting of the New York chapter of the UPA as a guest and found the presentation and conversation with the members valuable.
Guild of Accessible Web Designers: "The Guild of Accessible Web Designers (GAWDS) is a worldwide association of professional organizations, web designers and developers working together to promote the use and preservation of accessible design standards." Includes a list of tools and links to related web sites.

Editing Tools

I use a full-featured text editor to create Web pages, inserting HTML tags directly. There are also visual Web editors that work more like word processors, hiding the HTML code creation behind the scenes. These tools often have an integrated code editor or allow you to use an external editor to work with code before return to the main application. Note, the visual editors can add more code in the background than a text editor and you have to work to ensure this extra code does not cause problems for users of non-standard, text-to-speech or text-only browsers like lynx. Dreamweaver creates clean code and has design or code editing views. See "The Trouble with WYSIWYG Web Editors" for a short overview of problem editors. Content and navigation are king. Graphic design should support these goals.

By the way, if you need dummy text, visit Lipsum.Com. It has an online form that lets you generate paragraphs of the Latin text that has been used by designers creating composition mock-ups for ages.

BBEdit

On MacOS X, I use BBEdit, a text editor from Barebones.Com, a wonderful editor for working directly with code. It has tag creation helpers, validation, etc. It is the only application I used where I cheered after discovering features.

HomeSite

On Windows, my preferred editor is HomeSite. It is available as a stand-alone application, now at version 5.5. After that, it was rolled into Macromedia's Dreamweaver product. It has tag creation helpers, validation, etc. Note, I needed to check XHTML validation in the preferences as it isn't set by default.

UltraEdit

On Windows, I also use UltraEdit another full-featured text editor, usually with my Perl work. The vendor also sells a program to compare files and directories called UltraCompare.

Dreamweaver

Macromedia's Dreamweaver is often the application of choice for Web developers. It has a full development environment with template creation with the ability to set locked or editable page features or content. You can set it to use BBEdit (Mac) or HomeSite (Windows) as an external code editor. Changes in the code editor are reflected in the visual editor of Dreamweaver. It isn't cheap but is highly flexible and configurable.

I found an interesting article, "Dreamweaver Basics", on the Boxes and Arrows peer-written journal site for information professionals that describes how to use Dreamweaver to create wireframes, prototypes of site layout and hierarchy.

There is one Windows behavior I need to mention. When I open Dreamweaver Help, the font is too small to read. This is not a Dreamweaver problem. The display font size in the Windows Help facility is controlled by Internet Explorer. Open IE and select "Medium" in the "View:Text Size" sub-menu. If Dreamweaver Help is open, you may need to quit and re-launch. You might be able to right-click and select "Refresh."

Contribute

Macromedia's Contribute is a collaborative tool where an administrator can run a web site using templates created with Dreamweaver and distribute editing to publishers and writers with or without page approvals. See also the article "Integrating Dreamweaver 8 with Contribute 3."

StyleMaster

This is a CSS editor from WestCiv. It includes a style sheet wizard, which poses a series of questions with a page preview panel that allows you to build your style sheet visually. The vendor also has an extensive CSS tutorial, templates and more available from their Web site.

CSE HTML Validator

This application validates HTML and CSS, works with HTML Tidy and integrates with other Web development applications. There is more information, a comparison between versions, and a review of how it differs from the W3C online validator service.

Panelizer

In addition to the books lying open on your desk, it is handy to have a reference displaying on your monitor. I use this with Firefox, keeping a separate window that I can activate to check an element reference.

What might be an ideal Web editing setup? If you have the cash, Macromedia (now Adobe) Dreamweaver 8, and WestCiv's StyleMaster for CSS. For browser preview, include Microsoft Internet Explorer (with IE Developer Toolbar), Mozilla Firefox (with the Web Developer toolbar and IE View extensions and several Panelizer references), and lynx (and possibly Netscape Navigator 4 for true backward compatibility, depending on your audience.) For accessibility testing, most of the online tools generate large reports with many suggestions. Dreamweaver's File:Check Page:Check Accessibility and the Firefox Web Developer Toolbar add-on are both useful Finally, have a set of bookmarks to online validators and a subscription to the BrowserCam service.

Validation and Testing

Include a DOCTYPE

It is good practice to include a DOCTYPE line. The validation tool in editors need it as a reference benchmark as do the online validators listed here. If a full DOCTYPE line is included, the browser will render in "standards" mode. If it is missing or incomplete, it won't validate and will render in "quirks" mode, possibly affecting display of the page. Review the "Activating the Right Layout Mode Using the DOCTYPE Declaration article and chart on DOCTYPE switching and behavior.

You can check page rendering mode in Firefox by selecting "Page Info" from the "Tools" menu. (I recently read that Internet Explorer 5 only renders in "quirks" mode.) If you "view source" on pages you visit with your web browser, you will often see "transitional" in the DOCTYPE line. This allows many non-standard coding features and might give users trouble. A number of sites currently recommend XHTML 1.0. You have a choice among "transitional", "strict", and "frameset" DOCTYPEs. Read the text article "Sending XHTML as text/html Considered Harmful" and its caution about delivering XHTML as "text/html". The author notes most XHTML pages on the web are invalid XML. He recommends HTML 4.01 or XHTML served as "application/xhtml+xml". My reading of it finds that if you go with XHTML, you must validate and get the commenting of embedded script and style blocks in the correct—and a bit complicated—format.

You can review Adding a DOCTYPE to your web page at the JavascriptKit site or read the article and reference "Pick a Rendering Mode" on Eric Meyer's book support site, which explains reasons why you need to get the DOCTYPE correct (in addition to describing other legacy CSS-support problems.) The W3C has a list of "Recommended DTDs to Use" I use the "strict" version of XHTML. Check the HTML code for my article using "View: [Page] Source" from your browser menu. You can review the W3C HTML Compatibility Guidelines Appendix for using XHTML.

Online Validation Services

How do you know if your Web pages and site are adhering to standards? Your editor may have internal tools to specify document type, check syntax and links as my editors BBEdit, HomeSite, and Dreamweaver do. You can also use the validators listed here. I use these in addition to the internal editor tools.

W3C HTML Validator: Validate your HTML pages by entering the URL, uploading a local file, or pasting file contents into a form field and then running a validation check. Read the report and the included links to more information. The W3C also has a W3C Log Validator, a downloadable utility for webmasters to "find and fix the most frequently accessed invalid documents on their Web site, acting as a comprehensive, step-by-step validation tool.". Additionally, you can validate code fragments in the extended direct input form where you can select the DOCTYPE. The Web Design Group also has their WDG HTML Validator.
CSS Validator Service: Similarly, you can validate your cascading style sheet. You can also check a block of CSS text. As an alternative, you can use the WDG CSS Validator.

Usability Testing

Why You Only Need to Test With 5 Users: An article on the AlertBox site that recommends testing early and often. You don't need a big budget and time schedule. Only a few users are needed.
Some Basic Testing Concepts: An article on usability testing on the Philosophe.Com site. The site has many articles on developing web site quality.
Usability Testing. Oh, The Things You Can Learn: This article argues for user testing throughout the project to get information and stay close to user needs and goals.
Web Page Analyzer: From the site: "Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time." Report is concise, easy to understand, and illuminating.

Accessibility Testing

Some users visiting your site may have visual or physical limitations. Be aware of this in your design. For example, I visited a RadioShack.Com page in Firefox with Javascript disabled and had trouble. I then checked the location in lynx, a text browser. While I could navigate with the arrow keys, the page would improve by using empty 'alt' attribute values for presentation-only images and setting the navigation bar content to a list, styling it to a button bar for visual browsers. (Here is a screen capture in lynx.)

In addition to the validators and analyzers just listed, here are some links concerning accessibility specifically.

Evaluating Web Sites for Accessibility with Firefox: The article on the Guild of Accessible Web Designers site illustrates using choices available in the Firefox Web Developer Toolbar add-on/extension, complete with screen shots.
Watchfire WebXACT: There are users with disabilities that might visit your Web site. They may be color-blind, use a text-to-speech Web browser or other modifications or limitations. This online tool at Watchfire will review your page, reporting problems, including links to suggestions and more information. Adding ALT text to graphics and otherwise labeling and separating items is an easy and effective way to broaden your site's accessibility. This is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues. Additional reports available. You can also purchase the Bobby desktop testing tool here, if desired.

Browser Preview

Previewing your work in a Web browser is essential. Most editors will let you set your preferred browser. Test your pages in a couple browsers, especially Internet Explorer (IE). Review the multi-page article CSS for All Browsers. It has much information on issues and techniques. The author tests widely. If you are interested, you can review a list of browsers and their ID strings or a review of current, rare and very rare browsers. Your browser may appear in the form section at the end. You can also check IP Chicken for your IP address and browser string. You can also change your default browser, if you desire.

Firefox Web Browser Extensions

While previewing in IE is a given, I like Firefox and if it works well in a standards-based browser like Firefox (or Opera), it will probably work in most other browsers. Firefox allows you to install extensions that add functionality. Here are two that are handy for Web developers:

Web Developer toolbar - Adds a toolbar with menus of various web developer tools. I use the Outline menu choices to review page features, the Miscellaneous button can clear cache and/or history, or to mark links as unvisited. The Disable menu allows you to test pages with Java, Javascript, or other browser features disabled. This is very handy when developing. One example of using several features to diagnose page components is described in "Print It Your Way" on the A List Apart site.
IEView - [Windows only] Allows you to view the current page in Internet Explorer via right-click to display a menu showing "View this page in IE". You can also set particular page to automatically open in IE.

Internet Explorer

Internet Explorer is the most-popular Web browser and you need to take into account Internet Explorer and CSS issues. The various versions of Internet Explorer (IE) on Windows have a number of non-standard behaviors in rendering CSS. IE7 fixed a number of issues but IE6 is still widely used.

Taming Your Multiple IE Standalones is an article that extensively describes the dream of web developers to be able to test different version of Internet Explorer on their single, workstation. There are a number of links to related articles and resources. Read this first! There is a LOT of information and tips here.
Install Multiple Version of IE on Your PC is available from the TredoSoft web site. A single installer will give you versions 3-6 of Internet Explorer. The page states it was tested on Windows XP only. Basically, make sure you install IE7 first, and then use the Multiple IE installer here. See the "Taming" article above for the three, needed modifications. (Thanks given to the eVolt.Org IE browser archive.)
Test Conditional Comments for IE Standalones will assist in determining what version of IE you are actually using in your testing.
Internet Explorer Developer Toolbar is available from Microsoft for Internet Explorer 7, running on XP or Vista. It takes up less screen real estate than Firefox's Web Developer toolbar as its class and id labels hover above in a different layer. I discovered I had a conflict with the IE Developer toolbar and the Netcraft toolbar. So, if you use this toolbar, you might want to minimize or remove other third-party toolbars.

Netscape Browser Archive

You can download old versions of the Netscape Navigator/Communicator package here. Netscape/Communicator 4.x may still be popular with your users. It runs on old hardware. Check your web server access logs to see if users still depend on old browsers to visit your site. This assumes you don't have features that make it impossible for users of older browsers.

BrowserCam

This is an interesting service. As the site describes itself: "Instantly See Your Pages in Any Browser on Any Operating System -- BrowserCam's Screen Capture Service lets you submit multiple URL's, choose the browsers and operating systems you want to see, and in about a minute returns screen captures of your webpage loaded in the different browsers and operating systems you selected." The site has a tour, 24-hour evaluation, and membership options.

Lynx Text Browser

While not a validator per se, many text-to-speech Web browsers are based on the text-based lynx browser. I use it as a final test of page accessibility. I installed lynx on my MacOS X computer via the MacPorts Unix software package manager. Lynx runs on Unix, MacOS X, VMS, on DOS (386 or higher) and OS/2 EMX. It says it runs on recent versions of Windows (95/98/NT and above) but I had problems finding a good distribution and running it successfully on Windows XP. Note, lynx is good for those on extremely slow modem connections or old hardware. There is also a lynx viewer simulator online.

VMWare Browser Appliance

Visit this VMWare page to get the free VMWare Player application and the Browser Appliance. The article "Secure Browsing with Virtual Machines" describes browsing the Web using such a virtual machine. On my Windows XP computer, VMWare Player and the Browser Appliance run Firefox in an Ubuntu Linux virtual environment, making it a safe browsing container. It starts up slowly, and requires an additional setup step if you want to copy and paste between Windows and the Virtual Linux environments. You also have access to a limited terminal (shell) application under Applications:Accessories. You can read the PDF included with the application or the online FAQ on using the Browser Appliance.

Reworking Existing Pages

I mentioned the book Web Redesign 2.0 up in the Developing in a Team section, but it is worth re-emphasizing its value, especially in its targeted task of site redesign. Here are a number of related articles and tools for updating and improving your site.

How-to Articles

While it is best to create pages and sites from scratch following a standards-based strategy, it is often the case that you have to work with HTML pages, created prior to your tenure in the developer position, that were edited in Microsoft Word and saved as HTML or that use the popular table layout approach to create Web pages. The table layout separates page content into header, navigation, main text, sidebars, and footer in a process similar to that used in print page layout programs. You can read an extensive back-and-forth discussion of converting an HTML document to XHTML that covers many of the issues involved.

Retooling Slashdot with Web Standards: When I first read this article, Slashdot was using an HTML 3.2 DOCTYPE. (It is now HTML 4.01 strict.) This is a fascinating article on the A List Apart site where one developer reworked the underlying HTML code of the Slashdot main page to create a semantic structure for the content and layout and markup style sheets to control the presentation. That separation provides maximum flexibility and maintainability. The article includes screenshots of the page during different stages of reconstruction.
Books by Eric Meyer: The first chapter of both Eric Meyer on CSS and More Eric Meyer on CSS project-based books take this approach by adding a temporary style block to show borders on the current page to use as a reference and then begin work on a copy. He keeps the main layout table and uses CSS to convert nested tables and other HTML-heavy presentation code to the CSS standard approach. This is a good intermediate approach if you are not ready, or have the skills and understanding, for a purely CSS layout. By the way, read "Tables vs. CSS: A Fight to the Death" on SitePoint. It is funny and informative.
Migrating from Table Hacks to Web Standards: This link actually drops you into the middle of a very entertaining slide show comparing using tables for web page layout and using CSS to present information structured with HTML tags. Click "Next" for a couple slides to get a sense of the tasks needed. The list of online resources for more information is great.
A Real World CSS Conversion: Describes its task as "Convert a typical designer-type site from a table-based layout to a CSS layout. I'll not only show how, but why." Author uses a real site's page but hides the original identity for the project.
Website Redesign: A Case Study: This document describes the redesign process for the Information & Design website, complete with illustrations and discussion. It is briefly described. The paper is also available in PDF.
Semantic data extractor: This is a curious tool provided on the W3C site. Enter a URL into its form for analysis and it will walk the meta information and page headings to return a report listing the data structure of the document.

Diagnostic Tools

Web Standards Switch - or how to improve your Web site easily: An article about becoming standards-compliant using an online tool from the W3C called the Log-Validator. You create a text file of URLs for your site.

The Log-Validator takes a list of URIs and analyzes them according to the module you have chosen to load when you begin your testing. (It will be part of the job of your technical team, discuss with them how to implement it for your own site configuration.) For each URI, it will apply a series of tests and will give you the corresponding result.

You download the tool to use it. There is a manual available also.
Firefox and the Web Developer toolbar extension and/or the Firebug extension: You can use your Firefox browser and these quick, diagnostic tools to review current page features. The Web Developer toolbar's Outline menu can highlight existing page elements like frames, headings, tables, cells, block-level elements, and CSS-level positioning items like float, absolute, relative, and fixed. This is a non-invasive, non-destructive, read-only technique. You can "Show Element Names When Outline" as an option to see if you are in a 'div' or other element. Reload the page and the outlines are gone. Keep an outlined version open in a tab as a spacing and layout reference as you rework a copy of the page. Here is a screenshot of an outlined page. The Firebug tool set allows you to check, edit, and test HTML, CSS, and Javascript.
Preparing Your Coding Environment: This is an article on publisher PeachPit's site that features the Dreamweaver 8 Collapse Full Tag Tool. In Code View of Dreamweaver 8, I found it handy to click in a 'div' line and then collapse the entire 'div' element. It is on the left, vertical toolbar and has a less-than/greater-than icon. Here is a screenshot of the tool. (The MicroLoupe window is there to magnify the icon only.)
HTML Tidy Project: HTML Tidy is a tool for cleaning existing code to better meet various Internet coding standards. It allows you to create configuration templates for applying settings to code clean-up. I have a plug-in for my editor, I've used the command-line tool and there are tools for all OSes. More information is available at the project Web site. If you are using ColdFusion, ASP, Perl, or some database-driven system to generate pages, bringing your templates to a standards-based approach is a valuable strategy.
WebSort: This looks like a good tool from the online demo. You create folders/categories for card-sorting a list of items into the categories. Analysis follows. The online service has several subscription levels.

Finding Examples of Best Practices

Developing for the web is the art of manipulating technologies to present concise, quickly scanned information that users can access intuitively with little concern for the device they are using. I see this breaking down into good well-structured web writing, presented attractively with intuitive navigation for task completion with an awareness of accessibility issues. That means reviewing pages for keyboard-only, Javascript-disabled access and testing on a variety of devices, like cell phones, PDAs, text-reading and old browsers. The alternative is consciously or unconsciously excluding part of your audience. If they can't get in, you won't see them in web access logs, giving a false sense of success. Also, there are some HTML features that can frustrate your users. You can review the Don't Target Me article on the "target" attribute and the 1996 article Why Frames Suck (Most of the Time.) on the use and abuse of "framesets". I find the latter okay for online reference material.

In my research of sites exhibiting a best-practices approach, I used Firefox with the NoScript and Web Developer extensions to see how a page worked.

Visit the page with Javascript disabled via the NoScript add-on. See if components and content remain useful.
Use the Web Developer toolbar's CSS menu to select Edit CSS. This opens a side panel in Firefox to review the CSS rules. This is an optional step, but informative.
Use Firefox's View:Style:No Style menu option to turn off style sheets to see if the information remained useful and navigable. (Reset when desired, of course.)

I found the following sites presented well despite my disabling Javascript or style sheets:

W3C Homepage

This is no surprise as it is the premier web standards organization. After disabling Javascript and styling, I noticed the various "jump" links, like "Jump to Technology" would allow keyboard and handheld users to jump over blocks of navigation or content. There is a lot of information on this page and this feature is much appreciated. These "jump" links are hidden when styling is in force. Keyboard tab-navigation works intuitively.

Note, this page displays well on the old Netscape 4 browser.

Webcredible: the usability & accessibility specialists

Attractive display with Javascript and style sheets enabled. There are buttons to manipulate font size via Javascript. Page is fully functional and accessible when styling and Javascript are disabled. There is an initial "jump" link to the navigation section, great for keyboard navigating users. In the Firefox View:Style: menu, you will see alternate stylesheets available. Viewing page source, you will see style sheets targeted to "print" and "handheld" devices. Select to see the result of the print style sheet.

Note, this page displays well on the old Netscape 4 browser.

Accessible Website Menu

Also known as the "Ultimate Drop Down Menu". If you disable Javascript, the menu buttons work but will not have the pop-out sub-menus. If you display the page with no style, you will get a bare-bones page but even this is usable as the page begins with jump links to content, navigation, etc. sections.

This page displays well on the old Netscape 4 browser.

Quirksmode.org Resources

There is a lot going on here. Javascript inserts some auxiliary content, like "last updated" and style sheets but in a manner that extends and enhances presentation. Javascript also adds navigation to "show site navigation" and "show page contents". If Javascript and styling are disabled, It is perfectly useful.

A nice find is viewing the block-commented style sheet in StyleMaster. I saved this web page and related files to my desktop with Firefox's File:Save Page As:Web Page Complete, and opened the "quirksmode.css" style sheet in StyleMaster. I then selected Statement:Sort Statements List:Group by Smart Sections from the menu. This illustrates that application's superior ability to enhance code maintenance and organization.

Note, this page does NOT display well on the old Netscape 4 browser. (The author includes a note on what target browsers he uses for testing.) The browser is really old. You need to know if your audience relies on old hardware, an old OS, and old browsers.

mezzoblue CSS Crib Sheet

While I like the page layout, I'm including this page as it is comprised of a bulleted check list with brief descriptions of issues, often including a link or two to more extensive discussion and solutions. By the way, page content and site navigation are accessible if you disable Javascript and/or CSS styling. Therefore, it is a "best practices" page. (I did find minor errors—bare ampersands in URLs—when I validated the page at W3C.)