14 replies to this topic

[scouseflip]

Following a recent dilema with the lack of support for min-width properties in IE 6 (and below), I'd be interested to know if others had a set screen resolution in mind when designing new pages and if so, what and why?

Thanks

[Randy]

800 x 600.

Because even though you'll see more and more people using higher resolutions if you capture this browser data in your analytics, numerous real world surveys and testing have proven to me that very few people surf with their browser maximized on the screen.

So even though my stats software may tell me I get a lot of visits from people with 1024x768 or 1280x1024 resolutions I know their browser windows aren't really that size. But 800x600 is pretty much always safe.

[BBCoach]

Ditto with what Randy said. 800x600 especially for targeting an older audience.

[gsimerlink]

Does anybody know where to find a study about screen resolutions or what percentage of visitors do not open their browser to max?

We had a massive "critique the website" meeting last week with marketing and c-level people wanting to change things to their personal preference. Our site is currently 800x600 which I feel is correct for several reasons. They all argued and when I showed them some analytic data, most of our users were 1024x768 or above. They all told me we were going to move to 1024x768. This was just one of many issues where logic and data were over ruled by anecdotal evidence.

[Randy]

Tell 'em to conduct a real study/survey themselves before making such a fatal mistake. It'll only cost 'em 50 thou or so to get some decent data that's specifc to your site and your target market.

No I don't know of any published studies. If they're out there I've never heard of 'em. But it's something I've been recording in my own user survey's for many years. Without fail every time we set the Res at 1024x768 or higher users will minimize the browser to be only a portion of their screen. Even if we set up the test computers to start out with the browser maximized!

We do tell the test subjects to please make the desktop and browser how they're used to using it, or however it's most comfortable for them. Which may affect the data, but in a good way IMHO. It's the only way to see what people might be doing at their own computers.

Or better yet --and yes I've used this one myself-- find some way to put it off for the moment. Then spend the next couple of weeks sneaking around the office to see how many of those proponents don't actually have their own browsers maximized. Hitting 'em with that real world data usually makes a few eyebrows raise.

Just realize you could be making some enemies with such an approach when you call them on it.

[BBCoach]

Yeah I've got a marketing guy that wants to increase the screen resolution to 1024x768. Most marketing folks when told that it would alienate the middle aged customers stop and rethink who their customer base is. Tell 'em to ask their parents what resolution they use.

[SERPico]

Here are some statistics you may find interesting.

I think a width of 800 - 1000 pixels wide is wide enough to place your design elements/content, if you're going wider then that it would be nice if you know how to code liquid designs so that everything resizes automatically.

So basically i design for 1024x768 and don't use up all the width.

800×600 screen resolution users are rapidly declining as you can see and there is more information to be found supporting that.

I see really no harm in designing above 800x600 personally, i can even say it gives you more flexibility and it makes no difference at all up to the point you don't exceed the 1000 pixels in width.


If your customer base exists out of elderly people using computer screens dated back 10 years ago and for the most part are using the 800x600 and find it easier to view websites by decreasing the size of their browser window (Kind of counter productive when doing so...) then it would be a better choice.

But other then that why bother to keep designing for such low resolution?

eBay doesn't care.
Amazon doesn't care.
MySpace doesn't care.
Youtube doesn't care.
FaceBook doesn't care.
MSN doesn't care.
AOL doesn't care.
CNN doesn't care.

The people you're designing your 800x600 designs for are used anyway to scroll horizontally as the most popular and most used websites are not designed for 800x600

And if you have a 1024x768 resolution why would someone decrease their browser window?
Certainly not to give themselves a better user experience.

So in my opinion if you want to design for 1024x768 there is really no problem at all.


2 cents.

[mcanerin]

Here is something else to think about - printing.

If your site is designed in such a way that someone who prints it won't get the information they want, it's not a good thing. In practice, this is 648 pixels wide.

So what I do is make sure that my design does not use critical information in a fixed width of more than about 600 pixels or so. I run into this especially when creating Flash objects (I set my Flash to a max of 600x400 - which fits completely on one 8 1/2 x 11 or A4 page, but also scales properly to a screen).

Of course, you can bypass this limitation simply by creating a "print" version of your site, but not everyone uses this function. In general, I try to design sites that both print and view well, which means fluid designs as much as possible, and avoiding fixed width pictures and tables of more than 648 pixels. Which neatly works for 800x600 designs.

Ask your marketing buddies if they think people may want to print parts of your site for reference. If so, then you have some strong ammo for 800x600 design in terms that a marketing guy can understand.

If they still insist on 1024x768, then use the print issue to lobby for a fluid design that works at both resolutions, rather than fixing at one. I think that's a good compromise, myself.

Ian

[piskie]

The other way to accomodate print is to have an additional CSS File for printing. You can do all sorts of things to get a 1024 width page to fit into a printable width and even set sensible page breaks.

[1dmf]

For general purpose websites I use 800x600 , but for internal systems, and members area where i can control the screen resolution i use 1024 x 768.

So it depends on where the site is being deployed for me.

[scouseflip]

And if you have a 1024x768 resolution why would someone decrease their browser window?

To be honest I do often browse in a reduced window - often because I have other things open that I want to refer to while I am looking at the page...

But I guess that the point for me would be that as long as users have the capabillity of viewing in a larger res, then it doesn't really matter if they normally browse in 800x600 or below... at the click of a button they can always expand it to get the most from the site!

Or does anyone think it is actually detrimental to the user experience to have to expand a window to view the whole page? Personally, I don't mind having to do so with other peoples sites. It is easy enough to navigate other pages from the taskbar.

The printing point is not one I had considered previously as I don't imagine the content of the sites I have made previously would warrent much printing! This could be a bit short sighted of me though so I'll be thinking more about this in future.

[Mhoram]

I'd say unless there's a really, really, really good reason to fix the width, one should design pages so they can flow to any reasonable width.  Take this forum, for example.  It looks fine at my window's width of 1280, but it also looks fine at 750.  (Below that, the headers start to pile up a bit, but at least there's no horizontal scrolling, which is the worst thing ever.)  Yet I've seen other sites use the same forum software and fix it at 900 so their huge banners fit perfectly, which makes the 800 people complain about horizontal scrolling, and the 1280 and 1600 people complain about the huge margins.  There's no good reason for that.

I usually run my browser at about 1000 wide, whether my screen is 1280 or 1600, because I always have a dozen or so other windows open and I want to be able to keep an eye on them.  I hate maximized windows; they make me feel claustrophobic.

[Randy]

And if you have a 1024x768 resolution why would someone decrease their browser window?
Certainly not to give themselves a better user experience.

Actually, a better user experience is exactly the underlying reason most don't surf with a maximized browser at higher resolutions. As noted above, people often have several different things/windows open at the same time. Having a non-maximized browser window allows them easier navigation between the various things they have running. At least this is what real testers have told me in my surveys year after year. Which oddly enough matches what I do myself, even though technically I have dual monitors and could easily maximize a browser in one screen and use my other screen to navigate to other utilities.

In my estimation it's not something people actively think about. If they can surf and see things reasonably well with a non-maximized browser they'll do it. If they can't, they either maximize or move on to another site that doesn't require them to do so.

As several folks have pointed out above, a fluid design is usually best way to go. But even then there is usually some fixed width (eg a header graphic) that needs to be accounted for. So even though most of my designs these days are fluid, I still make sure I don't have anything that absolutely forces someone to have a browser over 800 pixels width.

[mcanerin]

As several folks have pointed out above, a fluid design is usually best way to go. But even then there is usually some fixed width (eg a header graphic) that needs to be accounted for. So even though most of my designs these days are fluid, I still make sure I don't have anything that absolutely forces someone to have a browser over 800 pixels width.

I agree entirely !

One other issue is what if a screen is set far larger than anticipated and the design is fluid? This can actualy cause problems too, since as a worst case scenario all your content will be in one really long run-on sentence. I've also seen backgrounds that started repeating because they only anticipated a 1024x768 screen size, where, for example, my current main monitor is set to 1680x1050 widescreen. Many fluid sites suck at that resolution - yet another reason I don't tend to surf at max resolution - I'm usually at 800x600 or something near it.

Ian

[maleman]

Lateyly, I've been detecting the width and sticking a "liquid" layout inside a fixed width container div. The container div holds the whole page.

Using different fixed widths for the container div.

Works just fine. And for the print I set the container div's width to 100%. Each stylesheet sets the container div to different width.

It goes a little something like this:

CODE

<link rel="stylesheet" type="text/css" media="screen" href="default.css">

<script>
if (screen.width <= 700) {
   document.write('<style type=text/css>@import url(small.css);</style>');
     }
if ((screen.width > 700) && (screen.width <= 980)) {
   document.write('<style type=text/css>@import url(med.css);</style>');
     }
if ((screen.width > 980) && (screen.width <= 1120)) {
   document.write('<style type=text/css>@import url(big.css);</style>');
     }
if (screen.width > 1120) {
   document.write('<style type=text/css>@import url(huge.css);</style>');
     }
</script>