A Check List for Designing Effective Web Pages for ESL Students
(please note that this was written by Charles Kelly)

A Quick Overview

1. Make your site usable by everyone if possible.
2. Don't unnecessarily do things that limit the number of people that can benefit from your page.
3. 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.
4. Make your site easy to use. Make it uncluttered, easy to navigate and easy to read.
5. Make your site useful. Create a site that fills a need.
6. Maintain Integrity. Be Professional. Be honest. Offer what you claim to offer. Check your spelling.
7. Make your site friendly and fun to use. Make your site as attractive and fun as you can without making it slow.
8. 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.
9. Remember that what you think is true may not be true.

1. Make your site usable by everyone if possible.

• A. Make pages that work on any browser.
  • 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.
  • 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 are visually handicapped or have other handicaps.
  • 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, sometime 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 are designed with ease of writing pages in mind, but the programmers seem to have forgotten to design these editors to create pages which are web-friendly. For the best pages, you need to learn enough HTML so that you can edit out the junk put in by the HTML editors.
• 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.
• 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.
• 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. I've seen 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.
  
• 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 which allows 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://www.aitech.ac.jp/~iteslj/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.)
• Examples:
• Dave's ESL Cafe focuses on communication and sharing ideas.
• Randall's Listening Lab focuses on listening exercises with quizzes.
• Self-Study Quizzes for ESL Students focuses on quizzes.
• (There are others.)
• Find something that hasn't been done and create a site that focuses on that one thing and you are likely to have a popular site.

5. Maintain Integrity. Be Professional.

• A. Be truthful. Be honest.
• Deliver what you claim to deliver.
• Don't use phrase 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 a "monthly idiom", but it's been the same idiom for three years.
• A site other than Dave's ESL Cafe, using "Dave's ESL Cafe" in the 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. If you are going to include a link to a "monthly idiom" page, go back and check it next month to see if the page has changed.

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.

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 includes the <noscript> code in the page explaining that the page requires JavaScript.
• 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 Netscape 4 and later and Explorer 5 and later, 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.
• A Few Suggestions & Comments
• 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.
• Remember CGI and SSI cause visitors to connect to your server and will slow things down
• Pull-down navigation menus driven by JavaScript will leave you non-JavaScript visitors with no way to get to your other pages.
• Many pages use a "image roll-over" JavaScript navigation buttons. Some of these pages are not usable by people not using JavaScript.
• Forcing visitors to use an image map is inconsiderate since it requires those with slow connections to download an image and makes your page unusable by those using a browser that doesn't support images or image maps.

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.
• I think it's something like 98 pixels wide for web-capable cell-phones.
• Be aware that visitors may not have certain plugins or may have JavaScript turned off.
• 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.
• 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, everyone won't 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. An Important Point to Remember

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 (maybe older computers donated by the more fortunate).