Guess what I’ve been doing lately.

That’s right, it’s the new theme!

I think the title says it all really. I’ve completed the first phase of the new look for theTechnophile, I say the first phase because when is a website ever really finished. It is now very loosely based on the Wordpress default, hence some of the element names remain the same, but I’ve changed the whole structure to what I believe is known as a liquid layout.

The basic idea was to be able to maintain the look and feel of the site whilst using all of the available screen real estate. This is accomplished through the use of positioning in the Cascading Style Sheets (CSS). My two main element blocks, the header and mainbody, are positioned relative to each other. The column elements, sidebar and content, within the mainbody block maintain an absolute position from their respective sides. It took a bit of getting my head round since my CSS turned out to be quite rusty and I found HTML Dog to be a useful reference.

Another key feature of liquid layout is that it copes much more smoothly with changes in the default browser font size, thus improving accessibility. Finally, it allows you to put the important content elements much nearer the top of the HyperText Markup Language (HTML) documents than in conventional designs. This way the content appears at the top of your screen if CSS are turned off or not supported.

Why does Internet Explorer have to be different?

I’d forgotten just what a pain Internet Explorer (IE) can be. You see I use Mozilla Firefox, Safari and occasionally Opera browsers and even when I kept all of these happy IE had to object. I found this fantastic new graphics application called Inkscape and used it to generate the logo for the site as a semi-transparent Portable Network Graphics (PNG) file. Seriously, if you like playing with graphics you should give Inkscape a go, especially since it’s open source. The other browsers are fine with this, but IE was not interested. The positioning worked fine on the others, but IE? The text size rendering looked great, but on IE… yes, you guessed it! Still I think I managed to find a solution that keeps all these browsers relatively content with a little help from Position is Everything, identifying a number of interesting bugs.

Still I did have to concede that the lack of transparent PNG support on IE was a solid boundary. So, a little PHP script to introduce extra CSS code allowed me to take advantage of their cascading nature. The result? A more IE friendly, if not so pretty, presentation without transparent graphics. If your using IE to read this, I’m really sorry but it looks genuinely better in other browsers, try it.

What’s next?

First I need to let the new look settle in for a while. Then I would like to introduce a bit of script to allow the user to choose which side they want the menu sidebar. This shouldn’t be too difficult due to the layout technique being used, but then again it could be a case of famous last words.

I may try writing an article to spell out what I did in much more detail. I’d like to be sure I understand it before that though! I have another website which needs a lot more work doing on it and which could be the appropriate place for the above article once completed. This is going to task my Java skills… gulp!