Poly.edu (2004) - the power of semantic markup

Context

This was an era when semantic markup required actual evangelism. Below may give a partial glimpse as to why. Even if semantic markup and CSS were the “right” way of doing things, if <table>s were doing the job, why swim upstream?

In my early days on the Poly Webteam, I had to really prove my stripes before I could take on work of my choosing. Afterall, there was enough work to go around just to maintain sites and newsletters. I bided my time keeping <table> and <font> tags alive in codebases probably dated back to the 90’s without scratching the itch of making things better. Eventually, I was finally given reign over 1 personal project.

Why the homepage?

I picked the homepage for a number of reasons.

• There were actually 2 separate pages with entirely different code, 1 for IE and 1 for Netscape. User agent sniffing was done on the backend (ColdFusion) to determine which page to serve. There were issues in all 3.
• There were memory leaks between ColdFusion and Oracle which was a source of frequent instability.
• It was the default page on all machines on campus.
• Had the most traffic by far.
• It had the strangest design and posed the most challenge to lift and shift from old code to semantic markup.
• The university was divided, e.g. the Computer Science and Computer Engineering departments had their own sites, neither with semantic markup. This could be the catalyst for change both socially and technically.

Revamping the homepage was the way for me to make the most impact on the university: immediately, long term, and laterally.

The work

Though I was allowed to work on the homepage, I was not allowed to make any changes to its design. The look and behavior had to remain exactly the same, pixel perfect. As intimated by the screenshot above, it was not as easy as simply throwing links in unordered list items. Netscape 4 applied list item styles to its bullets, using CSS to position an anchor would kill its functionality. As for Windows IE4, you couldn’t position anchor tags. So each anchor had to be wrapped in a <div>. The fun didn’t stop there.

To accommodate other browsers in other platforms including Mac IE5 required the use of CSS hacks. There’s a myriad of odd behaviors when it came to parsing comments and characters between them. Getting the right combination of targeted browser hacks and ordering of CSS declarations was key in juggling varying styles to keep up the same look across the board. My revamp of the homepage also:

• deprecated the browser splitting & redirects,
• reduced download size via less markup, only 1 stylesheet, optimized images for the web,
• and eliminated the memory leaks.

Immediate impact

Being a pivotal snapshot in the Wayback Machine (WM) is proof in the pudding of the impact this update had. My work resulted in the homepage:

• accidentally improving SEO by playing better with search engine bots and just the superiority of semantic markup,
• saving tons of bandwidth both publicly and in our intranet,
• loading consistently faster with less jank on menu hovers,
• and making our sys admin Cynthia very, very happy.

The real impact

While the immediate effects were great, the real impact was about the future of Poly. We were set to continue remaining eons behind while another tech university was literally writing web standards. This proof of concept set a very strong precedent. It gave my opinions weight, going forward I was utilized for research and as a behind-the-scenes voice in board meetings about the direction for their web presence.

Evangelism for doing things right continued to go against the grain. I still vividly recall once whilst alone in the Webteam office, a higher echelon visited to circle around me and repeat, “You better be right about this [CSS], Abed. You better be right.” I stayed my course, which I like to think helped the divided departments ultimately unite under a single, modern poly.edu. The more we did things right, the better we were for it.