Computing Technology for Math Excellence Logo

 

 

 

 

 

 

 

 

 

Black line

Technology Integration:
Web Page Design

Web Design Metaphor, which shows a keyboard linked to a series of six computers attached to a spider web on a monitor

Technology Integration is a four part series on essential questions, tech integration resources, web page design, and multimedia in projects.  Sections contain relevant opening essays and resources.

Black line

Some Principles of Web Page Design

 

First Steps

 

Computer Mouse IconSchool 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.

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, such as sites of schools recognized by the National Blue Ribbon Schools Program.  The Web Marketing Association identifies Best School websites in its annual WebAward Competition.  The websites of the schools listed might serve as models for developers and give ideas for content to include.  Consider surveying potential users of the site (staff, students, parents) for features they would like to see.

Look at the design of the site for how it might serve your own purpose.  In determining your own purpose, 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 that 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).

 

Building Online Courses

If you are considering to use your site for an online learning course or experience, read Dr. Patricia Deubel's article Learning from reflections: Issues in building quality online courses, available on this site.  It was published in the Fall, 2003 edition of the  Online Journal of Distance Learning Administration, 6(3).

 

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:

 

Back to top

 

What are good Web pages?

 

Professor in a cap and gown explains the HOME acronym for Web DesignComputer Mouse Icon 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, Nielsen Norman Group.  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).  Web Page Mistakes includes resources for effective color contrastOpen Dyslexic is designed with a new font that will benefit learners with dyslexia.  This free open software changes the font on websites to be more friendly to them.

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, Take Responsibility section).  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.

With the rise of using mobile devices to access Internet content, it is also 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.

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, Take Responsibility section), "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."

A responsive design will adapt the layout and content of a website to fit the requirements of any device as the layout and content automatically resize to fit any screen.  Google provides Responsive Web Design Fundamentals.

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, Take Responsibility section).

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.

Security:

Ensure that content intended for only a certain group of individuals or specific individuals is secure and accessible only to them.  For example, student data and classroom grades for each student require secure access.

 

Back to top

 

School Web Site Content

 

Computer Mouse IconThe 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.

Multiple forms for communication should be available.  The school web site should be a primary communication tool for the community, parents, and its visitors.  As such, schools might also consider blogs for real-time communications and opinion polls for essential questions.  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.  Social media sites can be considered for posting communications and achievements, but some parents, who are not interested in social media, might prefer alternative methods.  In addition, some information is not appropriate for posting to social media.  Schools might also offer email options to parents and community leaders to receive essential school news and information on a regular basis.

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 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 Microsoft's Bing TranslatorPromt 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 and/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.

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 is not recommended.  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.

See eChalk, which provides website development for K-12 schools and districts. 

Overall, suggestions for content could fall within the following categories:

 

Back to top

 

Classroom Teacher Web Pages

 

Computer Mouse IconDunn (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).

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.  Social media sites can also be used to showcase student accomplishments and what they are learning.

Parents would appreciate links to learn more about the Common Core Standards or their adopted state standards and the assessment policies for those, such as from the Partnership for Assessment of Readiness for College and Careers (PARCC) or the Smarter Balanced Assessment Consortium (SBAC).  They would benefit from a list of technology apps and mobile devices used in the classroom.  Classroom teachers might also post their parent volunteer information.

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, including sites with podcasts and vodcasts to review concepts studied in the curriculum.  Reading and math sites would be relevant, particularly in relation to assessments of the Common Core Standards or state adopted standards.  Computing Technology for Math Excellence provides extensive resources for teaching and learning mathematics.  This site also contains a section on Reading with multiple resources because poor reading skills are associated with poor performance in mathematics.

Teachers might wish to post their professional email addresses, rather than personal email addresses to keep those accounts separate, and 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 or post images of students without first seeking parental permission.  If parents do not wish to see their children's images posted online, teachers might need to blur their faces before posting, if needed.  When seeking parental permission, teachers are advised to use school-approved forms. 

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

 

Blogging in your Classroom

If you elect to use a blog in instruction, you might read Moderating and Ethics for the Classroom Instructional Blog by P. Deubel (2007).

 

Back to top

 

More on Accessible Web Sites

 

Computer Mouse IconOnline 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 educators 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.  See: Issues in Accessing Distance Education Technologies for Individuals with Disabilities by Rowland, Burgsthaler, Smith, and Coombs (2005).

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:

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.

The Digital Accessibility Toolkit: What Education Leaders Need to Know produced by the Center on Technology and Disability (2016) contains resources, tips, and information to guide educators in taking a proactive approach to accessibility. "The four sections of the toolkit define accessibility and share why this effort is important today, identify the legal requirements for digital accessibility, describe the benefits of digital accessibility, and explain the procurement of accessible technology" (p. 1).

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

 

Computer Mouse IconAfter 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.

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

Tools Metaphor, which is a drill with facial features, legs, and arms on the handleYou might consider the following tools and resources for Web page development, training, and design issues:

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.

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.

DO-IT (Disabilities, Opportunities, Internetworking, and Technology): http://www.washington.edu/doit/ from the University of Washington contains numerous resources for accessible Web design, including a valuable article by Dr. Sheryl Burgstahler, Universal Design of Web Pages in Class Projects.  The University of Washington also has an IT Accessibility Checklist useful for designing and procuring accessible IT.  Per the checklist description, "Many of the items in this checklist apply to web pages and web-based applications as well as electronic documents in Microsoft Word, Adobe PDF, and other formats, and other products and services that are not specifically web-based" (para. 2).

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-03.ibm.com/software/products/fr/accessibility  helps ensure Web site user accessibility by monitoring for over 170 accessibility checks.

Nielsen Norman Group: Current Issues in Web Usability: http://www.nngroup.com/articles/ by Jakob Nielsen, Don Norman, and Bruce Tognazzini.

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: https://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.

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/outside-cms/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:

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.

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.

Create a Banner with 3-D Text Maker

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

 

Learn at your own pace.

Learning at your own pace metaphor, which shows a coffee cup with cream and sugar being added

Patrick J. Lynch and Sarah Horton of Yale University's Center for Advanced Instructional Media have a complete text online to help you design your site.  See Web Style Guide: Basic Design Principles for Creating Web Sites.

Google developed a free online course on Responsive Web Design Fundamentals, which could be completed in about 12 hours working at your own pace.

 

 

Back to top

 

References

André, R., Felix, M., Foley, A., Hunziker, D., & Petri, K. (2006, October 3). A public consortium emphasizes the importance of LMS accessibility. Campus Technology. Retrieved from http://campustechnology.com/articles/2006/10/a-public-consortium-emphasizes-the-importance-of-lms-accessibility.aspx

Architectural and Transportation Barriers Compliance Board. (2001, June 21). Web-based Intranet and Internet Information and Applications (1194.22). Retrieved from http://www.access-board.gov/sec508/guide/1194.22.htm

Barron, A., & Ivers, K. (1999). The presence and purpose of elementary school Web pages. Information Technology in Childhood Education, 1999, 181-191.

Carr, N. (2010, August 25).  How to tailor your school site for mobile web users. eSchool News. Retrieved from http://www.eschoolnews.com/2010/08/25/how-to-tailor-your-school-site-for-mobile-web-users/2/?ast=78&astc=7213

Carr, N. (2004). Parents expect email accessibility. eSchool News, 7(3), 35.

Cavanaugh, C. (2002, December). Redesigning your school web site. Learning & Leading with Technology, 30(4), 14-17, 40-41.

Center on Technology and Disability. (2016). Digital accessibility toolkit: What education leaders need to know.  Washington, DC: Author. Retrieved from http://www.ctdinstitute.org/sites/default/files/file_attachments/AccessibilityToolkit-508_FINAL_100616.pdf

Deubel, P. (2007, February 21). Moderating and ethics for the classroom instructional blog. T.H.E. Journal K-12 Tech Trends. Retrieved from http://thejournal.com/articles/2007/02/21/moderating-and-ethics-for-the-classroom-instructional-blog.aspx?sc_lang=en

Dunn, L. (2011, February). Making the most of your cl@ss website.  Educational Leadership, 68(5), 60-62.

Dyas, R. (2009, March). Time to refresh your web site. Tech & Learning, 29(8), 16.

Fish, T. (2003). Building a web site from the inside. Learning & Leading with Technology, 30(5), 46-49, 58.

Flowers, B. F., & Rakes, G. C. (2000, Spring).  Analyses of acceptable use policies regarding the Internet in selected K-12 schools. Journal of Research on Computing in Education, 32(3), 351-365.

Ingram, A., & Lathorn, L. (2003, March/April). Designing your web site for instructional effectiveness and completeness: First steps. TechTrends, 47(2), 50-56.

Lynch, P. &  Horton, S. (2002). Web style guide (2nd ed.) [Online]. Retrieved from http://www.webstyleguide.com/index.html

Miller, M. (2003, May 1). Q&A: Ruben Lopez, Florida's Chief Technology Officer [Online]. NCLB Supplement to T.H.E. Journal, 30(10). Retrieved from http://thejournal.com/articles/2003/05/01/qa-ruben-lopez-floridas-chief-technology-officer.aspx

Schmidt, M. (2000, May/June). Setting up the school web site. Media & Methods, 36(5), 4-5 supp School executive.

 

Black line

Back to top

Binoculars GifSee other Technology Integration pages:

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