Credit Card Consolidation - Mortgage Calculator - Loans - Nature's Sunshine - Personal Loans

PDA

View Full Version : Best width of a website


mineral
Feb 3rd 2008, 8:19 am
Hello,

I was wondering which the optimum width of a website is. What do you suggest? Our actual website looks like this:

http://www.mineralium.com/

Thanks in advance, Chris

Sohan
Feb 3rd 2008, 8:23 am
We use a 100% design, but the actual content area is 850px. This means people with 15" monitors don't have to scroll sidewards.

www.alloyhosting.com take a look.

dem0x7
Feb 3rd 2008, 8:25 am
I love to design for 950px, but that won't work for people who still use 800x600. What you could do is use a 100% (fluid) layout, but you could run into some problems with that such as not working for all designs, and content being too far apart.

It all really depends.

Lethal7
Feb 3rd 2008, 8:27 am
800 - 900 px

mjewel
Feb 3rd 2008, 8:33 am
It depends on the resolution settings, not the monitor size, of the majority of your visitors. If a lot of your visitors are using 800x600, then around 775px should be the maximum.

dem0x7
Feb 3rd 2008, 8:40 am
Yeah, and your Cpanel stats should tell you what your visitors are using so you could base it off of that.

Sohan
Feb 3rd 2008, 9:00 am
A very small majority of people use 800x600, if they do it means they are not going to buy expensive products online. I'd cater for 1024+ only.

Valve-Hosting
Feb 3rd 2008, 9:03 am
960x For the reasons stated above ;)

Stomme poes
Feb 3rd 2008, 10:16 am
A very small majority of people use 800x600, if they do it means they are not going to buy expensive products online.

People with phones and PDA's with Internet capabilities are surely going to waste their money on expensive trinkets, certainly. And they've got smaller screens than computers usually.

Flex width in an interesting choice. I've been using it for a while and I really like it.

Mineral, your site is small yet not 800-px friendly. It's small on my (1400px-width) screen, and yet at 800x600 resolution I've got to scroll left and right to read stuff. The worst of both worlds. You might as well expand it a little and make it bigger. You seem to have enough stuff going on in the middle that you could well get away witha fluid-width like Digital Point has.

This page is still a work in progress (and ugly as sin as the design is nasty, thinks I), but here's a page I am coding where it has a flex-width: it goes down for 600x800 showing everything, and expands to 1024 for screens that size or bigger. Though you can really do it any way you want, whichever widths.
http://stommepoes.nl/Scooterverzekeren/scooterbereken1.html view in 600x800 and then something higher. Neat, huh? deathshadow had posted the code for someone else and I thought it was cool.

shockie
Feb 3rd 2008, 3:27 pm
trying to fit that 800px width just isn't worth it imo. i'd go for a max width of 1024px.

web23
Feb 3rd 2008, 3:55 pm
I used to do 760px wide but now go for 960px

angilina
Feb 5th 2008, 12:41 pm
I think 750px

sam.
Feb 5th 2008, 1:21 pm
Cater for 1024+ but it really does depend on your audience so it's worth checking stats first

drewbe121212
Feb 5th 2008, 1:41 pm
I always code 1024 x 768 resolution.

I feel that people who use 800 x 600 really need to up the ante a little bit. Besides, if they are at the resolution they have to be partially blind, and scrolling windows are most likely the least of there worries! :Grin:

productions
Feb 5th 2008, 4:35 pm
is it an existing site? If so I would design it for 90% of your visitors. Probably 1026

kayapati
Feb 5th 2008, 9:42 pm
yes 950px is best for 1024+...

Tgeo888
Feb 5th 2008, 9:45 pm
I usually shoot for about 915px or so =x

Stomme poes
Feb 6th 2008, 1:40 am
I feel that people who use 800 x 600 really need to up the ante a little bit.

I don't get it, is this forum only full of Americans or what? The rest of the world has been spending its time embracing Mobile Internetting and mobile phones and PDAs aren't going to get to 900px wide for a LONG time. Hello? You build your site to look good in as many resolutions as possible.

Picking one size out of your butt and saying, well I think everyone should use this resolution, that's a GREAT way to lose customers. Have fun.

Austell
Feb 6th 2008, 2:35 am
the best width is 100% width!
and dont let your coding talents be defeated by scrolling.

St. Anger
Feb 6th 2008, 3:17 am
i use 700 - 1000px....
but i also use 100% width:D

drewbe121212
Feb 6th 2008, 7:11 am
I don't get it, is this forum only full of Americans or what? The rest of the world has been spending its time embracing Mobile Internetting and mobile phones and PDAs aren't going to get to 900px wide for a LONG time. Hello? You build your site to look good in as many resolutions as possible.

Picking one size out of your butt and saying, well I think everyone should use this resolution, that's a GREAT way to lose customers. Have fun.

Nonesense. This is what stylesheets are made for. I did not realize we were discussing mobile phone sizes, only computer screen resolutions.

On a normal screen I design for 1024, however the stylesheet completely changes everything on the screen for PDA's. I dont really have a loss of customers, as my websites tend to be focused around technology/computer related items; and the general trend is a minimum of 1024. Even still, this only accounts for approximately 10% of my users. Everyone else is beyond and above that, save maybe the 1% of 800 users. For that, well, to bad. There just isn't enough room with 800 or less pixels. The extra 200 coming from a 1024 display is a godsend. Sure, 800 was great in the day, but its time to move on!

Stomme poes
Feb 6th 2008, 11:05 am
I did not realize we were discussing mobile phone sizes, only computer screen resolutions.

Actually, the question was, what's the best width for a website. Websites are not only seen on computer screens. Everyone and his brother is shouting out a screen resolution --as if that had anything at all to do with what width your website should be (and it doesn't) and that's why I don't use my work computer to browse teh internetz-- I'm sick of scrolling cause someone didn't want to take the time to build a site properly. My laptop has 1400px : )

drewbe121212
Feb 6th 2008, 12:07 pm
Actually, the question was, what's the best width for a website. Websites are not only seen on computer screens. Everyone and his brother is shouting out a screen resolution --as if that had anything at all to do with what width your website should be (and it doesn't) and that's why I don't use my work computer to browse teh internetz-- I'm sick of scrolling cause someone didn't want to take the time to build a site properly. My laptop has 1400px : )

Nice, what is that 19" wide? The resolution should be a big factor in what you are aiming for, but I understand what you are saying. I think it looks really weird on my computer as well (the 800 sites are horrible for me) because I have a 22" widescreen set at 1680px lol. To me it looks like a huge waste of space. Then again here at work I have a 14" screen that maxes at 1024, and everything looks gigantic to me.

I would freak if I had to ever switch it back to 800 :)

nicangeli
Feb 6th 2008, 12:20 pm
Nonesense. This is what stylesheets are made for. I did not realize we were discussing mobile phone sizes, only computer screen resolutions.



And since when were mobiles not computers?

Screen resolution is not always the best measure, make sure you take into account that not everybody has their browser maximised.

I use x% here.

immortality
Feb 6th 2008, 12:32 pm
I use 740 or 925 depending on what im doing.

WebHostingNerds.com
Feb 6th 2008, 12:59 pm
Usually I design @ 770 if it has to be compatible with 800 x 600
930 for 1024x768

CriminalOrigins
Feb 6th 2008, 1:04 pm
Coding for 100% or another percentage can really limit what you're trying to accomplish in the design sometimes.

I usually use 950px-970px.

Ross1234
Feb 6th 2008, 1:23 pm
dont go further than 900px :D

Richard R
Feb 6th 2008, 9:14 pm
Fluid layouts: I rarely use this type of design, it can cause problems when the end-user has a large monitor with a high resolution. A whole paragraph of text could be stretched into one line, of course there are ways to work around these.

For fixed layouts I will either use 760px or 960px.

750px; suited if the targeted end-users will be using a resolution of 800 x 600 or above. This figure is better than 740 and 760px, etc because 750px is divisble by 2 and 3 so it makes making 2 and 3 column layouts a lot easier.

960px; suited if the targeted end-users will be using a resolution of 1024 x 768 or above. This figure is a lot better than 950px, 970px, etc because 960px is divisible by 2, 3, 4 so it makes making 2, 3 and even 4 column layouts a lot easier.

If I'm designing for resolutions with a width of 1024 why not set it at 1024? This is because we have to take into account the browser's scroll bar and border (if they don't have the browser window maximized, but minimized full screen).

So to answer your question I'd say the "best" width of a fixed layout would be 960px. Of course this will change as monitors get bigger and higher resolutions are used.

gjulian
Feb 6th 2008, 9:18 pm
Love it Stomme poes! It's truly amazing how the rest of the world is 'omitted' by the world's biggest superpower... but that doesn't mean that they aren't super clever though!

superstan
Feb 6th 2008, 9:27 pm
i always have jobs with Programming + Designing

so i use a main working table - 100% width
and split cells and start working.

this usually works cuz you can never know what your site visitors will be using!

one more thing u can do is split the 100% width table into three verticals and use the middle cell.

check www.jilmail.com (http://www.jilmail.com/site) for a live example !

Ali Razaqpur
Feb 6th 2008, 9:37 pm
I suggest 700px - 850px it's about the perfect size that way people with low screen resolutions don't have to scroll left and right

methodcomptech
Feb 6th 2008, 10:25 pm
1024 is the most common screen size right now, so, when i do a fixed width, i code at 980px. even a log of big sites dont cater to 800 anymore. i work at ittoolbox, and we threw out all of the 800 templates about 8 months ago, and now cater to 1024 and larger.

LeoSeo
Feb 6th 2008, 11:03 pm
I do it compatible with 1024x768 as 95%+ of my users use that or higher.

Jalpari
Feb 7th 2008, 2:39 am
now-a-days most ppl have 800 by 600 px resolution so its better to design web for this resolution but for designing web for all resolution (its a good option) u should have to set value in % not px

qazu
Feb 7th 2008, 3:02 am
Fluid layouts: I rarely use this type of design, it can cause problems when the end-user has a large monitor with a high resolution. A whole paragraph of text could be stretched into one line, of course there are ways to work around these.
There is a simple way round this. It's called max-width.


For fixed layouts I will either use 760px or 960px.

750px; suited if the targeted end-users will be using a resolution of 800 x 600 or above. This figure is better than 740 and 760px, etc because 750px is divisble by 2 and 3 so it makes making 2 and 3 column layouts a lot easier.

960px; suited if the targeted end-users will be using a resolution of 1024 x 768 or above. This figure is a lot better than 950px, 970px, etc because 960px is divisible by 2, 3, 4 so it makes making 2, 3 and even 4 column layouts a lot easier.Any width can easily be divided into x number of columns using % rather than px as Jalpari said. It all depends on your design, if you want a fixed width column with a background image or a fluid layout.

For me the best solution is a fluid layout with a max-width set higher than 1280.

Stomme poes
Feb 7th 2008, 7:01 am
I posted this somewhere else but I'll post it here... a page not yet online and almost no content with the ads commented out:
http://stommepoes.nl/Scooterverzekeren/scooterafsluiten3nee.html

We decided on serving the 1024-crowd while not leaving out 600x800.

At 640x480, you get a scrollbar; however if you scroll right until the right menu is gone, you still have the full (blue) content. I find this ugly but acceptable, as the versions of our pages with lots of text or form content can still be read without back-and-forth scrolling. Forms can also still be filled in completely without scrolling (something I had to think a few times over to get).

Site fills window at 800x600, showing no scrollbars horizontally unless the 800x600 user makes his/her browser smaller than full-width.

1024 x 768 shows the site at full size (which does not quite fill the screen). Scrollbars only show up if they rezise their browser smaller than 800x600.

Anything bigger, and if left at full-width will show white on the right (and bottom possibly, depending on content length). I could have made it go bigger but for the small amount of content we have on most pages, there was no point. I also could have centered it but just choose not to. Centering is nice for small sites which want to look better than left-aligned when viewed on ginormous screens.

Min and max width are really nice CSS options. The javascript in the CSS is necessary for IE6 simply because it does not understand min or max anything. It ignores them. I have no problem giving IE6 a nanny to wipe its retarded butt with. No javascript? No problem really, site merely stays at its smaller width. Doesn't break the page.

sidernik
Feb 7th 2008, 7:09 am
personally i think 750x800 works pretty nice, 100% width :D

splitefire
Feb 7th 2008, 7:35 am
Don't use fixed size because are millions peoples which has different browsers and PC's monitors

PHPGator
Feb 7th 2008, 7:46 am
I think your website width is fine. The vast majority of visitors will probably being using 1024+ resolution. Your website won't be the only one that people running 800x600 will encounter. They should be used to it in this day and age. :P

psangsorn
Feb 7th 2008, 7:55 am
From going to 1680 x 1050 too 800 x 600 is a joke.. the pixels are like half a centremeter or something...

Does anyone really do serious web browin on their mobile?

drewbe121212
Feb 7th 2008, 8:09 am
From going to 1680 x 1050 too 800 x 600 is a joke.. the pixels are like half a centremeter or something...

Does anyone really do serious web browin on their mobile?

Definately; atleast for the more 'social networking' based sites. Have you seen the iPhone's use on facebook? Though what the iPhone is packing can hardly be recognized as a standard browser to which most pda's use. It looks more like an actual computer monitor.

francois©
Feb 8th 2008, 5:18 pm
yeah. . i think in css u need to use 100% width to control your design in all computer resolution even is it minimum or maximum. in designing templates try to use the majority 800x600.

littlejake
Feb 9th 2008, 1:27 am
I used to use 100% but now preferred 760px.

Joseph.oliver88
Feb 9th 2008, 4:20 am
this was really the first ever helpful thread that i had read coz i was having trouble with my page width before..thannnnnksz!

camp185
Feb 11th 2008, 8:25 pm
Just posted this yesterday: http://www.bestwebimage.com/?p=54

CT SEO
Feb 12th 2008, 5:45 pm
I love to design for 950px, but that won't work for people who still use 800x600. What you could do is use a 100% (fluid) layout, but you could run into some problems with that such as not working for all designs, and content being too far apart.

It all really depends.

i agree. for some reason there are still people out there using 800x600...

camp185
Feb 13th 2008, 2:16 am
Why not try this if you like 950. Most people use 1024 or higher screen settings. Set the width to 93%. Now your site width would appear to be about 950 pixels on a 1024. It will also still fit on a screen that is 800. Just an idea.