What Size Do You Design In? - GoFuckYourself.com

Dennis69 · 02-08-2010, 09:54 AM

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

Amputate Your Head · 02-08-2010, 10:44 AM

Whatever the client specifies in the design brief.

antpeks · 02-08-2010, 10:47 AM

320/200 16 colors

candyflip · 02-08-2010, 10:50 AM

320 x 480

SmellyNose · 02-08-2010, 11:32 AM

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

Egypt[4TH-Reactor] · 02-08-2010, 11:38 AM

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

Egypt[4TH-Reactor] · 02-08-2010, 11:42 AM

Quote:

Originally Posted by SmellyNose

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

he's right

Broda · 02-08-2010, 11:45 AM

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

Amputate Your Head · 02-08-2010, 11:56 AM

Quote:

Originally Posted by Broda

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.

bns666 · 02-08-2010, 12:29 PM

i make them wide from 1000-1200px.

Sid70 · 02-08-2010, 12:53 PM

960 wide most of em.

Luscious Media · 02-08-2010, 01:48 PM

Quote:

Originally Posted by Amputate Your Head

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.

What he said...

Serge Litehead · 02-08-2010, 02:28 PM

Quote:

Originally Posted by Amputate Your Head

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.

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.

JD · 02-08-2010, 02:32 PM

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

potter · 02-08-2010, 02:48 PM

Quote:

Originally Posted by JD

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

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

Amputate Your Head · 02-08-2010, 03:07 PM

Quote:

Originally Posted by holograph

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.

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.

grumpy · 02-08-2010, 03:16 PM

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

polle54 · 02-08-2010, 03:19 PM

Quote:

Originally Posted by Adultmix

960 wide most of em.

harvey · 02-08-2010, 03:25 PM

Quote:

Originally Posted by Egypt[4TH-Reactor]

1024 px width is the most spread resolution now... approx. 50% surfers use it... minority use higher resolution 1280+ px...

WRONG

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

Quote:

Date Higher 1024x768 800x600 640x480 Unknown
January 2010 76% 20% 1% 0% 3%

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

Serge Litehead · 02-08-2010, 03:25 PM

Quote:

Originally Posted by Amputate Your Head

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.

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

Amputate Your Head · 02-08-2010, 03:45 PM

Quote:

Originally Posted by holograph

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.

fatfoo · 02-08-2010, 03:47 PM

1024 x 786 is the most common one.

jawanda · 02-08-2010, 04:39 PM

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

Jack OAT · 02-08-2010, 04:47 PM

Quote:

Originally Posted by Amputate Your Head

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.

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...

Jack OAT · 02-08-2010, 04:49 PM

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

digitaldivas · 02-08-2010, 04:50 PM

Quote:

Originally Posted by SmellyNose

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

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

swedguy · 02-08-2010, 05:01 PM

Quote:

Originally Posted by harvey

WRONG

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

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.

famous · 02-08-2010, 05:11 PM

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

Amputate Your Head · 02-08-2010, 05:42 PM

Quote:

Originally Posted by Jack OAT

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...

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.

Cyber Fucker · 02-08-2010, 05:45 PM

I try to not exceed 1000px in wide.

designerscode · 02-08-2010, 05:49 PM

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.

Jack OAT · 02-08-2010, 05:55 PM

Quote:

Originally Posted by Amputate Your Head

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.

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)

Amputate Your Head · 02-08-2010, 05:57 PM

Quote:

Originally Posted by Jack OAT

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

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.

JD · 02-08-2010, 07:45 PM

Quote:

Originally Posted by swedguy

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.

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.

Elli · 02-08-2010, 10:22 PM

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.

Egypt[4TH-Reactor] · 02-09-2010, 05:21 AM

Quote:

Originally Posted by harvey

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

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)

RadicalSights · 02-09-2010, 05:25 AM

There is no $ in adult design =>O

raymor · 02-09-2010, 11:16 AM

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.

02-08-2010, 09:54 AM	#1
Dennis69 Confirmed User Join Date: Feb 2003 Location: Dreamland Posts: 1,685	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? __________________ HaHaHa

02-08-2010, 10:50 AM	#4
candyflip Carpe Visio Industry Role: Join Date: Jul 2002 Location: New York Posts: 43,052	320 x 480 __________________ Spend you some brain. Email Me

02-08-2010, 11:32 AM	#5
SmellyNose Confirmed User Industry Role: Join Date: Aug 2009 Location: me at smellynose.com Posts: 206	Designing for or designing in? I think most people are using something around 1920x1200 to design with, and designing for 1024x768 __________________ I'm a PHP developer - 594086663 - [email protected] Last edited by SmellyNose; 02-08-2010 at 11:32 AM.. Reason: Confucius say clarification helps the soul

02-08-2010, 11:38 AM	#6
Egypt[4TH-Reactor] Confirmed User Join Date: Feb 2005 Location: Europe Posts: 1,610	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 __________________ ICQ 247-856-194 E-mail [email protected] AIM / Yahoo! ltdanielross MSN [email protected]

02-08-2010, 11:45 AM	#8
Broda Confirmed User Join Date: Feb 2003 Location: CheapAssDesigns.com Posts: 1,874	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 __________________ CheapAssDesigns.com - when you need quality designs at affordable prices. icq: 230-729-205 info \|at\| cheap ass designs dot com

02-08-2010, 10:44 AM	#2
Amputate Your Head There can be only one Industry Role: Join Date: Aug 2001 Location: Somewhere else Posts: 39,075	Whatever the client specifies in the design brief.

02-08-2010, 10:47 AM	#3
antpeks So Fucking Banned Join Date: Nov 2005 Location: Antwerp Posts: 51	320/200 16 colors

02-08-2010, 12:29 PM	#10
bns666 Confirmed Fetishist Industry Role: Join Date: Mar 2005 Location: Fetishland Posts: 11,521	i make them wide from 1000-1200px. __________________ ⭐ CAM SODA ⭐ STRIPCHAT ⭐ ⭐ CHATURBATE ⭐ X LOVE CAM ⭐

02-08-2010, 12:53 PM	#11
Sid70 Downshifter Industry Role: Join Date: Dec 2002 Location: Road trip Posts: 16,413	960 wide most of em. __________________ Русня, идите нахуй!

02-08-2010, 02:32 PM	#14
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	I do whatever I'm asked to do, but make it clear to clients that 1000px is the "best" to stay inside.

02-08-2010, 03:16 PM	#17
grumpy Too lazy to set a custom title Join Date: Jan 2002 Location: Holland Posts: 9,870	i let my script decide, wider screen i present extra pics whatever, its just a little extra script and css __________________ Don't let greediness blur your vision \| You gotta let some shit slide icq - 441-456-888

02-08-2010, 03:47 PM	#22
fatfoo ICQ:649699063 Industry Role: Join Date: Mar 2003 Posts: 27,763	1024 x 786 is the most common one. __________________ Send me an email: [email protected]

02-08-2010, 04:39 PM	#23
jawanda Confirmed User Join Date: Feb 2003 Posts: 6,040	Look at your browser / resolution stats. 1000px is still your safest bet.

02-08-2010, 04:49 PM	#25
Jack OAT Confirmed User Join Date: Nov 2009 Posts: 176	MTV.com is actually a good example of what I am talking about. __________________ my icq...... 615294405..... .....jackoatwebmaster@gmail I am a webmaster toolbox.. I can do it all.. I am Jack OAT mobile sites + xhtml/css + design + wordpress + script install/integration

02-08-2010, 05:11 PM	#28
famous Confirmed User Join Date: May 2002 Posts: 675	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

02-08-2010, 05:45 PM	#30
Cyber Fucker Hmm Industry Role: Join Date: Sep 2005 Location: On an endless road around the world for rock and roll. Posts: 12,642	I try to not exceed 1000px in wide. __________________

02-08-2010, 05:49 PM	#31
designerscode Confirmed User Join Date: Jan 2010 Location: Shinobi here! Posts: 220	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. __________________ Mainstream & Adult Design Services ICQ: 581772626 \| shinobi [at] designerscode [dot] com

02-08-2010, 10:22 PM	#35
Elli Reach for those stars! Industry Role: Join Date: Apr 2003 Location: Vancouver, BC Posts: 17,991	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. __________________ Make More Money with Cams and Dating at FFN.com! email: [email protected]

02-09-2010, 05:25 AM	#37
RadicalSights So Fucking Banned Industry Role: Join Date: Mar 2009 Location: Europe Posts: 1,595	There is no $ in adult design =>O

02-09-2010, 11:16 AM	#38
raymor Confirmed User Join Date: Oct 2002 Posts: 3,745	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. __________________ For historical display only. This information is not current: support@bettercgi.com ICQ 7208627 Strongbox - The next generation in site security Throttlebox - The next generation in bandwidth control Clonebox - Backup and disaster recovery on steroids Last edited by raymor; 02-09-2010 at 11:29 AM..