Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Dec 2002
    Location
    Southern California
    Posts
    12
    Member #
    429

    Current Rating

    Visual Appeal:
    0.0 out of 5

    Accessibility:
    0.0 out of 5

    Website Speed:
    0.0 out of 5

    Compatibility:
    0.0 out of 5

    Overall Rating:
    0.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    Ok i have a dilemma here....

    I've been traditionally developing sites using "liquid" design as this is regarded as being the best way to make sites accomodate different resolutions. I use a graphic at 600px or less for the top banner/heading, and create a slice adjacent to it that is horiztonally identical. (think horizontal stripes). When someone has their resolution cranked up, the horizontal slice just expands to fit their screen. Usually the two images are blended together using photoshop in order to create the "liquid" illusion. Though they use a different method, "www.anandtech.com" is a good example of liquid design. It will expand or contract to fit any resolution without having hideous blank borders around the site.

    Now, the dilemma. I've been reading recently that perhaps liquid design isn't all that great after all. The reason? Long lines of text created by high resolutions on user computers makes paragraphs hard to read. (your eyes lose track of which line you're on.) And then I read an article at digital-web.com (http://www.digital-web.com/tutorials..._1999-10.shtml) that states that liquid design is the best, but you cannot have text span more than 4 inches wide, which, in my opinion, totally negates the advantages of a liquid design.

    If you're going to have huge blank spaces on each side of your text, you might as well do what everyone else is doing and make your site occupy a small 600 wide table on the left side of the screen. I like the way liquid HTML makes the site look like it was designed to fit your resolution, but they do have a point that text becomes harder to read. And what can you do? You can't put them in columns because they will be too small at 800x600 or smaller. Imagine 2" wide columns of text. They would be approximately one or two words each line. So the real question is what design YOU use, and why?

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Here I use a static layout; it gives me much better control over what the page looks like to everybody. I just make sure that it still fits within 800x600.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Member
    Join Date
    Dec 2002
    Posts
    38
    Member #
    412
    I usually use liquid design, I usually try and fill up the whole page, and not waste space on either side, so I make my headers expandable. On one of the last headers I did, I simply made a background image that expanded to fill the page, while the header itself stayed small. It looked pretty good.
    Though, I've gone static with my latest header design, and I think it looks pretty good. And as filburt said, better control over what it looks like for everybody.
    Visit Nahallan.com for game development, a webcomic, articles and more.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,482
    Member #
    425
    Liked
    2784 times
    I personally prefer liquid design because I find that the vast majority of people have a resolution somewhere between 640x480 and 1024x768. And while I personally maximize whatever I'm in at the time, people don't always do that. The people that have larger screen resolutions can always choose to resize their browser windows and the site copy will accommodate. The other advantage to liquid design is that provided you don't have a combined width (i.e. one or more graphics on the same horizontal plane) of more than 640 pixels, the page is printable as well.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member energizze's Avatar
    Join Date
    Oct 2002
    Posts
    260
    Member #
    238
    i tend to use parcially liquid design.

    what i meen by that. is i'll put a minimum shrink size on it. so if the window is less that 800x600 then the page stays at 800x600, but if it's bigger than 800x600 then it expands to fill the whole window.


    i generally don't use html %s when doing liquid designs. i tend to use javascript for liquid designs.

  7. #6
    Junior Member
    Join Date
    Dec 2002
    Location
    Southern California
    Posts
    12
    Member #
    429
    javascript? As in resize functions? Does that work well? Do you have any examples? I generally make a design in photoshop that's around 750pixels wide, and then create slices that will expand if a user has >800x600 resolution. I would design for 640x480 as well, but generally that's just not enough screen real estate for me to work with. Besides, only 4% of web users are still running 640x480.

    I agree with most of you that liquid design is one of the best overall solutions, but i do agree with others that the page often "looks" better when the width and design are static.

    One other option:
    Making a graphic design that spans to greater than 800 pixels wide but making the table beneath it positioned relatively. That way the user won't see horizontal scrollbars at lower resolutions, but at higher ones, they'll see more of the top banner image. Drawback: larger image = more bandwidth

  8. #7
    Senior Member Seldimi's Avatar
    Join Date
    Dec 2002
    Location
    Kozani, Greece
    Posts
    488
    Member #
    409
    Can sb explain the difference between liquid and static designs ? (Examples would be welcomed.)
    - Webmaster's Planet . Greek Vortal For Webmasters ...
    - MyPortFolio - View My Creations

  9. #8
    Junior Member
    Join Date
    Dec 2002
    Location
    Southern California
    Posts
    12
    Member #
    429
    webmasterplanet:

    click the link in my original post. It has an article that explains what liquid and static is. www.anandtech.com is liquid. Look at how it expands/contracts no matter what resolution you're running. Now look at yahoo.com or adobe.com. Notice that at anything higher than 800x600, it simply has a white space on the right side.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,482
    Member #
    425
    Liked
    2784 times
    webmaster: Static means that the site dimensions are set as absolute pixel widths (e.g. 800 px, 300 px), whereas liquid site dimensions are set in relative (percentage) terms (e.g. 50%, 100%).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Senior Member energizze's Avatar
    Join Date
    Oct 2002
    Posts
    260
    Member #
    238
    Originally posted by djfujiyama
    javascript? As in resize functions? Does that work well? Do you have any examples?

    if you look at my old business site: http://www.energizze2.co.uk/tl-tech/
    when you load it, it will expand to the width and height of your browser.
    if your window is less than 800x600 then it will stay at 800x600.

    if you then change the size of your window, then click refresh. it will resize to your window size again.



    ne one who wants the code for that just ask.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com