The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Reading a post by (thespian) in response to (Djsap) in the Site Critique forum prompts me to ask this question. I believe I am correct in saying that I should not have interrupted that thread unless I was prepared to offer a critique. The subject was a site designed with one table cell containing content that stretched to fit any resolution. Thespian said that he would leave the cell expandable and could offer a solution that would make the site look better in larger resolutions though no solution was outlined. Please. I want to hear more!

Basically, I want a table on my site that houses content and navigation, perhaps in three columns and I know how to set this up so there is one expandable cell for content. What I don't know is how to make it look good in large resolutions. How do I design to reach a happy medium? Would love to hear some tips, guidelines, table or navigation ideas from designers who design liquid/stretch sites.

I would also like to mention that the Site Critique section on this site is the best I have seen! The reviews are very professional, detailed, and honest. Those offering only half-hearted comments are prompted to do more complete reviews.

If you are talking about a typical left navbar with content on the right, I've found a happy medium by setting the content cell so that the text will expand or contract to fit the browser window.

For example, if you look at http://www.mmtglobal.com/birdy/new_subpage.html you will see that the text collapses to fit in the browser when viewed at 640x480. It expands to fill the browser when viewed at 800x600. However, when viewed at 1024 or above, the text will not expand any further.

I do this because the longer the line length is, the more difficult it becomes to read the text. I think that this is a good solution to making the design work in different resolutions.

In your HTML, do not specify the width attribute in the TABLE tag; place it in the TD tag on the cell containing the content, like so:

Thank you for taking time to reply. Your answer is not exactly what I am looking for. Perhaps I didn't explain myself that clearly. I know how to build a table with some column/s at a static fixed width, and other column/s expanding. What I don't know is how to do this so it looks good in larger resolutions. For example say I have a 3 column table with the left and right columns set at fixed pixel widths and the center column so it can expand. It may look great in 800x600 resolution and some scroll is acceptable in a lower resolution, but the text content in a larger resolution is not good at all. What tricks of the trade can be used to make it look good both ways? How do I reach that happy medium?

If you are talking about a typical left navbar with content on the right, I've found a happy medium by setting the content cell so that the text will expand or contract to fit the browser window.

For example, if you look at http://www.mmtglobal.com/birdy/new_subpage.html you will see that the text collapses to fit in the browser when viewed at 640x480. It expands to fill the browser when viewed at 800x600. However, when viewed at 1024 or above, the text will not expand any further.

I do this because the longer the line length is, the more difficult it becomes to read the text. I think that this is a good solution to making the design work in different resolutions.

In your HTML, do not specify the width attribute in the TABLE tag; place it in the TD tag on the cell containing the content, like so:

Appreciate the reply. Yes, this is what I am looking for, however, would love other ideas, tips such as ideas for a table layout that would accomodate 3 columns, left column for navigation, center column for text content, right column for subnavigation or other material. A design like this can get tricky in lower resolutions because it has the opposite effect from larger resolutions in that it creates too narrow a space for content. If you were designing a layout like this, would you set the left/right columns at a fixed width and leave the center column expandable. What width do you recommend as being the best choice for the left/right fixed width columns?

I know I am full of questions. Thank you so much. Would just love to hear as many ideas about this subject as I can. You can tell I am pretty new at this.

Let's go over a few points before I offer code samples to you. The key to creating sites that implement "variable width" is math. That's right.

1) Decide on the smallest resolution you are willing to design for. Unless your site needs a larger space, then there is no reason why you can't make your variable-width site fit inside a 640x480 window. It won't LOOK as good, but it won't break.

2) Then you need to figure what the widest point of your site will be. For example, while johntabita's site is a great example of a variable width site, it fails the 640x480 test (which might be intentional) because the header image(s) add up to around 646. The average available horizontal space in a 640x480 window is between 600-625. I personally design all of my sites for 800x600 but then I test them in a 640x480 window.

3) Begin your coding and keep in mind your implementaion, ie: how your elements will interact with each other. One tool I heartily recommend ANY (and ALL) web designer(s) get is a screen capture utility. I use on called WinGrab (link). It's free, and one of the most important tools I use, almost as important as Photoshop itself. I assemble the site in Photoshop, but some things are easier and faster to build in real HTML. So I build them in my text editor, take a screenshot and then import the screenshot into Photoshop for placement.

4) The most important thing is to understand how tagles and cells interact with each other. For example, Most of the sites I build have a "navbar" across the top. I would typically splo that into one table set to 100% width. Then I would create another table directly below it for the content. Then one more table for the footer. That way each table can have it's own "expansion" joint.

Here are a few examples of sites that I have done using variable width. The code is well commented and should be easily undestandable. Hope all this helped.

Thank you for your detailed reply. Your sites look absolutely great! I am going to study them more indepth when I can get a bit more time. Hope you don't mind my picking your sites apart! You mentioned that you like to design around seperate header/footer/main body, tables. My plan also is to make use of stacked tables.

Have you ever used a different layout (successfully) or can you think of another layout that works well to achieve a liquid design?

Just trying to brainstorm. Ideas, suggestions welcome from anyone with their 2 cents to add.

allie...thanks for the compliments. i take my job seriously...well...ok...not that seriously. I feel that if I am going to do this, I might as well be great at it. I will be the first to admit that while my sites are not the best looking, the code is world-class.

I can't wait to post the mockups for a site that I am working on at my day job.

I hate to say this, but while i feel it is important that a site doesn't break at large or small resolutions, I just ususally stick with designing for an 800x600 resolution. My desktop is set to 1280x1024 but I don't browse the web at much larger than 800x600 or 1024x768 just because too many sites look terrible. And if you think about it, to design a site that looks good at resolution A and resolution B when B is 2 or 3 times as big as A means that you're forfeiting too much in other design aspects, in my opinion. Good web designers will say that you should never exclude any audience, but I guess I'm just too concerned about other aspects to be a good web designer.

Thanks for your ideas. Had checked out your site earlier and was amazed at what you had done with the two skins. I will be happy just having one!

lynlimz,

No need for whoops. Took a look at your site and like it very much. Obviously you are a very talented designer. Just thought you were trying to tell me how to build tables and though I'm no expert, that wasn't exactly what I wanted to know.