The original site was seriously out of date, not only in appearance but in the mechanics of its design. Like most sites of its vintage (circa 1995), it used HTML tables for layout and HTML font tags for style markup. The site was entirely static, with no dynamic content at all, and there were even a couple of animated GIFs (remember when we thought those were cool?) decorating the home page.
The new site design is entirely CSS-based. Following my own advice, along the lines of the presentation I made to the Detroit Area Fox Users Group (DAFUG) earlier this year, the site redesign accomplishes these objectives:
- Migrate from HTML to XHTML
- Eliminate the use of deprecated HTML tags such as <font> to control style
- Eliminate the use of HTML tables to control positioning of elements on the page
- Separate the positioning of elements on the page (layout) from their appearance (style)
- Separate both layout and style from page content
To that end, the site uses two CSS style sheets, one to control positioning (CSS-P) and the other to control style. The content for each page is thereby freed to reside in simple HTML pages within the appropriate <div> tag. This approach is not difficult to implement and makes the site easy to maintain because each aspect of the design -- layout, style, and content -- can be manipulated separately.
Another objective was to make it a three-column layout with a fluid center. In other words, the width of the center column, where the main content of each page resides, should shrink and expand with the browser window while the left and right columns retain their width. This is accomplished through the use of CSS positioning. There are many resources that describe this technique, both in books and online, and I am indebted to several of them for this and other ideas behind my own site's design. In particular, the following books were very helpful:
DHTML and CSS for the World Wide Web, 3rd edition, by Jason Cranford Teague
HTML & XHTML The Definitive Guide, 5th edition, by Musciano & Kennedy
Designing with Web Standards, by Jeffrey Zeldman
Stylin' with CSS, A Designer's Guide, by Charles Wyke-Smith
The new site also has an XML-driven dynamic news feed, which appears at the bottom of the right column on each page. The news headlines in the right column point to a news page, which in turn draws content from an XML feed with full descriptions for each news item and other information in addition to the headlines. In future this may become a true RSS feed, but right now it's kind of a hybrid that suits my particular purpose. Other improvements in the news feed will also be forthcoming as I get around to them.
Finally, cross-browser compatibility remains both an elusive objective and an ongoing challenge for all web designers. My new site design has been tested in Internet Explorer 5.5 and 6.0, Firefox 1.5, Opera 8.51, and Safari on the Mac. As far as I know it renders as intended on all of those browsers, with the exception that IE does not respect the max-width and min-width property in the container div. I ran into a couple of other random behaviors with IE, too, which forced me to change the design a little bit to accommodate it, but that's a topic for another day.
By adhering to standards as much as possible, the site is cross-browser compatible to the extent the browsers themselves adhere to the standards. Earlier (non-released) versions of my site redesign incorporated various hacks to accommodate anomalies in specific browsers. The final design contains no hacks and lets the browsers fend for themselves. Call this lazy design if you will, but I prefer to call it forward thinking. < s >
Tech Note 1: The site now uses ASP.Net to drive the dynamic content, so the page name extensions are now .aspx instead of .htm. Because many people have bookmarked my FoxPro developers page, I've set it up so the old foxpage.htm now redirects automatically to foxpage.aspx. The redirect will remain in place indefinitely, but please update your bookmarks anyway.
Tech Note 2: This site was built largely using Dreamweaver 8, the latest release from Macromedia (now part of Adobe). I use both Dreamweaver and FrontPage, depending on the particular need and design objectives for a site. Both are good tools, but I have to say that this latest version of Dreamweaver is terrific, making it very easy to work with CSS as well as facilitating the dynamic XML content. Through 12/31 there is a special upgrade price of $399 for the entire Studio 8 bundle of products, which besides Dreamweaver includes Fireworks, Flash Professional, Contribute, and FlashPaper. See the Macromedia website for details if you're interested.
All brand names referenced herein are the property of their respective owners.
No comments:
Post a Comment