Elastic fluid design – some notes

After reading some positive comments on the sitepoint forum about this site, I started composing an update on the fluid elastic concept and were I am it with it. I realised it should be posted here as well as the forum, even if does duplicate some of my earlier comments.

Other than the design being a rushed proof of concept that I never got round to finishing. I am happy that is has made an impression on some people.

The current version does have problems with flash enabled *nix including OsX browsers. I have been assured by Brothercake and Andrew K that if I use an iframe shim it will fix the problem of the Adobe flash player rendering flash content behind HTML content when it should not. I just need to get off my backside and test it.

The other issues with the concept are:

  1. What happens if visitors do not have flash plugin installed or the right version of the flash plugin. They get provided with alternate content, in my case no images, sharp corners instead of curves and plain instead of decorated text. The website works, it scales, it is just bland but everything is accessible.
  2. What happens if visitors do not have javascript enabled, they get the bland website that does not automatically scale. Again all the content is available and accessible.
  3. What happens if the visitor has the flash block plugin installed in Firefox, currently they get click to play flash buttons and that does not work with my footer, because it is overlayed by links. There are a couple of alternatives, I could force people by some trick css work to play the flash movies just to view the site, however that is not me. I would rather provide the bland non flash version, this just requires a little more thought in structuring the site and some CSS work.
  4. If a visitor has change their default browser font size to larger than 16 pixels, the site is wider than their browser window. This is rare and it can be fixed by modifying the javascript.
  5. People who browse the web with large monitors and their browser windows maximized, end up with large text they claim can be difficult to read. However, any liquid sites they view have extremely diificult to read long line lengths and fixed width sites are lost in the whitespace. On the other hand, people using the higher density screens popular in laptops should appreciate the font size proportional to browser width. I know, I have spent the past six weeks using a 15” laptop with a 1600 by 1200 screen. Almost every I web sites I viewed, I needed to increase the font size a couple of times just to read the text, and on occassion this broke the layout. Given the choice of supporting the increasing number of people using higher density (125ppi and above) screens on laptops against people who use large low density (96ppi and below) screens badly to surf the web. I know who I should be supporting.

I need to spend some working on this site, particularly rewriting the javascript. At the same time I will produce a new design and hopefully add some new features. However, without a deadline to work to, I have no idea when it will be done.

One Response to “Elastic fluid design – some notes”

  1. Nathanael Says:

    Nice proof of concept! It’s great on my 1600x res screen cuz obviously the higher the resolution the more likely (unless you have massive 30″ plasma screens) that fonts will be physically smaller – so makes sense that the higher the viewing resolution the larger the font should be to compensate – well done!

Google