Elastic fluid design - some notes

After read­ing some pos­it­ive com­ments on the site­point forum about this site, I star­ted com­pos­ing an update on the fluid elastic concept and were I am it with it. I real­ised it should be pos­ted here as well as the forum, even if does duplic­ate some of my earlier comments.

Other than the design being a rushed proof of concept that I never got round to fin­ish­ing. I am happy that is has made an impres­sion on some people.

The cur­rent ver­sion does have prob­lems with flash enabled *nix includ­ing OsX browsers. I have been assured by Broth­er­cake and Andrew K that if I use an iframe shim it will fix the prob­lem of the Adobe flash player ren­der­ing flash con­tent behind HTML con­tent when it should not. I just need to get off my back­side and test it.

The other issues with the concept are:

  1. What hap­pens if vis­it­ors do not have flash plu­gin installed or the right ver­sion of the flash plu­gin. They get provided with altern­ate con­tent, in my case no images, sharp corners instead of curves and plain instead of dec­or­ated text. The web­site works, it scales, it is just bland but everything is accessible.
  2. What hap­pens if vis­it­ors do not have javas­cript enabled, they get the bland web­site that does not auto­mat­ic­ally scale. Again all the con­tent is avail­able and accessible.
  3. What hap­pens if the vis­itor has the flash block plu­gin installed in Fire­fox, cur­rently they get click to play flash but­tons and that does not work with my footer, because it is over­layed by links. There are a couple of altern­at­ives, I could force people by some trick css work to play the flash movies just to view the site, how­ever that is not me. I would rather provide the bland non flash ver­sion, this just requires a little more thought in struc­tur­ing the site and some CSS work.
  4. If a vis­itor has change their default browser font size to lar­ger than 16 pixels, the site is wider than their browser win­dow. This is rare and it can be fixed by modi­fy­ing the javascript.
  5. People who browse the web with large mon­it­ors and their browser win­dows max­im­ized, end up with large text they claim can be dif­fi­cult to read. How­ever, any liquid sites they view have extremely dii­fi­cult to read long line lengths and fixed width sites are lost in the whitespace. On the other hand, people using the higher dens­ity screens pop­u­lar in laptops should appre­ci­ate the font size pro­por­tional 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 occas­sion this broke the lay­out. Given the choice of sup­port­ing the increas­ing num­ber of people using higher dens­ity (125ppi and above) screens on laptops against people who use large low dens­ity (96ppi and below) screens badly to surf the web. I know who I should be supporting.

I need to spend some work­ing on this site, par­tic­u­larly rewrit­ing the javas­cript. At the same time I will pro­duce a new design and hope­fully add some new fea­tures. How­ever, without a dead­line 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 obvi­ously the higher the res­ol­u­tion the more likely (unless you have massive 30″ plasma screens) that fonts will be phys­ic­ally smal­ler — so makes sense that the higher the view­ing res­ol­u­tion the lar­ger the font should be to com­pensate — well done!

Google