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

1. 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.
2. 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.
3. Make your site easy to use.
   Make it uncluttered, easy to navigate and easy to read.
4. Make your site useful.
   Create a site that fills a need.
5. Maintain Integrity. Be Professional.
   Be honest. Offer what you claim to offer. Check your spelling.
6. Make your site friendly and fun to use.
   Make your site as attractive and fun as you can without making it slow.
7. 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.
8. Remember that what you think is true may not be true.
   Some possible misconceptions.
9. 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 by 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.
    • Design pages that can be cached, both by Internet or proxy cache and local cache.
    • See Cache Now (http://vancouver-webpages.com/CacheNow/) for more information.
  • 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.
    • http://iteslj.org/c/webidea.html
• 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 a way to contact you.
  • This lets visitors know how old the page is and allows them to contact you with feedback on the contents.
  • NOTE (Added March 2004) Due to spiders that harvest email addresses from web pages, it's a good idea to not put your email address on the page in such a way that it can be found by spammers.
    • Use a CGI form.
    • Put your email address in an image and not as text.
    • Do something like one of the following so the spiders are less likely to find your address.
      • charles AT aitech DOT ac DOT jp
      • c h a r l e s @ a i t e c h . a c . j p
      • charles [at] aitech.ac.jp
      • charles (at) aitech (dot) ac (dot) jp

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.
    • Read Why Web Usage Statistics Are (Worse Than) Meaningless (By Jeff Goldberg)
      http://www.cranfield.ac.uk/docs/stats/
  • 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://iteslj.org/

---

http://iteslj.org/Articles/Kelly-Guidelines.html