Photo site design: fixed size or flexible?

I think the crucial question is the text rather than the images. Lines of text longer than 500 pixels are very hard to read and people tend to skip them, so you want to design a site so that this can’t occur very easily (can be done with both fixed and flexible sites, but you need to consider a lot of different browser sizes). For a mostly photo site (without a lot of descriptive text), either fixed or flexible should work.

I see problems with both the examples – the first one doesn’t fit on the screen when the browser is sized at 800 by 600 (which a lot of people still have). The second one makes you scroll to see the pictures (at least at lower screen resolutions) – which means you don’t really see the pictures.

Flo

wrote in message

When designing a site consisting mostly of images, should the site be fixed size or flexible? From my understanding, a flexible design allows text to wrap and position according to the browser window size and resolution. This works well with pages with lots of text and small images. But if a web page’s main content is a large image, does flexible design make any sense?

There is a large image and a few thumbnails on each of the following two pages. I think the first one is fixed size, and the second one is flexible. Which do you consider a better design in terms of fixed size or flexible?

http://service.foliolink.com/Image.asp?ImageID=24717&api d=1&gpid=1&ipid=1&AKey=8V5M8Y3L

http://www.tommywrenn.com/people/index.htm

How do you design a fixed size site so that it will not display long lines of text?

I tend to agree with your comments about the two sites. I think the scrolling on the second site is a result of using frames, which I don’t like. The first site not fitting into a 800×600 browser window is more difficult to deal with. But at least there is only one frame to scroll. With most monitors at 17" and bigger, not sure if designing for a 800×600 window is still valid.

Can you suggest a few photo sites that are well designed? I kind of like how these two sites keep the thumbnails and a single enlarged image on the same page.

Flo Nelson wrote:

I think the crucial question is the text rather than the images. Lines of text longer than 500 pixels are very hard to read and people tend to skip them, so you want to design a site so that this can’t occur very easily (can be done with both fixed and flexible sites, but you need to consider a lot of different browser sizes). For a mostly photo site (without a lot of descriptive text), either fixed or flexible should work.
I see problems with both the examples – the first one doesn’t fit on the screen when the browser is sized at 800 by 600 (which a lot of people still have). The second one makes you scroll to see the pictures (at least at lower screen resolutions) – which means you don’t really see the pictures.
Flo

wrote in message

When designing a site consisting mostly of images, should the site be fixed size or flexible? From my understanding, a flexible design allows text to wrap and position according to the browser window size and resolution. This works well with pages with lots of text and small images. But if a web page’s main content is a large image, does flexible design make any sense?

There is a large image and a few thumbnails on each of the following two pages. I think the first one is fixed size, and the second one is flexible. Which do you consider a better design in terms of fixed size or flexible?

http://service.foliolink.com/Image.asp?ImageID=24717&api d=1&gpid=1&ipid=1&AKey=8V5M8Y3L

http://www.tommywrenn.com/people/index.htm

wrote:

How do you design a fixed size site so that it will not display long lines of text?

I tend to agree with your comments about the two sites. I think the scrolling on the second site is a result of using frames, which I don’t like. The first site not fitting into a 800×600 browser window is more difficult to deal with. But at least there is only one frame to scroll. With most monitors at 17" and bigger, not sure if designing for a 800×600 window is still valid.

Can you suggest a few photo sites that are well designed? I kind of like how these two sites keep the thumbnails and a single enlarged image on the same page.

If you fit the whole page into a table with one cell, you can give this table a fixed width.

—
Johan W. Elzenga johan<<at>>johanfoto.nl Editor / Photographer http://www.johanfoto.nl/

In article ,
writes:

… But if a web page’s main content is a large image, does flexible design make any sense?

Sure it does. Give the user a choice of image sizes.

—

Warren S. Sarle SAS Institute Inc. The opinions expressed here SAS Campus Drive are mine and not necessarily
(919) 677-8000 Cary, NC 27513, USA those of SAS Institute.

wrote in message

How do you design a fixed size site so that it will not display long lines of text?

You make the cell (if using tables) or the div (if using css) that contains the content text no larger than 500 px.

I tend to agree with your comments about the two sites. I think the scrolling on the second site is a result of using frames, which I don’t like. The first site not fitting into a 800×600 browser window is more difficult to deal with. But at least there is only one frame to scroll. With most monitors at 17" and bigger, not sure if designing for a 800×600 window is still valid.

I think the size you shoot for depends on your audience. I walk into offices all the time with 17 inch monitors set at 800 x 600. The last figures I saw were something like 40% (or perhaps more) still at that resolution. If you have a general audience, they’re not going to be happy scrolling sideways. But, for example, I’m designing a site for a photographer right now and his main audience is art directors at major magazines. We’re sizing it for 1152 x 864.

Can you suggest a few photo sites that are well designed? I kind of like how these two sites keep the thumbnails and a single enlarged image on the same page.

There are a lot of good sites out there. I agree with you about the thumbnails and the single large image. You’re welcome to take a look at the first comp for the site I’m designing –
http://www.anamidesigns.com/mark/color1.html. The portfolio menu item will have a dropdown with the names of his various gallerys. The thumbnails are all the same now as this is just to get an idea of what we want to do, but of course they’ll all be different photos in the final version – and we’ve decided to make them larger.

As I said, this is for a large monitor resolution, but you could do something similar and just size it down for your audience.

I think either of the 2 example sites could be tweaked to work with just minor adjustments.

Flo

I think the crucial question is the text rather than the images. Lines of text longer than 500 pixels are very hard to read and people tend to skip them, so you want to design a site so that this can’t occur very easily (can
be done with both fixed and flexible sites, but you need to consider a lot
of different browser sizes). For a mostly photo site (without a lot of descriptive text), either fixed or flexible should work.
I see problems with both the examples – the first one doesn’t fit on the screen when the browser is sized at 800 by 600 (which a lot of people still
have). The second one makes you scroll to see the pictures (at least at lower screen resolutions) – which means you don’t really see the pictures.

Flo

wrote in message

When designing a site consisting mostly of images, should the site be fixed size or flexible? From my understanding, a flexible design allows text to wrap and position according to the browser window size and resolution. This works well with pages with lots of text and small images. But if a web page’s main content is a large image, does flexible
design make any sense?

There is a large image and a few thumbnails on each of the following two
pages. I think the first one is fixed size, and the second one is flexible. Which do you consider a better design in terms of fixed size or flexible?

http://service.foliolink.com/Image.asp?ImageID=24717&api d=1&gpid=1&ipid=1&AKey=8V5M8Y3L

http://www.tommywrenn.com/people/index.htm

I don’t claim www.ellisisle.com is a well-designed site, but initially it was flexible. A viewer could drag the browser window to any size and the image would re-size with it.

There was lots of criticism about loss of image quality at various sizes and I was urged to change it to the fixed size it is today.

–David

wrote:

When designing a site consisting mostly of images, should the site be fixed size or flexible? From my understanding, a flexible design allows text to wrap and position according to the browser window size and resolution. This works well with pages with lots of text and small images. But if a web page’s main content is a large image, does flexible design make any sense?

There is a large image and a few thumbnails on each of the following two pages. I think the first one is fixed size, and the second one is flexible. Which do you consider a better design in terms of fixed size or flexible?

http://service.foliolink.com/Image.asp?ImageID=24717&api d=1&gpid=1&ipid=1&AKey=8V5M8Y3L

http://www.tommywrenn.com/people/index.htm

In your post to my thread "Photo site design: fixed size or flexible?", you mentioned that the layouts of the two example sites I sited can be done using either tables or divs. From my research, tables without css is (mis)used for layout purpose in the good old days, and divs with css is the preferred way these days. There seems to be strong opinions on both sides. Any truth to this? Which way is easier? Will tools like Dreamweaver make it even easier? Thanks.

wrote in message

In your post to my thread "Photo site design: fixed size or flexible?", you mentioned that the layouts of the two example sites I sited can be done using either tables or divs. From my research, tables without css is (mis)used for layout purpose in the good old days, and divs with css is the preferred way these days. There seems to be strong opinions on both sides. Any truth to this? Which way is easier? Will tools like Dreamweaver make it even easier? Thanks.

Css divs create the most accessible and logical code – if you look at a page coded in css, it’s much cleaner than the code for a table layout. However, since it’s relatively new, web designers and developers are still using both methods and good sites can be developed using either method.

I don’t really think one method is much easier than the other because for both you need to learn the tricks that make them work with different browsers and monitors.

I like the css method better (now that I have finally learned a lot of the tricks) because it’s generally easier to make significant changes to a css site and because they’re more easily made accessible.

The latest Dreamweaver version works really well with css.

Flo

Flo Nelson wrote:

wrote in message

In your post to my thread "Photo site design: fixed size or flexible?", you mentioned that the layouts of the two example sites I sited can be done using either tables or divs. From my research, tables without css is (mis)used for layout purpose in the good old days, and divs with css is the preferred way these days. There seems to be strong opinions on both sides. Any truth to this? Which way is easier? Will tools like Dreamweaver make it even easier? Thanks.

Css divs create the most accessible and logical code – if you look at a page coded in css, it’s much cleaner than the code for a table layout. However, since it’s relatively new, web designers and developers are still using both methods and good sites can be developed using either method.
I don’t really think one method is much easier than the other because for both you need to learn the tricks that make them work with different browsers and monitors.

I like the css method better (now that I have finally learned a lot of the tricks) because it’s generally easier to make significant changes to a css site and because they’re more easily made accessible.

The latest Dreamweaver version works really well with css.
Flo

Thanks for the response. I find that most web design books and tutorials focus more on how to code html/css at the lower level (i.e. tags, element positioning, etc.), and not enough on how to create a page layout or comp at the high level. To me, this is kind of backwards.

The one book that goes into page layout in more detail is "Professional Web Design: Techniques and Templates, 2nd Ed." by Eccher, etc. The authors seem to imply that using css divs for layouts is more difficult than using tables in html. Hence my question.

Are there other books or tutorials on how to create comps and page layouts? What other ngs or forums should I take my questions to? Don’t want to get too off topic here.

Thanks again.

wrote in message

The one book that goes into page layout in more detail is "Professional Web Design: Techniques and Templates, 2nd Ed." by Eccher, etc. The authors seem to imply that using css divs for layouts is more difficult than using tables in html. Hence my question.

I suspect that there isn’t all that much difference if you start cold. Most designers started out doing tables and over the years learned a lot of tricks that make them really work, so at this point tables seem easier. Learning something brand new is always harder. I’m just getting comfortable with it myself, but now I really like it. Getting really good tutorials makes a big difference in the learning curve. See below!

I also think it’s better not to be rigid either way – I don’t rule out using tables in certain situations.

Are there other books or tutorials on how to create comps and page layouts? What other ngs or forums should I take my questions to? Don’t want to get too off topic here.

Thanks again.

Couple of recommendations:
This site is great for getting a solid understanding of css and css positioning:
http://css.maxdesign.com.au/index.htm – look at the Selectutorial for an introduction and the Floatutorial for layout.

Also highly recommend http://www.projectseven.com/ – I bought one of their templates, Andersen-Jones, not to use as a template but to get their explanation of how to do layout with css. Learned more in a few hours with that than I had learned previously from several books on the subject. All their templates come with a detailed explanation of what they are doing.

Several good forums, but I would start with macromedia.dreamweaver at forums.macromedia.com.

hth,
Flo

Flo Nelson wrote:

wrote in message

The one book that goes into page layout in more detail is "Professional Web Design: Techniques and Templates, 2nd Ed." by Eccher, etc. The authors seem to imply that using css divs for layouts is more difficult than using tables in html. Hence my question.

I suspect that there isn’t all that much difference if you start cold. Most designers started out doing tables and over the years learned a lot of tricks that make them really work, so at this point tables seem easier. Learning something brand new is always harder. I’m just getting comfortable with it myself, but now I really like it. Getting really good tutorials makes a big difference in the learning curve. See below!
I also think it’s better not to be rigid either way – I don’t rule out using tables in certain situations.

Are there other books or tutorials on how to create comps and page layouts? What other ngs or forums should I take my questions to? Don’t want to get too off topic here.

Thanks again.

Couple of recommendations:
This site is great for getting a solid understanding of css and css positioning:
http://css.maxdesign.com.au/index.htm – look at the Selectutorial for an introduction and the Floatutorial for layout.

Also highly recommend http://www.projectseven.com/ – I bought one of their templates, Andersen-Jones, not to use as a template but to get their explanation of how to do layout with css. Learned more in a few hours with that than I had learned previously from several books on the subject. All their templates come with a detailed explanation of what they are doing.
Several good forums, but I would start with macromedia.dreamweaver at forums.macromedia.com.

hth,
Flo

The first site is fantastic, and will keep me busy for a while. I don’t own dreamweaver, but will check out the forum. Thank you so much for your help.