As the webmaster at Bartlesville High, I’ve noticed how many school districts are moving to paid services or more advanced open-source applications to bring a more professional and consistent look to their school websites. This allows them to have dynamic web pages with content that is more “live” and and changeable, thanks to PHP scripting and other services beyond the static web pages created with hypertext markup language (HTML) and cascading style sheets (CSS).

My district’s incessant budget problems leave us out of that world, so I decided to devote part of my Winter Break to updating the site as best I could with standard web tools at my disposal.

BHS Website in 2004-2005

First we have a snapshot of the site’s appearance from August, 2004 to January 2006. Navigation was by clicking on large glass block images. An internal image in each block became less transparent when you hovered over or selected it. That would then jump you to the sub-pages with similar navigation by a reduced stack of blocks on the left side of the screen. The site was all laid out using HTML tables with no Cacading Style Sheets (CSS), although I did use Javascript for the blocks navigation.

If you click on the image, you can visit the zombie version of the site that lives on at The Wayback Machine.

After 18 months of that design, my friend and fellow teacher Betty Henderson complained that the site needed a new look, suggesting that I look at Hollywood High School’s website for ideas. I liked their site (it has since changed) and stole and modified their confusing spaghetti of CSS code to create a new site for BHS.

That design lasted three years, with me learning CSS in the meantime to make the site behave better and to spruce up the many other websites I maintain. Javascript allowed images to be zoomed and for one accordion menu of frequently asked questions about the school. I received many compliments on it from folks outside of school who found it easy to navigate. You can also see the zombie version of that site at The Wayback Machine.

BHS Website in 2006-2008

The new design was more colorful and had stable navigation bars across the top and left side. Hardcoded to fit a screen 800 pixels wide and featuring oodles of rectangles, it began to look rather dated to me in this era of round shiny buttons. My home monitor’s 1680 pixel-wide screen made the site look too constricted, although it did work well on the tiny screen of my iPhone.

I decided it was time the site literally grew up, since today almost all browser windows are 1024 pixels wide or more (although smart phones are problematic for site design). So I grabbed a free CSS template, modified it heavily, and created our new site. I retained navigation bars across the top and left, although more complex pages also use a second left-side navigation bar, while others use horizontal tabs, and in several spots I use accordion menus to cram more stuff in on a page. I kept most of the navigation understated, since I have a feeling shiny 3D buttons may look dated in a few years – they only creep in on the major links at the top.

BHS Website for 2009

The new look is less colorful but strikes me as more professional. It still sticks to HTML, CSS, and Javascript. My CSS is improving, although I still use tables far too much to make things easier for me to format.

The content is largely the same except in two areas. First, I replaced the generic Help and Links pages with larger pages gathering together relevant resources for different audiences: students, faculty/staff, parents, alumni, and visitors/public.

Second, I’m experimenting with a news site based at sites.google.com in hopes of making it much easier to post, edit, and track news items. I’ve been hard coding each news item, which takes too long and is quite cumbersome to manage. Now, if our district internet filter will cooperate, I can post news stories without any coding and then have them automatically show up on the main site. Unfortunately Google Sites doesn’t offer RSS, so I had to format an RSS feed for it using Feed 43 and then found Feed2JS to translate that feed into a visible newslist on the main BHS website. If that patchwork holds, I’ll be a happy camper.

Websites age faster than dogs, so I don’t know how long this new design will endure. But a solid week of coding leaves me hoping it lives to a ripe old age.