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.
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.
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.
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.