What Size Do You Design In?
 

Just wondering what screen resolution webmasters are designing in these days... I think the days of 600x800 are long gone?

Whatever the client specifies in the design brief.

320/200 16 colors

320 x 480

Designing for or designing in? I think most people are using something around 1920x1200 to design with, and designing for 1024x768

1024 px width is the most spread resolution now... approx. 50% surfers use it... minority use higher resolution 1280+ px... and probably another minority is still on 800 px.... though it's hard to believe for me :upsidedow

he's right :thumbsup

What bugs me the most is the height. I mean, most have a nice width on their monitors but a lot of laptops have 16:9 and not 16:10. So we're looking at ~768px height vs 1366 width. Even the 1280x800 laptops are becoming extinct.
Ah well, anyway, 1024px is the most common width size; so anywhere from 950-1000px display size with backgrounds around 1600-1800px :)

That sounds awfully complicated.

Why not just remember to keep your width at 1000px or less so you avoid horizontals on 1024x768's, and then make a small seamless repeating bg so you don't even need to worry about whether your bg is going to be an issue. Making a fixed size bg (whatever the size is) is always going to be a problem somewhere for someone. Just eliminate that issue up front.

:2 cents:

i make them wide from 1000-1200px.

960 wide most of em.

What he said...

i disagree, if you know what you are doing, you don't have to be limited only to 1000pix wide frame presentation. we keep main content within 1000 pixels wide but appreciate extra space on sides for decorative purposes. no horizontal scroll issues and you can do lots interesting layered over effects, doesn't necessary have to be big in proportions.

I do whatever I'm asked to do, but make it clear to clients that 1000px is the "best" to stay inside.

:2 cents::2 cents:

I typically design for 1200+, however make it fully functional in 1000.

That's all fine and good, but it doesn't disagree with what I said. Whether you layer effects over or not, it still doesn't change what I said about confining your primary width to 1000px or less. But it was a generalization anyway. My first comment stands above all others: Whatever the client specifies. If they want it in 800x600, then that's what they get.

i let my script decide, wider screen i present extra pics whatever, its just a little extra script and css

:2 cents:

WRONG

http://www.w3schools.com/browsers/browsers_display.asp

on the subject, unless specified otherwise, between 960 and 980px. There are very good reasons for that

:)
it's all good. if client wants 800x600 and their target audience all are viewing at 800x600 it is one thing. but if target audience has mixed resolutions, although you have to make it 800x600 you also have to account for and make your work appealing for viewers on other resolutions by utilizing that extra empty space around to bring main area in better focus or in better light, although it's still a 800x600 requirement.

edit: you don't have to) i'm just saying

I completely agree. That's why I suggested a small seamless repeating background, rather than making some sort of fixed dimension background. Doesn't matter what it is. Could be a logo or a gradient or whatever.
For example: If your content is 800x600, and you make a background 1024px wide, you're covered for users up to 1024px but anyone with a larger res gets a fucked up presentation. If you have a seamless repeating bg, everyone is covered no matter what their res is.
This goes for any sizes you want to insert into the equation. Fixed dimension, non-seamless backgrounds are bad news no matter what you're designing your content width to be. This should all be obvious & elementary to designers. The only reason I mentioned it at all is because he was talking about making a background of 1600px - 1800px, which to me sounded like he was making one big background image, which is not a good idea. Soon as someone with a resolution bigger than that comes along, his background is blown.

1024 x 786 is the most common one.

Look at your browser / resolution stats. 1000px is still your safest bet.

I disagree. I have made a lot of fixed size backgrounds. I usually go with 1600 wide (with content of course kept below 1000) ... the trick is to have that background fade out AND positioned correctly. This way, users with 1600+ wide resolution can see the whole image and then whatever it fades out to becomes the bg color. It's simple really, but takes some planning.

The beauty of the body tag is obviously that it doesn't create that vertical scrollbar even if it is wider that the users resolution. It's crazy not to take advantage of that.

If done right, users at 1024 see most of the bg image, users above that see all of it and users below it may see none of it, but that's the price THEY pay for being blind LOL

I'll try to find an example of what I am talking about...

MTV.com is actually a good example of what I am talking about.

my sites are compatible with 1024x768. I design in 1440x900

Which is not entirely accurate to go by, since w3schools is for more tech-ish people that usually have higher res on their screens since they know how to actually change the resolution.

yeap my awstats say that 61% of my visitors are 1024x768 and i tried a bigger size and the site shit the bed. 1024 is still king in my book :)

I know what you're talking about, but why would you make it 1600 wide? If you're just doing a color fade, make it 1px wide. Loads faster, looks the same. By making it 1600 wide, you're just wasting bandwidth. Even if it's just a few k.
If it's not a color fade but an image fade, then you're still screwing yourself for people with larger resolutions, unless it's an image that is horizontally repeatable.

I try to not exceed 1000px in wide.

I agree with the guys above me. 1024x768 is the most commonly used or rather what the majority uses. design for a 960-980 max width to compensate for the browsers (like IE) adding paddings to your html elements.

No. You misunderstood. Of course there would be no reason to do a simple gradient 1600 wide. I'm talking about an image with a real design... like this bg from MTV..
http://www.mtv.com/sitewide/css/char...mes/35/hat.jpg

This doesn't exactly "fade-out" but it does have white edges so if your resolution is above 1600 wide, it looks perfectly normal.

Same principal with this yellow one..
http://www.mtv.com/sitewide/css/char...mes/26/hat.jpg

Just make the bg color white or yellow respectively and it doesn't matter what resolution users have.

Different bg images and a couple css tweaks make that site look completely unique everytime you refresh. (www.mtv.com)

Yeah, i see what you're talking about. I was just assuming a 100% horizontal stretch at any size, but that one like mtv's works if the ends are finished off nicely like that one.

if you've not been to a tech store lately to notice, a lot of new computers/new monitors are widescreen now.

Those stats are skewed a bit i agree since w3c is more tech surfers but I'm sure if you polled a random sampling of 10k users they'd be pretty close to those results.

Too much mature business talk for GFY! This thread has zero entertainment value.

But, I digress...

I design to keep within 960 or at most 1000px wide. Fill the rest with comfy white space or a lightish background.

Well, good to know that majority is already on a higher resolution... though overall stats and porn surfer stats may differ... (maybe cause many surfers use their work PC in the office, and the majority of these PCs is still 1024 px)

There is no $ in adult design =>O

The majority are slowly moving to much smaller resolutions, on mobile devices,
but that's not something you are supposed to be thinking about. What's the
difference between a PDF and a web page? The difference is, or is supposed
to be, that while a PDF says exactly what the output will look like when viewed
or printed at one specific size, web pages have the web browser to decide exactly
what looks "right" for a given display, with a given size window, with the users
preferences for font sizes, etc.

That's the whole job of a web browser, to take the words and pictures in the HTML
and the presentational hints in the CSS and it figure out what looks right on that
system, for that user, whether the window is maximized or smaller, etc. If you're
designing for a specific resolution, and assuming that the window is always maximized,
and assuming that the viewer is a young person with perfect eye sight who likes
a 10 point font you are missing the whole point of what a web browser is and does.

A properly designed page will look good on my phone, my Playstation, or my giant monitor.
W3C schools has a lot of free information to learn correct design for the web as
opposed to designing printed material where you choose the paper size.

Here are a couple of quick hints. If you want something to be centered in the page,
use text-align: center, don't shift it left by adding enough spaces that it looks right
on your screen when maximized. (For those of you stuck in 1995, text-align: center
is pretty much the same as what was briefly known as the "center" tag). Any time a
size has to be specified, it should be specified in em for height, mostly, and percentage
for width, most of the time. Specifying size in pixels is almost always wrong because
200 pixels on my monitor is a lot different from 200 pixels on my phone, which is a
lot different from 200 pixels on my Playstation. "20% width" is always 20% on every device.

The biggest hint, though, is that 98% of the sizes people put in their web pages simply
shouldn't be there at all. You'd do better to not put ANYTHING where many people
fill the HTML or CSS with various presentational details. So, first design the page with
no CSS or presentational HTML to start. Just use semantic tags like <h2> for headings
and <ul> for lists. Don't view it in a browser at this stage, just look at the source and see
if everything is on the page, and if you can tell what's a "big" heading from the <h1> tags
and such. When you done putting all of the content on the page, THEN look at it in a
browser. You'll see that the browser has automatically figured out most of the "what
it should look like", because it automatically makes a list look like a list, a header look like
a header, etc. Now you just need to tweak it a little bit here and there by adding CSS
to give the browser some hints on how you'd like it to look, specifying such things as colors,
some margins perhaps for spacing between items, etc. Because you will then have used
the minimum CSS necessary, the browser can still do it's job and figure out how to make
it look nice on another display, just as it figured out how to make it look nice on your display.