Resolution Woes

[Phil]

I've done some Free-Lance web design in the past, but really none in the last couple of years. I'm looking to get back into it.
My question is what is the best resolution to design for? If I remember correctly, 800x600 was pretty standard.
Problem is, it seems to be a royal pain to design at that resolution.
Is this still the norm?

[Zero Angel]

Depends on who your target audience is. If you audience spends most of their time using e-mail and in chat rooms, chances are that they are not technically adept enough to change their resolutions higher then 800x600.

If you are designing a site for techies and content developers, its usually safe to develop at 1024x768. All other sites should be developed with 800x600 in mind.

Also keep in mind that not everyone views websites at fullscreen.

Ideally, you can develop a website so that it is compatible with an 800x600 resolution, without breaking its compatibility with larger resolutions or imposing a table-width limit for the entire page.

One way to do this is to make a resizable banner (like the one for this forum), fix your TOC size, and leave the content area resizable. Clever use of tables (and sometimes nested tables) is the key here.

[Phil]

If you audience spends most of their time using e-mail and in chat rooms, chances are that they are not technically adept enough to change their resolutions higher then 800x600. .......that's funny.

One way to do this is to make a resizable banner (like the one for this forum), fix your TOC size, and leave the content area resizable. Clever use of tables (and sometimes nested tables) is the key here.
I'm not familiar with this. I'd love to see an example. I looked in the source code, but wasn't sure of what I saw. By the way. what do you mean by "TOC" size?

[Zero Angel]

TOC usually means "table of contents" its a bunch of links that appear on the left side in most websites. A site that i developed the initial template and graphics for [ http://www.battlezonegame.com ], uses this design type.

Note that the person who took over development of the site screwed a few things up here and there, but the basic principle still exists.

[DCElliott]

Nice design, Zero. (I notice some under contruction stuff there, though, better crack the whip http://206.47.27.187/phpBB2/images/smiles/zzwhip.gif

You may want to check out design templates at glish.com and saila.com that use CSS positioning instead of tables. Tables tend to be very static or rigid with content while CSS allows greater flow of text. In either of those sites you can expand|contract your browser page and still see all the content. Both pages are completely readable at 640 but you can full size them on a 1280 screen and they use all the real estate.

THATS good coding.

[Phil]

Thanks,
But I still curious about making content "resizable".
Am I correct assuming it's done with pixels instead of percentages?

[Zero Angel]

Thanks for the CSS advice, DCElliot.

Phil, to make the content "resizable", you make the banner in two different table cells. The left side of the banner is aligned left, while the right side of the banner is aligned right. The background is applied using CSS.

If you set the TOC cell at a fixed size, the content area will automatically resize itself to fit the width of rest of the page.

Note that you should use 'nested tables' (tables within table cells), so that the TOC cell can have a different width then the left banner cell.


The structure would look something like this, but you would need to do a *lot* of tweaking to get the alignment right.
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Left banner image -->
</td>
<td>
<!-- Right banner image -->
</td>
</tr>
<tr>
<td colspan="2">

<table width="100%">
<tr><td width="140">
<!--- Table of contents code -->
</td>
<td>
<!-- Content area -->
</td></tr>
</table>

</td>
</tr>
</table>

The actual code would be more detailed for things such as alignment, but this code shows how the layout would look like.

[DCElliott]

Originally posted by Phil
Thanks,
But I still curious about making content "resizable".
Am I correct assuming it's done with pixels instead of percentages? The exact opposite, my friend. Here are a few lines of CSS code that define a three column page with a banner on top - a pretty standard setup:BODY { position: relative; min-width: 580px; width: 100%; margin: 0; padding: 0; }
#top { position: absolute; top: 0; left: 0; min-width: 580px; width: 100%; height: 120px; }
#left { position: absolute; top:130px; left: 0px; width: 19%; margin: 1% 1% 2% 0; }
#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 0 2% 1%; }
#middle { position: absolute; top:130px; left:20%; min-width: 320px; width: 58%; margin: 1% 1% 2%;}
The columns are assembled with a 20-60-20 percentage proportioning of left-middle-right. I have specified that the middle column can't get narrower than 320px. That means if someone sizes smaller than about 540px browser width, the middle column stops squishing and the adjacent columns start to slide over it.

You can create approximately the same effect with tables using:<TABLE>
<TR >
<TD WIDTH="20*">
Row 1 - Col 1
</TD>
<TD WIDTH="60*">
Row 1 - Col 2
</TD>
<TD WIDTH="20*">
Row 1 - Col 3
</TD>
</TR>
</TABLE>
What this does is proportion a table in 20-60-20% columns. The magic '*' after the width numbers tell the table model to use proportional columns.

I don't use tables for layout any more so I'm a bit rusty, but using a flexible approach is always preferable, and you can do it, even with tables.

[Phil]

Thanks for going into so much detail. I appreciate it.
It will take me a little looking into I'm afraid.

[Zero Angel]

I didn't know that there was such a thing as min-width.

Useful!

[DCElliott]

Try these references for CSS layouts:

http://www.webreference.com/authoring/style/sheets/layout/advanced/
http://www.meyerweb.com/eric/css/edge/
http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html?page=1#whatis (especially good for showing the difference between table-based and css-based structure (guess which one is easier to read???))
http://www.saila.com/usage/layouts/
http://www.westciv.com/style_master/academy/positioning_tutorial/index.html
http://www.imaginaryworld.net/alt.html
http://www.lakefx.nu/sitedesign.html

But the one I use and think is best of all: http://www.glish.com/css/7.asp

[Phil]

I have been using CSS in some simple ways, but I'd be the first to admit I could use some more Tutorialling. I'm going to look at those links you gave, D.C.
I'm going to be busy for the next few days, so I'll get to them when I can.
Thanks again.

Sorry, This was suppose to go in the "Resolution Woes" thread.

Hate it when I do that.

[Spock]

The exact opposite, my friend. Here are a few lines of CSS code that define a three column page with a banner on top - a pretty standard setup:BODY { position: relative; min-width: 580px; width: 100%; margin: 0; padding: 0; }
#top { position: absolute; top: 0; left: 0; min-width: 580px; width: 100%; height: 120px; }
#left { position: absolute; top:130px; left: 0px; width: 19%; margin: 1% 1% 2% 0; }
#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 0 2% 1%; }
#middle { position: absolute; top:130px; left:20%; min-width: 320px; width: 58%; margin: 1% 1% 2%;}
The columns are assembled with a 20-60-20 percentage proportioning of left-middle-right. I have specified that the middle column can't get narrower than 320px. That means if someone sizes smaller than about 540px browser width, the middle column stops squishing and the adjacent columns start to slide over it. ...

Sorry for reopening this topic but I had a question about your CSS. I have some existing CSS code that I added your code to as follows:

/* If you play with the scrollbar colors, remember to save what is here already just in case. Its fairly hard to get a good combo that doesn't make the scrollbar look flat. You can delete them all to get the standard browser scrollbar. These only work in Internet Explorer 5.5 and up and Galeon for Linux and make the whole style sheet technically (though not really) invalid according to the w3c standards */
body {
font-family: "verdana", sans-serif;
font-size: smaller;
color: #090161;
background-color: White;
scrollbar-face-color: #B2B2B2;
scrollbar-shadow-color: #C6C6C6;
scrollbar-3dlight-color: #b2b2b2;
scrollbar-darkshadow-color: #003963;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #013765;
position: relative; min-width: 580px; width: 100%; margin: 0; padding: 0;
}

/* Using the position option in the body, set for 3 variable columns with a banner. */
#top { position: absolute; top: 0; left: 0; min-width: 580px; width: 100%; height: 120px; }
#left { position: absolute; top:130px; left: 0px; width: 19%; margin: 1% 1% 2% 0; }
#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 0 2% 1%; }
#middle { position: absolute; top:130px; left:20%; min-width: 320px; width: 58%; margin: 1% 1% 2%;}

My question, how would I then use this in the actual html code?

[PsychoticDude85]

Eurgh, absolute positioning, hate the stuff (I prefer floats and padding methods). Anyways, you would do something like this:

<div id="top">
Whatever in the header <!-- If this is just text, a h1 is much better and more semantic than a div, but I don't know what you want -->
</div>

<div id="left">
<p>
This is the left column, this is 19% wide and fixed to the left edge of the browser.
</p>
</div>

<div id="middle">
<p>
This is the middle column, it is 58% wide, and fixed 20% from the left edge of the browser.
</p>
</div>

<div id="right">
<p>
This is the right column, it is 19% wide, and fixed 80% away from the left edge of the browser.
</p>
</div>

Personally, I prefer to keep to floats and padding, so you would float the left/right column, pad the middle and do what you like with the header because the columns will not be bothered by its height in the least. Though, you have to be careful sometimes with floats that you clear things that have to go below the floated content, but that's just practice.

An example of a liquid layout how I would do it (or at least how I would do it a while ago, I wouldn't float the main content now and I'd use HTML over XHTML): http://www.alex-elliott.co.uk/test/

[Spock]

...

An example of a liquid layout how I would do it (or at least how I would do it a while ago, I wouldn't float the main content now and I'd use HTML over XHTML)

Thank you for the reference. Is the code copyable from the site so I can look at it? I find I learn best from examples. :o

Your column example using the DIV tag is the way I present my website now except that the right column is the NavBar as I hate it when I try to print out a site only to get a NavBar on the left and half of what I want on the right. :mad: If someone tries to print a page of my website and they don't get the NavBar nothing is lost. :)

I have also been known to use tables for columnar display on occasion. :eek: I know it's not very well thought of but when I'm already using DIVs to define certain columns and I want different coulumns inside one of those DIVs ... :cons:

[PsychoticDude85]

Tables for tabular data is fine, just not for anything else. That would be unsemantic. If you are using tables, just make sure you're actually displaying a table and that you use the table heading tags, etc.

As to the navigation, I recommend using a print.css (using <link> with media="print") that sets all of the markup you do not want to display: none;

And, yes, you can download that code if you like.

[Spock]

I have a print.css on my site that attempts to format the page to the paper width. The only problem is that it doesn't know what to do with pictures. :(

The biggest problem with print.css is that it can only be used if it's on the site to be printed and you can access it. Most of the sites I wanted to print in the past either didn't have it or didn't advertise it. I have a link at the bottom of each of my pages just for printing.

[PsychoticDude85]

Well, that's their failure. Not yours.

If it comes to it you can always print a selection anyway, that would avoid the navigation etc of a remote website.

[Spock]

... If it comes to it you can always print a selection anyway ...

When I got my latest printer, it came with an optional toolbar for IE that forces any printed web page to fit on the printed page, so I don't have that problem any more. ;)