, among other recommended stalwarts from the last century’s coding standards.
As far as submitting your site to search engines, Wigglebits advises:
"Yahoo, Google, Alta Vista, Excite, Infoseek, Webcrawler, Hotbot, and Lycos are some of the search engines and catalogs on the Web today."
And you wonder why teachers and schools have trouble finding proper help for their design and development needs?
Kathy Schrock is probably a name that rings no bells with you — but she is to the subject of school and classroom procedures as Eric Meyer is to CSS. Going to Meyer’s site gives you current and reliable information on all things CSS. Going to Schrock’s site might well give you current and useful information on running a classroom.
However, you won’t find that kind of information on her page about school websites. Her site leads you to an "updated" page on evaluating and constructing websites from 2002. The other pages she sends you to are even older.
She does provide a set of useful forms for schools to evaluate their sites — here’s the PDF of the secondary school evaluation form — but there’s no place to evaluate the quality and usability of the design itself.
The Overall Dilemma
All in all, schools have been conditioned since the advent of school-based websites to consider themselves as fundamentally different in needs and approach from commercial or personal websites.
They look for different solutions than your local church, small business, or self-employed entrepreneur might.
They are given information that is outdated, poorly presented, and sometimes just plain wrong, and lulled into using it because "this information is developed specifically for the needs of schools like yours."
They are served by different providers than the design and app firms who service commercial and personal clients, and are often given inferior products.
This is part of the paradigm shift that schools operate under. The general perception seems to be: "School websites just can’t be as good as other sites." I absolutely disagree with this position.
School Site Reviews
Let’s take a look at some of the sites out there and then look at ways this paradigm can be changed for the better.
Before You Read Any Further…
At some point, someone from one of the schools featured below will read this article and see the write-up on their school’s website. They might be angry to see their site criticized, perhaps even embarrassed and hurt.
To those school personnel and community members, let me say this: You have nothing to be ashamed of. You do invaluable work preparing America’s children for their futures.
You are overworked, overstressed, underpaid, and underappreciated. You and your children deserve better tools with which to build your school’s websites, and you’re not given them.
Your school, and its students, deserve to have modern, elegant, beautiful, accessible, and standards-compliant websites that serve as gateways for your students, staff, and community to explore the offerings your school provides its kids and its community on a daily basis.
You create the best resources for your community and students that you can — given the extraordinary restrictions under which you work.
Each year you’re told to achieve a near-impossible task with nowhere near the resources you need, like being told to build the Taj Mahal with popsicle sticks and glue. And when you achieve it, you’re told to do a better job the next year with half the resources ("now build it without the glue!").
School websites are just one part of this model. Whatever onus of "web sites that suck" that may apply to any school’s website is not to be laid at your door.
About the Following Sites
The sites below are somewhat arbitrarily divided into three categories: "good," "mediocre," and "poor". Even the best of the sites below do not meet the standards of a high-grade commercial website, nor those of a top-end personal site.
Professional designers may be tempted to rename the three categories as "mediocre," "poor," and "godawful". It’s easy to do that, but it’s worth remembering that with school websites, the paradigm is much different from what a professional may be used to working with. It’s also worth noting that these are not intended to be full-blown site reviews, but "reviews at a glance."
I’ve also checked the sites’ accessibility using WebAIM’s WAVE tool, which provides assessments of a site’s compliance with WCAG 1.0 and Section 508 guidelines. These kinds of "instant accessibility checks" are simplistic and superficial, but they will at least give us some idea of how accessible these sites are.
Let’s dive in.
Good Sites
We have five sites that fit in this category.
Apex High, Apex NC
Generated from a free template.
Pros: Stylish use of strong color. Spiffy jQuery-driven navigation menu. Clean design. Coded with XHTML 1.0 Strict doctype. Has a Twitter widget. Good use of progressive CSS3 elements.
Cons: Some pages hosted on school district site or other servers. Use of text images limits accessibility and searchability. Serious validation errors.
WAVE accessibility assessment: Five errors, mostly related to empty h2 and links.
Arrowhead Union High School, Hartland, WI
Generated using CMS4Schools, featured in CMS4Schools’ online portfolio.
Pros: Clean, well-done layout. Search box located in upper right. Event calendar. Large yet easily navigable link scheme. Attractive JS-driven "slideshow" of selected photographs on home page.
Cons: Very "template-y." Spartan subsidiary pages. Inexplicable use of internal styling for links. Invalid and deprecated code. Enormous amount of validation errors and warnings.
WAVE accessibility assessment: Two errors, related to missing alt attributes for images (not neccesarily a bad thing if it’s within context) and missing form labels.
Central Learning Center, Henderson, KY
Created with DotNetNuke.
Pros: Strong color scheme. Easy-to-use dropdown nav menu and sidebar menu. Attractive JS-driven slideshow on home page. News alert box on home page.
Cons: "Template-y" in appearance. Odd placement of minimize and print buttons on home page. Staff pages are PDFs. CMS-generated site features lots of extraneous code. Numerous validation errors and warnings.
WAVE accessibility assessment: 18 errors, all related to missing alt attributes for images.
Kofa High School, Yuma, AZ
Generated from School Webmasters, featured in School Webmasters’ online portfolio.
Pros: Strong red-based design aesthetic. Good drop-down navigation menu. Google Translate function on home page.
Cons: Somewhat confusing sidebar navigation, with subsidiary menu choices appearing only on hover. Use of graphics as headings rendering them invisible to search engines. Subsidiary template-driven pages hosted on Quia or other providers. Internal CSS. Table-based layout. Use of deprecated code. Numerous minor validation errors.
WAVE accessibility assessment: No accessibility errors.
Mangum Elementary, Bahama, NC
Created with Joomla, based on a Joomla template.
Pros: Strong use of color. Simple, easily navigable structure. Logical placement of information on home page. No major validation errors.
Cons: "Template-y" appearance. Little content on some subsidiary pages. Use of tables in layout and presentation.
WAVE accessibility assessment: Four errors, all related to missing alt attributes for images.
Mediocre Sites
We have two sites that fit in this category.
Corliss High School, Chicago, IL
Designed by Sapient, a private design firm (all Chicago Public School, or CPS, sites have the identical design).
Pros: Identical design scheme across schools encourages user familiarity.
Cons: Busy design scheme, with little negative space and lots of unrelated information packed into one page. Much information on school’s home page pertains to school district and not to individual school. Table-based layout. Many validation errors.
WAVE accessibility assessment: 28 errors, all related to missing alt attributes for images.
Juan Seguin High School, Arlington, TX
Generated from a Dreamweaver template.
Pros: Decent header design, with school logo and photo of school. Clean and simple layout.
Cons: Poor choice of "hover" colors in all links. Header typography difficult to read behind background color. Left-sidebar navigation design rather old-fashioned. Unnecessary use of iframes. Inexplicable use of internal styling for links. Invalid and deprecated code.
WAVE accessibility assessment: 19 errors, all related to missing alt attributes for images and empty links.
Poor Sites
We have 11 sites that fit in this category.
Cedar Ridge Elementary, Columbia, MO
Generated via WordPress.
Pros: Use of RSS and Atom feeds, though how to obtain feeds not immediately apparent.
Cons: Eye-watering colors in header; colors clash with logo colors. Poorly implemented navigation design. Mixed and unmatched use of colors, fonts, and borders in various pages. Poor layout — information and graphics seem strewn about the home page almost at random. Very cluttered code. Unable to validate because of nonstandard code in main page.
WAVE accessibility assessment: Three errors, all related to empty links.
Crow Creek Middle School, Stephan, SD
Generated by FrontPage 4.0.
Pros: Nice school photo on home page.
Cons: Very outdated layout and navigation scheme. "Starry" background image very dated. Red links difficult to read against black background. Subsidiary pages almost unstyled, and what stylings are in place are pre-millennial. No doctype, rendering validation problematic. FrontPage generates lots of unnecessary code and inline stylings. Dated file names (i.e. home page: Default.htm).
WAVE accessibility assessment: Three errors, all related to missing alt attributes for images.
Fisher Grade School, Fisher, IL
Pros: Nice logo. Contact information in header.
Cons: Extraordinarily outdated appearance, with tiled background, content scattered almost randomly around the page, and animated cartoon graphics moving across the screen. Important navigational links placed at bottom of page. No doctype, rendering validation problematic. No CSS; page table- and inline-style driven. Subsidiary pages hosted by Webpage4Teachers, using very outdated templates.
WAVE accessibility assessment: 15 errors, all related to missing alt attributes for images.
Hillcrest Middle, Simpsonville, SC
Created by either FrontPage or MS Office.
Pros: Attractive header featuring school mascot. Multiple options in dropdown nav menu.
Cons: Busy layout, color scheme interferes with scanning for information. No doctype, rendering validation problematic. Table-based layout. Inline styling. Staff pages have different appearance, appear to be generated by different product.
WAVE accessibility assessment: 13 errors, related to missing alt attributes, and empty headers and form labels.
Kennedy High School, Waterbury, CT
Generated via SchoolCMS
Pros: Simple, easy-to-use layout. Navigation scheme clear, with simple flyout menu. News block above fold.
Cons: Very "template-y." Dated decorative animated graphic on home page. Use of "Impact" font in home page quote renders quote difficult to read. No simple way to see code because CMS blocks access through right-click menu.Table-based layout. Spacer elements. Critical validation errors.
WAVE accessibility assessment: Seven errors, related to missing alt attributes for images and links.
Lexington High School, Lexington, OH
Generated with MS Office.
Pros: Nice logo.
Cons: Poor design, color scheme, and layout; very dated appearance. No title attributes. Typical mares’ nest of Office-generated "code soup." Enormous number of validation errors.
WAVE accessibility assessment: Four errors, all for missing alt attributes for images.
Loogootee Elementary West, Loogootee, IN
Generated by FrontPage 5.0.
Pros: Relaxing design aesthetic. Colorful design scheme, using freely available Web graphics credited on home page. Simple to use.
Cons: Outdated design, with left-side background graphic. Unusual design scheme for an elementary school. Site plays MIDI music file upon loading, with no obvious way to stop music from playing. Subsidiary pages festooned with broken image links. FrontPage has used confusing and repetitive inline styling. Table-based layouts. Many validation errors.
WAVE accessibility assessment: 17 errors, related to missing alt attributes for images and links.
Page Middle School, Franklin, TN
Created by MS Office.
Pros: Simple nav scheme. Attractive color scheme. Subsidiary pages match home page in format and style. Sufficient negative space.
Cons: Mismatched items on home page. Doctype in MS Office XML format, rendering validation problematic. Pages are tangles of "code soup" generated by Office. Table-based layout. Inline styling.
WAVE accessibility assessment: 11 errors, related to missing alt attributes for images and image maps, and a
Reagan High School, Houston TX
Generated via FrontPage 6.0.
Pros: Simple, strong navigation scheme, repeated as text farther down page.
Cons: Rather old-fashioned Flash-driven "splash" page before home page presents, though a "skip intro" link is provided. Very old-fashioned design, with "clip art" like graphics combined with small Flash element showing various views of school. Different pages have dramatically different stylings. No doctype, rendering validation problematic. FrontPage generates lots of unnecessary code and inline stylings.
WAVE accessibility assessment: Five errors, all related to missing alt attributes for images.
Tongue River Middle School, Ranchester, WY
Generated by MS Office.
Pros: Laudable use of student artwork on home page, link to Spanish translation of site.
Cons: Very stodgy, old-fashioned, unappealing and somewhat dysfunctional layout. Navigation scheme clumsy and broken. Confusing use of blue highlights on words that are not links. Horrific "code soup" generated by MS Office. Table-driven layout. Spacer elements. No doctype, rendering validation problematic. Subsidiary pages are hosted on Google Sites, and use very plain templates.
WAVE accessibility assessment: Eight errors, all related to missing alt attributes for images.
White Pine Middle School, Saginaw, MI
Created with Schoolcenter, now ThinqEd, which at the time the site was designed, appeared to use FrontPage technology.
Pros: Well-done header image.
Cons: Incomplete items on FrontPage. Color scheme renders links, text difficult to discern. Rather uncontrolled use of color. Flash-driven navigation. Typical FrontPage "code soup." Table-driven layout. Confusing amalgamation of internal and inline CSS. Formidable URL. Large number of validation errors and warnings.
WAVE accessibility assessment: Three errors, all related to missing alt attributes for images.
Summary of the Sites
The number of school websites I’ve designated as "poor" far outweighs the numbers in the "good" and "mediocre" categories combined. Most have problematic color schemes (usually because the schools implemented their school colors as the basic scheme regardless of how the colors appear on screen).
The site structures veer from pages packed with too much information to sparse, barely developed sites with little content. The sites tend to handle navigation about as well as they handle anything, but too often, links are hard to discern because of odd color schemes or display methods.
Every site reviewed has validation errors, and all but one has accessibility errors (though it must be noted that these were auto-validated, and there are downsides to auto-validation). Most have table-based layouts, and many use internal or inline CSS.
Interestingly, all but one was designed through a commercially available CMS or site builder program. Only three were designed with a CMS prevalent in commercial and personal sites.
While many sites use "school-based" CMS or site builder programs, many use Microsoft’s outdated FrontPage construction system, probably because FrontPage was integrated into Microsoft Office.
Some schools use Microsoft Office itself (specifically, MS Word) to generate documents that were then saved as web pages. Not surprisingly, all of the Microsoft-generated pages appear in the "poor" category.
Only one site is professionally designed, Chicago’s Corliss High, and that is actually a district page, not an individual school site.
One of the best, Apex High’s site, was generated from a freely available template.
Relatively few feature modern social networking, i.e. Facebook or Twitter links, or RSS/Atom feeds.
Conclusion: A Challenge to Schools and Designers Alike
There are four things that public school websites need above all others:
Data security
Ease of use (including content input) by non-professionals, and of maintenance by IT staffers with limited skill sets
Compatibility with older browsers and operating systems
Low startup costs
Name a CMS worth its salt that doesn’t provide these things. Tell me a decent professional designer/developer, or a design and development firm, can’t handle these requirements.
But, in part for the reasons delineated above, schools seem to have operated for years under the idea that their needs are so different from the rest of the Internet population. That they have to use completely different CMS software, filtering systems, and other tools, often inferior and unnecessarily restrictive in their makeup, to provide for the "different needs" of the school system.
As such, American public schools have generated thousands of websites that fail to implement modern HTML and CSS coding standards, do a poor job of presenting information to their stakeholders, exhibit poor design and construction methods, and ultimately do a disservice to their students, their communities, and themselves.
I believe that some of this has been fostered by companies who have marketed their CMS and "site builder" products directly to schools, promoting their products as being designed specifically for schools and their "unique" needs.
The mandates for schools to develop web presences came quite abruptly for many systems, and they scrambled to find something that would help them get their sites developed and running quickly, cheaply, and effectively.
That’s when I believe they became open to the variety of firms hawking "school-safe" webwares. And, schools are like any other set of organizations: when one or two schools begin using a particular product, other schools gravitate towards using those products as well, or look for competing products that provide much of the same benefits.
I doubt it took long for schools across the country to begin implementing these "site builder" and CMS programs in their systems. This, in essence, sums up the paradigm of American public school websites.
In general, public schools operate in almost an entirely different universe than for-hire Web designers and developers; the two almost never meet. Public school systems rarely consider approaching design/development firms to handle their web needs, and design/development firms rarely consider public school systems as clients.
How Can the Paradigm Change?
It starts with changing the mindsets of educators and school boards — not an easy task or one that will be quickly accomplished.
It’s going to have to be led, I believe, by the American Web design/developer community, and designers and developers from other nations who want to pitch in or perhaps get involved in their home nations’ school sites.
The question is a basic and fundamental one: How can we help the public schools get proper websites? I can’t think of a more deserving community, and one more worthy of help, than schoolchildren.
What can you, or your design and development firm, or you in conjunction with your colleagues, do to convince school systems to move towards implementing powerful commercial or open-source CMS programs proven to support modern, standards-compliant websites?
How can you help schools design and implement beautiful, standards-driven websites that their employees can use without intensive training? How can you help schools afford these solutions?
Can you convince schools to reallocate some of their communications budget from print media to online media?
How can you help your local public schools gain a beautiful, elegant, modern website that will make the kids and the community proud of their Internet presence?
Thanks to the three designers/developers who graciously agreed to be interviewed for this article: Ted Adler of Union Street Media, Abi Cushman of Brown Bear Creative, and Tim Dailey of Digital Gibberish.