sizing my site to fit in all windows

can't figure it out yet

[sedir]

Hi,

I'm trying to find out how to design my web site so that it fits "correctly" in all window sizes. The site layout was created using tables (because I didn't know a better way) and they work to create a frame. I thought I had it perfect when I was looking at it on my laptop, then I went to work, hit the 21 inch and freaked. WHat's up! do I need to include some sort of "set table to" elseif kind of tag (I'm sure I'm not even close on that logic). Please help.

Thanks

[theperlyking]

Hi sedir and welcome to WebmasterWorld.

Theres no way really to make your site conform to different sizes for different resolutions, just take comfort in that the person who views it at 1600x1200 will be accustomed to sites looking a little sparse sometimes and the person who views at 640x480 will be used to having to scroll!

Tables in my opinion are a reasonable way of laying things out especially if you use percentage sizes as this means your page will resize fairly gracefully at different resolutions (of course unless you are talking about tables that stick back together sliced images).

One last thing, dont forget that people dont always surf at the same sized window regardless of resolution, I may be on 1600x1200 but my browser isnt maximised, my toolbar buttons are small with no text and I have the google bar installed, all these things impinge on screen space.

The only thing you can rely on is no matter what you design for somebody will have a different setup to you :)

[sedir]

so pick up and move on? I can do that, as long as I know my options are limited otherwise.

Thanks alot for your post.

[theperlyking]

I'd say so, unless anyone here knows better....

[rcjordan]

>move on

It's really a layout & design issue. Personally, I'm just now expanding my tables to width=700 from the old 600. I'm not yet ready to go to percentage tables for the content area. If I add percentage space, it's likely to be a right-hand column for sidebar and/or affiliate links. Tedster had a good thread on this, take a look:
[webmasterworld.com]

And welcome to WebmasterWorld.

[mivox]

Welcome sedir! I'd have to agree with the 'herd' on this one... ;) I generally optimize my tables to fit between 650-700 pixels wide.

I'm currently working on a scaling site layout that will be set to 100% screen width, but I'm also somewhat counting on the fact that 800x600 is still the most common screen size, folks with *huge* monitors will be using browser windows at less than full-screen size, and that folks with smaller monitors *will* use full-screen browser windows...

I don't think any layout will ever look perfect (or, in some cases, good) on all monitor sizes, until someone comes up with a way (besides Flash... 'cause Flash just isn't "there" yet) to detect screen size and scale text and graphics to fit...

[oilman]

I run a 21" monitor but I hardly ever run a browser at full screen unless it's some funky flash thing I want to see. I also usually have a dozen other windows open as well as ICQ and yadda yadda yadda. That leaves me running a brower as somewhere between 800 and 1024 for width.

[rcjordan]

>leaves me running a brower as somewhere between 800 and 1024 for width.

From what I've seen, that seems to be the standard MO for 21-inch users. I run 17-inch set at 800x600 and a large screen (15" ??) laptop at 1024. The 700p width tables are fine on both.

[BoneHeadicus]

The only limiting factor in the screen size debate to me is the default window size for AOL.

Usually if I expect a lot of AOL people coming to the site I will max out the width at 630 so they don't have to scroll. You wouldn't believe how many AOL people never make that little window bigger....

[rcjordan]

>I will max out the width at 630

Good point. With 20-something million users, AOL is always something to consider.

>You wouldn't believe

Unless you're writing to a geek's monitor, I'm convinced that whatever comes out of the box is what John Q. uses -period. They won't even play with the settings. That's why I get so many ISP referred SERPs, it's on the screen already.

[tedster]

Well, you don't have to be pitching to geeks. If you're courting corporate business, the site is likely to be viewed on some big screens and high resolution settings.

The equipment was probably set up by a geek, but the site will be making its impression on business people with geek-like settings that they can't be held accountable for ;)

[mivox]

business people with geek-like settings that they can't be held accountable for

BWA-Ha-Ha... hee... You've met my boss? ::sniffle:: *hee-hee*

I'm convinced that whatever comes out of the box is what John Q. uses -period

That's very true. And I'm darned glad we're not pitching to AOL users en masse... we've got some good rankings on AOL, and they *still* don't send us much traffic, so I'll just continue assuming 700p is a safe minimum width.

[sedir]

I'll definitely look at making changes, thanks for the help

[knighty]

I set my tables to 730 and center them this will look OK even in rezs of 1024. I have a 21" monitor and never have it full screen. I dont think any text which goes all the way across a 21" monitor with 1600 rez is readable and for HTML pages will never increase the browser to more than 1024.

[typophile]

>Good point. With 20-something million users, AOL is always something to consider...

Well... You have to consider the demographic of the AOL user. We are talking about the Hyundai of ISPs here. for the corporate (mostly biotech) sites I develop they don't even appear on my radar screen; my logs prove it. So I have no problem designing to an 800x600 standard.

On the issue of layout, slicing and percentage tables. I find it useful and attractive to constrain one table dimension to an absolute; usually width. That way you can have top navigation that is a sliced up gif in a nested table, then your text content below in cells that expand vertically for users who want to use their browser to up-size text.

[mivox]

I generally do my top header/navigation in one table, and use an entirely separate table for my 'real content,' set to the same width/alignment as the header table. That way, the cells for the top and midsection of the page don't need to line up with one another, but the tables themselves will line up. Looks like a single table, only with more layout flexibility.

[shuffler]

For me it comes down to the quantity of text and the size of the images:

600px width for not much text and 'normal' size graphics

720px for more text, larger graphics or left and right nav bars

percentage based for lots of text

[Brett_Tabke]

Well, if you have a larger monitor, 640 wide is starting to really appear dated. There is sooo much white space that the sites seem "small" and "contentless". Percentages work ok - not perfect, but ok.

[toolman]

I 've read somewhere before that you shouldn't run your text across the screen much wider than 450px. It becomes difficult for the reader to follow back and forth and they would probably feel like they were at Wimbledon. This is the reason newspapers and magazines use columns.

By following good design philosophy and "chunking" your information, you should be able to set the sidebars to px and let the columns in the middle float on %.

Creative use of white space will become the new, hot job opportunity in web design as we approach larger and larger screens.

[mivox]

With CSS, you can also specify a larger "line-height"... meaning there's more white space between the actual lines of text (for instance: set text height to 11px, and set line-height to 13px). It makes a wide chunk of text much more readable.

[toolman]

Good point Mivox
I never thought of it but yes you could actually spend a night and work out all the bugs and get the text positioning thing down pat and be ready to pull it out of the bag when you need it. Great idea.

[mivox]

I finally decided to buckle down and put some CSS to good use (I never learn anything new unless I actually have to use it for something! ;) ), so I'm redesigning my employer's entire site. I'm using a (validating!) combination of tables and CSS... but I'm using CSS for all the text formatting. It's very eye-opening, and not as hard as people make it sound!

[theperlyking]

The hardest thing about CSS is making it work cross platform (translation: Netscape is crap at CSS).
:(

[mivox]

Getting it to work in Netscape did take some extra time, but the only CSS I'm using is VERY basic positioning {position: *; left: *; top: *} and text specifications {font-size: *px; line-height: *px; font-family: *} As far as bold, italic, etc., I'm still just using <b> or <i> tags (shame, yes, but it works). Then I specify where to use the text styles with <div> tags:

<div id="regulartext">This is regular looking text</div>

Keeping to the very basics allows you to enjoy a lot of the CSS benefits (increased readability, fewer cross-platform text-size problems) without the Netscape support problems, as Netscape seems to support the above specifications in an external style sheet just fine.

There are a lot of great CSS conversations and tips to be found in our HTML forum [webmasterworld.com]... since this is definitely getting a *wee bit* OT for "Graphics" :)

Edited by: mivox

[theperlyking]

This is the graphics forum? :o

[mivox]

LOL...

[flashguy]

You can design it to fit any screen size.

It can be donne. You will need to use some tools.

Im doing a site right now, and they require that. To fit any screen size. Bc they found one site that does exactly that. No matter what screen res you have. it will fit perfectly.

Im going to use some javascript, css, xml and flash for the site.

Dont ever give up man. If some one says It cant be donne, well do it and show them you can do it.

cheers

[knighty]

we're not saying it cant be done - just that in some caes its not preferable.