28 Dec 2008

Modernizing a web page (1): I have my reasons !

These days I finally installed the new Adobe Dreamweaver CS4 - version (which does take some time to get accustomed to, but which has *lots* of brilliant features under the hood), and as I happened to have some time on my hands to check things out, I decided to use Dreamweaver CS4 to re-engineer the index page of a customer´s website.

The original index page was created in 2001 and has - apart from modifying some contents every now and then - not been changed radically since then. The overall design and the underlying "technics" essentially stayed the same throughout the past 7 years, and here´s how it looks:

Although the design always seemed somewhat "fair enough" at least to me, it should be mentioned that this original page has - under the hood - been realized using some "archaic" development technics which were well acceptable in 2001.

But hey, we´re at the end of 2008 now, and I just thought it´s about time to replace the previous (heavily nested) table-based layout...

table outline, done with the Firefox Web Developer Toolbar

...with a pure CSS based approach -- and while I´m at it, throw in some AJAX based features like a "Tabbed Panel" (for the central "image switcher") and an "Accordion Panel" (for the links list to the right) to provide a compact page at least to those visitors who have Javascript enabled in their browsers, while having it degrade nicefully for users with disabled Javascript respectively search engine spiders. Here´s how the modernized page looks right now:

Well, you might say "it doesn´t look that different from the old version, just less cluttered" -- but trust me, this has exactly been the purpose of this refurbishment. My customer´s website has become pretty popular over the years, and I considered it mandatory to rather retain the site´s established recognition value instead of throwing out the baby with bath water just because "I could".

The new page doesn´t have any tables, it basically consists of a few "containers":
  • a centered container on top to hold the company logo, the h1 content and some extra text
  • a left sidebar which contains a textual summary of what the company does
  • a central container which holds the "first priority" property offers incl. links to the corresponding detail pages
  • a right sidebar which holds a variety of links to several website sections

The CSS-only page breakdown looks like this...

CSS positioned elements outline, done with the Firefox Web Developer Toolbar

... and I´m sure you´ll agree that this alone represents a substantial progress in comparison with the previous table based version for a variety of reasons: no more spaghetti code, a notably leaner page without bloated and redundant HTML markup, much easier to administrate because the CSS rules have been sourced out to an external CSS file.

The makeover process as such has been a pleasant and comparatively speedy experience, and I cannot praise Dreamweaver CS4 enough for not only providing several excellent and well-crafted CSS only page layout templates (done by the fellow Adobe Community Expert Stephanie Sullivan) to choose from, but also for improving the overall workflow when it comes to realizing CSS based web page designs in particular.

No comments: