Or why did I do it
Why so elastic?
I have always been a fan of elastic design and after reading a couple of Dave Hyatt’s recent posts, I realised that not all computer screen are equal with some having 96 pixels per inch and others over 150 pixels per inch. So to give all visitors the same experience I have gone for a truely elastic design. The only exception is when the browser width is less than 600 pixels, I will be creating a seperate layout for handhelds, narrow browsers and special purposes in the near future.
How it was done
Why flash for images?
With an elastic design, scaling bitmap (jpg, gif and png) images are a challenge. You need to use large jpeg images ( in both dimensions and therefore file size) to get the desired results. The results from gif and png files are ugly. You really need to be able to scale vector images, which if there was wide support for the SVG format, it would be easy. Unfortunately SVG supprt is limited, you get some support in the latest versions of FF and Safari. However, flash support is pretty universal.
The major issues with flash are:
- the eolas patent and IE
- what happens when visitors do not have flash or the right version of flash installed
- flash’s bad reputation for creating large inaccessible splash pages
The image you see at the top of this page if you have flash 8 plugin (required for the stroke on text), native size is 1120px by 140px, scales from 100px to over 4000px without any degradation and is less that 4k in size.
The only problem I am having is with flash plugin for mac, it has major problems in dealing with layering an elemnt (flash or html) on a flash element. Even when the order is determined by the source code and z-index. The mac flash plugin, ignores it and randomly determines which element should be on top. At the moment I have not fixed the footer, if you are using a mac or *nix scroll down to the bottom of the page and then scroll up and down a few times and watch the bottom menu appear and disappear at random.
Why no sIFR?
The previous design relied on sIFR for all the headings, which caused a couple of problems. Because this is a blog, there was up to 15 headings on a page to render. This takes time, often too long. Because I was using relative units of measurement, there were some despcrencies with type size and alignment. Also as my font of choice is Garamond, if you were using OS X or XP with font smoothing turned on, your are now getting the same results, without the delay and the other problems without sIFR. If you have not got font smoothing turned on in XP do it and notice the different.