Design for what screen size?

[daniel.grant]

Hey folks,

This morning I have been pondering what is the right width to design sites.

I've always gone for 800x600 and never thought much of it but today I was doing some research and I noticed that every site which I had marked as effective was designed at the larger 950/975px size.

This may just be because I work on a 23" widescreen but I'm not sure.

What do you think?!!!

[flip-flop]

Hi, for me the right resolution at this time is a width of 1024px -> site width = ~ 990px

[360fusion]

I have always set site widths at 770px to accommodate users with an 800x600 resolution.

Now only about 4% of people who view my websites use a screen resolution of 800x600. i have now started designing sites at 950px wide to fit on any screen larger than 1024 x 768 and leave a small border.

Ben

[daniel.grant]

Thanks for your comments. Interesting stuff - I might just have to change.

However...

ow only about 4% of people who view my websites use a screen resolution of 800x600

That doesn't mean that those who are using 1024 x 768 screens have their windows maximised...
So I think 950px is the size to go for.

[update]

Have a look over here: http://www.w3schools.com/browsers/browsers_display.asp
You're on the right track

[daniel.grant]

14%! Wow, that's a lot of horizontal scroll bars!

I like the idea behind this site.
http://www.yesinsurance.co.uk/

[pico]

14%! Wow, that's a lot of horizontal scroll bars!

yes - but is one Year ago - take how it decresed in the last Years

[marcus@localhorst]

I like the idea behind this site.
http://www.yesinsurance.co.uk/

I think / I'm sure, this is made by js, calculating the layout onresize.
I use this technique in a current project and it's easy to do with mootools

[jsw_nz]

Yes - 1024 is an emerging standard
- but that 14% is an issue
- Jacob Neilsen adds to the mix
- where the fact that in certain settings personal income is a factor
- so if your audience is a wee bit 'upscale' -
- they are likely to own more capable - higher resolution displays

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

[update]

where the fact that in certain settings personal income is a factor

or their focus thrown upon - did some work recently where the majority of the audience is rather involved in craftsmanship and there are lots of old browser in the streets still - with "downhancing resolutioned" screens and IE5.2MAC or 5.5WIN... buying newest (hand) tools but no investment in computer hardware...

[Jensensen]

I like the idea behind this site.
http://www.yesinsurance.co.uk/

I think / I'm sure, this is made by js, calculating the layout onresize.
I use this technique in a current project and it's easy to do with mootools

I think it's just an example for a liquid layout --> body#wide #content {width: auto;}
When displayed on a smaller screen the float boxes are sliding downward. The page is the same with no JS enabled!

Using the Web Developer Tools for FF or IE you can resize the page layout in a current e.g. full screen window to watch the results when a page is viewed, or how the page works on smaller screens.

[jsw_nz]

@claus

good point - definitely depends on multiple factors -
'for every rule of thumb' there is
are exceptions -

[marcus@localhorst]

I like the idea behind this site.
http://www.yesinsurance.co.uk/

I think / I'm sure, this is made by js, calculating the layout onresize.
I use this technique in a current project and it's easy to do with mootools

I think it's just an example for a liquid layout --> body#wide #content {width: auto;}
When displayed on a smaller screen the float boxes are sliding downward. The page is the same with no JS enabled!

Using the Web Developer Tools for FF or IE you can resize the page layout in a current e.g. full screen window to watch the results when a page is viewed, or how the page works on smaller screens.

hehe check with firebug and you will see - it's javascript ^^
>> browser_width.js

Code: Select all

attachEventListener(window, "resize", checkBrowserWidth, false);
function checkBrowserWidth() {
	var theWidth = getBrowserWidth();
	var bodyTag = document.getElementsByTagName("body")[0];
	if (theWidth > 970) {
		bodyTag.setAttribute("id","wide");
	}
	else {
		bodyTag.setAttribute("id","narrow");
	}
	return true;

}

but I do(n't) want klugscheissen
best marcus

[Jensensen]

hi marcus,

but I do(n't) want klugscheissen

usually i'm the master of 'korinthenkack'...
to know in the end what was the truth....

so, thank you!

well, guess you were right as well, but seems they - to be on the safe side - have built it in both solutions [JS and CSS]:
A) for users with JS enabled
B) those with not

let's have a try and see....
[to learn more {as it was working fine in safari with js --> switched off}]

never mind, anyway this could be a way to built js based liquid layouts... for those who usually HAVE js enabled... --> so, let's dive in....