Compass Designs

What makes a good website?

Your website should have a goal. A measure how how “good” the website is how successful it is in meeting that goal.
The goal for an e-commerce site will be very different to a fan portal,
but nonetheless, “good” websites share some common characteristics. In
order to meet your goal:

• Viewers have to find your site
• Viewers have to be able to view it easily
• Viewers have to be able to find what they want
• Viewers must think your website is credible

There is significant overlap between these characterstics. The
things that make a site easy to find are the same ones that make it
viewable, navigable and credible. Let’s take these characterstics one
at a time and see what they mean.

Viewers have to find your site

Most people on the web find a website through a search engine. According to Nielsen//NetRatings
over 5 billion searches were carried out in October 2005, almost half
of these were using Google. Unfortunately “build it and they will come”
is not true on the web. A website with no traffic stands little chance
of aceiving its goals. Potentially the most effective way to get
traffic is through Search Engine Optimization (SEO). SEO is the
strategies involved in increasing a website’s search engine ranking
(SERP), where it appears in a search engine’s results page.

Viewers have to be able to view your site easily

Many things can get in the way of someone trying to view your site
for various reasons. Vewiers with vision impariments, whether blind,
color blind, old or simply viewing the site on a PDA/mobile phone need
well laid out web sites both in terms of organization (semanitc layout)
and graphical (white space/typography). Viewers on dial-up or older
computers might need sites that use little graphics or Flash. Many
users for various reasons will browse your site with JavaScript turned
off. All of these groups need a website that is accessible to them, and these viewers, according to some studies, can account for up to 30% of the population on the internet.

Viewers have to be able to find what they want

If a viewer can’t find what they are looking for on your website
easily, chances are they will leave and go elsewhere. Your website has
to be useable. Studies vary in what they say about how long
someone will take to figure out your website, but the figure quoted
most often is about 8 seconds. More than 83% of Internet users are
likely to leave a website if they feel they can’t find what they’re
looking for (source: Arthur Andersen), and 58% of visitors who
experience usability problems don’t come back (source: Forrester
Research).

Viewers must think your website is credible

Once they have found your site, and figured out how to use it, they
need to stay on it.
“When a site lacks credibility, users are unlikely to remain on the
site for long. They wonÂ’t buy things, they wonÂ’t register, and they
wonÂ’t return” (Stanford-Makovsky 2002).

What makes a site credible? In the same study Stanford/Makovsky
found that the “Design Look” or the site’s overall design or look
accounted for 46% of a site’s credibility. This included layout,
typography, white space, images, color schemes, and so on. This was
followed by “Information Design/Structure” (28%) or poorly the
information fit together, as well as how hard it was to navigate the
site to find things of interest.

Many of the factors involved in being credible are the same for being accessible and usable.

SEO, Accessibility, Usability and Web Standards

So another way of looking at what makes a good website is to describe it in new terms. A good website is:

• Search engine optimized
• Accessible
• Usable

Many of the factors that make a site better at one of these also improve it in another, there is lots of overlap between them.
For example, a site that is (x)html semantically structured (the xhtml
explains the document, not how it looks) will be easily read in a
screen reader by someone who has poor vision. It will also be easily
read by a search engine spider. Google is effectively blind in how it
reads your website.

Another way of thinking about this is graphically.

A good web site will have lots of overlap. Here we have introduced the idea of a framework of W3C valid code.
A site that is validates to the World Wide Web Consortium’s (W3C) web
standards has a much better foundation for making it accessible, usable
and search engine optimized. Think of these as building codes for your
house. A website built with them is stronger and safer. You can check
your pages with the W3C’s HTML validation service. for free. At its simplest, a site that meets W3C validation uses semantic (x)thml and seperates content from presentation using CSS.

SEO

About half of searches on the web are done with Google. What does it
take to get a good SERP with this search engine? Patent #20050071741 or
“Information Retrieval Based on Historical Data” (Google) describes
over 118 factors that effect a web site’s position in search engine’s
rankings.

Some of the more important on-site factors are:

• Keywords in title tag, h1/h2 etc tags, alt text, URL and site links
• High keyword density in body, (content seperated from presentation) preferably near beginning
• Small Pages <30k
• Themed pages
• Efficient internal link structure

The negative on-page factors include:

• Text presented in graphics
• Excessive JavaScript
• Excessive Flash

A well organized usable page that is designed to be accessible will have a better chance of acheiving high SERP. You can find more details about SEO at www.compassdesigns.net/articles/webmarketing/seo-guide.html

Accessibility

Web accessibility is about making your website accessible to all
Internet users regardless of what browsing technology they’re using.
Often accessibility is used in the context of blind users, but it is
much more. It includes other vision-impaired users such as color
blindless or the elderly, those using older browsers, users on mobiles
phones or PDA’s, or simply someone on a slow internet conenction.

An accessible web site will:

• Provide meaningful information in the title, h1/h2 and image alt tags
• Have the most useful information near the top
• Have pages that load fast
• Have meaningful link text
• Gives user control over pages, e.g. resizing text
• Include a text-based sitemap

Factors that make a page less accessible are:

• Text presented as graphics
• No alternative to JavaScript, particualry for navigation
• No alternative to Flash content

A page designed to be accessible will also be highly usable and include many of the factors for SEO.

Usability

Classically usability is defined as “a quality attribute that
assesses how easy user interfaces are to use”. Steve Krug of “Don’t
make me think” uses the example from his wife, “if I have to think more
I just don’t use it as much”.

Another quote illustrates the importance of usabilty, albeit from a commercial perspective:

“Homepages are the most valuable real estate in the world.
Each year, companies and individuals funnel millions of dollars through
a space that’s not even a square foot in size……. Corporate
homepages are the most valuable real estate in the world. Space on a
big company’s homepage is worth about 1,300 times as much as land in the business districts of Tokyo.”
(Source: Jakob Nielsen on Usability and Web Design)

Usable pages:

• Employ scannable text and meaningful sub-headings
• Use meaningful graphics, not just pictures of models.
• Have small graphics whenever possible to reduce download time.
• Avoid using graphics as links or content
• Have a well-organized site
• Use text-based navigation

To describe negative factors of usability, here are some of Jakob Nielson’s Top Web Design Mistakes :

• Frozen font sizes and low contrast between text and background.
• Non-standard JavaScript links
• Flash navigation.
• Browser Incompatibility
• Frozen layouts with fixed page widths
• Page titles with low search engine visibility

An analysis of web design award winners
came to the conclusion that “if your goal is to win Web Awards, then it
seems that you should design an aesthetically good looking Web site at
the expense of usability. The Web site will look good, but will be slow
and difficult to use for some viewers. But if your goal is to sell
products or services, then we should look at the Web sites that succeed
in this goal. Amazon is the leader when it comes to selling products,
Yahoo is the most popular search directory, AOL has millions of users,
and Microsoft, the most successful software company today. What do
their Web sites have in common? As we have seen, they all focus on
usability. The all have fast and easy to use Web sites.”

W3C Web Standards

You may have seen words such as “web standards” or “CSS“,
but what exactly are they? “These technologies, which we call “web
standards,” are carefully designed to deliver the greatest benefits to
the greatest number of web users while ensuring the long-term viability
of any document published on the Web” (source: webstandards.org/about/).

To help you understand where web standards came from, some history
is helpful. Many web pages are actually designed for older browsers.
Why? Browsers have continually evolved since the www started. New ones
have appeared and old ones have disappeared (remember Netscape?).
Another complicating factor is that different browser makers (like
Microsoft) tend to have their browsers interpret html/xhtml in slightly
different ways. This has lead to web designers having to design their
websites to support older browsers rather than new ones. It’s often
decided that the web page needs to appear properly to these “legacy”
browsers.

Web standards put into place a common set of “rules” for all web
browsers to use to show a web page. The main organization pushing these
standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989.

Ask five designers what web standards are and you will get five answers. But most agree that they are based on the following:

• Valid code, whether html or xhtml (or others)
  Earlier we used an example of building codes for construction. The
  standards outlined for the code that makes a web page have been
  developed to acheive consistancy. It’s easy to check your code at validator.w3.org. Make sure you use the correct DOCTYPE when you try and validate your code. This article at Compass Design described valid Joomla doctype.
• Semantically Correct Code
  We mentioned before that being semantic means that the (x)html in the
  web page describes only content, not presentation. In particular this
  means structured organization of h1/h2 etc tags and only using tables
  for tablular data, not to layout a web page.
• Cascading Style Sheets (CSS)
  Closely related to having semantic code, is using cascading style
  sheets to control the look and layout of your web page. Cascading Style
  Sheets (CSS) is a simple mechanism for adding style (e.g. fonts,
  colors, spacing) to Web documents. (Source: www.w3.org/Style/CSS/).
  They exist parallel to the (x)html code and so let you completely
  seperate content (semantic code) form presentation (CSS). The best
  example of this is CSS Zen Garden, a site where the same semantic xhtml is shaped in different and unique ways with different CSS. The result is pages that look very different but have the same core content.

Summary

The following table shows how these factors are related:

We can see that is significant overlap. Clearly to have a site that
is both search engine optimized, accessible and usable you need to make
sure that you have:

• good semantic markup
• small page sizes
• efficient and meaningful link structure
• meaningful graphics and no graphics as text
• small amount of Javascript or flash

The most effective way to acheive these is to design web
pages to current W3C standards. Using CSS in particular to seperate
content for presentation is highly effective in meeting these goals.

What does this mean for a Joomla Website?

Looking at the above criteria, all of these factors are currently
controlled by the template designer, not the core of the Joomla CMS
itself. The designer can create a template that incorperates good
semantics, or small pages sizes. Currently the Joomla CMS does have
issues where it outputs content in tables and is not using useful
semantic headers (though this will be fixed in an upcoming release).
However, advanced template designers are able to overcome this
drawbacks and produce a template that results in a site that is
accessible, usable and search engine optimized.