Best Practices in Web Design

Big Picture #2:

OK, so what do we get out of that? Well, its very important in the
pre-design part of the process to be completely sure what the site is
supposed to do. Then, break it down into pages, what should our viewer
do next?

I recommend writing this out on a separate piece of paper:

Page Title: ______
Viewer response:_________
Content on page:_________

Notice how I think about the response before the actual content of
the page. Once you have figured out you goals, you can then think about
the criteria.

Here are the goals of the web site we will be designing:

• Create a site that can be easily revised
• Create a site that provides useful information and tools
• Create a site that encourages users to return
• Create a site that allows two-way communication with the community

We will be identifying what specific tools will be added on to this
site later. Obviously ones that involved communication will be
emphasized. Based on these goals, I have come up with the following
criteria.

1. Fast browser load times
2. Browser Compatibility
3. Professional look
4. Accessibility
5. Design to web standards
6. Interactivity

Let’s look at these one at a time.

1. Fast browser load times

The biggest single reason visitors do not stay at a Web site is that
it takes too long to load – that is the time it takes for the page to
appear on the computer screen. The site needs to be designed around the
premise of ‘loading’ as quickly as possible. This issue is important
for this site as most users connect with dial-up which is especially
slow (compared to broadband).

To achieve this we will ensure a strong text base for the pages
(text loads very, very quickly). When photographs are used, we will
tailor them to be the appropriate size and structure to ensure that
they load within an appropriate timeframe. From a technical standpoint,
the sites will be designed with Cascading Style Sheets (CSS) in order
to further minimize the date being received.

2. Browser compatibility

Let’s take a look at what browsers people are actually using:

Source: http://www.upsdell.com/BrowserNews/stat.htm

I don’t try too hard to accommodate IE5 or less. It represents only
a small fraction, and adds significant complications to the CSS coding
through hacks (more on that later). You might think that this runs
counter to any philosophy of accessibility, and you might be right.
Besides, what are you doing using IE5 anyway?

3 Professional look

A professional “design look” is critical in how a web site is
perceived by the user. A study conducted by a non-profit research
group, Consumer WebWatch found that the leading factor about the
credibility of a site was “Design Look” (cited by 46.1% — the largest
percentage by a factor of almost 2). A siteÂ’s credibility is a major
factor in how much they use the site and how much they would return to
it.

4. Accessibility

We discussed this in the last article, we want the site to be fully
accessible to all. This requires additional attention is paid to the
design and structure of the site. The Web Accessibility Initiative
(WAI) (http://www.w3.org/WAI/) describes accessibility:

“Web accessibility means that people with disabilities can use the
Web. More specifically, Web accessibility means that people with
disabilities can perceive, understand, navigate, and interact with the
Web, and that they can contribute to the Web. Web accessibility also
benefits others, including older people with changing abilities due to
aging.

Web accessibility also benefits people without disabilities. For
example, a key principle of Web accessibility is designing Web sites
and software that are flexible to meet different user needs,
preferences, and situations. This flexibility also benefits people
without disabilities in certain situations, such as people using a slow
Internet connection.”

5. Design to web standards

Designing a web site to standards means having a site that will
benefit the greatest number of web users while ensuring the long-term
viability of the site itself. This means that a site can be viewed in
an array of browsers, or other Internet devices such as PDAÂ’s. The World Wide Web Consortium
(W3C) is the international organization that develops web standards,
directed by Tim Berners-Lee the inventor of the World Wide Web.

When I think about it, to me meeting web standards for design
essentially means separating content from presentation with Cascading
Style Sheets. One advantage of the CSS-based layout is its flexibility
— the content can be accessed regardless of the type of browser that is
being used. It allows sites to work on many kinds of devices instead of
just the personal computer.
Other advantages include:

• smaller file sizes and faster page loads,
• less bandwidth usage
• faster development and maintenance,
• easier to redesign.

It is worth noting that the design principles contained within
accessibility and web standards also lead to sites that are more
usable. Along with credibility, usability is a major factor in why
viewers return to a site.

6. Interactivity

Without interactivity, a Web site is purely a book online.
Interactive sites capture user details online and monitor what users do
inside the system. The more visitors can interact and ‘do things’ on
the site, the more likely they are to revisit. Using a content
management system allows the easy integration of many interactive tools
such as:

• forums
• newsletters
• polls
• media galleries
• event calendars
• document managers

All of these allow varying degrees of user interaction with the site.