The English Teacher's Web Site--A Simple Primer
by
Steve Schackne

Introduction

     Building a web site has changed as dramatically over the last 15 years as information technology itself. In the 1980s trained computer programmers were usually needed to design and build web sites, often charging high prices for writing the html code and rendering graphics from scratch. Nowadays, with html editing programs (also known as wysiwyg programs) and with simple graphics editors and ready-made internet graphics, building a snappy web site is as easy as typing on a word processor.

     In fact, technology has been made so accessible to the non-expert that it is no longer considered the sole focus of web site building--content is now as or more important and herein lies a problem. On a recent visit to Singapore, some middle school teachers showed me the dazzling web designs and programming skills of their young students. While the designs and artistry were impressive, the information or content was somewhat bland at best and irrelevant at worst.

     So...how does a budding web designer balance an attractive design (which stimulates initial interest) with relevant and interesting content (which turns new visitors to your site into regular visitors)?

The Essentials (For All Web Designers)

     You don't have to be an English teacher to benefit from basic rules when constructing a web site. A web site can be sub-divided into three major areas: appearance (colors, text, photos and animations, layout), technological foundation (downloading speed, navigation, software applications), and content (information contained within the web site).

     The appearance, or what Colin Sachs at esl interactive refers to as "sensory input," should strike a moderate balance; that is, it should be varied enough to be both interesting and pleasing to the eye, but should avoid sensory overload which distracts the visitor from the content.

     Background colors (or wallpaper) often are most effective when they are monochromatic and light in color. A patterned background should be avoided unless there is a specific reason behind it, such as the use of a company or school logo or a pattern which thematically supports the subject of the page. Two-tone backgrounds can be used when the designer wants to divide the page into distinct sections. Background color and text color should contrast so your text is easily legible. A light yellow text on a white background will not show up clearly and, hence, is an unsuitable color combination. Dark text on light background is the clearest and, most often, the easiest on your visitors' eyes. Type fonts should not vary too much--randomly switching from serif to sans serif type fonts is not only unattractive, but distracting. Banners usually appear top center and should be functional--announcing the name of the page--and the color should blend with the overall color scheme of the page.

     Don't overuse photos or graphics--they can be distracting (especially animated graphics) and they take up space which will slow the download time of your page. A good rule here is to only use functional graphics--pictures that actually represent content on your page or graphics which lead to other pages or offer information or thematic support for your visitors. Whistles and bells which simply blink or make noise are to be avoided.

     The layout of a page should strike a moderate balance among graphics, text, and white space. Too much text crowded together gives the visitor eye fatigue and, worse, can obscure or hide valuable information, such as the table of contents (site map). Too much white space is aesthetically unappealing and may give the visitor the impression of an empty or superficial web site.

     The faster your pages download (appear on the computer screen) the better. This, however, is often beyond the control of the designer. The server holding your web pages, the isp (local internet service provider), and your visitors' computer systems all can affect download speed. The designer, though, can exercise some influence by, as mentioned before, reducing the amount of superfluous graphics on the site--graphics should have a specific aesthetic, navigational, or informative function before they are included on a web site.

     Designers should make navigation of the site (moving from one page to another on the site) easy for the visitor--this includes links which take you quickly from the index, or home, page to any other page on the site. All pages should have a link that takes the visitor directly from that page back to the index page. Ideally, all pages should have links to all other pages on the site so visitors can go from any page on the site to any other page on the site with just one click of the mouse.

     Software applications--search engines, counters, ticker tapes, guestbooks, chat rooms, etc.--should be approached with the same care as graphics. This is especially true when deciding to use multimedia software. Is it really relevant in delivering the content or is it just decorating your site?

     Content is now considered  by most webmasters to be the most important criterion for determining the value of a website. Quoting Sachs from the web site, esl interactive:



"Good web pages are created in such a way
as to make the delivery of the content their
primary focus. Interesting, relevant, original,
and high-quality content is the primary draw
for popular web pages."









     Simply stated, content needs to be comprehensive, relevant, and fresh. Comprehensiveness refers to treating a subject in a thorough and exhaustive way. For example, a comprehensive esl resource page could include all of the following:
  An esl page with four or five links is not worth the visitor's time.

     Relevance simply refers to the usefulness of the content. Comprehensiveness means nothing if your information is not very good...or useful--try to evaluate your content and choose the best for inclusion. Is it comprehensive and relevant? Is the information easy to access? Is it popular among visitors? What do other designers and teachers think about it?

     Freshness refers to how current your information is--web pages that are a year old often offer outdated, hence, useless information. It's hard to update daily, but good web sites try to keep current in their content areas and update as often as possible. Weekly or monthly updates usually are indicative of "fresh" web sites. Webmasters often include a small line on their index page indicating when the page was last updated.

The Choices--For All ESL Teachers

     Appearance, technology, and content are concerns for all web designers, but the esl teacher has another choice to make--exactly what area will the web site focus on. English as a second language web sites fall into three different, yet distinct, classifications--the class site, the interactive curriculum site, and the reference or links site.

     The class site is one designed and constructed by a teacher specifically for his/her students. The site is often a simple one or two-page design which focuses on specific content for students rather than aesthetics or design. Because of this, these pages are often practical, but plain. A typical class site would offer:
 

     The interactive curriculum site, the most common efl site on the internet today, is most often a large, comprehensive site  encompassing advanced design and navigation techniques and including a wide ranging variety of English language material. Interactive English language activities and quizzes in reading and writing are the most common features of these sites, although many are now including speaking and listening exercises as multimedia technology continues to advance. Other prominent features found on many of these sites include:
--links to other sites, including teachers' home pages
--reproducible exercises for offline use
--reference information on schools and employment
--updated information on language learning software
--esl-efl conference information
--reference information on publications
--online stores offering esl-efl materials


     The reference or links site serves as a combination reference library cum encyclopedia of available language learning web sites. While often offering little or no interactive curriculum or software, this type of site offers a compendium of available language learning sites on the web, and often is divided up into sections including:



Summary

     Web design technology has come a long way over the last 15 years making it easily accessible even to computer novices, but the rules governing sensible design still apply to all designers, whether the professional designing an e-commerce site or a beginner designing a personal homepage. The good news is that, like the technology, the principles of good web page design are easily learned and applied.

     Efl teachers have a choice of options in designing and building a web site (class, interactive curriculum, reference or links)--these options can improve their teaching, make the curriculum delivery process more efficient for both student and teacher, and enhance a teacher's reputation and visibility in the global language teaching environment.

     And if these benefits are not enough, many schools and governments are now demanding a base level of technological competence from their language teachers. They want their teachers to have some overall idea on how information technology can interface with traditional curriculum design and are often addressing this in job interviews.

     So...what are you waiting for? I'll be looking for your site on the web soon.
 

Reference

Web Pages That Suck   http://www.webpagesthatsuck.com
YaleC/AIM Web Style Guide  http://info.med.yale.edu/caim/manual/

Appendix

-The following sites have clean, simple designs which make accessing their content easy-

Collins Cobuild  http://www.collins.co.uk/books.aspx?group=140
Dave's ESL Cafe  http://www.eslcafe.com
Lingua Center--University of Illinois  http://www.iei.uiuc.edu/
Froschweb  http://www.froschweb.com/woe/world.htm

-Ease of navigation? Check these three sites-

Dave's ESL Cafe (Again)  http://www.eslcafe.com
Schackne Online  http://www.schackne.com
Taiwan Teacher  http://www.geocities.com/Athens/Delphi/1979/index.html

-For fast downloading speeds, these two efl sites have good reputations-

Dave's ESL Cafe (Again) http://www.eslcafe.com
Karin's ESL Partyland  http://www.eslpartyland.com

-Check the following two sites for relevance--updated often-

Dave's Job Center  http://www.eslcafe.com/joblist/
English-To-Go  http://www.english-to-go.com

-You want comprehensive? Here are three of the best esl sites-

Dave's ESL Cafe (Again)  http://www.eslcafe.com
Tower of English  http://www.towerofenglish.com
Karin's ESL Partyland  http://www.eslpartyland.com

-Here are some useful references and examples of class sites-

Intro to TESOL, Middlebury College  http://cweb.middlebury.edu/wt99/id013a
Blackboard.Com  http://www.blackboard.com
(for class pages and online courses)
Quia  http://www.quia.com
(Do it yourself class page, easy to set up)

-Interactive efl sites--here are three of the best-

Dave's ESL Cafe  (Again)  http://www.eslcafe.com
Tower of English  (Again)  http://www.towerofenglish.com
Karin's ESL Partyland  (Again)  http://www.eslpartyland.com

-Reference or links sites--here are five representative examples-

Ohio University http://www.ohiou.edu/esl/english/index.html
Activities For ESL Students http://www.aitech.ac.jp/~iteslj/s/
Schackne Online--Language Page http://www.schackne.com/Languageteaching.htm

Glossary

-Some basic web jargon-

Bulletin board--application where visitors can post messages to the webmaster Chat--application where groups of people can communicate with each other in real time

Content--another named for information contained on a web site

Download time--the time it takes for a page to get from host server to your computer; actually the total time includes sending the address to the host server, then the host server sending the page to your computer

Guestbook--application where visitors can sign in and make comments or suggestions about your site

Html--hyper text markup language--the formatting "code" that is used to construct web pages

Index page--another name for "home" page--the first page visitors see when they come to your site

Interactive curriculum site--web site where user input is utilized by the site; e.g., a quiz which gives users online answers or feedback

Isp--internet service provider, usually a telecom company which offers you telephone dial-up access to the web for a fee

Links--formally called hyperlinks, other pages you can access directly from your page

Navigation--movement among separate pages and links on your web site

Server--large computer which "hosts" or holds web pages; e.g., my pages are held in a server in California, when a visitor logs on to my site, the page is sent from the server to the visitor's computer

Site map--another name for a web site's table of contents; it can be represented textually or graphically

Webmaster--originally a technician who maintained web sites on a server, now often referred to as any individual who maintains a web site

Wysiwyg--acronym for "what you see is what you get"--an html editor where all you have to do is type on your screen and the text is automatically converted to html. Front Page, Page Wizard, and Dreamweaver are the best known.