• Math Topics
• Initiatives
• Methodology
• Resources
• Projects
• Manipulatives
• Software
• Learning Support
• Standardized Test Prep
• Technology Integration
• Assisting Readers
• Professionalism
• Associations
• Journals
• News
• Professional Development
• Standards
• Educational Research
• CT4ME Papers

Are you confused by terms that educators use? The ASCD Lexicon of Learning might be what you need.

 

 

 

Technology Integration

Part 3: Web Page Design

Some Principles of Web Page Design

First Steps

School districts and teachers are using Web pages to communicate to students, parents, and the community.  Having a school or classroom Web site is essential in this era of school accountability.  With the rise of using mobile devices to access Internet content, it is also becoming important for a school Web site to be accessible via mobile devices.  Nora Carr (2010) provided tips in How to tailor your school site for mobile web users.  

A first step to designing your own Web pages might be to evaluate a few sites.  Key ideas include examination of the site's purpose, author, content, coverage, currency, recognition by others, and accessibility.  For accessibility consider access via mobile devices, and also accessibility of content by users with potential disabilities.  Ohio State University Libraries' net.TUTOR has a tutorial for this process at http://liblearn.osu.edu/tutor/les1/.

You might search for ideas from other K-12 schools on the Web using the Yahoo.com Education directory, MySchoolOnline.com, or Eduhound.com.  You could examine sites of schools recognized by the No Child Left Behind Blue Ribbon Schools Program, which are listed at http://www.ed.gov/programs/nclbbrs/awards.html.

Look at the design of the site for how it might serve your own purpose.  Dunn (2011) noted that typically "a classroom website serves one or more of the following purposes: to disseminate static information, to share news and other changing information, to provide resources related to course content, to facilitate interaction, and to act as a growing repository of knowledge related to the course" (p. 60).  In determining your own purpose, however, you also need to consider the amount of time you will have for maintaining your site.  The more interactions you expect with learners, the greater the amount of time you will need, even on a daily basis.

As you examine sites, consider that the five purposes of classroom websites, which Dunn (2011) noted, really fall within two general categories, as the Web can be a delivery medium and an instructional medium.  According to Ingram and Lathorn (2003), if your purpose is to create a Web site for instruction, consider the three functions of instructional Web pages, which are to present information, provide interactions of various types on the Web, and to provide connections or links to information and interactions elsewhere on the Web.  Instructional Web sites should be designed with characteristics of the targeted learner in mind and consider how learners read and process text and how they might navigate through a potential maze of hyperlinks.  You might provide a general page of links that are grouped together to reflect their content, or provide links to additional content at the point on the page where students would most likely use them (Ingram & Lathorn, 2003).

 

 

Examine the navigation structure as you look at other sites, and observe placement of menu options.  They are typically found at the top of the page, along the left side, or in a table of content.  You should be able to link back to the home (index) page from any page within the site.

The following rubrics might assist you and your students with evaluating Web pages:

• A+ Web Page Rubric by Joan Vandervelde of the University of Wisconsin

• Building Blocks to Electronic Communication: A Rubric for School Web Development and Management by Elliot Levine and Nora Carr (2006) covers content, security, functionality, and interactivity.

• Evaluation Rubrics for Websites from Payton Educational Consulting contains three rubrics for use in primary, intermediate, and secondary grades.

 

Back to top

 

What are good Web pages?

Good Web pages can stand alone when accessed from anywhere on the Web.  They are designed with Jakob Nielsen’s HOME principle in mind.  Nielsen often posts his top 10 Web design mistakes at his Web site, Alertbox.  Good pages contain highly relevant content for the intended audience, are updated often, require minimal time to download, and are easy to navigate. The following tips might help you to judge the quality of a Web site, or to design your own.

• Purpose: The purpose of the site should be clear, along with the intended audience.  Educational sites should relate to standards for the subject matter addressed. A section called About this Site is valuable.

• Credibility: The author’s credibility should be evident.  Sponsoring organizations include businesses, corporations, educational organizations, or individuals.  Personal Web sites should contain information about the author.  Teacher Web sites should include their school’s name (many don’t), and schools should identify the district in which they are located, for example.  A site might also include its recognition by others.

CAUTION:  Never link to a site without checking the credibility of the author and outgoing links from the site.  In one case that I encountered, the site appeared totally educational, but there was no indication of the developer.  One of the graphic images linked to a site for pornography.  Imagine the negative impact of including such a resource at your educational Web site.  You can often see the URL of a linked site at the bottom of your screen when you roll over linked text or a graphic with your mouse.

• Content: The site emphasizes accurate information.  New content might be clearly labeled as such with headlines and quick summaries for those who just want to read essential information.  The reading level should be appropriate for intended audience.  Look for references at the bottom of pages that quote statistical data, or content from other sources.  Links to additional information on topics discussed should be provided.  Students studying controversial topics should have links to alternative viewpoints to help them to become critical thinkers.

• Site accessibility: Content should be accessible by all users.  For example, text can be enlarged, any audio is accompanied by text, and the color palette used is “easy” on the eye and of sufficient contrast for those who might be color blind (i.e., orange on red or yellow on white--not good).  Lighthouse International has a web page that contains basic guidelines for effective color contrast that work for nearly everyone.

Provide a text equivalent, such as a transcript or captions, for all non-text multimedia elements (i.e., audio, video, graphics, animation, graphical buttons, and image maps).  Use "alt" tags with alternative text descriptions for "Images that convey information (that is, non-decorative images), graphs, and other graphics in Word, PowerPoint, PDF, and HTML...that are useful for all students" (André, Felix, Foley, Hunziker, & Petri, 2006, sec: Take Responsibility).  WebAIM has an excellent Web Captioning Overview for audio and video, including software capturing tools.

To accommodate individuals with motor disabilities, keyboard navigation to functional elements is essential.

• Navigation/Layout: Users require only a few clicks to find the information they seek.  A maximum of three clicks is recommended.  Information is chunked, so as not to overwhelm the user.  Menus are used.  Navigation elements consistently appear on all pages so that users know where they are at all times and how to return to the page from which they came. 
  
  Avoid pop-up pages, as users might have installed software on their computer to prevent pop-ups from appearing.  They might then miss important information that you feel they should see.  If you do require pop-ups, however, alert users of that fact so that they might change their software settings. Pop-ups are often used to provide context specific supplemental help, as in providing a hint to solve a problem.

Avoid frame-based layouts.  According to Rebecca André, Mark Felix, Alan Foley, Dawn Hunziker, and Ken Petri (2006, sec: Take Responsibility), "Using frames can severely restrict what users see, especially if the screen resolution is set to the largest size allowed by their monitor. Providing maximum screen real estate for larger concepts that are utilizing multimedia presentations is a best practice that all users will appreciate."

• Multimedia: Text might be presented on the middle 50% of the page for long documents meant to be read entirely online, as reading online is generally slower than reading printed pages.

Be aware that there are accessibility issues when using Portable Document Format (PDF) files with screen readers, which vision impaired students might be using to access online readings.  Read Is PDF accessible? at The National Center on Accessible Information Technology in Education (AccessIT).  To ensure PDF accessibility, "When creating anything in PDF make sure to use the “convert to PDF” function in Adobe Acrobat rather than printing your document to the PDF Print Distiller or using the “print as PDF” function. ...see WebAIM’s excellent tutorial on PDF and Word" (André et al., 2006, sec: Take Responsibility).

Graphics and other multimedia should be appropriately sized, used to support content and learning (as opposed to just providing "eye candy"), and culturally sensitive.  Too many graphics or graphics with large file sizes can increase the time to download pages, frustrate visitors, and cause them to look elsewhere for information they need.  When adding any graphic to a page, be sure to access picture properties and provide alternative text describing the graphic.  When users roll their mouse over the graphic, they see the text.  The text is also essential for screen readers for visually impaired users.  Audio/video should be under user control.  When video is used in classrooms with students with hearing impairments, the audio component should be captioned.

I have seen classroom teacher Web sites with snowflakes dancing down the screen, leaves falling, and scrolling ribbons of text waving about the screen right over text I was attempting to read.  I’ve encountered music that I could not turn off.  Although these provide “razzle-dazzle,” such elements of design tend to distract from the message being conveyed at the site and cause some users to look elsewhere.

Also, content that flashes or flickers and blinks at certain rates (i.e., between 2 Hz and 55 Hz) might induce seizures in some individuals with photosensitive epilepsy (Architectural and Transportation Barriers Compliance Board, 2001).

• Page Dates/URLs: Pages should display the date on which they were last updated.  A page URL listed at the bottom of the page will help users who print out content to have a record of its source, but this feature is not as commonly found.

• Search/Viewing Support: Look for a search function at sites with many pages, and links to plug-ins for viewing certain types of content, such as pdf files and video.

• Contact information: Contact information should include mailing address, telephone/fax including area code, and email to school officials.  Include the individual who maintains the web site, as often visitors can report errors on web pages or suggestions for content directly to that individual.

K-12 schools might question posting the email addresses of all teachers from the school site.  Although parents might expect to communicate 24/7 with teachers, posting the teacher’s email address might be better from the classroom teacher site at the judgment of the teacher.  The teacher would determine expectations for students and parents to receive responses to email regarding classroom concerns.  According to Nora Carr (2004), former assistant superintendent for the Charlotte-Mecklenburg Schools, “Expecting teachers to spend their limited time at home communicating online with parents is unrealistic and unfair.”

• Confirmation: Sites that permit users to fill-in forms to email the organization, respond to questionnaires online, or provide other content should include a confirmation page to acknowledge their entries.

 

Back to top

 

School Web Site Content

The school community must decide on the content of its Web site, which might include recognizing student achievement, posting collaborative student projects, organizing curriculum resources for teachers and students, and organizing staff information.  The site might introduce visitors and prospective students to the school (Cavanaugh, 2002), and contain profiles of teachers, the principal and superintendent.  Web site developers might include school events, stories about community elders, business and community organization partnerships, mentoring programs, donations, and ideas for how businesses can get involved with the schools.  They might also link to home pages of community event groups, local weather, and driving directions (Schmidt, 2002).

Posting a virtual tour of the school would be an ideal way to introduce visitors to the school environment.  Students might produce that video and audio to accompany it (Dyas, 2009).  As podcasts are easily created, students might create one with the school song, or they might create a vodcast to highlight the school choir or band or orchestra, or another musical event or a sports event.

The school web site should be a primary communication tool for the community and its visitors.  As such, schools might also consider blogs for real-time communications, and opinion polls for essential questions.  A section to easily find answers to frequently asked questions should be available.  Parents might be provided secure access to their children's records in the school's student information system.

In this era of accountability, schools also need links to documents that help the school community to understand legislation affecting the programs they offer for the grades they serve, research-based programs they have adopted, standards, performance data, and professional development opportunities.  Administrative and school board statements on such programs adopted, which are supported by links to associated legislation and research help keep parents, media, business and community leaders informed about what is right with the school.  These info-messages should be regularly posted or updated on the Web site with catchy subject lines to draw attention to issues, positions, concerns or achievements that follow.

A blog would be an ideal way to regularly post messages and respond to others. It could benefit parents and get them involved with discussions.  Schools might take advantage of student bloggers.  Schools might also offer email options to parents and community leaders to receive essential school news and information on a regular basis.

A link to a translation service would be beneficial for members of the school community for whom English is a second language.  Google's Translation Service, for example, enables users to translate text or entire Web pages in several languages, as does AltaVista’s Babel Fish Translator.  Promt Company's Free Website Translation service is for English, German, French, Spanish, Portuguese (Brazilian), Italian and Russian languages.  Linked pages will be translated automatically when you navigate to them.

The school Web site might include its grade level content for elementary school or middle/high school course selections and graduation requirements, appropriate for the grade levels it serves.  According to Ruben Lopez, Florida 's Chief Technology Officer, "E-learning will become the cornerstone of how curriculum will be delivered in the future" in K-12 (Miller, 2003).  Therefore, including links to K-12 online curriculum to broaden course offerings or to provide courses taught by "highly qualified" teachers might be appropriate.  A number of initiatives are available to serve students and their teachers, including Virtual High School and Florida Virtual School (FLVS).  FLVS, for example, provides an extensive list of middle/high school courses for national and international students.  A link to The International Association for K-12 Online Learning (INACOL) would keep those interested in online learning up-to-date with policies, research, professional development, and networking opportunities related to quality online learning.  INACOL also provides an Online Learning Clearinghouse for locating programs within your area.

Elementary school Web sites have used audio to share school songs, choral and music samples, mascot sounds and themes, and posted update notices and "mailto" to the webmaster, student and parent handbooks, a philosophy and mission statement, curriculum information, discipline policies, and miscellaneous procedures.  Sites provided the school address, phone number, staff email addresses with "mailto" option, and links to local information including district links. Educational resources, search engines, student work and student created pages, classroom pages, principal pages, newsletters, calendars or schedules, cafeteria information, PTA information, after school curricular activities, calls for collaboration, and homework helpers have been included (Barron & Ivers, 1999).  Such examples might also be provided at any school Web site.

A policy for protecting students' identity is essential, as Barron and Ivers (1999) found sites that listed students' full names, grade levels, and teachers, and some that identified student photographs by name, which they do not recommend.  Teachers can provide some security for photographs of students that are posted to the classroom Web site, however, by preventing visitors from copying their images.  Any Web site image can be protected by inserting appropriate HTML code on the page with the image, which blocks right clicking to copy and save images.  Get the code in How to Prevent Image Copying at the GraphicsAcademy.com.

Other policies might address copyright issues, posting information on the school's site, student/faculty web page development and acceptable use of technology resources, including mobile devices.  Resources at Copyright and Fair Use from Stanford University serve the education community well.  Schools that have posted their acceptable use policies might reexamine them because, according to Flowers and Rakes (2000), most do not adequately address issues of limiting access, equal access, censorship, and freedom of information.  The Virginia Department of Education has guidelines and extensive resources for developing acceptable use policies, which would help your school develop its policy.

Links to technical assistance are essential.  Teachers should have some technical competence, however, which they might gain with resources such as TECH CORPS' online tutorials at webTeacher and free technical support at tech4schools.

The Web sites of DeKalb County School System in Georgia (http://www.dekalb.k12.ga.us/) and Irving Independent School District in Texas (http://www.irvingisd.net/) might serve as content models for developers, as the Center for Digital Government and Education (http://www.centerdigitaled.com) tied those two as the best K-12 district Web sites in the U.S. for 2005.  See other Digital Education Achievement Awards at http://www.centerdigitaled.com/awards/

 

Back to top

 

Classroom Teacher Web Pages

Classroom teacher Web pages should link to the school or district Web site and contain only school-related information.  As for all Web sites, content should be updated regularly.  The date of last revision might be shown on the bottom of each page.  A disclaimer might be placed on pages with links to external sites indicating that the links are for educational purposes only and that every effort has been made to ensure that those sites are safe for student use and do not contain inappropriate content for their age-level.

Classroom Web pages are ideal for keeping parents informed and for showcasing student work.  Teachers might post general classroom information such as curricular learning goals, schedules/calendars, assignments/due dates, conduct expectations, upcoming events, and other classroom news.  Consider using Google Calendar or Google Spreadsheet, the latter of which has many of the features found in Microsoft's Excel, for those communications.  You can set up who can view and modify the documents you create, and what calendar details they see.  Registration is free.

Students will benefit from examples of work related to assignments that meets standards, assessment rubrics, research sites for kids, homework help sites, and curriculum-related sites for additional practice. Reading and math sites would be particularly relevant because states receiving federal funding will measure students' progress in those areas annually in Grades 3-8 and at least once in Grades 10-12 by 2005-2006.  Computing Technology for Math Excellence provides extensive resources for teaching and learning mathematics.  This site also contains reading resources at our Research Corner because poor reading skills are associated with poor performance in mathematics.

Teachers might wish to post their email addresses or other contact information at their classroom Web site.  However, teachers should not post students' contact information.  To further protect students, use only first names when posting student work and do not attach names to images of students without first seeking parental permission.

Classroom blogs are becoming popular.  Edublogs.org provides a free blogging service for education professionals to use as a teaching tool.

 

 

Back to top

 

More on Accessible Web Sites

Online barriers limit accessibility of potentially vital Internet information for persons with disabilities. Rebecca André, Mark Felix, Alan Foley, Dawn Hunziker, and Ken Petri (2006) indicated that the four main disability categories that must be accommodated are motor, visual, auditory, and cognitive.

The Federal government now requires colleges and universities to make access to online course content available to vision and hearing impaired students.  Cyndi Rowland provided information on Accessibility of the Internet in Post Secondary Education: Meeting the Challenge.  Her discussion of students in cyberspace and the complexity of the accessibility problem is particularly relevant for all levels of online education, including K-12 as online education at that level is also on the rise.  According to Rowland, this complexity involves the knowledge and skills of the Web designer, creators of browsers, creators of Web authoring tools, creators of assistive technology, creators of course development software, and finally the knowledge and skills of the user.

As more and more teachers are using their Web pages for instruction, André et al. (2006, Take Responsibility section) indicated they can take greater responsibility for presenting content that is accessible by considering these additional tips:

• If PowerPoint presentations are posted on the Web, have students download them first so that screen readers and keyboard navigation can more easily be used.  Plus, it is then easier to print handouts of slides.

• Students with disabilities often require special accommodations for testing.  While policies might differ, if you have online quizzes, homework, or learning activities, remove any time limits for their completion--save yourself the headache of extra work--or at least provide the maximum suggested by policies.  Use vertical, rather than horizontal, layouts for that content to accommodate screen readers.  Plus, all students will benefit from being able to better focus on the assessment questions, rather than the technology or layout.

• Remind users of screen readers to turn off the feature for auto-refresh of frames and screens.  When pages automatically reload, screen readers start over at the top of the page, which might confuse students in the middle of an activity.

• Screen readers have difficulty with interpreting equations.  When using equation editors, provide "concise and accurate text descriptions of the formulas and actions being done in the mathematical exercise."

• HTML or Java-based chat clients/tools are unusable for those who use screen readers.  Those with mobility disabilities might find them difficult to use, as well.  Asynchronous tools like email and discussion boards, or phone conversations, might be more effective for students with disabilities.

Web site developers should be familiar with Section 508 of the Rehabilitation Act of 1973, which ensures that individuals with disabilities, who are seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to individuals without disabilities. Included in that document are technical standards for software and Web-based applications, and functional performance criteria (http://www.section508.gov).  For a discussion of the standards for creating accessible Web pages, you might read the guide Web-based Intranet and Internet Information and Applications by the Access-Board, a Federal agency committed to accessible design.

Developers will also benefit from the video Screen Readers and the Web, which is one of the videos on accessibility provided by the University of Wisconsin at Madison.  You will hear a demonstration of a screen reader, a discussion of actual problems encountered by Web users who are visually impaired, and how to overcome many accessibility problems by using alt-text for images, D-links for longer descriptions, and header tags.  D-links, for example, are under user control to read or not read. The presentation has impact, as the presenter is visually impaired.

In addition, creating accessible Web pages often requires familiarity with and access to the HTML code from within the development software.  Resources below include HTML tutorials.

 

Back to top

 

Redesigning or Designing Your Site

After you have examined a few sites, noted your likes/dislikes and content that you would like to provide, and considered how you will make your site accessible to all, it's time to redesign or design your site. Consider using some of the free content learning management systems and other tools on the Web.  For example, Edu2.0 is free.  Tools such as Moodle, Wikispaces, Blogger, and Wordpress are also being used, as they enable two-way communications to enhance learning experiences.  Inspiring Teachers offers free Web pages for teachers.

Tutorials will help. The Cyber-Sierra Workshop 2002: Web Site Power provides the process including planning tips, technical requirements, tools, suggestions for writing for the Web, storyboarding tips, design templates, HTML guidelines, a checklist for validating your site before posting it to the Web, and several links to learn more at each stage in the process.

An existing site should be audited. Stakeholders should appoint and support responsible people with time, assistance, and resources.  They will need to rank the site's purposes, develop a site profile with goals, audience, tone, scope of design/redesign, maintenance plan, and form a Web-design project team (Cavanaugh, 2002).  The team might include students.  For example, students played a key role in the development of the McDonogh School Web site in Maryland (Fish, 2003).

The project team should create a task list and timeline with goals, list essential and desired features of the site gathered from interviews or a survey of users, and create storyboards of potential page designs and color palettes.  The project team should request design feedback, collect new media and other content and create a style guide for pages to have a consistent look.  After the team builds and announces the new site, they should ensure it is usable and accessible by gathering and incorporating feedback from users into a final design (Cavanaugh, 2002).  Finally, children should be included in testing sites designed for them. They appreciate sites that include interaction and characters.

 

Back to top

 

Design Resources

 

Resources for All

You might consider the following tools and resources for Web page development, training, and design issues:

• Content management systems and Web hosting:

  • Blogger Note: David Andrade, the Educational Technology Guy, provides tips on getting started with Blogger and also Google Sites, the latter of which is noted below.

  • Edu2.0 is free and "allows anyone to create an online school in minutes. It's easy to use, comprehensive, and can be accessed from any web browser."  Teachers can use Edu2.0 for their classes and take advantage of the numerous resources available.

  • Google Sites is free for teachers to create classroom and school Web sites.  Also see Google Apps for Education.

  • Inspiring Teachers offers free Web pages for teachers.  Your membership includes 20MB of space, a free email account, Site Builder assistance, file management, online forms capability, and tools to promote your site.

  • Moodle "is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free Web application that educators can use to create effective online learning sites."

  • School Loop Standard is a free Web site system for K-12 districts.  It features a content management system, free secure hosting, free bandwidth, free storage, plus integrated calendars, digital lockers, teacher Web sites, and more.

  • Wikispaces

  • Wordpress

• Web authoring tools:

  • Adobe PageMill

  • Claris Home Page

  • GoLive

  • HomeSite

  • Macromedia Dreamweaver.  Learnthat.com offers free tutorials and courses for Macromedia DreamWeaver

  • Microsoft Expression Web is Microsoft's replacement for  FrontPage.  This software focuses on using cascading style sheets with Web pages to control layout of content.  There are excellent step-by-step tutorials at Expression Web Designer Help.

  • Mozilla Composer (The Mozilla browser package contains a free Web page editing and publishing program called Mozilla.)  After downloading, see additional help on How to Design and Publish Your Website with Mozilla Composer

  • Nvu (say "N-View") advertises itself as "A complete Web Authoring System for Linux desktop users as well as Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver."  This is a free open source program that you can download.  Note: Nortel LearniT.org has video tutorials for working with Nvu.

• Animation tools:

  • GIFBuilder (freeware for Mac computers)

  • GIF Construction Set (small fee for Windows)

  • Macromedia Flash

• Accessibility tools: Additional links to media players, authoring tools, and to tools that are useful for making media accessible are available from the National Center for Accessible Media.

• Other Media design tools: See CT4ME's Multimedia in Projects page for resources to design multimedia objects for your Web site: images, sound, video.

Adobe Accessibility Resource Center: http://www.adobe.com/accessibility/ Adobe has resources on how to create an accessible Web site that conforms to provisions stated in Section 508 of the Rehabilitation Act of 1973.  Also get the how to's for accessibility for a variety of Adobe products: Flash, Dreamweaver, Director MX, Adobe Reader, and more.

Alertbox: Current Issues in Web Usability: http://www.useit.com/alertbox by Dr. Jakob Nielsen

Bravenet.com: http://www.bravenet.com/ contains free tools for livening up your Web site or adding interactivity, such as guestbooks, message forms, chat rooms, blogs, javascripts, password protection, daily cartoons, and more.

Computerhope.com: http://www.computerhope.com/learnhtm.htm has HTML and Web page design help.

Cyber-Sierra Workshop 2002: Web Site Power: http://www.cyber-sierra.com/workshops/web101/index.htm provides the process including planning tips, technical requirements, tools, suggestions for writing for the Web, storyboarding tips, design templates, HTML guidelines, a checklist for validating your site before posting it to the Web, and several links to learn more at each stage in the process.

Cynthia Says: http://www.cynthiasays.com/  is a free online tool from HiSoftware to test accessibility on Web pages.  Simply enter the URL and select the kind of report you wish to receive.

Designing More Usable Web Sites from Trace Research and Development Center at the University of Wisconsin-Madison: http://trace.wisc.edu/world/web/ includes accessible Web site guidelines, Web access tools for users and authoring, governmental efforts, selected resources on disability and Web use (e.g. screen readers and color blindness information), a list of browsers with built-In voice and other access features, forums for discussing accessibility issues, multimedia and virtual reality access, and an informative section on the background on the World Wide Web.  There is also a list of organizations, projects, and technologies addressing Web access issues.

DO-IT (Disabilities, Opportunities, Internetworking, and Technology): http://www.washington.edu/doit/ from the University of Washington contains numerous resources for accessible Web design, and a valuable article by Dr. Sheryl Burgstahler, Universal Design of Web Pages in Class Projects.

Dr. Watson: http://watson.addy.com/ is a free service that will analyze Web pages for HTML syntax, word count, spelling, download speeds, search engine compatibility, and popularity.  It will verify regular and image links.

Fortress Web Design and Hosting: http://www.fortressdesign.com/ has a series of free Web design tutorials covering design fundamentals, planning, layout, typography, color, graphics, interactivity, testing, and more.

GraphicsAcademy.com: http://www.graphicsacademy.com/index.php contains free tutorials on color, image design and capture, HTML and Web design.  A glossary of graphics terms and file formats are also provided.

Human Factors International: http://www.humanfactors.com includes information about color, layout, wording, accessibility.

HTML Code Tutorial: http://www.htmlcodetutorial.com/ contains tutorials for creating Web pages that use HTML code.  Learn about anchors and links, applets, frames, forms, fonts, embedded objects, document tags, images, lines and paragraphs, lists, logical tags, scripts, sounds, cascading style sheets, tables, and more.  There is also an extensive webmaster resources directory, including Internet marketing, Web hosting, portals to help build your site, and Web site design.

HTML at Investintech.com: http://www.investintech.com/content/learninghtml/ contains a series of articles for learning HTML for beginners and advanced.

HTML: The How To Guide to Learning HTML from pdfconverter.com: http://www.pdfconverter.com/resources/articles/HTMLtutorial is a comprehensive tutorial of relevant code and explanations.  There is also a full page listing of the codes for various colors to display on a Web pages.

IBM Rational Policy Tester® Accessibility Edition: http://www-01.ibm.com/software/awdtools/tester/policy/accessibility/  helps ensure Web site user accessibility by monitoring for over 170 accessibility checks.

National Cancer Institute Research-Based Web Design and Usability Guidelines: http://www.usability.gov/guidelines/ is comprehensive. Recommended for a starting point because it is research-based.

National Center for Accessible Media: http://ncam.wgbh.org/

Nortel LearniT.org: http://nortellearnit.org/technology/Webpage_Creation/ has a series of video tutorials for developing technology skills.  Among those are videos for creating multimedia elements (e.g., video, imaging, audio, working with text) and Web content creation.  The Web content creation also includes tutorials for Nvu and Dreamweaver, which are Web authoring tools.

Noupe.com: http://www.noupe.com/ covers all topics of design.  Of particular interest are the Tutorials for Making Your Website Mobile Friendly.

Principia Hypertextica: A Mathematics Educator's View of Web Design: http://www.cst.cmich.edu/users/chaff1ra/m132/WWW/type/  by William Johnson, who wrote his views for a 1997 National Council of Teachers of Mathematics conference.

Usability.gov: http://www.usability.gov/ from the U.S. Department of Health and Human Services contains a step-by-step usability guide for creating accessible Web sites, research-based guidelines (e.g., page layout, navigation, text appearance, links, graphic design), templates and examples, and more.

Web Adventure: http://www.webdiner.com/webadv/index.htm from the Web Diner contains beginner, intermediate, and advanced tutorials on Web page design.  This is an inviting site to use with everything you need, including how to make money from your site.

The Web Design Group: http://www.htmlhelp.com features Web authoring reference, tools, frequently asked questions, design elements, HTML help and more.

WebAIM, Web Accessibility in Mind: http://www.webaim.org If Web accessibility is an important issue for you, then this is the site to visit for an introduction, laws, guidelines, articles, and viewpoints on this issue.  The "How To" section for creating accessible Web pages contains tutorials related to Graphics, Forms, Dreamweaver, FrontPage, PDF, Powerpoint, Multimedia and more.  The Section 508 checklist will help you self-assess your own Web pages for compliance with the new Federal standard.  In addition, simulations are available for you to experience the Web as those with vision problems do.

Web Accessibility 101: http://www.doit.wisc.edu/accessibility/online-course/index.htm is an online tutorial course for beginners or experienced designers to help create accessible Web pages.  Highly recommended for its clarity and illustrations.

Web Accessibility Initiative: http://www.w3.org/WAI/ pursues accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and outreach, and research and development.  Resources are extensive, including tips, guidelines, checklists, techniques, training, evaluation and repair tools, alternative Web browsing, and policies relating to Web accessibility.

Web Pages that Suck: http://www.webpagesthatsuck.com/ by Vincent Flanders contains, as the title suggests, examples of poorly designed Web pages.  More than that, however, is that this site has tips on how to correct the problem.

W3C HTML Validation Service: http://validator.w3.org/ is a free service to check documents for conformance to W3C recommendations and other standards.

W3C Web Content Accessibility Guidelines 2.0: http://www.w3.org/TR/WCAG20/ cover "a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general." (Abstract section)

 

Back to top

 

Especially for Teachers

Teachers need to know their target audience when designing their classroom Web sites.  A site for learners in early elementary grades would be designed differently than one for high school learners, particularly if choosing metaphors involving characters.  Do include interaction, be careful with private information, and test the site with kids.

You Can Create a Class Web Site from Education World presents four steps to building a simple class Web site and contains additional links to tips, templates, and clip art to help you:

• Research good and bad sites and review your district's policy for Web postings.

• Plan. Storyboard templates assist with layout of your pages.

• Create your site.  Keep it simple.  You may need HTML tags.  Add clip art and/or photos.

• Post your site.

Education World also provides 10 pages of free space  at its SchoolNotes site especially for educators who wish to have a classroom Web site for the school-to-home connection. You can post assignments, announcements, links to resources, create an online calendar for class events, create flashcards and other tools for learning.  Plus notify parents and students of updates to your site and take advantage of Education World's content.

Building a Better Web Site for Kids, an article by Famin Ahmed, contains ten tips to launch a site that kids will love.

Clip Art Gallery on Discovery Education includes a full range of clip art for use at teacher sites and in classroom projects.

Weebly for Educators allows you to create a free classroom Web site and blog.  Students can also create Web sites.  Accept homework assignments online and keep parents informed.

3-D Text Maker --  Create free 3-D text banners for your Web pages--unbelievable options for font and appearance!

 

 

 

Back to top

 

The Amazon widget below shows books using the search phrase: Web design.  You can also use the widget to search with other key words.  Suggestions include:

• Web accessibility
• Web site design
• Web page design
• good Web pages
• good Web sites

 

 

References

 

Back to top

See other Technology Integration pages:

Part 1: Essential Questions  |   Part 2: Technology Integration Resources   |  Part 4: Mulltimedia in Projects