Challenge of fluidity

[harrymossman]

Our agency web sites are going from tables to css. The draft template allows resizing between 590 and 1200 pixels. There will be a standard header, footer and left navigation panel.

How do you deal with that much fluidity? Any good examples?

Our current pages look terrible stretched out to 1200 pixels. The usability completely disappears.

I'm thinking 4 columns: fixed, fluid, fluid, fixed.

Harry

 

[BabyJeffy]

We managed to achieve a useable balance on our own website at

http://www.coedit.co.uk

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[harrymossman]

Thanks for the quick reply Jeff! Attractive site.

But the content isn't fluid/liquid. Our content columns have to expand and contract based on the visitor's screen resolution.

 

[traingamer]

The usability completely disappears.

How so?


Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[harrymossman]

I exaggerate. The text gets spread so far that people can't scan it, which is how we read web pages.

 

[traingamer]

Then I guess the draft template needs to change, eh?

 

[harrymossman]

Then I guess the draft template needs to change, eh?

Oh, sure, no problem. Apparently you don't work at the lowest rung of a huge bureaucracy like I do.

Seriously . . . As I understand the issue, it is important for accessibility that the visitor not have to scroll horizontally even if they set a very low resolution (600X____). At the same time, some visitors have to set a high resolution in order to understand the big picture presented by the web page.

 

[monksnake]

The draft template allows resizing between 590 and 1200 pixels.

To have to allow for 600 x 800 resolution anymore now days is really not needed. I can give you actual data from an application we run and show you how little that screen resolution is used (this is approximately the last 12 months):

1024 x 1280 1
1024 x 742 5
1024 x 768 287081
1152 x 864 88352
1280 x 1024 51896
1280 x 600 4
1280 x 720 271
1280 x 768 2832
1280 x 800 3
1280 x 960 9755
1400 x 1050 4337
1600 x 1024 19
1600 x 1200 1227
1600 x 900 507
1680 x 1050 4
1792 x 1344 78
1856 x 1392 57
1920 x 1080 83
1920 x 1200 311
1920 x 1440 184
640 x 480 2
800 x 600 67
864 x 1152 1

As you can see, 1024 x 768 is a vast majority.
So what I'm saying is you may want to see if you can code your page to allow a minimum resolution of 1024 x 768, since anything smaller really isn't used much anymore.



<.

 

[harrymossman]

Thanks for the ammo. I'll see if I can get the powers to respond.

 

[traingamer]

Screen resolution is one thing. Window (browser) size is quite another. I almost never browse with maximized browser windows (but maybe I'm abnormal). W3's most recent browser stats show 14% still using 800 x 600 screen resolution.

In any case, you can design it to look best in 1024 x 768 - probably a good idea.

You can always adjust your margins and padding as percentages, so as the window grows, your text doesn't get too wide to scan with the eye. With css you can always maximize your text widths within your fluid struicture (or would that be cheating within your template)?

Look at some of Dan Cederholm's "Bulletproofing concepts".

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

Oh I forgot to mention that the application that I gave the stats for was coded to be best viewed at 800x600.

<.

 

[bam720]

Monksnake,
I appreciate you sharing that information, however I am skeptical (I am with most statistics), and also generally interested in your statistics. Would you mind answering some questions for me?
1) Where are these stats driven from, judging by the large numbers I can see you have a modest amount of traffic but...
2) Are these numbers Individual and unique, or are there repeats? If someone visits your page 10x a day, do they get counted 10 times?
3) Goes with #1 If this is a "corporate" site, Is this counting data coming from internal systems? For example everyone in my office has the same monitor's all set to 1280x1024 (except me I have a dual setup with one that way and then one rotated 1024x1280). Especially if there is an "intranet" portion to the site it will lead to a large skew.

I bring these up becuase my home resolution is 1280 x 800 (a widescreen laptop), which are growing increasingly popular, and yet have one of the smallest numbers in your chart (and I do run my browser maximized). Thanks for shedding some light.

 

[monksnake]

Ok bam, I'll answer your questions no problem.
1. Corporate site.
2. These numbers are not unique, they are grabbed each time a user logs into this application. If someone logs in 10 times a day they get put on there 10 times.
3. This entire application is on an intranet, the internal network for the corporation. However, there is no standard for the size of a screen resolution at the corporation, it's all based on what the computer user prefers.

I'm not going to doubt that the data is a little skewed and I will say that probably 99.99% of the computers used are desktop. But it also brings to fact that these people that work on computers all day long are used to 1024x768, and I know no one that would change their resolution to a lower setting (i.e. for their home computer).


<.

 

[bam720]

Thanks monksnake. I do agree most users would not go home to a lower resolution setting. Interesting statistics.

 

[monksnake]

<.

 

[harrymossman]

According to Nielsen (

http://www.useit.com/alertbox/screen_resolution.html)

Currently, about 60% of all monitors are set at 1024x768 pixels. (The detailed statistics and trends are on page 226 of my new book.) In comparison, only about 17% use 800x600 so it's obviously less important to aim at perfection for these small-display users. What's equally obvious, however, is that you can't simply ignore 17% of your customer segment by providing a frozen layout that requires more screen space than they have available.

While we can argue about statistics, the bottom line is that it makes sense for a general public web site such as mine to optimize for 1024x768 but not ignore 800x600 and other users.

 

[CliveC]

Harry,

See if something like this would help...

http://tubularity.com/boat

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://pace-fl-usa.com

 

[harrymossman]

See if something like this would help...

http://tubularity.com/boat

Floating on the river and partying. Yes! That would help my fluidity all right.

Oh, wait, you mean would the page design help. I'll take a look. Thanks!

 

[Foamcow]

Interesting stats there Monksnake, can I enquire as to where they came from?

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[onpnt]

Hey Monksnake, I'm very interested in the compilation of your numbers also. Can you post a bit of a description on how your app and process works. We need to set something up very similar and I'm not sure how to start


;-)

[sub]____________ signature below ______________
The worst mistake you'll ever make is to do something simply the way you know how while ignoring the way it should be done[/sub]