Uncategorized

FIPP Site Redux: Goodbye HTML Tables Hello XHTML/CSS

It’s taken actually several weeks (off and on) to get a new web design up for our Faculty in Progress Program (FIPP). The old site was not horrible, but as this faculty recruitment program is in transition from an internal internship to one open nationally, and it was to be less tied to our center, there was an opportunity to do some new web stuff here.

The old site used HTML tables for the page layout although the formatting was done via an external style sheet that we use across our departments. The new site busts out into Web Standards design (I hope), into the zeldman-ain realm.

The left side navigation has mousever effects that is all CSS -driven, no image swapping JavaScript hijinks, using the approaches shared generously from the Listamatic 3D Imenu in blue example (I cannot rave enough about Listaturial)- the cool think with these is that the HTML is just a basic <ul>….</ul> markup, making it usable by visitors using screen readers.

The other nifty thing is that the left side nav is driven by a PHP include, so when some one on the project says, “We need to change that button label from ‘Program Overview’ to ‘Program Description’!” it is just a one edit change in the inlcude script that generates the menus- I can also add or delete them just as easily.

PHP also provides the randomly selected quotes in the lower left and the random chosen pictures inserted across the pages, and a single footer template that auto-inserts the page URL and last modification stamp.

There is just so much more one can do with CSS layout that and up being ugly bloated hacks with nested tables (until you find a need to deal with the arcane CSS hacks!).

I did toss in a linked script to the Weather Channel to do a dynamic insert of the current Phoenix weather for the page offering information about the local area. I did get their information on their XML feeds and may toy with doing my own version of a feed.

Also, there is no need for separate versions of pages to be “print friendly”, the use of a print media style sheet makes them all print friendly at any time a page is printed (you can drop ther navigation bars, print as grey scale, or convert the white text on blue backgrounds on the screen to dark text on white, hide links underlines, etc….)

The most time consuming part was trying to make the site at least somewhat usable on the tremendously crippled NetScape 4 (currentl less than 1.5% of our site visitors, but used by a lot of people in our system because of some needs of legacy systems), which involved splitting the CSS between a linked “basic” style sheet and using the @import for the 21st century styles.

And then there was sorting out the weird browser anomalies, especially on Windows Internet Explorer 6, and NetScape 7 stilll does some awkward extra white margins where they are not desired. I’ll have to dig up some IE 5.0, 5.5 computers to find out what other curious effects happen.

I am sure there are more fixes along the way, but its been fun to break some new design ground.

But seriously– NetScape 4 must die and die soon (although on one of my log scanes I found 12 hits from NetScape 3. It’s like being stuck on disco music.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. Absolutely dead on! Since I found how useful css is for layout a few years ago, I was a convert. I am now exstatic about finally getting rid of tables forever except what they were intended for: tabular data. As an educational institution it is our foremost responsibility to educate people and give them skills to work in the 21st century and beyond, yet we still hold on to the backward notion of backward compatibility. We need to lift people up, and enlighten them, not hold them back and keep them in the dark. I now creating a forward compatible and accessible website for my department which should be launched in the spring. Visitors will need to use a web standards compliant browser to view the pages.

    Here is an article I found on ala that is very usefull in freeing the minds of those chained to obsolescence: http://www.alistapart.com/articles/tohell/

  2. Yes, Zeldman is dah man for hammering the WebStandards hard, and ALA is a must-read.

    You will face, however, the chorus that says,” There are those who are economically bound to use old technology.” I do not adovcation designing for the less than 1% who use old technology, but it is worth doing what you can to at least provide them some of the content.

    By using a mix of linked CSS and @import you can effectively segregate formatting for old and new. It is not easy.

    And everything is not the golden grail out there. You will find huge inconsitencies between browsers and versions even with CSS support (IE 5.5, IE 6.0, Opera) and a growing bag of CSS hacks that make things convoluted (Tantek box stuff).

    I’ve been watching the browser stats lately on this box- I have about 2% NetScape 4, sometimes a few tiny hits of even NS3 and IE3/4, but even new browsers pass NS4- Firebird (1.4%), Mozilla (2.3%), Safair (3.5%).

    The war is pretty much over-

    http://www.webstandards.org/act/campaign/buc/

Comments are closed.