The fluid elastic reboot

Or why did I do it

Why so elastic?

I have always been a fan of elastic design and after read­ing a couple of Dave Hyatt’s recent posts, I real­ised that not all com­puter screen are equal with some hav­ing 96 pixels per inch and oth­ers over 150 pixels per inch. So to give all vis­it­ors the same exper­i­ence I have gone for a truely elastic design. The only excep­tion is when the browser width is less than 600 pixels, I will be cre­at­ing a seper­ate lay­out for hand­helds, nar­row browsers and spe­cial pur­poses in the near future.

How it was done

That was fairly easy, all the unit meas­ure­ments in the stylesheets are in in ems, includ­ing the dimen­sions of the flash ele­ments. There is a little bit of javas­cript (fontsize4.js) that reads the browser win­dow width in pixels and the con­verts that to a per­cent­age and feeds it to document.getElementsByTagName(“body”).item(0).style.fontSize (.) Being lazy, early in my cal­cu­la­tions I decided the max­imum win­dow width was going to be 60ems, my opion the smal­lest font size in 10px and nobody should browse the web on a com­puter with a browser win­dow under 700 pixels and expect to see a site without hor­iz­iontal scrolling. I had this fancy for­mula of %font-size = (browse width) * min font size 62.5% / min width 700 and the num­ber was close to 10% so I made it %font-size = 10% browser width and set min­imum width to 600px. So the default sizes at browser width of 625px are a font size of 10px at 750px the font size is 12px, at 1000px it is 16px and at 1500px 24px.

The tech­nical prob­lem at the moment is for those people who have increased the size of the default font size in their browser, if your default font size is 24px, then this web page is 150% of your browser win­dow width, at 32px it is 200%. It looks like I can resolve that with a little bit of javas­cript. The solu­tion that is avail­able, ignores user pref­er­ences, I would prefer to take user pref­er­ences into account.

Why flash for images?

With an elastic design, scal­ing bit­map (jpg, gif and png) images are a chal­lenge. You need to use large jpeg images ( in both dimen­sions and there­fore file size) to get the desired res­ults. The res­ults from gif and png files are ugly. You really need to be able to scale vec­tor images, which if there was wide sup­port for the SVG format, it would be easy. Unfor­tu­nately SVG sup­prt is lim­ited, you get some sup­port in the latest ver­sions of FF and Safari. How­ever, flash sup­port is pretty universal.

The major issues with flash are:

• the eolas pat­ent and IE
• what hap­pens when vis­it­ors do not have flash or the right ver­sion of flash installed
• flash’s bad repu­ta­tion for cre­at­ing large inac­cess­ible splash pages

While I can’t resolve flash’s bad repu­ta­tion, the first two are eas­ily resolved using Geoff Stearn’s swfob­ject which is a little piece javas­cript that replaces a des­ig­nated block ele­ment (prefer­ably a div) with nom­in­ated flash object. And while you include the pixel dimen­sions in the inform­a­tion you parse to the script inside the HTML. You con­trol the size of the flash through the CSS. If you turn off your javas­cript you will see the non-flash version.

Some people might argue that using javas­cript to insert flash into a webpage is wrong, because flash can do everything that javas­cript does and more people have a flash plu­gin than have javas­cript turned on. I dis­agree, using javas­cript you can eas­ily provided all­tern­at­ive con­tent for browser agents that do not have javas­cript or flash enabled.

The image you see at the top of this page if you have flash 8 plu­gin (required for the stroke on text), nat­ive size is 1120px by 140px, scales from 100px to over 4000px without any degrad­a­tion and is less that 4k in size.

The only prob­lem I am hav­ing is with flash plu­gin for mac, it has major prob­lems in deal­ing with lay­er­ing an elemnt (flash or html) on a flash ele­ment. Even when the order is determ­ined by the source code and z-index. The mac flash plu­gin, ignores it and ran­domly determ­ines which ele­ment 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 bot­tom of the page and then scroll up and down a few times and watch the bot­tom menu appear and dis­ap­pear at random.

Why no sIFR?

The pre­vi­ous design relied on sIFR for all the head­ings, which caused a couple of prob­lems. Because this is a blog, there was up to 15 head­ings on a page to render. This takes time, often too long. Because I was using rel­at­ive units of meas­ure­ment, there were some des­p­cren­cies with type size and align­ment. Also as my font of choice is Gara­mond, if you were using OS X or XP with font smooth­ing turned on, your are now get­ting the same res­ults, without the delay and the other prob­lems without sIFR. If you have not got font smooth­ing turned on in XP do it and notice the different.

tagged elastic design fluid elastic design elastic

This entry was posted on Monday, May 8th, 2006 at 3:03 pm and is filed under css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.