What is the BEST Web site Width?

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,

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.

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.

Hi Gorgoyle, and welcome to Sitepoint!

According to W3Counter, over 20% of people are browsing with a screen width of 1024px or less. Remember that unless you are targeting a very specific market segment, you’re going to have a whole range of people using your site. People on older computers with smaller screens. People on top-end machines with massive screens and very high resolution. People on corporate networks, which are often locked to 1024×768 irrespective of anything else. People on netbooks and notebooks with small screens. People on mobiles phones. People with poor eyesight who have to have a much lower screen resolution than you might expect from the monitor size in order to be able to read it.

And then you have the issue of how much of that screen is taken up by the browser window. You can’t rely on people having their browser windows maximised. I don’t, on my 1280×1024 home PC, but I do on my 1024×768 laptop and work PC. The larger the screen, the more likely it is that people won’t maximise their windows. So screen resolution is an increasingly poor indicator for window size.

in both cases some web browsers will ask for width in pixels! in your code

Sorry, but I’m not quite sure what you mean by that. You can specify dimensions in absolute terms (usually px *), relative terms (such as % of parent element) or scalable terms (like em, so that it remains in proportion to the text size). Those will all work in all browsers, although you won’t necessarily get an exact facsimile rendering, because different browsers sometimes perform the calculations in slightly different ways.

* OK, I know that technically pixels are relative measurements rather than absolute, but in terms of web design that’s generally an unhelpful distinction. It makes more sense, in terms of the rendered page, to think of them as absolute measurements.

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

It’s equally sensible to set the max-width in ems rather than pixels – readability is affected both by the physical length of the line but also the number of characters per line, so setting the maximum width of the content area to be equivalent to, let’s say, about 150 characters, will give a sensible constraint whatever text size is used.

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!

But because you don’t know either the size of the window or the size of the text as it appears on the reader’s computer, it can often be better to allow their browser to calculate the dimension and position in pixels, from your rules in % or ems.

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.

That’s where a combination of using max-width constraints and extensive testing comes in. If you work your design out carefully and test it in a wide range of setups, you should ensure that in pretty much any plausible arrangement, the site will display fine and without excessively short or long lines, without wrapping or overlapping problems, etc.

No, you probably won’t get your readers resizing their windows just to see the funky effects as the page rejigs itself to fit into the window, but each of them will see it at a different stage of the process. Your job as a designer is to ensure that your site works for the people who want to read it, not the other way round.

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!

This little pixel went to market, this little pixel stayed at home, this little pixel had rgb(181,88,72) and this little pixel had #000. :cool:

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.

It’s good to remember the ‘height’ aspect of the page and to ensure that the key content is near the top so that people can see it straight away and don’t have to scroll to find it. You need to give them enough juicy stuff at the top to hook them in so that they do then bother to scroll down – if the first screenful doesn’t convince them that the page is worth reading then they won’t read on. That said, people are now perfectly used to scrolling down a page, and now that scroll-wheel mouses and scrolling trackpads are common, this is less of an issue than it was when the web first appeared.

The balance between scrolling and pagination (having to click ‘next’ to go to the next page to continue the article/list of products, etc) is a difficult one. In general, I prefer to have everything all in one page, because once it’s loaded it’s then done, and I don’t have to wait for any more page loads. I can search the entire page for text. I can easily save or print the page if I want to. On the other hand, if I was on a slow connection, I wouldn’t particularly want to have to wait while the entire page loaded if I was only interested in the first little bit. That’s a particular issue for any kind of search facility (including shopping carts) where you would expect most people to find what they were looking for in the first few results – it isn’t necessarily helpful then to serve up a page listing a hundred results if you know that most people aren’t going to look beyond #10. Part of that comes down to the context and design of each individual site. If you can allow users to choose the number of results displayed, that can give the most flexibility and the best of both worlds.

In general, I prefer to have everything all in one page, because once it’s loaded it’s then done, and I don’t have to wait for any more page loads. I can search the entire page for text. I can easily save or print the page if I want to.
Agree! I think that Navigation of menus and website buttons and options if it’s on “Level 1” that is a ideal for some navigation system. All on “1 page” as you said and on “1 click far” from user to read or look.

Abt 100% site width:

Ye ofc that website will fit in most screen or browser window sizes but that is possible only if website page content is “generic” in some level! Where you got plain picture and plain part of some text. Where resizing not much affects on visual impression of designs on page. If you got more graphical design dependable graphic with strong bounded visual impression then if you implement resize of web page content you will got different visual impression results of that design on webpage. For example in design: Element A - Circle and Element B - Quad not giving same visual impression if Element A is UP and Element B is DOWN or vice-versa!

So if Original Poster ask what dimension for website width? I’ll go for fixed width in most cases.

In my point of viewthe best Width should be set based on Percentages. All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

960px.

I use for text sites 100% and for sites with very specific graphics - 920px

Is too wide to fit in the web browser when you have it filling exactly half of a HD monitor (using window/arrow key). Also doesn’t fit on mobile devices or on paper if you try to print it.

I think really good solution is “Responsive Web Design”.
It means the website will respond according to the medium that is being used to view it.
So there are few design of the site, and it changes depend on browser width.
Here are few examples (Try to change browser width):

Yes and no. For a start, there’s a big, um, glitch in the Glitch website, which is that it doesn’t responsively adapt until way, way too late. As I narrow my window looking at that site, I start to get a horizontal scrollbar, still getting a horizontal scrollbar, and it isn’t until the window gets down to about 50% of the width of the page that it snaps down to the next size. That isn’t great – responsive design should ensure that the page fits within the window at any size (OK, when you get down to the width of a pencil, that might start to get tricky, but not at 500px).

In theory, responsive design is great, although if you aren’t careful, it can be confusing for readers if the designs don’t flow well from one to the next. There are some other technical issues with it – we’ve already got a big discussion on it going on here: Arguments against responsive adaptive web design.

100% on my 1600 wide monitors is HORRIBLE. No matter how smart you code it, it’s too wide for me to be able to read the text and not get a headache. So I design on 980 pixels so far. It can accommodate most resolutions and it doesn’t look that bad.

That width DOES NOT accomodate most resolutions. On a standard 1920 wide screen with window-arrowkey pressed so as to display the browser in half the width the viewport is only 958 pixels wide. On your 1600px screen it would only be 798 pixels wide.

The whole point in having a higher screen resolution is to be able to view more than one thing at a time - which is why Windows 7 introduced a way to make windows fill half the screen.

Anyone who thinks 100% is too wide simply has their browser set to be wider than they should have it. The fix is to reduce your browser width until the page is no longer too wide.

I understand you need to start somewhere…

Actually there are some tecnhics and methodologies regarding the decision of the “width” of your web site.

For example 960px refers to a “fixed width layout” that is accessible through a sceen resolution or browser width that is (at least) 1024x768 pixels

You can go for a “liquid or elastic” layout which means you can do the whole 100% some members talk about in this thread.

Html5 and Css3 brought “CSS3 media queries” that mean you can even target ipad resolutions or even mobile.

You can go for the “Responsive Web Design” which is big this time of the year.

Here are some resources I think you’ll find useful when you’re starting your design (and planning for the future):

-Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? (http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/) - Extra resources on the end of the article.
-Responsive Web Design - Introduction at A List Apart (http://www.alistapart.com/articles/responsive-web-design/)
-The 960 grid system (http://960.gs/)
-The 1140 grid system - Fluid down to mobile (http://cssgrid.net/)

Hope this helps!

I find it easier to design my websites in different formats. First I make a design in the width I fell the contents of the website needs to give a satisfactory result.(Meaning how much information I want on a page decides how wide it is).

But ofc as mentioned there are people with smaller resolution and some split there screens in half and they also want to have a good browser experience.

So I have started lately to create different CSS files for different widths , I know that this is maybe not the best way, but I just don’t like to give my site the dynamic design of being able to fly everywere.

a example of what I am talking about can be found here

hmmm interesting. what’s the pros and cons of using this technique versus let’s say the technique that is described in the The 1140 grid system - Fluid down to mobile (http://cssgrid.net/)?

Keeping it under 800 will ensure that it displays properly on older monitors and particularly, projectors. Unlike CRT monitors, LC projectors remain expensive, so a lot of people have been reluctant to upgrade to XGA or higher resolutions. You can use the Javascript Screen properties Screen.height and Screen.width to figure out what resolution your client’s system is running.

I use 980px fixed. Used to do 750px, but since 600x800 monitors are almost extinct, 980px looks good on most resolutions as far as I have seen.
To all the guys advocating 100%, which kind of sites do you mean? I’m not saying its bad, I just haven’t seen many 100% width websites these days except for maybe web forums. I’d just be interested to see how designers are making such a layout work with today’s screen resolutions. :slight_smile: