website design vs. scrren resolution

webgal · 05-12-2008, 02:17 PM

I have such a problem and I am getting really aggravated with this. I build my website in 1140x868, but if somebody has a screen set smaller or larger, the website doesn't show up correctly. I have asked people how to cause the website to adjust according to the person's screen resolution, but nobody seems to know the answer. Can anybody help me?

Webgal

htmlbasictutor · 05-12-2008, 02:32 PM

If you want your design to adjust to various screen resolutions, then you need to design it using a flexible (liquid) design.

How low of a resolution you cater for will depend on what resolutions you readers use. You can find this info in your website stats.

Browser Display Statistics
http://www.w3schools.com/browsers/browsers_display.asp

Resolution Trends
http://www.upsdell.com/BrowserNews/stat_trends.htm#res

&Ingonyama · 05-12-2008, 04:22 PM

1000x800 design is standard these days. Don't worry about anything less than that.

Skinny · 05-12-2008, 04:28 PM

I would go with the 1000 x 800.

You can create a liquid design as well . . but this has bad spots as well because things can extend to far (so you need to include limits and check these higher resolutions).

Do a quick search for "liquid css layout".

In short it involves making a width like this:

#container{width:85%}

So, for every resolution it will be 85%. But at 800 x 600 things may now appear too squished and at a really large resolution everything is spread out a lot.

I would go with a fixed layout . . .but you should definitely investigate a fluid layout as well.

Skinny

**StarLab** · 05-12-2008, 05:11 PM

Quote:

Originally Posted by Skinny

I would go with the 1000 x 800.

Agreed. My reasoning is this: If a user is surfing on an 800x600 screen (or window) then they are well familiar with the horizontal scroll bar. They likely use it a lot these days.

As you can see HERE, 800x600 surfers continue to drop.

Designing for 1000 gives you extra space to work with too.

hrvoje461 · 05-13-2008, 01:50 AM

Today when a lot of people have really wide monitors fixed width design is much better than flexible design.
I have some sites that I have built with flexible design and they looks really ugly on wide screen monitors and back than when I built them they looked very nice on 1024 pixel wide screen. So go for 1000px wide and it will look fine on 1024 px monitors and it will be wide enough for wide screen monitors.

TravisT · 05-13-2008, 08:44 PM

1000 width is correct. Go with a fixed size at that width and people with larger resolutions will be fine. Those with smaller resolutions are in the vast minority.

Jobbertown · 05-27-2008, 11:45 PM

Go fixed. The liquid pages really do lose there appeal on the widescreen monitors.
Knowing that the majority of browsers are set at around 1000, (save for my parents, I swear their res has gotta be like 200x200, poor blind lady lol ) try doing a fixed width of 800 or so, and leave 100 pixels on each side for background image...that way the widescreeners get a nice treat too and the small res people get to see a little as well.

htmlbasictutor · 05-28-2008, 12:05 AM

If you know the visitors will be using newer browsers, you could try max-width in the CSS.

http://www.w3.org/TR/CSS21/visudet.h...pdef-max-width

http://www.w3schools.com/css/pr_dim_max-width.asp

Sean@WMS · 05-28-2008, 08:29 PM

I agree with all of the advise here, though I might just add this:

Screen widths and resolutions are definitely getting larger, but then there is that fear of scroll across on the one hand and too much white space outside the site design on the other hand.

One thing I try to keep in mind as a way to balance this a bit is to have a 3rd column ( typically 1st column is left navigation, 2nd column is main contents ) in which less crucial content can be placed -- such as news, ads, etc. That way if that column is not seen without scrolling accross, not much is lost and at the same time it helps to fill out the page for larger resolutions.

Another thing to consider here is the width of the main contents. After a certain point, maybe around 800 px, it gets difficult for the eye to "line wrap", or find the beginning of the next line of text from the end of the last line read. Keep in mind how one's eye moves accross a page. That is much more important than how well your page fills out space at large resolutions.

JPee · 05-28-2008, 08:36 PM

I'm create websites with liquid design, i think it's the best way to make it more comfortable for visitors.

Izzmo · 05-29-2008, 02:59 PM

Quote:

Originally Posted by webgal

I have such a problem and I am getting really aggravated with this. I build my website in 1140x868, but if somebody has a screen set smaller or larger, the website doesn't show up correctly. I have asked people how to cause the website to adjust according to the person's screen resolution, but nobody seems to know the answer. Can anybody help me?

Webgal

Are you using percentage width's? If so, that's your problem.

webcosmo · 05-30-2008, 10:34 AM

Quote:

Originally Posted by &Ingonyama

1000x800 design is standard these days. Don't worry about anything less than that.

This is the best option I think.

marcbarak · 05-30-2008, 05:16 PM

we have been designing to 850 wide now and of course the use of CSS will be very important

hanushh · 06-02-2008, 01:50 AM

Quote:

Originally Posted by hrvoje461

Today when a lot of people have really wide monitors fixed width design is much better than flexible design.
I have some sites that I have built with flexible design and they looks really ugly on wide screen monitors and back than when I built them they looked very nice on 1024 pixel wide screen. So go for 1000px wide and it will look fine on 1024 px monitors and it will be wide enough for wide screen monitors.

thts true. i also experieced tht