Any Opinions on which resolution to design for??

[ericjw]

Hi,

I am considering a re-design with one of my sites.
I am going back and forth between 800 X600 (current format) ,or to scale up to 1024 X 768. When I look at mock-ups of 1024 X 768, they are massive. They look good, but they are huge. When a user opens it up in their browser, they have to scroll to the right.

What if I just chop off the 3 inches and make the content slightly more condensed.

I guess that I confused, just because something is designed for 800 X 600 does the header have to be a fixed width, or is it just a matter of it fitting in the browser window and opening in the browswer properly with the page centered appropriately?

My current site is designed for 800 X 600. I have
no issues whatsoever, except that my content is growing and the smaller format makes impossible to do what I want.

Are fluid layouts the way to go in CSS? Any drawbacks?

There is always a hitch in this crazy web world. For every action, there's always an equal or opposite reaction... can't kick that universal law can we.

Thanks for the feedback!

[Dcrux]

Since it seems to be taboo to ask actual site users, have you tried a liquid or jello layout?

[DaveSawers]

Make it fluid so it adjusts to the browser window size that is displayed.

[ktsparkman]

Find out how your visitors are viewing your current site. If 90% of your vistors are viewing your site with resolution set at 1024 or higher that might give you a better answer as to how you should be designing your site. Your web traffic monitoring service or software should give you this information.

[kgun]

If you have time, use different stylesheets. Example:

Zoom Layout

• FireFox 2.0.0.1.[list:bb70c71d8c]
• Default view.
• Switch to zoom layout with: View + Page Style + zoom layout.

[*] Opera 9.1.

• Default view.
• Switch to zoom layout with: View + Style + zoom layout.

[/list:u:bb70c71d8c]
Source:
Rachel Andrew and Dan Shafer (August 2006): "HTML Utopia: Designing Without Tables Using CSS", 2nd Edition.

Chapter 10.

You can make different style sheets for text browsers, low vision users, mobile devices, screen resolution, screen readers etc in the same way.

P.S.
In Opera, you can also try the other options like:

• Accessibility layout.
• Emulate text browser.
• High contrast (Black/White).
• High contrast (White/Black).
• Etc. Note you can mix more than one style like:
  Emulate text browser + High contrast (White/Black).

that is not dependent on a specific style sheet.

[dburdon]

Ericjw,

most of the sites I look after have 50% plus visitors in 1024 X 768 and more visitors in denser resolutions. 800X600 is generally in the 5-7% range.

If the pages look big, that's the way people have set up their screens.

[RegDCP]

As a user I prefer to see a fluid design. (Did I just break the taboo dcrux?)
If you like a bit of whitespace around your designs you can set the display to 90 or 95%.

Ericjw, If you are looking at your 1024 design in a 1024 resolution display, you should not have any sideways scrolling.


In a 4000 user sampling these are the results.
1024x768 42.31%
1280x1024 26.99%
1680x1050 8.80%
800x600 8.27%
1152x864 3.53%
Other 3.30%
1440x900 2.54%
1920x1200 1.73%
1600x1200 1.37%
1400x1050 0.81%
640x480 0.33%
2048x1536 0.03%

Reg

[lpoulsen]

Originally Posted by dburdon

Ericjw,

most of the sites I look after have 50% plus visitors in 1024 X 768 and more visitors in denser resolutions. 800X600 is generally in the 5-7% range.

If the pages look big, that's the way people have set up their screens.

I usually use a 1920 x 1200 screen, but I usually have my browser window set to about 700 wide. I always have more than one window on my screen (usually 4-6 from different applications).

Make the screen layout flexible and fluid. Don't try to outsmart the visitor. Just makes me mad when you try.

[Kevin Riley]

Same here. Although my screen resolution is 1024, I always have my browser windows smaller to allow easy access to other windows. I also don't want to be scanning back and forth across a wide website.

IMO, keep it smaller and more usable.

[rikeedee]

While it’s true the forward step in technology is giving us greater access to bigger screens and greater graphics capabilities - something else is happening, almost sneaking up behind us. Bigger screens on more and more desks, but my recent purchase of a UMPC device made me all too well aware of the need to retain the rule of 800x600 or at least liquid sizing.
So many sites render just fine on my desk top at 1280x768 but I’m having to scroll right-ways on a lot of these sites on my UMPC. And I’m finding myself browsing more on the UMPC than at my desk.
While new technologies stroll away with bigger and better, the smaller and more mobile are becoming easier to produce and there by more prolific.

Smaller screens are not going away - they’re being rejuvenated.

[ericjw]

Thanks all for the great insight. This is definitely a tug of war in the design and usability worlds.
I have learned that because of our header type that we cannot utilize fluid designs. We have a "trademarkish" header that we use that has a graphic, and supposedly due to that fact, we are stuck in ice.

Is there a way to upload files onto threads for others to see. I have a JPEG. Still new, sorry. ;)

[RegDCP]

Originally Posted by ericjw

Is there a way to upload files onto threads for others to see. I have a JPEG. Still new, sorry. ;)

Load the jpeg to your webserver and use the "Img" tab at top of the post composition window to link to it.
It will show in the post.

Reg

[webreporter]

No sense in going sci-fi with this... Make sure that your tables are set for percentages rather than hard fixed sizes. When you view the pages in 800, it should be cramped, but not horizontally scrollable. When you view in 1280 it should expand accordingly, but not look too spacious.

One rule is to center your overall content to 800 (778 to be exact), then you don't have to worry about it at all... no matter what resolution someone is viewing from.

This is a great consideration you are making with resolution. The Reason: Some people are viewing from home on their huge screens, while others at work on their lunch break are viewing from the crappy 800's their bosses make them view from.

Keep in mind that 90% are using IE 6.0 or 7.0 .

[kgun]

Originally Posted by webreporter

Keep in mind that 90% are using IE 6.0 or 7.0 .

Sadly enough even if the percentage is a little lesser.

As it stands in February 2007, you should advice disabled people to use the latest version of Opera. Then their surfing experience should turn night to day.

Members that have read my earlier posts will have noted that I have not favoured Opera before. But using the latest version of the three major browsers daily, I come to this conclusion:

There is only one browser that takes disabled persons seriously in february 2007: Opera.

In addition it is as far as I know the most secure browser and it is (one of) the best on mobile devices.

I think webmasters are the main students of this forum. As a webmaster, you have to know this (at least if you design for Opera) difference:

• View + Style + Author mode.
• View + Style + User mode.

Author mode uses your style sheets, while user mode uses the browser's styling. There may be a huge difference.

[iwebgeek]

Fluid layout would be the way to go. Use DIVs, XHTML and CSS. Make the div widths 100% and leave the heights untouched, unless you absolutely have to have a fixed height on some part of it.

Use percentages to set font sizes. The usual browser default size is 16px, so base your percentage +/- on that.

[SwordOfBath]

Flexible Definatly, but consider this...
I am about to rebuild all my sites(113), going from frames to css and xhml.
I intend to use Microsoft 'Expression'.
Yet I have also realised that over the next few years,
people will be viewing websites on mobile phones.
I decided to build with Mobile Audiences in mind.
Question... How much is readable at that size?
That I believe is where tomorrows surfers will be!