Web page width!

[siamnaulak]

Dear All

I want to ask a general question on designing/making the width of web page fixed to some certain pixels or making 100% width so that it can fit to all screen resolution?

I hope you understand what I mean? Some website width is fixed to 800pxl or 900pxl etc where as some are 100% width. For example http://www.greatchurchwebsites.org width is “760pxl”, and http://www.lds.org used 100% width.

Now my question is which one is generally advice to use? In terms of looks, search engine friendly, user friendly etc? OR Any technical advice? For me I usually used not more then 800pxl so that a person using 800X600 screen resolution can view it without any problem. But these days most people are using 17” inches monitor and above, and at the same time I feel it is much smarter and more attractive when a site width is bigger.

It will be nice if you can give me suggestions and advice on this.

Thanks

[flutem3]

But these days most people are using 17” inches monitor and above, and at the same time I feel it is much smarter and more attractive when a site width is bigger.

Hi, Siam,

That is a good question, and I really do not know the answer. At the same time monitors on PCs are becoming larger, we also need to consider the small screens on phones, etc.

I truly don't know. I am keeping ours at 800 (actually it is 760) until I hear or read of a compelling reason to change. In any case on the software I have right now the size is fixed so I am unable to use 100% or a relative size anyway.

Therefore, I too, am glad you asked the question and am looking forward to the answers.

Carol

[David Gillaspey]

Hi Siam,

One site that provides statistics (albeit somewhat out of date) is here:

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

As of year ago, (the above page reports), most internet users worldwide were still using 800x600 monitors, as hard as that is to believe. Visitors to this particular W3C site tended to be developers, however, who tend to have bigger monitors than other people. So actual visitors to this site -- keep in mind that the statistics are skewed because visitors to this site tend to be web developers -- tended to have 1024x768 monitors.

If you want to reach "the masses," then I would suggest planning your sites to fit on an 800 pixel wide monitor. Now, that actually means make your site something like 760 pixels wide. That accommodates the screen display area lost to scrollbars, etc.

If your audience is developers or gamers, both of whom are likely to have larger monitors than the general population, than you can safely design your sites for a size of 955x600 (1024x768 minus scrollbars, menus, toolbars, etc.).

Note that my website, which you referenced, has both a fixed size and a 100% size. To center the content always in the middle of the browser horizontally, I have centered the fixed width content area (760 pixels wide) within a larger area that's equal to 100% of the browser width, a technique that has been called "liquid design." I'm using nested tables to accomplish this, but someday I'll redo the site to accomplish the same thing entirely through CSS.

The Mormon site that you referenced (http://www.lds.org) can be shrunk (narrowed) to about 625 pixels wide (by adjusting the width of the browser window) before the display is adversely affected. I would submit that there are some if not many really wide sites (1024 pixels wide or greater) that can't be narrowed much before the display is adversely affected, unlike this Mormon site.

So, summing up, choosing a size for your site(s) is a decision based upon at least two factors: 1) your target audience, 2) the nature of your site design.

<< In terms of looks, search engine friendly, user friendly etc? >>

I personally don't think a site that stretches 1600 pixels wide (e.g., the Mormon site that you cited viewed on my 1600x1200 browser) really looks that wonderful. I think a site that is less wide (designed for 800 pixel wide or 1024 pixel wide screens, depending upon, as I stated, target market and the nature of your design), horizontally centered in a plain or lightly patterned background, looks much better.

I have not read anything regarding the affect on SEO (search engine optimization) of the site size, so I cannot respond to that point.

Hope this is helpful.

[generalhavok]

I think that the advice being given here is right on, and useful for making general decisions. I'd like to add a little bit to help people make specific decisions as well.

Every site is different. There are a limited number of categories that a site might fall into, but the only way to decide how wide to make a site is to know that site. As David pointed out, a site for gamers can safely be much wider than can a site for international widget sales. The only way to know the right parameters for your site is to measure your existing traffic. Here are some stats from one of my websites...it's each screen resolution, and the percentage of visitors using that resolution. They answer the question, "How wide can my site be until visitors have to scroll sideways?":

1024 x 768...................37.25%
1280 x 1024.................12.36%
800 x 600....................12.13%
1280 x 800..................11.39%
1680 x 1050.................10.82%
1440 x 900...................6.37%
1152 x 864...................2.14%
1280 x 768...................1.47%
1920 x 1200.................1.07%
12240 x 616.................0.97%

That kind of information is essential to making the right decision for your website. It's nice to know that ZERO 600 x 400 monitors have come calling...but since 12% of my visitors use 800 x 600, I think it's too early to move to a width of 960. It's also useful to note that there are eight resolutions higher than 1024 x 768 visiting my website.

That leads to the next point: max-width. Usability experts say that the most readable text is somewhere between 40 and 65 characters per line, with gusts up to 95 (http://www.456bereastreet.com/archive/200509/line_length_and_readability/). If you create a site where content stretches to 100%, those with wide monitors lose readability. What was once a paragraph on a regular monitor becomes a single line 30 inches long on a big monitor. No matter how you slice it, the usable content area for text should be constrained to fewer than 100 characters per line.

The LDS website you noted was written by one of the very best web designers/coders in the entire world, and isn't something that most website makers can duplicate. When IE8 finally arrives, we'll be able to use the CSS selector "max-width"...then we can truly have flexible layouts that work on everybody's screens with little effort. At that point, many more people will be able to make a site as flexible as that one. Until then, it's almost always best to pick a narrower width rather than create a site that stretches to 100% of any screen.

I have two usable screen widths at the moment: 780 or less, and 960 or less (depending on the individual site). While it's really cool, and desirable, to have your designs stretch to fit any screen, it's not really cool to have your content stretch that far.

[JackWolfgang]

With regards to SEO, search engines won't care about the width of your site. You're better off writing valid and semantic markup than worrying about how width affects SEO (however, people are unlikely to link to your site if it's illegible).

As for the width discussion, I prefer sites that make good use of the real estate I provide them, but at the same time, what was said about wide content is true. That said, I normally set the margins to 5% on the left and right and work from there. I've been working on a design for a while that is 3 columns at 1024x768 and above; drops to two columns at 800x600; and at 640x480, it drops to one column with three mini-columns beneath the main column. The site's not ready for launch yet, but the idea is based on the one presented (http://muffinresearch.co.uk/archives/2006/02/07/css-drop-column-layout/) at Muffin Research Labs.

[StubbyD]

Usability experts say that the most readable text is somewhere between 40 and 65 characters per line, with gusts up to 95 (http://www.456bereastreet.com/archive/200509/line_length_and_readability/).

Not being a person whom designs for a living I can't reallly comment on what should or shouldn't be right, but I know from a visitor to any site what I prefer.

I have a screen size of 1280x1024 but although I max my browser when general surfing I don't wantthe content maxed as well. A lot of times I will window my browser and expect most sites I visit to fit within that - so an 800x600 seems adequate.

Secondly I like my content to be centered. Lastly, although I window the browser on a regualr basis (I also run a dual screen setup) I like to be able to control the size of content via the "Ctrl+ScrollWheel" shortcut - so it sorta makes amockery of what experts would say.

Just my 2p worth.

[generalhavok]

Stu:

You're the poster child for quality code! The better-coded a website is, the more flexible it will be for people like you. Flexible layouts, text sized in a way that can be scaled up or down, etc...if a site works well for you, it will probably work well for most.

[siamnaulak]

Dear All,

Thank you so much to each one of you for taking interest in the topic I post and I really learned a lot from the discussion. Actually I have a doubt about this quite long time and really don’t know where to go and who to ask. But now with that all comments and suggestions I am very satisfy.

Thanks once again especially to www.greatchurchwebsites.org (http://www.greatchurchwebsites.org) site. I will post some of my little problem/doubt in near future too.

God bless!