A Check List for Designing Effective Web Pages for ESL Students
(please note that this was written by Charles Kelly)
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
- 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
- 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.
1. Make your site usable by everyone if possible.
- A. Make pages that work on any browser.
- 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,
- 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
- 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
- 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
- B. Keep your pages clutter-free. Avoid putting distractions and unrelated things on the
- Animated images often distract from what one is trying to teach.
- Resist the temptation to include "cute" things that are unrelated to your
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
- 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
- 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
- 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.)
- 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
- 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
- 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 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
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
with no way to get to your other pages.
- 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.
- 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.
- 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.
- Be aware that even if your server is fast, everyone won't get your pages quickly.
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
- 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).