Screen Resolution Aesthetics

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Screen Resolution Aesthetics

Post 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 :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Hockey wrote:I'm curious how you all might deal with such a situation?
Build fluid pages. :)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Hey Hockey, this might be better in UI Design / Usability. I am going to move it over there.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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..)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply