29 Dec 2008

Modernizing a web page (2): the CSS pitfalls

Once you completely chuck out HTML tables (at least for layout purposes) and go for a pure CSS approach, you have to account for the problem that not every browser (Internet Explorer, Firefox, Google Chrome, Opera etc etc) respectively not all browser version do render the page the same -- and in particular the Internet Explorer versions 5.x and 6 are likely to get you in lots of trouble due to a variety of infamous and significant CSS rendering bugs.

Wanna see an example of how badly the CSS rendering differences can affect a page ?

1. Here´s how the standards compliant browsers Firefox 3, Opera 9, Google Chrome and Internet Explorer 7 render the page:

2. and here you can see how the Internet Explorer versions 5.5 and 6 manage to bump down the central "mainContent" container by approx. 4oo pixel:

Fortunately enough there´s the possibility to make use of the so-called Internet Explorer Conditional Comments which tell this browser to conditionally include a different stylesheet file and/or override the existing values of defined CSS properties with values which are getting interpreted by IE only. In this case I used a Conditional Comment which...
  • is meant to affect the IE versions equal to / lower than 6 ([if lte IE 6])
  • will apply a negative value of -400 px to the CSS property "margin-top" for the #mainContent - ID selector
As IE 5.5 renders stuff differently from IE 6, it´s needless to mention that I - strictly speaking - would have had to apply a slightly different "margin-top" value for IE 5.5 -- but then again the display differences have not been that significant, and the IE 5.x versions are on their way out, while the version 6 is still installed on many PCs.

Care for some browser usage stats ? Although it´s debatable if the browser statistics published on sites such as W3schools.com are really 100% representative, they certainly do provide some helpful clues:

IE 6:
  • in November 2002: 53,5 %
  • in August 2008: 24,5 %

IE 5:
  • in November 2002: 29,9 %
  • in August 2008: 0,1 %

With great power comes great responsibility. The more CSS rules a web developer/designer throws into a page, the more he/she is actually required to test the page in a variety of commonly used browsers and (if possible) browser versions in order to ensure that the page layout will at least, err... *work* in all relevant browsers.

Did you note that I didn´t say "look exactly the same" ? Well, this simply isn´t possible, and all you can do is to make sure that the CSS rendering differences are as insignificant as possible.

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.

8 Dec 2008

Something jolly for a change :-)

Oops, I note I haven´t been blogging for quite a while ! Well, if you want, you may blame it on my laziness or the feeling that I didn´t have anything worthwile to say ;-)

However, here´s a logo I just knocked together with Adobe Photoshop CS3:

This logo (or a possible variant, who knows ;-) is supposed to introduce a new series of web development showcases on my website www.guenter-schenk.com, however I thought I´d share it with you right now, cause I think it´s indeed a funny one !

BTW: I´m really no Adobe Photoshop expert and use it pretty rarely -- but I have to admit it´s a cooool thing :-)

Disclaimer: the clown is not my creation, I just happened to find him on the web and gave him something homemade to juggle with