Liquid Page Breakthrough

Discussion in 'HTML & Website Design' started by panner, Aug 30, 2005.

  1. #1
    If you want to see a true liquid web page take a look at the http:\\goldpanner.ca web site.

    First, pages automatically adjusts to a visitors screen resolution (800 - 1280).

    Then, if a browser window is less than 800 px wide, the text and graphic elements automatically resize to fit the space. ( this is not simple text reflowing - but true page resizing )
     
    panner, Aug 30, 2005 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #2
    It's funny when the page is narrow (and I do that sometimes) instead of being readable it becomes so teeny the page is worthless. I think in their effort to be truly liquid they threw the baby out with the bathwater!
     
    sarahk, Aug 31, 2005 IP
  3. fryman

    fryman Kiss my rep

    Messages:
    9,604
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    370
    #3
    Hey, that's a pretty cool feature! Does it require lots of coding to do it?
     
    fryman, Aug 31, 2005 IP
  4. panner

    panner Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    fryman; This technique depends on heavy Javascript coding (in fact there is very little traditional HTML code used). The pages and all content are build and rebuilt as they are opened or changed.

    And like sarahk say's, when the pages are resized too small they become unreadable. But then, if your browser screen was that small for a normal page, you'd see very little of the content. To see more you'd have to do lots of scrolling. This way you get to see the whole page and if something catches your eye you can resize the page large enough to read the content.

    In reality, I don't think many people would be surfing the web with their browser windows so small that they couldn't read the content.
     
    panner, Aug 31, 2005 IP
  5. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #5
    unfortunately it doesn't validate, or meet any accessability requirements :(
     
    stuw, Aug 31, 2005 IP
  6. YianG

    YianG Peon

    Messages:
    181
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Looks and feels fancy, but not very practical.
     
    YianG, Sep 5, 2005 IP
  7. T0PS3O

    T0PS3O Feel Good PLC

    Messages:
    13,219
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Didn't flow to it's max width on my 15" 1200 screen.
     
    T0PS3O, Sep 5, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Neat idea. I would never use it, though - there're too many folks out there who disable JS. This website comes back as an empty page in this case. Those who have small screen can simply adjust their font size. You can also do this with CSS - just set font-size to 8pt and the rest of a well-designed page will follow. Take this page for example:

    http://devedge-temp.mozilla.org/index_en.html

    If JS is enabled, you can change font size and some other properties (see in the top right corner). If JS is disbled, you can still navigate the website.

    J.D.
     
    J.D., Sep 5, 2005 IP
  9. aqi32

    aqi32 Active Member

    Messages:
    225
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #9
    did anyone look to see how the page degraded with JS turned off?
     
    aqi32, Sep 6, 2005 IP