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

2 Mar 2008

RIP, Ivan Rebroff

Ivan Rebroff

On February 27th, the great german singer Ivan Rebroff (real name: Hans Rolf Rippert) passed away at the age of 76. This is going to be a personal commemoration, because I´ve been touring with Ivan from 1981 - 1985 and played the bass balalaika on stages all over Europe

Not having met Ivan since then, I just heard of his demise in the news just like everyone else, and this certainly awakes some precious memories, all the more Ivan was someone who had a pretty formative and inspiring impact on my life, so to speak.

After graduating school and completing the subsequent compulsory community service, I was just about to take up some serious course of studies at university -- but then Ivan appeared out the blue and took me and three other young musicians (we, the "Balalaika Ensemble Druschba", were already quite well-known in Germany at that time...) on an incredibly interesting joyride for 4 years. I´m very thankful for this opportunity and will always cherish an experience which many young musicians regretfully don´t have.

Balalaika Ensemble Druschba

Working and performing with Ivan was nothing less that pure and unspoilt fun. When we met him, he was already a *big* star in this genre, but we soon got along with each other very well, also because his fame didn´t bar him from being a warm-hearted and down-to-earth fellow towards everyone -- we certainly didn´t form a close friendship with Ivan, as he was the typical lone wolf who´d rather go his own ways after concerts, but I´d say that we have been pretty good comrades on and off stage. Ivan´s friendly and unreserved nature made it very easy to us, as he always treated us as partners, demonstrated respect for what we contributed, and allowed us being in the spotlight as well.

Ivan even happened to be on good terms with the german tabloid press, all the more they (that would, regretfully, nowadays be quite uncommon...) used to behave very well by never breaking one particular taboo:

Like so many artists (and non artists), Ivan was gay. Not openly, as this would have ruined his aspiring career in the (in regards to homosexuality notably more prude...) sexties and seventies, but everyone how knew him, knew that -- however, I´m absolutely certain that he would indeed have felt much more comfortable by living an openly gay life rather than trying hard to obfuscate this (at least in this "trade" an open...) secret by telling nosey interviewers he considered himself an "confirmed bachelor", what´s in itself of course a a pretty broad hint and a common euphemism for gay men since the Victorian Era.

Gay folks, in particular famous singers who happened to be gay, never had an easy life in Germany those bygone decades. Thankfully the times have changed to some extent, as homosexual artists are nowadays at least tolerated and won´t necessarily risk their career, as long their chosen genre grants them a certain amount of latitude. Regretfully Ivan didn´t have this luck, as he happened to address an audience, which - at least in Germany - was an increasingly aging and rather conservative one, means they clearly wouldn´t have approved their hero to admit being homosexual. It must be said, that the "russian folklore" genre certainly makes it extra hard for gay singers to come out of their closet, as the western audience will require him to perfectly personify "russian" religious attitudes plus several pretty archaic clichés, and giving an impression of "masculinity" is expected from real and supposed russian singers not just since "Dr. Schiwago" was released.

Well, I don´t know if Ivan really had to struggle with this dilemma, but unlike other famous gay artists who really despaired of having to hide their disposition, Ivan apparently managed to come to terms with it by just living life the way he wanted and evade to his adopted country, the greek island Skopelos, whenever possible.

Ivan just wasn´t an arrogant or bigheaded personality, however he was equipped with an inimitable sense of (not always good natured :-) humor which had a strong notion of making fun of himself and the "status" he achieved -- that said, he never took himself seriously, but he had the highest demands on his art and on doing a first-class performance.

Ivan was the archetypal "if I´ll ever have to die, please let it happen on stage" artist; singing and acting was what he dearly loved and definitely *knew* to get across to a demanding audience which expected to get entertained with "class and style" and which always got just that.

Dear Ivan, may you rest in peace -- and I´m absolutely sure you´ll bring some fun to heaven, same as you did on earth :-)

15 Jan 2008

Adobe Community Expert: status extended :-)

yeah I know, I have been silent for a while, because there´s quite some work to do -- well, that sounds like the typical excuse, but it´s true nonetheless !

However, the great news is, that my "Community Expert" status has just been extended by Adobe, means I´m entitled to brag about this also in 2008 ! Thanks a lot !! However, I did a *lot* of community work in 2007, and I feel this reappointment is an adequate reward :-)

Well, to me it seems that it´s in particular this status extension which, in comparison to the initial nomination, has some real significance -- because the criteria for getting renominated is based on how active you have really been in the last year, and trust me :: your past activity (and its relevance) is being "scanned" by the Adobe staff, and it´s you who has to supply evidence for being worthy to get reappointed.

I´m of course very happy about this ! :-)