SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    Southeast US
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thank you!

  2. #2
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm..Using Tables?
    If I got you right...here's what you should do.

    Have a table span 100%.
    Divide this table into 2 or 3 columns. whichever you need.

    for the cell that you need to be the same width in higher resolutions, create a tbale in it with the width as PIXEL.

    and you're done. no matter how igh the resolution, that table will neevr go beyond whats it supposed to be.

    Did i get you right on your query? I didn't read the post in teh site critque forum.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  3. #3
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,060
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Allie,

    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:

    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100">This is my nav bar cell</td>
    <td width="650">The text in this cell will expand/contract with browser window.</td>
    </tr>
    </table>

    You'll have to experiment with the width="650" to find the exact measurement that works with your layout.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    Southeast US
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lynlimz,

    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?

  5. #5
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,060
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Allie,

    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:

    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100">This is my nav bar cell</td>
    <td width="650">The text in this cell will expand/contract with browser window.</td>
    </tr>
    </table>

    You'll have to experiment with the width="650" to find the exact measurement that works with your layout.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    Southeast US
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    johntabita,

    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.

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    allie...

    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.

    www.bamm.com
    www.plusoneonline.com
    www.kbxl-kspd.com
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    Southeast US
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    creole,

    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.

  9. #9
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoops
    I guess not.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    You can see the existing one (which I had NOTHING to do with) at www.nashvillecvb.com

    Keep your eyes peeled to the Website Reviews forum in a few weeks as I will be posting JPGs of my proposed redesign there.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Hope that helps,
    Goof
    Nathan Rutman
    A slightly offbeat creative.

  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    goof...

    I finally checked out the site in your sig...

    fantastic...I am very impressed...

    I like the "change skins" button...pretty funny. Too bad you couldn't get it to do it without reloading the site.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2001
    Location
    Southeast US
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    goof,

    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.

  14. #14
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehehz..thanks allie.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •