Designing Websites for Listening, Speaking, and Pronunciation

TESOL 2001 Pre-convention Institute


Sharon Widmayer

Holly Gray

At the end of the session you will have:

q a plan for an instructional website

q guidelines on effective websites

q examples of how to use the web for listening & speaking

q guidelines for using sound and video on the web

q an understanding of the technology that you will need to download or buy, skills you need to learn, time it will take

A note about this session

Today we are focusing on the planning and design of great listening and speaking web sites.  This is not a “how to use an HTML editor” session. 

Learning how to make a web page is the easy part.  Learning how to make a good web page is what we will cover.

Step 1 – How can you use the Internet for listening and speaking?

Why would I want to use the Internet for teaching pronunciation?

q  highly motivating atmosphere

q  students can work on their own or in a lab

q  students can work at their own pace

q  audio & video clips can be played more than once

q  a vast array of timely, authentic materials is available

q  students can hear a wide variety of English

q   introduces students to valuable technology skills

What activities can we do?


q Listen to/watch material created for the ESL Learner

q Listen to/watch authentic material

q  Listen for specific purposes (a springboard for other skills)


q   Visit sites for the ESL learner to study and practice

q   Visit authentic sites for discovery activities

q   Make recordings and post them on a web page

Sample Activities

q Listening & Speaking

q News Web Quest

q Listening & Pronunciation

q Haiku

q Word endings

q Limericks


q Grammar

q listening for tense

q listening for word endings

Step 2- Deciding on your web site goals

Content learning goals

q What are your class objectives?

q What are your students’ personal goals?

q Do students have to pass  there any sort of departmental evaluation or  exam?

Technology learning goals

q How can you add real value to your class?

q  Will the technology you choose improve an aspect of the course?

q Are you concerned with students accessing technology (reading or listening to a web page) or creating a product using technology (making a web page, making PowerPoint slides, etc)?


Matching objectives to appropriate technology

q Remember, your choice of technology should be based on your learning goals, not vice-versa.

Knowing your audience

q Are your students familiar with “surfing the Internet”?


q How much time outside of class do you expect students to be able to work on technology-related projects?


q Are you assuming that most of your students have home computers?


q  What technology skills are you assuming that your students already have?

Technology resources (including free software)

q See handout

Personnel resources

q Your time

q Your support

q Student helpers

q IT Support

q Instructional Design Support

q Campus technology workshops

Considerations when digitizing audio and video

q Copyright

q Quality vs. file size and download time

q Format

q Audience’s technology

q Security

q Multimedia applications

Step 3 - Make a Plan

Flow charting

q  Make a list of things you want on your website

q  Syllabi

q  Activities

q  Links

q  Multimedia clips

q  Worksheets

q  Group

q  Make a flow chart of how these things should be linked


Example Flowchart

Step 4 - Development and Implementation Considerations

Interface/Web Design

q Navigation

q Layout

q Colors

q Font

q Images


q Alternative formats

q Alt tags

q Bobby


q Pictures of your web page

q Notes about

q Learning goals

q Navigation

q multimedia

Sample Storyboard

Effective instructional website criteria

Based on Khan, B. and Vega, R. (1997) "Factors to Consider When Evaluating Web-based Instruction Course: A Survey." In B. Khan (Ed) Web-based Instruction. New Jersey: Educational Technologies Publications.



q Consistent navigation

q Clear layout that makes it easy to access the information you

q Relevant links

q Information on each page limited to a reasonable amount


q  Clear objectives

q  Use of the web consistent with the objectives

q  Students receive feedback

q  Access to the instructor provided

q  Student usage followed (by computer or teacher)

q  Course content accurate, interesting and engaging

q  Different learning styles addressed

 Navigation and organization:


q Simple, clear consistent navigation

q Clear organization

q Structure of site helps students discern the relevance of information


q Clear language

q Lowest common denominator technology

q Student technical support

q The material is easy to access (loading speed, technology needed, availability of lab time,etc.)

q Alternative formats provided when possible


q Is there an opportunity for students to provide feedback on the website?

q Does the course take advantage of the capabilities of the technology?

q Is security for the website adequate?


Step 5 - Sharing Your Design & Plans

q Participants share ideas and critique each others plans in small groups and discuss potential stumbling blocks with the facilitators

Thanks for coming     

Holly Gray

Anne Arudel Community College



Sharon Alayne Widmayer

George Washington University