Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

Usability, Accessibility, Web Standards, SEO and You

January 8, 2006 By barrie@compassdesigns.net Leave a Comment

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.

w3c valid website overlap

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:

Comparison of Design Factors
 
SEO
Accessibility
Usability
Positive
  • Keywords in URL, title tag, h1/h2 etc tags, alt text and site links
  • High keyword density in body, (content seperated from presentation) preferably near beginning
  • Small Pages <30k
  • Themed pages
  • Efficient internal link structure
  • 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
  • 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
Negative
  • Text presented in graphics
  • Excessive JavaScript
  • Excessive Flash
  • Text presented as graphics
  • No alternative to JavaScript, particualry for navigation
  • No alternative to Flash content
  • 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

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.

 

Filed Under: Joomla Tutorials

Compass joins Joomla Documentation Team

January 5, 2006 By barrie@compassdesigns.net Leave a Comment

We are excited to annouce that our Head Designer, Barrie North has
joined the Joomla Documentation Team, specifically working with
template design/documentation. We are proud to be part of this growing
open source CMS and look forward to developing useful guides for Joomla
designers in the community.

Filed Under: Uncategorized

Codex Unforgiven

January 2, 2006 By barrie@compassdesigns.net Leave a Comment

The owners of Codex Unforgiven, a gaming fansite wanted a site that was powered by Joomla but looked different from the “usual” Joomla site.

The game featured a background rich in gothic horror and the
design needed to incorporate that. The result was a site that used rich
graphics to capture the flavor of the game and certainly looked
different.

Built with CSS and meeting W3C standards, it is a good example of how
CSS can be used to create rich graphical sites that aren’t “boxy” as
some tend to be.

You can visit the site at www.codexunforgiven.com

 

CU Joomla Template

Filed Under: Uncategorized

compassdesigns.net Receives Web Design Award

December 29, 2005 By barrie@compassdesigns.net Leave a Comment

We
are excited to announce that the www.compassdesigns.net site has won an
award for web design from designfirms.org. The scoring was based on
Creativity and Design, Programming/Compatibility/Etc. and Ease of use
and effectiveness. We’ll be proudly displaying the design award on our
site!

Filed Under: Uncategorized

Best Practices in Web Design

December 11, 2005 By barrie@compassdesigns.net Leave a Comment

Big Picture #2:

A Web site can cause only four things to happen in the moments after someone sees it:

  • She clicks and goes somewhere else you want her to go.
  • She clicks and gives you permission to follow up by email or phone.
  • She clicks and buys something.
  • She tells a friend, either by clicking or by blogging or phoning or talking.

ThatÂ’s it.
If your site is attempting to do more than this, youÂ’re wasting time and money and,
more important, focus.

A Web page isnÂ’t a place the way Starbucks is a place. A Web page is a step in a process.
The steps on the stoop in front of your house understand (if steps understand anything)
that they exist in order to get you up or down. If you asked the architect what any
particular step is for, she wouldnÂ’t hesitate. The answer is obvious. The purpose of this
step is to get you to the next step. ThatÂ’s it.

So whatÂ’s that Web page for? What about this one?

It seems really simple, doesnÂ’t it? ItÂ’s not. ItÂ’s not simple because many Web pages are
compromises, designed to do three or six or a hundred different things. HTML is a
powerful tool, constantly misused by people who believe that just because they can do
something, they should.
So bear with me for a moment, and pretend you have a Web page that does just one
thing.

And that it leads to another page that does just one thing.
And soon (as soon as possible), your Web pages lead people to do the thing you wanted
them to do all along, the reason you built your Web site in the first place.

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:

Browser statistics
Gecko-Based Browsers (AOL-Compuserve, AOL for OS X, Camino, Firefox, IBM for OS/2, Mozilla, Netscape 6+, etc.) ~10%
KHTML-Based Browsers (Konqueror, OmniWeb 4.5+, Safari, etc.) ~2%
Microsoft Internet Explorer IE5 or lower ~3-4%
Microsoft Internet Explorer IE6 or higher ~80%
Netscape 4.x <1/2%
Opera ~1-2%

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.

Filed Under: Uncategorized

  • « Previous Page
  • 1
  • …
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • Next Page »

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2023 Compass Designs · Musings on Education, Life, Joomla and the Web by Barrie North