A problem for "fluid design" experts.

Discussion in 'HTML' started by David Segall, Jan 21, 2009.

  1. David Segall

    David Segall Guest

    I try to make my web site attractive for users who view the site over
    a "reasonable" range of view ports. I have arbitrarily decided on a
    minimum of 800x600 and a maximum of something over my own current
    maximum of 1688x1024. Each page of the site uses a background image as
    a heading to reflect the contents of the page and I created the image
    <http://profectus.com.au/images/films/filmshdg.jpg> as the heading for
    my latest page <http://films.profectus.com.au>.

    I carefully created the full size image so that the actors looked
    towards the centre of the page but as you can see when you reduce the
    view port to 800x600 the effect is lost and all the actors look to the
    right. How would you create something similar to my original page that
    does not depend on the browser's view port?
    David Segall, Jan 21, 2009
    #1
    1. Advertising

  2. On 2009-01-21, David Segall wrote:
    > I try to make my web site attractive for users who view the site over
    > a "reasonable" range of view ports. I have arbitrarily decided on a
    > minimum of 800x600 and a maximum of something over my own current
    > maximum of 1688x1024. Each page of the site uses a background image as
    > a heading to reflect the contents of the page and I created the image
    ><http://profectus.com.au/images/films/filmshdg.jpg> as the heading for
    > my latest page <http://films.profectus.com.au>.
    >
    > I carefully created the full size image so that the actors looked
    > towards the centre of the page but as you can see when you reduce the
    > view port to 800x600 the effect is lost and all the actors look to the
    > right. How would you create something similar to my original page that
    > does not depend on the browser's view port?


    background-position: center top;
    background-repeat: no-repeat;

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Jan 21, 2009
    #2
    1. Advertising

  3. David Segall

    Bergamot Guest

    Chris F.A. Johnson wrote:
    > On 2009-01-21, David Segall wrote:
    >> <http://profectus.com.au/images/films/filmshdg.jpg> as the heading for
    >> my latest page <http://films.profectus.com.au>.
    >>
    >> I carefully created the full size image so that the actors looked
    >> towards the centre of the page but as you can see when you reduce the
    >> view port to 800x600 the effect is lost and all the actors look to the
    >> right. How would you create something similar to my original page that
    >> does not depend on the browser's view port?

    >
    > background-position: center top;
    > background-repeat: no-repeat;


    I'd suggest background-repeat:repeat-x;

    --
    Berg
    Bergamot, Jan 21, 2009
    #3
  4. David Segall

    rf Guest

    "David Segall" <> wrote in message
    news:p...
    >I try to make my web site attractive for users who view the site over
    > a "reasonable" range of view ports. I have arbitrarily decided on a
    > minimum of 800x600 and a maximum of something over my own current
    > maximum of 1688x1024. Each page of the site uses a background image as
    > a heading to reflect the contents of the page and I created the image
    > <http://profectus.com.au/images/films/filmshdg.jpg> as the heading for
    > my latest page <http://films.profectus.com.au>.
    >
    > I carefully created the full size image so that the actors looked
    > towards the centre of the page


    I only saw the "effect" because you pointed it out and then I had to look
    carefully at the actors to determine where they are looking.

    > but as you can see when you reduce the
    > view port to 800x600 the effect is lost and all the actors look to the
    > right.


    Didn't pick that at all, except as per the comment above. Just a bunch of
    people I have seen in movies.

    Are you sure you are not trying to inject something into your viewers
    experience that you personally experience because that is what you were
    thinking when you produced the collage? The important thing is that the
    first few are looking to the right (as they should), except for Nicole who
    is sort of furtively glancing over her shoulder.

    > How would you create something similar to my original page that
    > does not depend on the browser's view port?


    I see nothing at all wrong with what you have, except that it repeats after
    some 1500 pixels or so. That, IMHO, is far worse then where those blokes and
    girls are looking :)

    What I find far worse is this thumbnails that have been reduced in size
    client side. The first one, 261x385 rescalsed to 100x140. Not only are you
    downloading an image far bigger than it nees to be (21KB, thumbnails that
    big should be about 5K) but you are destroying the aspect ration of the
    image. 261/100*140 == 365, not 385.
    rf, Jan 22, 2009
    #4
  5. On Jan 21, 9:37 am, David Segall <> wrote:
    > I try to make my web site attractive for users who view the site over
    > a "reasonable" range of view ports.


    You have failed. The site looks amateurish at best. The color scheme
    is horrendous. The layout completely sucks as you force me to adjust
    the size of my browser window to make the page readable. (Flexible
    width sucks for those that browse full screen). If I were looking for
    movie sites and came across yours I would imediatally leave because I
    would consider the quality of the content matched the quality of the
    site. And the quality of your site does not come across as
    "professional" It comes across as a personal website created by some
    highschool kid.

    Please note, your site may validate and work perfectly on every
    browser in the world, but if I were looking for movie sites and came
    across yours I would imediatally leave because it is sub par in my
    opinion.

    I am not trying to be mean. I am just stating my opinion that's all.
    Travis Newbury, Jan 22, 2009
    #5
  6. David Segall

    David Segall Guest

    Travis Newbury <> wrote:

    >On Jan 21, 9:37 am, David Segall <> wrote:
    >> I try to make my web site attractive for users who view the site over
    >> a "reasonable" range of view ports.

    >
    >You have failed. The site looks amateurish at best. The color scheme
    >is horrendous. The layout completely sucks as you force me to adjust
    >the size of my browser window to make the page readable. (Flexible
    >width sucks for those that browse full screen). If I were looking for
    >movie sites and came across yours I would imediatally leave because I
    >would consider the quality of the content matched the quality of the
    >site. And the quality of your site does not come across as
    >"professional" It comes across as a personal website created by some
    >highschool kid.
    >
    >Please note, your site may validate and work perfectly on every
    >browser in the world, but if I were looking for movie sites and came
    >across yours I would imediatally leave because it is sub par in my
    >opinion.
    >
    >I am not trying to be mean. I am just stating my opinion that's all.
    David Segall, Jan 22, 2009
    #6
  7. David Segall

    David Segall Guest

    Travis Newbury <> wrote:

    >On Jan 21, 9:37 am, David Segall <> wrote:
    >> I try to make my web site attractive for users who view the site over
    >> a "reasonable" range of view ports.

    >
    >You have failed. The site looks amateurish at best. The color scheme
    >is horrendous. The layout completely sucks as you force me to adjust
    >the size of my browser window to make the page readable. (Flexible
    >width sucks for those that browse full screen). If I were looking for
    >movie sites and came across yours I would imediatally leave because I
    >would consider the quality of the content matched the quality of the
    >site. And the quality of your site does not come across as
    >"professional" It comes across as a personal website created by some
    >highschool kid.
    >
    >Please note, your site may validate and work perfectly on every
    >browser in the world, but if I were looking for movie sites and came
    >across yours I would imediatally leave because it is sub par in my
    >opinion.
    >
    >I am not trying to be mean. I am just stating my opinion that's all.

    Why?
    David Segall, Jan 22, 2009
    #7
  8. David Segall wrote:

    > my latest page <http://films.profectus.com.au>.


    Learn how to make thumbnails. This is not the way:

    http://www.profectus.com.au/images/films/its_a_free_world.jpg
    70.05 KB (71,727 bytes)
    511px × 755px (scaled to 100px × 140px)

    Do you need some advice on finding an image editor?

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Jan 22, 2009
    #8
  9. David Segall wrote:

    > Travis Newbury <> wrote:
    >>I am not trying to be mean. I am just stating my opinion that's all.

    >
    > Why?


    Seemingly, because you asked for opinions... :-/

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Jan 22, 2009
    #9
  10. David Segall

    David Segall Guest

    "Beauregard T. Shagnasty" <> wrote:

    >David Segall wrote:
    >
    >> Travis Newbury <> wrote:
    >>>I am not trying to be mean. I am just stating my opinion that's all.

    >>
    >> Why?

    >
    >Seemingly, because you asked for opinions... :-/

    No, I asked "fluid design experts" for help in solving a specific
    problem. I was rewarded by a solution - thanks Chris and Bergamot.
    David Segall, Jan 23, 2009
    #10
  11. David Segall

    Neredbojias Guest

    On 22 Jan 2009, Travis Newbury <> wrote:

    > On Jan 21, 9:37 am, David Segall <> wrote:
    >> I try to make my web site attractive for users who view the site over
    >> a "reasonable" range of view ports.

    >
    > You have failed. The site looks amateurish at best. The color scheme
    > is horrendous. The layout completely sucks as you force me to adjust
    > the size of my browser window to make the page readable. (Flexible
    > width sucks for those that browse full screen). If I were looking for
    > movie sites and came across yours I would imediatally leave because I
    > would consider the quality of the content matched the quality of the
    > site. And the quality of your site does not come across as
    > "professional" It comes across as a personal website created by some
    > highschool kid.
    >
    > Please note, your site may validate and work perfectly on every
    > browser in the world, but if I were looking for movie sites and came
    > across yours I would imediatally leave because it is sub par in my
    > opinion.
    >
    > I am not trying to be mean. I am just stating my opinion that's all.


    Uh, yeah, but what kind of rubbish is "Flexible width sucks for those that
    browse full screen"? In the first place, fullscreen is included in the
    concept of flexible width, and in the second, your "fullscreen" may be my
    merely 3/4-open browser.

    Good flexible-width design encompasses all widths.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    The road to Heaven is paved with bad intentions.
    Neredbojias, Jan 23, 2009
    #11
  12. On Jan 23, 12:35 am, Neredbojias <> wrote:
    > > (Flexible
    > > width sucks for those that browse full screen).

    > Uh, yeah, but what kind of rubbish is "Flexible width sucks for those that
    > browse full screen"?  In the first place, fullscreen is included in the
    > concept of flexible width, and in the second, your "fullscreen" may be my
    > merely 3/4-open browser.


    To me (hence the "opinion" part) flexible width designs are usually
    impossible to read with my setup and the browser full screen. So if I
    want to enjoy a flexible width site I usually have to re-size my
    browser so the width of the text is easier to read.

    Setting up a personal max width does not help as it can screw up the
    non flex width sites if their width is greater than the max width I
    choose.

    So, I stand by my opinion that Flexible width looks like hell on my
    browser when it is set up the way I want it set up.

    > Good flexible-width design encompasses all widths.


    Encompassing and being readable are two different things.
    Travis Newbury, Jan 23, 2009
    #12
  13. On Jan 22, 9:44 pm, David Segall <> wrote:
    > >> Travis Newbury <> wrote:
    > >>>I am not trying to be mean.  I am just stating my opinion that's all..
    > >> Why?

    > >Seemingly, because you asked for opinions...  :-/

    > No, I asked "fluid design experts" for help in solving a specific
    > problem. I was rewarded by a solution - thanks Chris and Bergamot.


    So now you have solved your flexible width problem, but the page still
    looks amateurish. Opinions flow free in usenet.
    Travis Newbury, Jan 23, 2009
    #13
  14. Beauregard T. Shagnasty wrote:

    > David Segall wrote:
    >> my latest page <http://films.profectus.com.au>.

    >
    > Learn how to make thumbnails. This is not the way: ...


    I suppose you haven't had time yet to address the thumbnail issue. I
    understand that it takes time.

    You may also want to fix your favicon graphic.

    http://www.profectus.com.au/images/Favicon.ICO
    9.08 KB (9,294 bytes)
    96px × 76px

    is not made to any sort of favicon standard that I am aware of. They
    should be 16px × 16px, or 32px × 32px
    See: http://favicon.com/ and google for more.

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Jan 23, 2009
    #14
  15. David Segall

    Bergamot Guest

    Travis Newbury wrote:
    >
    > To me (hence the "opinion" part) flexible width designs are usually
    > impossible to read with my setup and the browser full screen.


    Flexible width does not have to mean full screen. Most sites I construct
    use a flexible width combined with carefully chosen max-width values. If
    it's primarily text content, max-width may be in ems. If it's more
    heavily graphical content, it may be px. Sometimes a min-width is
    desirable as well, but more often not.

    > So if I
    > want to enjoy a flexible width site I usually have to re-size my
    > browser so the width of the text is easier to read.


    You shouldn't have to do that and I'd blame the designer for going
    overboard. I tend to have the reverse problem - fixed width sites that
    are too wide for my preferred window size.

    > Setting up a personal max width does not help as it can screw up the
    > non flex width sites if their width is greater than the max width I
    > choose.


    Try limiting it to just paragraphs rather than a whole page.

    --
    Berg
    Bergamot, Jan 23, 2009
    #15
  16. David Segall

    Neredbojias Guest

    On 23 Jan 2009, Travis Newbury <> wrote:

    > On Jan 23, 12:35 am, Neredbojias <> wrote:
    >> > (Flexible
    >> > width sucks for those that browse full screen).

    >> Uh, yeah, but what kind of rubbish is "Flexible width sucks for
    >> those tha

    > t
    >> browse full screen"?  In the first place, fullscreen is included in
    >> the concept of flexible width, and in the second, your "fullscreen"
    >> may be my merely 3/4-open browser.

    >
    > To me (hence the "opinion" part) flexible width designs are usually
    > impossible to read with my setup and the browser full screen. So if
    > I want to enjoy a flexible width site I usually have to re-size my
    > browser so the width of the text is easier to read.
    >
    > Setting up a personal max width does not help as it can screw up the
    > non flex width sites if their width is greater than the max width I
    > choose.
    >
    > So, I stand by my opinion that Flexible width looks like hell on my
    > browser when it is set up the way I want it set up.
    >
    >> Good flexible-width design encompasses all widths.

    >
    > Encompassing and being readable are two different things.


    I agree that you shouldn't have to set a personal max-width, but even
    if your browser is 10,000 px across at full screen, a decent
    flexible-width design should be decently-appearing, either through the
    use of a page-styled max-width (generally with less content) or other
    design management. 200 thumbs should be easily "readable" on even the
    widest screens. Text may be a different matter if extensive, but that
    could be "maxed" separately as needed. Some of the newer all-Flash
    movie sites, while inelegantly disconcerting in other respects, are
    functionally very fluid and operable in that respect.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    The road to Heaven is paved with bad intentions.
    Neredbojias, Jan 23, 2009
    #16
  17. David Segall

    David Segall Guest

    Ed Mullen <> wrote:

    >David Segall wrote:
    >> I try to make my web site attractive for users who view the site over
    >> a "reasonable" range of view ports. I have arbitrarily decided on a
    >> minimum of 800x600 and a maximum of something over my own current
    >> maximum of 1688x1024. Each page of the site uses a background image as
    >> a heading to reflect the contents of the page and I created the image
    >> <http://profectus.com.au/images/films/filmshdg.jpg> as the heading for
    >> my latest page <http://films.profectus.com.au>.
    >>
    >> I carefully created the full size image so that the actors looked
    >> towards the centre of the page but as you can see when you reduce the
    >> view port to 800x600 the effect is lost and all the actors look to the
    >> right. How would you create something similar to my original page that
    >> does not depend on the browser's view port?

    >
    >The top image exceeds my viewport width (1280 x 1024 res, browser
    >maximized but with a sidebar) and there is no horizontal scroll bar. I
    >didn't realize there were more pictures until I closed my sidebar. And
    >it appears that there are still more photos I can't see.

    You are correct but that is what I intended. I deliberately use a
    background image to introduce the page because it will be truncated or
    repeated to fill the user's view port. I think that displaying the
    entire image would break the principles of fluid design. I agree that
    some visitors might want to see and/or identify all the actors so I
    provided a link on the page for the purpose.

    What do you think I should have done given that I want a heading
    image? Some time ago I asked for, and received, advice from this group
    <http://groups.google.com.au/group/alt.html/browse_thread/thread/9a04999d23fd617a>.
    Nik Coughlin produced a web page <http://nrkn.com/backgroundWidth/>
    illustrating several other techniques. I decided on the technique I
    used on the film page although I have not yet implemented it on all
    pages.
    David Segall, Jan 24, 2009
    #17
  18. David Segall

    David Segall Guest

    "rf" <> wrote:

    >I see nothing at all wrong with what you have,

    I wanted to fix a problem that _I_ have with the image. Both our
    visitor sample sizes are too small to judge whether the problem is
    significant.
    > except that it repeats after
    >some 1500 pixels or so. That, IMHO, is far worse then where those blokes and
    >girls are looking :)

    Anybody that has the luxury of a monitor capable of a display around
    2000 pixels wide deserves to suffer a little :)
    >
    >What I find far worse is this thumbnails that have been reduced in size
    >client side. The first one, 261x385 rescalsed to 100x140. Not only are you
    >downloading an image far bigger than it nees to be (21KB, thumbnails that
    >big should be about 5K) but you are destroying the aspect ration of the
    >image. 261/100*140 == 365, not 385.

    Yes, I get the message and I promise I will fix it as soon as I have
    completed my 2006-2007 tax return which is currently my most pressing
    task!
    David Segall, Jan 24, 2009
    #18
  19. David Segall

    David Segall Guest

    Travis Newbury <> wrote:

    >On Jan 22, 9:44 pm, David Segall <> wrote:
    >> >> Travis Newbury <> wrote:
    >> >>>I am not trying to be mean.  I am just stating my opinion that's all.
    >> >> Why?
    >> >Seemingly, because you asked for opinions...  :-/

    >> No, I asked "fluid design experts" for help in solving a specific
    >> problem. I was rewarded by a solution - thanks Chris and Bergamot.

    >
    >So now you have solved your flexible width problem, but the page still
    >looks amateurish. Opinions flow free in usenet.

    They do and I subscribe to some .politics groups where I am
    unsurprised by posts that tell me that 911 was a "false flag" attack
    by the Israelis. However, in groups like alt.html that is populated by
    a number of experts in the field, I expect a more reasoned post than
    "looks amateurish".
    David Segall, Jan 24, 2009
    #19
  20. On Jan 24, 9:06 am, David Segall <> wrote:
    > I expect a more reasoned post than
    > "looks amateurish".  


    If you read my earlier post I detailed why it looked amateurish. It
    was you layout and color scheme that did it for me. Keeping the
    layout bland may have been your goal, and if it was then I
    congratulate you as you did achieve bland.

    Look at your site, then virtually ANY successful movie site. Notice
    something different?

    Hey, your site is as good as most on the web. Probably better because
    you try to validate. But IMHO bland design = bland content. You can
    serve a piece of steak on a gold place or you can serve the same piece
    of steak on a turd. Same steak, but the one on the turd is less
    appealing.
    Travis Newbury, Jan 24, 2009
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David F. Skoll
    Replies:
    2
    Views:
    865
    David F. Skoll
    Nov 14, 2003
  2. Andrew Thompson
    Replies:
    4
    Views:
    311
    Andrew Thompson
    Jan 11, 2004
  3. Replies:
    11
    Views:
    2,392
    =?iso-8859-1?q?Jo=E3o_Ferreira_(CSW)?=
    Oct 6, 2005
  4. Luigi Donatello Asero

    Size of a table in a fluid design

    Luigi Donatello Asero, Oct 18, 2004, in forum: HTML
    Replies:
    3
    Views:
    857
  5. Luigi Donatello Asero

    Fluid design

    Luigi Donatello Asero, Aug 16, 2006, in forum: HTML
    Replies:
    6
    Views:
    540
    Joel Shepherd
    Aug 17, 2006
Loading...

Share This Page