What browser size would people recommend designing Web sites in? E.g. is there an average size that people view their internet browsers at?

I'm sure this must vary considerably. Is there a 'good'/'safe' size or a way of getting around this problem.

I know when I am browsing it puts me off if I have to use scroll bars (particularly left-right scroll bars) and I want to avoid this on the Web sites that I design but not sure how wide to set the screen.

Hope this makes sense? Any advice gladly appreciated.

If you want to play it safe go 800x600. I generally design for that size.

If you want to not worry so much just make a liquid design that can scroll down to 640px or so.

The best solution, Amy, is to not design for any specific size. You should use percentages for your widths, this way, your design will expand and contract to the correct size, depending upon the screen resolution of the visitor.

Oh I see. Thanks for this.

Is percentage width dictated in the HTML?

Yes it is.

ie: <table width="100%" border="1"><tr><td>Hello world!</td></tr></table>

This is called a "liquid" design. Fixed width is usually called a static design.

Fab! I've got this working on my site heading! And that's much better!

Originally posted by justadollarhostin
Yes it is.

ie: <table width="100%" border="1"><tr><td>Hello world!</td></tr></table>

This is called a "liquid" design. Fixed width is usually called a static design.
demo plz !!!

Demo? you're looking at one. WHT is a liquid design.

Grab the edge of the window and shrink it, then epand it. See how it changes.

WHT isn't much of an example Michael, in fact, the main forum area is fixed width.

Take a look at http://www.now-design.co.uk/

That expands and contracts, to almost any resolution.

WHT is a good enough example for the thread's intentions, but since when is it a fixed-width? The only thing that is keeping it from being able to go all the way down is the images (mainly the banners).

Hummm, now that's strange. WHT doesn't seem to contract in Opera, whereas in IE, it does. Sorry about that Michael, my mistake. Not sure why it stays fixed width in Opera.

Oh no harm done by any means. The site you listed is a much better example. There was a nice CSS article (Top 10 CSS tips) over at sitepoint that also mentioned including a minimum-width value in your liquid designs to keep them from contracting too much.

This is very helpful guys.
Presumably CSS will allow me to do page layout more effectively than HTML. I have only learnt basic HTML and correct me if I am wrong, but using tables seems to be the only way to layout objects (eg. text, images) in blocks next to each other. Does CSS resolve this restriction?

Be careful Amy, you'll open up a whole can of worms in this thread if you get people thinking you are starting a debate between table based designs and tableless designs.

Here is what I consider the official ruling (what is said from w3c who develop all this webdesign stuff):

CSS should be used to control the way a site looks
Tables should be used to present tabular data.

I.E. if you are showing a spreadsheet on your website, then go ahead and use a table, if you are setting up a menubar, then CSS is what should be used.

I still do table based design for much of my stuff because it is what people are used to (generally speaking).

http://www.w3.org is chock full of information about all this stuff (do not take that as me saying not to post your questions, just giving you more resources).

CSS is fast becoming the standard for laying Web pages out, Amy. Tables are often used, but if you abide by standards, you shouldn't be using them, unless you are displaying tablular data, such as a set of race results.

Using CSS, however, is that bit more advanced than using tables, and therefore requires that bit more knowledge.

If you want to give CSS a go, try looking at the following sites.

http://glish.com/css/
http://www.alistapart.com/stories/practicalcss/

My intention was certainly not to cause a debate.

I'm very new to all of this and I am still trying to get my head around it all, so to get an idea of peoples thoughts and feelings on different topics is invaluable.

I understand that using tables for layouts is not the recommended way and I am certainly not encouraging people to do so.

The trouble is, as I have never even looked at CSS, I have no idea of what it does and why etc. I am merely using WHT as a (extremely) useful information and opinion portal and certainly do not want to cause offense.

Sorry for any caused. :(

Oh no offense caused, it's just one of those topics like "What's the best control panel?" that seems to come up with a never-ending-debate ;)

Hi Amy,

It seems the question of resolution has been adequately covered. To recap, you can't plan for one resolution, but you can plan for all :)

As for the tables v. CSS debate, I'll present you with your own previous thread on the matter - http://www.webhostingtalk.com/showthread.php?s=&threadid=444946 - otherwise, I'd just be copy/pasting myself into this thread :)

Like I said, I was merely asking the question:

Does CSS deal with the layout where HTML cannot (except via Tables). I've got the answer and I'll make sure I never touch on this subject again!

Sheesh! :stickout:

Ahh, there's nothing wrong with the subject. It's an important one in the day-to-day lives of developers :)

I just figured this was an apropos place to bring back that discussion, since it links in well with your query here.

One point should be made for clarification:
Does CSS deal with the layout where HTML cannot (except via Tables).CSS cannot exist without (X)HTML. HTML must provide the structure for CSS to which CSS applies the style. So, (X)HTML is used for layouts, regardless of whether you're using tables or not. The issue you'll hear debated is about tables or no tables. CSS is generally used in both circumstance (only to a lesser degree when tables are used), and of course (X)HTML is used in both cases as well.

I hope that clears things up :)

I've tried using CSS for tableless layout and it's quite clean and minimal but it has it's own drawback it cannot handle column height with different background color. When the height of your column grows the other column doesn't follow so you have an uneven height problem.

It is ok if all your columns have the same background color though.

Is Mr CSS aware of this?! Mrs HTML will be furious.
Is it a problem with no reason or solution, or is the problem logical?

It's logical :)

The answer is pseudo-columns, and I've been trying to find a good tutorial on how you do this in CSS, but I haven't found the one I'm looking for yet. I might just have to write it myself ;)

But no, this isn't a problem in CSS if you understand how this mechanism works.

I'm interested in your solution please elaborate more, this will help me a lot. I'm trying to avoid css for layout because of this but i used it a lot for margins and presentation :)

I think almost use 1024x768

more people generally use 1024x768, however a large, but smaller percentage use 800x600. I'd design for 800x600

From: http://www.w3schools.com/browsers/browsers_stats.asp

About 55% use 1024 x 768 ( add another 14% for those that use higher) and 25% use 800x600.

Depending on the site I would say most of the time to design for 800x600 if you are going to do fixed width.

the golden middle is 800x600... looks good on all resolutions

the golden middle is 800x600... looks good on all resolutions

To be honest, it usually doesn't look good on all resolutions. On 1280x1024, it looks tiny.

i was talking about most popular resolutions which are still 1024x768 and 800x600. 1280x1024 and higher go next. so if you'd like to cover all of them 800x600 is a good choice.

Anyway, I'm on 1400x1050 myself and wouldn't say 800x600 is that tiny.

Have we not established that liquid designs are the solution to this bickering?!
;)

While you are planning the dimensions of your website, take into account that the magority of web surfers now have 1024x768. The second place belongs to 800x600. The other resolutions are much less widely used than these two. So in ance case:

- make sure that your site is properly visible under 800x600;
- and make sure your site is BEST viewed under 1024x768.

We at Dynamic Systems try to find this balance by making the sites with "extendable fringes " at both sides of the main part of the site...

For example:
www.iNavigators.com
www.StandardLines.com
See how they look at different resolutions...

Basically the page size should fit the overall design you have in mind for your site. When I design I normally keep my pages between 760 and 780.

I never stretch it to 800 because if your customers dont maximize their browser all the way - some content will be loss and I personally like having some of the background showing through on the sides.

If you have alot of information to share - you might do the 100% method but remember - this is normally done on sites that are ecommerce type sites or news sites. Just make sure your customers will not get lost in alot of empty space.

I hope this helps some.

Most computers come out of the factory with a resolution of 1024x768. Being this resolution is the standard you should stick to designing these on those specs. Depending on what kind of website layout your designing will depend on height and width numbers, I generally go about 75% of the screen.

Originally posted by fishball
I'm interested in your solution please elaborate more, this will help me a lot. I'm trying to avoid css for layout because of this but i used it a lot for margins and presentation :)

There's no reason to avoid using CSS for your layout. By using CSS, in an external file, your layout now exists in one file. With tables, that table code gets mixed in with your content, on each and every page. This causes your site to require more bandwidth and your pages to load slower.

When you change your layout, would you rather go through all your HTML files removing your previous table code, then go back through and add different table code? Or edit your single CSS file which determines the layout for every page? It makes more sense to have your layout in a single, external, cacheable file from a standpoint of site maintenance as well as performance.

Hi BigBison! I understand all your trying to say :) I'm a designer myself and css is a havent sent for me, however there were an instance where i bump into one of its limits.

I have this webpage with 2 columns, the left column is for the left menu and the right column is for content.

The left column has a dark gray background and right column has a gray background. The left column has fewer contents compared to the right column so naturally the right column is much longer than the left column. But you want both columns to be on equal length no matter who has fewer content because the web design dictates so. Since the left column and the right column are not the same height and since they have a different background color i obviously ruined my design.

When you use a table cell both cell will grow dictated by the cell who has more content. If you dont want both cell to grow use table and they will become independent of each other.

What i'm trying to say is that with this kind of scenario there is no clear cut solutions yet until CSS 3 comes.

You'll have to get that answer from someone who knows CSS better than I do, there are plenty around here.

http://positioniseverything.net/piefecta-rigid.html
http://wellstyled.com/css-2col-fluid-layout.html

In the meantime, what you're describing sounds like a pretty familiar issue. I don't know if you've seen those web pages or not, but they contain workarounds for this.

Use a scripts on your clients site and see what resolutions the visitors use. It's even included with some statistics programs like awstats.

Originally posted by Kiamori
Use a scripts on your clients site and see what resolutions the visitors use. It's even included with some statistics programs like awstats. First of all, these scripts have a high failure rate. You can knock off 10% of them due to JS being disabled or not supported. Then, you can lop off an indeterminate number due to browser type and configuration.

But even if this was acceptable, you'd then need to keep multiple sets of graphics/markup available for those different resolutions.

The kicker, however, is something I've said many, many times on WHT: screen resolution tells you nothing about how much of the screen is being used by the browser. It is a useless measurement except to give you a maximum indicator of what a screen is capable of displaying.

Originally posted by the_pm
First of all, these scripts have a high failure rate. You can knock off 10% of them due to JS being disabled or not supported. Then, you can lop off an indeterminate number due to browser type and configuration.

But even if this was acceptable, you'd then need to keep multiple sets of graphics/markup available for those different resolutions.

The kicker, however, is something I've said many, many times on WHT: screen resolution tells you nothing about how much of the screen is being used by the browser. It is a useless measurement except to give you a maximum indicator of what a screen is capable of displaying.

This is why one records window.availWidth and window.availHeight :)

Originally posted by the_pm
First of all, these scripts have a high failure rate. You can knock off 10% of them due to JS being disabled or not supported. Then, you can lop off an indeterminate number due to browser type and configuration.

But even if this was acceptable, you'd then need to keep multiple sets of graphics/markup available for those different resolutions.

The kicker, however, is something I've said many, many times on WHT: screen resolution tells you nothing about how much of the screen is being used by the browser. It is a useless measurement except to give you a maximum indicator of what a screen is capable of displaying.

I agree with all said, but I think the poster was speaking more along the lines of knowing what size the general group of people accessing your site use in order to set it up for them.

I know that on gaming sites I have, the majorty (80% or so) use at least 1024x768

on my webhosting site I see numbers about the norm (50% or so at 1024x768, 20-30% at 800x600, etc..)

I always design my websites at a minimum of 800x600, 900x700 or even 1024x768. It really depends on the type of site it is and what you want on it.

When I make some designs, I also choose if I want them to be a fixed size in the browser, or if I want to make them 100% in width or height.

This is why one records window.availWidth and window.availHeightWon't work on my browser, nor on a whole lot of people's browser windows, regardless of which browser they choose to use. But even if it does work... \/ \/

I agree with all said, but I think the poster was speaking more along the lines of knowing what size the general group of people accessing your site use in order to set it up for them.I'm glad you agree, but in order to set what up for them? You'll never know whether they browse with a side bar open, and if they do, how much space they've alloted for it (this is very common). You'll never know how many toolbars people have, and how much screen space they've chosen to allot to their browser icons. If you choose to pop open a window using JavaScript (very unreliable technology, as stated earlier), many browsers will allow you to override the function that removed browser buttons or sets a particular size. Heck, IE7 is even going to have a limited version of this feature!

No, indeed knowing screen resolution gives you very little information about how much room you have available to display your site.

the size should be about 600 or 650px

should be perfect


ricair@blueyonder.co.uk

Lets not make this so difficult, it doesn't matter if the script doesn't work on everyone’s browser it only needs to work on enough so you can find the average/majority.

Originally posted by Kiamori
Lets not make this so difficult, it doesn't matter if the script doesn't work on everyone’s browser it only needs to work on enough so you can find the average/majority. Making it difficult is finding out after you've launched that 1 out of 10 people can't use your site because you relied on a client-side script to determine how your site lays out, when it was never necessary to use a script in the first place :)

Keep it simple. Just make it so everyone can use it in the first place!

Time out, you two are talking about different things. Kiamori is talking about using a script to log actual vistors' screen resolutions, in which case a reasonable sampling would be 80-85% IMHO. I don't think his script has anything to do with the operation of the site, but then again I didn't look at it.

Paul is talking about how much those results won't tell you. If I were running a gaming site, I would be interested in knowing that my 85% of my 85% sampling had their browsers set at 1600x1200. But I'd also realize that sometimes 25% of that width is unavailable to the website due to the user's sidebar, a detail which won't show up with Kiamori's script.

If those were the results of the script on my site, I would feel fairly safe in designing (if I were so inclined) a site with a fixed width of 1000-1200 pixels without worrying that too many people (in my target audience) were being forced to horizontally scroll.

Ahh, you're right! I'm sorry Kiamori - I see what you're saying now.

Yes, having this information can be useful for niche sites. The more general your audience, the less this will mean, especially if you find yourself having to redesign your site a year or two later because the stats have changed.

For targeted audiences though, this makes quite a bit of sense.

Originally posted by the_pm
Making it difficult is finding out after you've launched that 1 out of 10 people can't use your site because you relied on a client-side script to determine how your site lays out, when it was never necessary to use a script in the first place :)

Keep it simple. Just make it so everyone can use it in the first place!

I wish it was that simple, if it's not to big then it's to small and people complain about all the empty space on the edge only so much you can do with dynamic tables before you get bored with them. To fit everyone’s browser you would have to design at 600x400 because you have computers with 33.6 modems, 256 color 640x480 monitors and windows 3.1 still on the Internet. After the quick links search engine/spyware bars and address bar you are left with hardly any space. Not to mention you have people with bad vision that have everything huge leaving no space. If you want it to work for everyone design two sites and give a link for low resolution on the index page for those using 800x600 or less.

600x400 is a tiny site on a 1600x1200 or larger screen.

By using a script you can see if only a small % of the visitors use a screen resolution it may not be worth designing it for them. It's all about what’s profitable for most clients.

Originally posted by the_pm
Ahh, you're right! I'm sorry Kiamori - I see what you're saying now.

Yes, having this information can be useful for niche sites. The more general your audience, the less this will mean, especially if you find yourself having to redesign your site a year or two later because the stats have changed.

For targeted audiences though, this makes quite a bit of sense.

No offense taken at all, just adding to the discussion. =)

To fit everyone’s browser you would have to design at 600x400

Not at all Kiamori, that's where percentage widths come in to play rather than fixed pixel widths. :)

I wish it was that simple, if it's not to big then it's to small and people complain about all the empty space on the edge only so much you can do with dynamic tables before you get bored with them.I think there's a lot more that can be done with fluid design than people are willing to challenge themselves to do. But that being said, I'm not saying every single site on the Web should be fluid. If I did, I'd be a hypocrite :)

What I'm saying is that all of the measures we use to try to justify a particular size mean very little. If you're going to design a fixed-width site, do so understanding the inherent risks in not knowing how each of your audience members are going to see what you create. IMHO, it's a risk you must fully understand before you accept it, and all of these things we discuss for the "right size" are nearly meaningless, because every individual visitor has his or her own idea of what the "right size" is. When you create fluidly, you allow each individual to decide this for themselves. When you design rigidly, you take this risk.

Originally posted by Equentity - Jamie
Not at all Kiamori, that's where percentage widths come in to play rather than fixed pixel widths. :) Jamie, I think you missed Kiamori's statement about dynamic tables (fluid tables) getting boring. Read my response above - I quoted this out :)

The amount of screensize / browser size / design at what size threads about, and I've yet to see people mention media types. See I have this vision, where you can seemlessly create media types in your selected document, whereby you can recreate rules depending on monitor, handheld, print, brail etc. If only the W3C would integrate such a method :rolleyes: Sigh.

Come on people!! Media types, so you have to put in an extra hour or two, so what? They're not hard to use, or learn. This then makes it irrelevant that you designed your site fixed or fluid - Used correctly of course.

Jamie, I think you missed Kiamori's statement about dynamic tables (fluid tables) getting boring. Read my response above - I quoted this out

Ah, so I did. But boring? Personally, I don't buy that, but hey, we all have our opinions.