I recently finished the first major piece of the EduTech website redesign I mentioned earlier: creating a new page layout. You can take a look at a prototype of the new design if you’re interested. It’s based heavily off a layout demoed by Douglas Bowman at the Web Design World conference in Seattle last month. It’s flexibility is pure genius, and I’m very happy with the result.
Here are some of the technical details:
- The HTML validates to the XHTML 1.0 Strict specification.
- Presentation is done using pure CSS without any layout tables. This brings a great deal of flexibility, letting me rearrange and even hide sections of the page just by applying a single CSS class.
- The styled page is viewable back to Internet Explorer 5 on both Macintosh and Windows. Older browsers will simply get the unstyled content.
- Pages meet Section 508 and WAI Priority 2 website accessibility guidelines.
So, with the layout done, I’m now working on phase II, which I believe will be a lot harder than phase I. This part involves how each page and, in turn, the entire site, is managed. We’re currently using Macromedia Dreamweaver’s built-in template system, which was “good enough” several years ago but is now head bangingly limiting. My biggest problem with it is that to update the page layout, every page must be downloaded to my computer, updated, then uploaded back to the web server. It not only takes a long time, but it’s prone to a lot of errors that I won’t bore you with.
My current strategy for the redesigned site is to use our installation of Movable Type to simplify site maintenance. Others have been using the blogging engine as a simple content management system for years, but it’s a new concept for me. Here’s a high-level idea of how it should/will work:
- Separate blogs are created in Movable Type for each major category of content, including one for “static content” that won’t change very often. Within the static content blog, categories for each major section are made (services, support
- A common page template is maintained outside of Movable Type. Any changes made to it will automatically be reflected on every page.
- Each blog is configured to generate PHP files, pulling in the global page layout through the PHP include function as described in a recent Movablog article.
- Each page on the site is created as a separate entry in MT and published as a PHP file.
- Pass page-level variables from the entry to the PHP template using Brad Choate’s Key Values plugin. This lets me easily change what’s displayed on any given page.
Looking at that list, the setup isn’t exactly simple, but the extra work for me on the front end should hopefully pay off over time. The only real concern I have is the URL structure of the new site. Why do I care about that? I want the address for each page to be as clean and descriptive as possible so that if you look at the address www.edutech.nodak.edu/support/policies/privacy/, you have a pretty good idea of what you’ll find there. To make a URL like that one, however, I need to remove the .php extension off the end of each file. There are several ways of doing that, but I haven’t found one that doesn’t also screw up with other files on our site. I’m confident I’ll be able to figure something out…