Page 1 of 1

Screen Resolution Aesthetics

Posted: Thu Oct 19, 2006 3:39 pm
by alex.barylski
I have just recently switched to 1024x768 as Ubuntu actually looks clearly and better with a smaller resolution than Windows XP.

Now I'm looking at some of my old projects, which don't use any kind of fluid design techniques (for the sake of KISS) and under a 1024 resolution, I have some major whitespace on the right hand side and the thumbnailed display is only 4 columns wide. Under 800x600 it looks just right as everything fits nicely, but not so in 1024...

I am considering just making the thumbnails larger in 1024 so the same 4 column setup (which is required) will fill in some of that extra space...but, now I need to use javascript or have the user explicity state their resolution...

I have also considered, using a edge gutter technique...so that only the gutters(left & right) are actually resized:

So, 1024x768 might have left and right hand gutters which are 300 px each whereas 800x600 might have gutters only 80px wide...

Personally I prefer the gutter approach, as it makes your layout consistent aesthetically through any screen res and gives a more fluid design, but who knows...

I'm curious how you all might deal with such a situation?

Cheers :)

Posted: Thu Oct 19, 2006 3:44 pm
by feyd
Hockey wrote:I'm curious how you all might deal with such a situation?
Build fluid pages. :)

Posted: Thu Oct 19, 2006 3:45 pm
by RobertGonzalez
Hey Hockey, this might be better in UI Design / Usability. I am going to move it over there.

Posted: Thu Oct 19, 2006 3:59 pm
by alex.barylski
Everah wrote:Hey Hockey, this might be better in UI Design / Usability. I am going to move it over there.
Ooops... :oops: :lol: Sorry dude....didn't even cross my mind :P

feyd: That is the intent, but sometimes, designs will not let you do this...

For instance, consider a listings portal...it's absolutely required to keep the number of thumbnail columns limited to 4...this is not allowed to change...it's a requirement which is concrete and exists for a reason.

The thumbnail size I selected when building worked fine and looked grand under 800x600 but doesn't scale well to 1024x768...as almost half the page where the thumbnails reside is left empty whitespace (looks ugly). The thumbnails are restricteed to a certain size as well, this, like the number of columns cannot be changed on a per user's resolution basis.

See my problem now?

I either, change the size of the thumbnail or the number of columns to fill in that whitespace gap...neither of which are allowed to change. The spacing between the thumbnails is also fixed in place and cannot change.

The only solution I see is the gutter'ed approach I mention above...

Cheers :)

Posted: Fri Oct 20, 2006 6:32 am
by Maugrim_The_Reaper
Try it and find out...:)

I am curious though - the vast majority of folk these days use 1024*768 resolutions. A significant number also use higher resolutions. If possible, a fluid design would be worth investigating in the future.

Posted: Sun Oct 29, 2006 8:10 pm
by n00b Saibot
you might make your designs centralized and fixed width (when need be) to look same @ 800x600 & 1024x768 resolutions. at 1024x768 you will have left & right padding/spacing to fill out the space.

Posted: Sun Oct 29, 2006 8:35 pm
by nickvd
n00b Saibot wrote:you might make your designs centralized and fixed width (when need be) to look same @ 800x600 & 1024x768 resolutions. at 1024x768 you will have left & right padding/spacing to fill out the space.
That's what I usually do, if the site is going to be fixed for 800, then I may as well try to split the difference in whitespace... (one wrapper div and a margin: 0 auto; always does the trick..)

Posted: Mon Oct 30, 2006 12:30 am
by matthijs
Hockey, did you see the links I posted here?

If I understand your situation well you have:
- 4 thumbs, fixed width (say 4x150px + 25px margin = 800px).
In that case you can choose to make your entire layout a centered, fixed-width one. That way someone with a larger screen res will have more whitespace (=not ugly! ;) ) on the sides.

Code: Select all

body {
text-align:centre; // centering trick for ie5 pt1
}
#container { 
width:800px;
margin:0 auto;
text-align:centre; // centering trick for ie5 pt2
}
Another option would be to have a fluid layout and float the thumbs. That way, with smaller screens you'll have 4 thumbs next to eachother, with larger screens 5 or maybe 6 thumbs. In my opinion, for galleries of thumbs this works very well.

Yet another option would be some javascript mastery (see links in my linked post) to adjust everything to the screen res someone is using. However, that'll not make things easier.

Posted: Mon Oct 30, 2006 7:10 pm
by alex.barylski
matthijs wrote: Another option would be to have a fluid layout and float the thumbs. That way, with smaller screens you'll have 4 thumbs next to eachother, with larger screens 5 or maybe 6 thumbs. In my opinion, for galleries of thumbs this works very well.
Thought about doing that...the problem is...there are a fixed number of records to be displayted at any given time...and the number of columns being fixed exists for business reasons...

Basically it's to ensure maximum exposure of banner ads :P

Posted: Tue Oct 31, 2006 12:54 am
by matthijs
Is it the number of records being fixed or the number of columns? (or both?) If everything is fixed then talking about something fluid makes no sense :wink:

You could also give the column with adds a fixed width and the column with thumbs a fluid layout.