The Internet
TESL Journal
Guidelines for Designing a Good Web Site for ESL Students
Charles Kelly
http://www.aitech.ac.jp/~ckelly/
Aichi
Institute of Technology (Toyota, Japan)
Introduction
This is a list of points that should be considered when
designing a web site. Many of these are points that should be considered when
developing any web site, some points are directed at any teacher developing
educational web pages, and some points are specifically aimed at teachers of
English as a Second Language.
While reading this list of guidelines, keep the following in mind.
From a visitor's point of view, a good web site is one
that...
- ...is usable
- ...has something he/she wants
- ...doesn't waste his/her time and
- ...isn't irritating.
A Quick Overview
- Make your site usable by everyone if possible.
Don't
unnecessarily do things that limit the number of people that can benefit from
your site.
- Make your site as fast as possible.
This not only makes your
site more enjoyable to use, but also allows those with expensive and/or slow
Internet connections to use your site.
- Make your site easy to use.
Make it uncluttered, easy to
navigate and easy to read.
- Make your site useful.
Create a site that fills a need.
- Maintain Integrity. Be Professional.
Be honest. Offer what you
claim to offer. Check your spelling.
- Make your site friendly and fun to use.
Make your site as
attractive and fun as you can without making it slow.
- Use "cutting edge technology" wisely and effectively.
Use it
when it's the best way to do something, but don't annoy visitors with "cute"
stuff.
- Remember that what you think is true may not be true.
Some
possible misconceptions.
- Should I really worry about the minority who use less powerful
computers, use older browsers and have slow Internet
access?
Yes.
The Guidelines
1. Make your site usable by everyone if possible.
- A. Make pages that work on any browser.
- If possible, try out your page on both Netscape and Explorer (current
and earlier versions) and on both Windows and Macintosh platforms. Remember,
however, that there are other browsers and other computer platforms, so it
is unlikely that you will ever know exactly how your page will work for
everyone.
- If possible, don't require Java, JavaScript, Flash and other things that
aren't available on all browsers.
- Don't require a wide "window." Remember some screens are small and some
visitors with wide screens will not be using full-screen windows.
- Don't make your web page(s) depend on images. Be careful with using
images for "text" items such as sub-titles, menu items, etc.
- B. Make pages usable by everyone regardless of their preference
settings.
- Remember that many people using the latest browsers may still have
things like images, Java and JavaScript disabled.
- Put the ALT code into any image code you have on the page. This allows
those not viewing images to understand your page.
- Make sure your page is readable even if a visitor doesn't download the
background image.
- C. Make your site as backward compatible as you can.
- For example, if you use Flash, and you can make something that works
with the Flash 2.0 plugin, don't add some little cosmetic feature that
requires you to save it as a file that only works with Flash 4.0.
- Sometimes even if it can be done slightly more effectively utilizing
features only available on the latest browsers, it is better to compromise
and make a page that works for a wider audience.
- D. Make your pages usable by handicapped visitors as well.
- With a little extra thought, you can make your page easy to access by
people who have visual and other handicaps.
- For the visually handicapped, make your page work with speech
synthesizers and be careful about assigning font sizes and colors. Speech
sythesizers can read text, but can't read images, so titles, sub-titles
and other text displayed in an image get ignored, unless the ALT code is
included.
- Other handicaps to take into consideration are people with less powerful
computers and slow Internet connections.
- E. There are cases where you don't need to make your site usable by
everyone
- If your target audience all use the same computer with the same browser
installed with the same plugins using the same preference settings and they
are all accessing the pages from the local server, then a lot of these
points are irrelevant. (A certain number of people develop things to be used
in their school's computer labs, so speed and compatibility aren't an
important consideration.)
- However, sometimes with just a little extra effort, you can also make
your materials usable everyone else on the web.
2. Make your site as fast as possible.
- A. Make fast-loading pages.
- Keep the size of the HTML file to a minimum.
- Eliminate everything that doesn't show on the surface of the page.
Eliminate multiple spaces, returns and tabs in the HTML code. Remember
that any amount of "white space" is reduced to one space on the surface of
the page.
- Remember that color changes, font size changes and tables add to the
size of the file. Consider not using these.
- Be careful when using HTML editors. Most, maybe all, insert a lot of
unneeded duplicate code, resulting in files much larger than necessary. If
you learn enough HTML to edit out the "junk", you can often more than
halve the size of the file.
- Make your pages cache-friendly.
- Avoid other things that slow down the loading of your pages.
- Avoid CGI, SSI on pages that can be static pages. Your page will be
faster. This also allows the pages to get cached which may allow the
visitor to get your page even faster.
- Don't use images or use only a few small ones. Using an image for the
page title is not so bad. However, it is so easy to add images to pages,
that inexperienced writers often put in too many.
- B. Make fast-displaying pages.
- What makes a visitor wait is not only the amount of time it takes to
download, but how long it takes for the page to display.
- Traditional, straight-forward formatting allows visitors to read the top
of the page as the rest of the page is downloading. Full-page table
formatting and frames cause visitors to wait.
- Remember that what may seem acceptably fast for you on your computer may
seem painfully slow on a less powerful computer.
- Avoid multi-column full-page table formatting. This includes pages with
a column on the side for navigation buttons. The problem is that your page
will seem to stall as the computer is waiting for the rest of the page to
come in.
- Include the HEIGHT and WIDTH code for all images. This way people can be
reading your page while the images are still loading in.
- Remember that the more HTML formatting there is, the longer it will take
for the page to layout. Using many color changes and font size changes will
require more time for the computer to layout the page.
- If you feel that you must use SSI or CGI to put a page counter, a
randomly-selected image or randomly selected text on the page, put it at the
bottom of the page, so visitors can be reading your page while waiting for
the delay caused by SSI or CGI.
- Be careful not to include too much "navigation." Some poorly-designed
pages devote a higher percentage of their file size to "non-content"
navigation and advertising than they use for presenting "content."
- C. Make your site fast to use.
- Don't make your pages too large. Don't make your pages too small. If
pages are too large, visitors must wait a long time for the pages to load
in. If the pages are too small, visitors spend a lot of time clicking links
and reconnecting to your server to get the next page.
3. Make your site easy to use.
- A. Make your site easy to navigate.
- Make navigation easy. However, don't put in so much that it makes your
page really slow by increasing the file size.
- Make it easy for the visitor to find what he is looking for. The most
popular pages should be the easiest to find.
- If you offer sub-pages for both students and teachers, make it very
clear on your main pages which pages are for students. If a low-level ESL
student visits your main page, then clicks to a teacher-oriented page, he
may think that your site has nothing there for him.
- Your main page should load in quickly. There is no reason you should
make your visitors wait a long time for a page whose main purpose is to
offer links to the rest of your material.
- Keep the amount of clicking to a minimum. If possible, have direct links
to all of your sub-pages from the main page. If a visitor needs to click
more than 2 or 3 times from the main page to get to any page on your site,
you may want to reconsider the structure of your web site.
- Warning: Including too much navigation will slow down your pages since
the more HTML code in the document the larger the file size. You don't need
links to all of your pages from all of your pages. Also, don't include links
to other pages more than once from any given page. I've visited one
poorly-designed site that had links down the side, links across the top,
links at the bottom and also a pull-down menu.
- Don't have "orphan" pages. Always have a link back to your main page
from every page.
- B. Keep your pages clutter-free. Avoid putting distractions and
unrelated things on the page.
- Animated images often distract from what one is trying to teach.
- Resist the temptation to include "cute" things that are unrelated to
your content. These are such things as scrolling messages and all those
other free JavaScript things floating around on the web.
- Don't clutter your pages with "too much navigation."
- It's probably best to keep advertising off of educational pages.
- If you must use advertising to support your site, consider putting the
ad at the bottom of the page and not accepting animated GIF
banners.
- C. Make a fast-loading, easy-to-understand, useful main page.
- Don't waste your visitors' time with a cover page that says "Click here
to enter."
- If your main page doesn't load quickly, there is a lower chance that
visitors will take the time to look at your sub-pages.
- Just under the title of your page put a one-line description of what
your site has to offer. This should be in English simple enough to be
understood by the ESL students visiting your site.
- Make your main page simple and easy to understand.
- Don't let your page be one of those pages where a visitor doesn't know
where to start. Some pages, especially multi-column pages, are so cluttered
with images and links, that it's easy to get confused.
- D. Make your pages easy to read.
- Don't use font colors and backgrounds that make reading the pages
difficult.
- Most of the text on the page should be FONT SIZE=3 (the default font
size). Many people will have set their preferences to use a font size that
is comfortable for them to read. If you make it smaller or larger you are
making your page less friendly.
- Keep the English simple enough for ESL/EFL students.
- Make your pages easy to scan allowing your visitors to avoid wasting
time reading things that don't concern them.
- E. Don't require more scrolling than necessary.
- Don't make the title or title image too big and don't put in so much
introductory material that the visitor has to scroll the page before seeing
any real content.
- Don't make the font size too large, since this requires frequent
scrolling. (Make your standard text size the default FONT SIZE=3.)
- F. Avoid "cramped-looking" pages.
- Full-page table formatting and frames often give a "cramped-looking"
page to visitors using smaller screens (or small windows on a large screen)
and when printed out.
- G. Make your site user-friendly for both the frequent visitor and the
first-time visitor.
- On the main page, don't put in long introductions and include a lot of
information that only requires one-time reading.
- However, you want enough explanation on the main page, so first-time
visitors feel comfortable and can immediately know what you have to offer.
- Remember that slow-loading pages may keep potential repeat visitors from
returning.
- H. Don't require logging in or registering to use the site.
- If you require registering an email address, most wise people will
assume that they will start receiving "junk mail" no matter what your
"privacy statement" may say, so they won't use your site
4. Make your site useful.
- A. Provide content.
- The main aim should be to provide "content," not to show off fancy web
page design or to sell advertising. Some less-than-useful sites have very
little content, but lots of fancy formatting or lots of
advertisements.
- B. Make your pages printable.
- Students may want to print your pages and study them off-line.
- Teachers may want to use some of your material in the classroom.
- C. Keep your site stable. Avoid "Not Found" errors.
- Once a page has been uploaded, don't move it to another location.
- If you change URLs, then people who like your site and have bookmarked
favorite sub-pages will get "not found" errors.
- Changing URLs within your site means your site can't easily be used by
teachers who want to refer students to appropriate pages on your site.
- Changing URLs means that you will also lose a certain number of
potential visitors who find your old URLs using a search engine.
- D. Remember that your site might be useful for others, not just for
ESL/EFL students.
- With a little extra effort, you may be able to create something that
native-English speakers, both young and old, may find interesting.
- E. Make your site complete for today's visitor.
- Don't have links to sub-pages on your site that are still under
construction. It's easy enough to add these links as those pages are
completed.
- F. Create a site that fills a need.
- Do something that hasn't been done yet. Instead of trying to produce a
site similar to an existing site, find something that is still needed and
focus on filling that need. There are still many areas that need to be
covered that would benefit the ESL/EFL web community.
- Here is a list of some sites that the ESL world would like to see.
- G. Focus on one thing and do it well.
- Instead of trying to produce a comprehensive ESL site, focus on one
area. Since anything on the web is only one click away, you don't have to
create pages on your site for things that already exist. It's better to have
a good or great focused site than an average or below average general site.
(Jack of all trades, master of none.)
- To make a needed contribution, find something that hasn't been done and
create a site that focuses on that one thing.
5. Maintain integrity. Be professional.
- A. Be truthful. Be honest.
- Deliver what you claim to deliver.
- Don't use phrases like "the number one site" or "the best site." On the
web, there is no way to really know this. Leave the evaluation up to the
visitor. This kind of phrase sounds like an exaggeration and advertising
hype, so you risk losing credibility.
- If yours is a commercial site, don't pretend otherwise.
- Don't use dishonest meta keywords.
- Some examples of "dishonesty."
- Multiple sites owned by the same (somewhat anonymous) owner,
recommending his own sites as good sites to visit.
- A site pretending to be something it isn't.
- A site that claims to deliver material on a daily/weekly/monthly basis
and doesn't do this.
- A site using another famous site name in the meta
keywords.
- B. Be accurate.
- Check your facts. Check your spelling. Proofread your pages.
- If you have a collection of links, be sure your descriptions are
accurate.
- C. Don't violate copyrights.
- Using copyrighted material without permission, even if credit is given,
is still a copyright infringement.
- D. In an obvious location, put the date of the last update and an email
address.
- This lets visitors know how old the page is and allows them to contact
you with feedback on the contents.
6. Make your site friendly and fun to use.
- A. Make your pages as visually pleasing as you can without slowing them
down too much.
- Always weigh "good-looking" vs. "fast-loading."
- Remember to view your page without images, to see how pleasing your page
looks to people who don't download images.
- Remember it's possible to have a visually pleasing text-only
page.
- B. Don't annoy your visitors.
- What annoys visitors most is probably waiting a long time for pages to
download and display.
- Other irritations include crowded pages, irritating color combinations,
blinking text, animated images, excessive use of images and too much
advertising.
- Don't use non-breaking spaces ( ) or avoid strange characters
created by a non-breaking space for users of non-Western fonts by inserting
the following META tag.
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
7. Use "cutting edge technology" wisely and effectively.
- It's better not to use the latest features for purely cosmetic purposes or
just to make your site "cool."
- You should take advantage of "cutting edge technology" if it allows
creating effective educational materials.
- However, remember that even if it can sometimes be done slightly more
effectively utilizing "cutting edge technology," it is often better to
compromise and make a page that works for a wider audience.
- If you have pages that won't work for everyone, tell visitors what is
needed.
- If your page requires JavaScript, be sure to include the
<noscript> code in the page explaining that the page requires
JavaScript. Don't assume that people with the latest browsers have
JavaScript or Java enabled. Some people turn these off to avoid pop-up
ads and irritatingly slow Java applets.
- If your page requires a plugin, be sure to inform your visitors what the
plugin is and where it can be obtained.
- If your pages only work on the latest browsers, remember to put a
message at the top of the page, so visitors without these browsers
understand why your page looks strange or doesn't work
properly.
8. Remember that what you think is true may not be true.
- Warnings
- Don't assume everyone will see your page the same way you see it.
- Be aware that some visitors won't download images.
- Be aware font sizes and window sizes vary.
- Try 544 X 384 pixels to get an idea how your page may look on WebTV.
- With palm-top computers and web-capable cell phones, it's not only
the older computers that have smaller screens.
- Don't assume people will enter your site through the main page.
- Be aware that access counters and log files don't really tell you how
many times your pages have been accessed. It could be more or it could be
less.
- Be aware that even if your server is fast, not everyone will get your
pages quickly.
- Don't assume all visitors using new browsers can view pages with Java
and JavaScript. Some have either or both disabled in their preference
settings by choice.
- Just because you've seen major companies with a certain type of page
design or using certain plugins doesn't mean it's safe to do the same.
- Don't believe software that tells you how long it takes to download
certain images using different speed connections. It may tell you the
fastest it will download, but often, due to traffic, it will take longer.
- Don't believe everything you read. There is a lot of mis-information or
outdated information on the web and in books.
- Don't believe everything people tell you.
- Be careful when using web authoring programs. Companies rarely tell you
the limitations of their products.
- Listen to what your visitors say.
- If a visitor takes the time to inform you of a problem, believe him.
Just because you've had millions of visitors that haven't commented on the
problem, doesn't mean the problem doesn't exist.
- Remember that what is true now may not be true in the future.
- Also, what used to be true may no longer be true.
9. Should I really worry about the minority who use less powerful computers,
use older browsers and have slow Internet access? - YES!
- There are many people studying English as a Foreign Language in countries
with slow and/or expensive Internet connections, so it is very important for
us as ESL/EFL teachers to be careful when designing web sites.
- An often heard remark is "More than 94% of my visitors are using the
latest browsers, so I don't really need to write pages that work for
everyone."
- Comment 1: As a teacher, you would not write things on the blackboard
ignoring three blind students in your classroom of 50 students. Shouldn't we
also be as considerate to our web site visitors?
- Comment 2: This "94% of my visitors" is likely to really mean that the
log file shows 94 hits out of 100 that came from a current browser. If you
have the type of site that gets return visitors, then it is unlikely that
each "hit" is a different individual. This could easily mean that 6 people
weren't able to use the page and 31 people accessed the page 3 times each
which means that the minority is a lot larger than you might think.
- Comment 3: As stated earlier, just because someone is using one of the
latest browsers doesn't necessarily mean that he/she has Java or JavaScript
enabled, certain plugins installed, or even downloads images. This means
that your page may be unusable even by those using the latest
browsers.
- Also you need to consider parts of the world that are just connecting to
the Internet or have not yet connected the Internet.
- It is quite likely that for quite a while there will be a need for pages
that work on older computers (which require using older browsers) and pages
which are fine-tuned to be as fast as possible. Even though powerful
computers and broad band Internet access are now available and coming soon
for many people, there are many places in the world that still don't have
electricity or telephones and, of course, no computers and Internet access.
It's a good idea to assume that these people, when they do get Internet
access, are likely to be accessing your pages with slow Internet connections
on less powerful computers.
Conclusion
In conclusion, what was stated in the introduction is
restated along with a few comments.
From a visitor's point of view, a good web site is one that...
- ...is usable
If the site is not usable, then everything else is
irrelevant. What is usable, varies from visitor to visitor. Remember that more
people will find your site usable if you use fewer "bell and whistles."
However, there is absolutely nothing wrong with using special plugins, Java or
JavaScript, since your page will still be usable by those with the plugins
installed and everything enabled, though sometimes it is better to compromise
and create a page that reaches a wider audience.
- ...has something he/she wants
Not only does the site need to
have content that the visitor wants, but the visitor must be able to locate
this content on your site.
- ...doesn't waste his/her time
Time has been wasted if it takes
visitors a long time to find what they want on your site, if it takes a long
time for the pages to download, or if the site requires excessive jumping from
one page to another.
- ...isn't irritating
An irritating site is one that isn't 100%
usable, pretends to have what you want but doesn't or wastes your time. What
visitors find irritating varies, but may include such things as irrelevant use
of Java or JavaScript, animated images, frames, advertising and tables that
don't fit the window. When you visit a site that you find irritating, remember
what was irritating and avoid doing the same thing on your own site. Also
remember that what you think is "cool" and "neat" may be regarded as
irritating by others.
The Internet TESL Journal, Vol. VI, No. 3, March 2000
http://www.aitech.ac.jp/~iteslj/
http://www.aitech.ac.jp/~iteslj/Articles/Kelly-Guidelines.html