What is the BEST Web site Width?

Hello,

What do you suggest as being the best Width for a Web site?
That is do you think that the best Width should be set based on Percentages or Pixels?

And if Pixels, then what is the optimum Width so that the Web site looks OK across most display devices, which means requires NO scrolling to see the whole of the Web site content.

To me it seems Width set based on Percentages would be best, since then one can be sure that always the page does not scroll require, but then one looses control over the exact display of things that require set size such as images, etc.

Looking forward to your thoughts.

Regards,

the absolutely best web site width evar is 100%

The best width is whatever fits on and makes best use of my screen/window.

Fixed width is a cop-out for designers, putting their convenience over the needs and convenience of their visitors. Ideally, a site will adapt for any screen size, although in realistic terms, you might want to put min-width and max-width constraints on it.

A site that is narrower than my window is wasting space (that assumes people don't have maximised windows on huge screens, because lines over about 20-30 words start to get hard to read), which is no big deal, but is inefficient.

A site that is wider than my screen is a major fail.

Yes, designing for flexible width takes a bit more effort if you're going for a clever layout with lots of positioned elements, but it's almost always possible.

Don't forget that even within a flexible site, you can have fixed width elements, where specific items need to appear at specific sizes.

Definitely 100% as that's the only width that will display at full width in all browsers.

While I agree that 100% is a great way to go, the problem is that there are times when it gets taken to far. In terms of readily there is nothing worse than trying to read an article that is 800px wide.

I am however a big fan of the whole 'responsive design' that is happening right now.

Quote:

---

Originally Posted by chriswhiteley

In terms of readily there is nothing worse than trying to read an article that is 800px wide.

---

In terms of readability, there are a couple of things that are worse – one is pages that are wider than your window, and the other is bad spelling :cool:

Quote:

---

Originally Posted by Stevie D

In terms of readability, there are a couple of things that are worse – one is pages that are wider than your window, and the other is bad spelling :cool:

---

Damn the iPhone autocorrect and these fat fingers. Thanks for pointing out the spelling errors.

Indeed there may be things worse but the topic of this thread isn't the content of the site, spelling, or even design of the site. It is the width. I rarely run into a situation where the website is wide than my screen. Is this a common problem for others? Or am I just not surfing the web enough?

1000px and 900px used in common platforms, it's what i use, 100% should be used inside the elements,(website borders and different tables make your site good looking)you also can detect user screen size with javascript(get the Width and insert to your table or css).

Quote:

---

Originally Posted by chriswhiteley

Indeed there may be things worse but the topic of this thread isn't the content of the site, spelling, or even design of the site. It is the width. I rarely run into a situation where the website is wide than my screen. Is this a common problem for others? Or am I just not surfing the web enough?

---

I frequently come across sites that are wider than my window.

I run my desktop at 1280×1024. If I run my browser windows maximised, that makes for an uncomfortably large viewport, giving long lines that are harder to read. Unless I'm looking at large images or maps or any other content that needs that much space, I don't want a viewport that big. Fortunately, Opera supports a proper MDI, meaning that I can have each tab open as a separate window within the main Opera window, and the size I find most comfortable is a width of about 900px. A significant minority of sites don't respect this and make their websites so wide that it invokes a horizontal scrollbar.

Fluid site with mostly text - 100%
Fixed layout with graphics aligned precisely - 900px

HTH
-John

Quote:

---

Originally Posted by Stevie D

I frequently come across sites that are wider than my window.

I run my desktop at 1280×1024.

---

I frequently come across sites with the same problem. My screen resolution is 1920x1080 so I have my browser (and all the other windows I open) set to use exactly half the width so I can see two windows side by side and no window is so wide that the content is hard to read (this gives a viewport width of 958 which I find quite wide enough for easy reading).

Kohoutek broke me of using fluid-width designs with no max-min width constraints. She has a huge monitor like yours, Stephen, and she sent me a screenshot of what one of my sites looked on her monitor. It was a revelation.

I am sorry, but "It was a revelation." to what?
Are you saying that it better to have a Fixed Width rather than 100% width?

Frankly looking at all the answers here I am even more confused now than when I started this thread about what is the BEST Width decision for a Web site?

Overall I am leaning toward it being a fixed Width size in Pixels, but what amount of Pixels wide?

Quote:

---

Originally Posted by Black Max

Kohoutek broke me of using fluid-width designs with no max-min width constraints. She has a huge monitor like yours, Stephen, and she sent me a screenshot of what one of my sites looked on her monitor. It was a revelation.

---

Quote:

---

Originally Posted by WorldNews

I am sorry, but "It was a revelation." to what?
Are you saying that it better to have a Fixed Width rather than 100% width?

---

A revelation to the problem of allowing unrestricted 100% width.

No, fixed width is not better than 100%. It may make your life as a designer easier, but it doesn't make the user experience better.

The ideal width from the user's point of view is 100%, with a max-width set at somewhere between about 900px and 1200px (or you might want to set it in ems) depending on the layout, to ensure you don't get horrendously long lines. You might also want to set a min-width to preserve the layout on very narrow screens, but a preferable solution there would be to use media queries to alter the layout completely to fit in a single narrow column.

around 30 - 35 characters in a line of text is about as wide as you want a column to be.

You can of course have your page rearrange columns so as to fill whatever width your visitor has available.

Seriously, is it really like REAL STATE? WHITE SPACE = WASTED SPACE?

I just thought white spaces are good for viewing.
I use 100% not to literally "use" them all but to have enough space and a clear viewing on what your client want to see on your website.

I think it's a matter of perspective on how creative you will use it.
I think you can use 950px but still jiving with the 100% of the viewport.

Right usage is still the best and not because "STANDARD" guys told you so.

Quote:

---

Originally Posted by eneza

Seriously, is it really like REAL STATE? WHITE SPACE = WASTED SPACE?

I just thought white spaces are good for viewing.
I use 100% not to literally "use" them all but to have enough space and a clear viewing on what your client want to see on your website.

---

There's a balance to be struck. Yes, space on the screen is unlimited, and unlike print there's no cost to spreading things out. Getting enough white space into a design is important for readability and navigability, as well as just aesthetics. On the other hand, you don't want to waste space unnecessarily. Large gaps - particularly side gaps created by a very narrow content column - can look out of place. The more scrolling is needed, the more people might not make it as far as the bit they're looking for. That's particularly true at the top of the page (and most of all on the home page), where you need to have enough content to give people the 'information scent' to read on. If they see nothing on the first screenful that looks interesting and worth reading, a lot of people will back out there and then.

Quote:

---

I think you can use 950px but still jiving with the 100% of the viewport.

---

Not when a significant number of people are using viewport widths of less than 950px, you can't...

The solution to where lines might get too long to read is to assign max-width:35em on those columns. Of course no one is going to deliberately open their browser so wide that they have difficulty reading the page content so the problem should rarely occur in the first place.

Quote:

---

Originally Posted by felgall

The solution to where lines might get too long to read is to assign max-width:35em on those columns. Of course no one is going to deliberately open their browser so wide that they have difficulty reading the page content so the problem should rarely occur in the first place.

---

You have a touching and misplaced faith in the intelligence and sanity of the web browsing community :cool:

Quote:

---

Originally Posted by Stevie D

You have a touching and misplaced faith in the intelligence and sanity of the web browsing community :cool:

---

this may well be true (also, it's a great example of creative writing)

but stephen has it right, web authors should still take care to ensure their text is readable, and 35em is fine

i can think of one scenario where a wide open browser viewport on a large monitor makes sense, and that's to view a page which has high quality and very large images

of course, on such a page, the fewer words the better, eh

Well after carefully reading all your comments, and there were so many excellent ones, I finally decided to go ahead with main Table fixed width of 950 and then then inner Tables set at 100%.

Now the good thing is I generate all the page widths via Php so by changing one file all of the site was instantly set to new width. That is all the site but one page, actually the main page which contains the news articles. I have checked and checked it and do not see why it is rendering at the old width and not the new width of 950. Here is the sample page in question:
Why I voted NO on the deficit reduction deal - RealNewsPost.com

Any idea why this page is rendering at the old 1024 and not the new 950?

Regards,

Quote:

---

Originally Posted by r937

this may well be true (also, it's a great example of creative writing)

but stephen has it right, web authors should still take care to ensure their text is readable, and 35em is fine

i can think of one scenario where a wide open browser viewport on a large monitor makes sense, and that's to view a page which has high quality and very large images

of course, on such a page, the fewer words the better, eh

---

Quote:

---

Originally Posted by WorldNews

Hello,

What do you suggest as being the best Width for a Web site?
That is do you think that the best Width should be set based on Percentages or Pixels?

And if Pixels, then what is the optimum Width so that the Web site looks OK across most display devices, which means requires NO scrolling to see the whole of the Web site content.

To me it seems Width set based on Percentages would be best, since then one can be sure that always the page does not scroll require, but then one looses control over the exact display of things that require set size such as images, etc.

Looking forward to your thoughts.

Regards,

---

When designing it in Photoshop/Corel Draw, its always a good idea to take the minimum possible resolution screen size your visitor might have like 1024x768px. When converting it into XHTML/CSS, the width within the elements should be 100%.

Quote:

---

Originally Posted by adeydas

When designing it in Photoshop/Corel Draw, its always a good idea to take the minimum possible resolution screen size your visitor might have like 1024x768px. When converting it into XHTML/CSS, the width within the elements should be 100%.

---

Remember that even if you decide not to care about people using narrower screens/windows (plenty of people still are!), you shouldn't make your content wider than 1000px, ideally more like about 960px, to allow for window borders, scrollbars etc.

Quote:

---

Originally Posted by Stevie D

Remember that even if you decide not to care about people using narrower screens/windows (plenty of people still are!), you shouldn't make your content wider than 1000px, ideally more like about 960px, to allow for window borders, scrollbars etc.

---

960px doesn't allow for the window border when you display two windows side by side on your monitor - something that Windows 7 makes trivially easy to do by holding down the windows key and pressing an arrow key to make the window take up exactly half of the screen. With 1920 as a common screen width that means that the total width of the window including the borders is 960px.

I think it's good to see how many users-visitors got for example 17" monitors or 19" monitors. I guess today most users can afford 19" monitors and have 1280x1024 ofc you wanna get and 17" monitor users with 1024x768! Why this? Cause then is easy to see what width and height your webiste pages need to be!

If you representing a lot of images they need more space to be more vivid-attractive.
If you got less images in your website project then you need smaller width abt "Letter(A4) format of a paper", a format of "1 standard book page filled with text". Also need to watch what target users are! If they are older need more "open" and easy to read font with maybe bigger font size for 1 pixel more than usual web text's font size.
If got both... text and pictures to put on web page abt 50:50, then use wider width in PIXELS. Fixed size! Cause if you make 100% or fixed width... in both cases some web browsers will ask for width in pixels! in your code. Other elements in 100% width wrappers/pages also need some pixels to be oriented in web page so sooner or later you will need to put 900px or whatever px size.

Also for expandable-resizeable 100% page you need minimum width defined in pixels and/or maximum page width in pixels.

Also web design code is guided by coordinates of monitor screen from top in pixels and from left in pixels. So using any percentable size need to be related on that screen's coordinates! Pixels again!

Ye! Wrapping your 100% width page looks cool when you watching what you did with your coding skillz, moving your mouse wildly-resizing your browser window and wondering how you awesome are but in praxis you just risk for you site to get wrapped on some widescreen monitor and becoming completely useless for visitor to read content.

All design is abt "Storytelling". You need "to tell the story" to user... and if you guide by that you wont make mistakes. This sentence is maybe too abstract here but it works when you design and think of it. It can help a lot. Ppl like stories!

1 thing more is webpage height! That may vary form page to page on same website but for most friendly user experience of visiting some site is to height of page be abt height of user screen + one half of it. To user not have to scroll a lot..again that depends of your site content but also to many short pages "stored" in "pages numbers" buttons or in "next, next page" buttons wont be good for user friendly design. Solution is in finding right measure of both methods and good organizing of website content.

Also giving to user all "compressed" in "1 Box of a website"(for example web site is 500px height with all pages same size) also is not so good cause then you not giving to user to explore, you giving him "too fast" and too "chewed up" everything and user feel boredom on your site and wanna "forget you".

Hope it helps.