Good and bad web gallery designs

[Chris_Brown]

I do tend to use big JPEG files for quality, but that's probably more wishful than actual - I need to revisit that aspect. It's depressing when one can see the 13"x19" 17MPixel fine-art print next to the anemic 1024x768 web image ...[{POST_SNAPBACK}][/a]

Interacting with a web gallery will never be like interacting with a printed portfolio or hardbound book. Comparing the differences in viewing experience is like comparing apples and oranges. The best solution is to target an image for best viewing results of that media, whether it be a monitor or paper.

The balance that ChrisT is trying to point out (I think) is between size and loading times. Smaller files load much faster, but larger files improve viewer experience with better details. Where do you balance the two? That's up to you.

There will never be an experience on the web like viewing a 12"x18" print in hand. The best solution you can achieve is one that wraps your photography & art into a web site that enhances your work and adds to the viewers' experience. I don't mean to simply choose the "right" photos, but to choose the right background colors, fonts, font sizes, link styles & navigation points that will make a complete presentation of your work and you.

On a technical note (and you may know this already), the pixel pitch of modern monitors is 75 - 100 ppi. Not very much compared to an inkjet print or a lithograph. The resolution of an image in your gallery, as set in Photoshop under "Image Size", should not be higher than this otherwise your viewers will run into problems, the worst being they must use scroll bars to see all of your image. This is what happens [a href=\"http://improbablystructuredlayers.net/]on DJGarcia's gallery page.[/url] Not the best viewing experience.

For example, use "pixel dimensions" not "document size" when sizing an image. Don't set a web gallery image to 5"x7" @ 300 ppi. Use the pixel dimensions and set it to 525 x 400 pixels @ 75 ppi. Ignore the "inches" because different monitor brands/models have different pixel resolutions.

I will also point out that The International Color Consortium has created a new sRGB profile to accommodate better perceptual rendering. Although the visual differences are very subtle, I recommend embedding this new profile in all your gallery images for more accurate color reproduction.

This reminds me. On the Mac, the default browser, Safari, is ICC savvy and can properly read embedded profiles in JPEG images. This then displays the images with better color. Is Microsoft's Internet Explorer ICC savvy? Are there other browsers that are ICC-savvy?

[Chris_T]

Chris I will definitely check in to the file size on the home page as that one may have been dragged on in a hurry from my computer desktop without running through Photoshop's "save for web" feature, which I do with almost all the images on the site. 

I save in srgb/8bit/72dpi/648 pixels on the long side (for the most part) and then "save for web" at "high" quality through Photoshop. While this does result in files that a larger than they could be, I have primarily designed the web site for faster connections because this gives me better quality in these small jpgs as I do so many images that have very fine detail that goes to mush if I compress too much.

I stand corrected. That image is indeed 8bit, and 24bit per pixel. But there is a "Cinema..." profile embedded. Quite sure that's NOT intended. Perhaps the file size is due to not compressed sufficiently?

A later post by Chris Brown has it right about print/web image difference. See my reply there.

About stealiing of my images I have taken the philosophy that I'm not going to get "bent out of shape" about it if it happens....life is too short and already too complex for me to worry about someone making a print from an 800k image file they took off my site.  While it wouldn't exactly please me, I know what kind of print I can make from that sized file and it "ain't much". 

That's how I feel about web images. But then why implement right_click/save_image to save only a transparent file?

[Chris_T]

Hmmm, quicktime needed to the workshop page. now I'm stumped.  unless i'ts to play the optional selection of music, I don't know.!! Didn't think one needed quicktime to play music.  will look into this, thanks, Eleanor

Certainly curious. Who is your web designer? Perhaps time to go to the source.

Another thing I learned for my site is to take a minimalist approach: ONLY implement what I need, and avoid ALL bells and whistles like plugins, etc.

[Chris_T]

Thanks for the comments and the book recommendation, Chris. I do have to say dial-up support is not high on my list of priorities though I do try to not be inefficient. Time to upgrade that line!

Yeap, an upgrade is needed for myself. But I will design my site so that dial up users can access it easily. They still make up a LARGE percentage of surfers.

I do tend to use big JPEG files for quality, but that's probably more wishful than actual - I need to revisit that aspect. It's depressing when one can see the 13"x19" 17MPixel fine-art print next to the anemic 1024x768 web image ...

Chris Brown is right on about print/web difference.

Any navigational improvement tips will be appreciated, as I'm contemplating a redesign soon.

With my slow connection and your large files, I can't go through your pages easily to comment further. At the risk of sounding harsh, your site, compared to those discussed in this thread, can use a complete redesign. For navigation, read the Krug book and light bulbs will come on. For someone who use sophisticated photo gears to capture great images, it would make sense to learn how to display them well.

[Chris_T]

Interacting with a web gallery will never be like interacting with a printed portfolio or hardbound book. Comparing the differences in viewing experience is like comparing apples and oranges. The best solution is to target an image for best viewing results of that media, whether it be a monitor or paper.

The balance that ChrisT is trying to point out (I think) is between size and loading times. Smaller files load much faster, but larger files improve viewer experience with better details. Where do you balance the two? That's up to you.

There will never be an experience on the web like viewing a 12"x18" print in hand. The best solution you can achieve is one that wraps your photography & art into a web site that enhances your work and adds to the viewers' experience. I don't mean to simply choose the "right" photos, but to choose the right background colors, fonts, font sizes, link styles & navigation points that will make a complete presentation of your work and you.

On a technical note (and you may know this already), the pixel pitch of modern monitors is 75 - 100 ppi. Not very much compared to an inkjet print or a lithograph. The resolution of an image in your gallery, as set in Photoshop under "Image Size", should not be higher than this otherwise your viewers will run into problems, the worst being they must use scroll bas to see all of your image. This is what happens on DJGarcia's gallery page. Not the best viewing experience.

For example, use "pixel dimensions" not "document size" when sizing an image. Don't set a web gallery image to 5"x7" @ 300 ppi. Use the pixel dimensions and set it to 525 x 400 pixels @ 75 ppi. Ignore the "inches" because different monitor brands/models have different pixel resolutions.

I will also point out that The International Color Consortium has created a new sRGB profile to accommodate better perceptual rendering. Although the visual differences are very subtle, I recommend embedding this new profile in all your gallery images for more accurate color reproduction.

This reminds me. On the Mac, the default browser, Safari, is ICC savvy and can properly read embedded profiles in JPEG images. This then displays the images with better color. Is Microsoft's Internet Explorer ICC savvy? Are there other browsers that are ICC-savvy?
[a href=\"index.php?act=findpost&pid=94070\"][{POST_SNAPBACK}][/a]

Very well said, Chris.

Aside from what you touched on, I will also add that viewers' viewing conditions vary drastically and are very different from your own. As an image creator, your monitor is likely to be huge, CRT, high resolution, calibrated, viewed in a certain color space, and in the dark. Missing a few of these, your images will appear very differently to a viewer.

Many unestablished photogs put up sites with the intent of selling prints, and I doubt that many are successful. Buyers who know the print/web difference would question what the prints would look like. Buyers who don't may be rudely surprised when they see the prints are nowhere near the web images. They certainly will not be repeat customers.

[eleanorbrown]

Because I have no idea how that happened!  I just dragged my image file from my computer into iWeb home page and put a decorative border around it!  How and why iWeb did that is literally beyond me!! eleanor

That's how I feel about web images. But then why implement right_click/save_image to save only a transparent file?
[a href=\"index.php?act=findpost&pid=94075\"][{POST_SNAPBACK}][/a]

[djgarcia]

Yeap, an upgrade is needed for myself. But I will design my site so that dial up users can access it easily. They still make up a LARGE percentage of surfers.
Chris Brown is right on about print/web difference.
With my slow connection and your large files, I can't go through your pages easily to comment further. At the risk of sounding harsh, your site, compared to those discussed in this thread, can use a complete redesign. For navigation, read the Krug book and light bulbs will come on. For someone who use sophisticated photo gears to capture great images, it would make sense to learn how to display them well.[a href=\"index.php?act=findpost&pid=94079\"][{POST_SNAPBACK}][/a]

Interacting with a web gallery will never be like interacting with a printed portfolio or hardbound book. Comparing the differences in viewing experience is like comparing apples and oranges. The best solution is to target an image for best viewing results of that media, whether it be a monitor or paper.
[a href=\"index.php?act=findpost&pid=94070\"][{POST_SNAPBACK}][/a]

I will definitely look into the image size. Just proves bigger is not always better. I have to admit my target audience so far has not been the public but my friends and acquaintances. Time to prepare to go global ... Thanks for all the comments!

[Chris_Brown]

I just dragged my image file from my computer into iWeb home page and put a decorative border around it!  How and why iWeb did that is literally beyond me!!
[{POST_SNAPBACK}][/a]

Before you drag & drop into iWeb, you should save the JPEG in final form with the embedded sRGB color profile.

Using Photoshop, here's a good sequence to try:

• Process the raw camera file into a TIFF file with your preferred ICC workspace embedded (e.g., Adobe '98, ProPhoto, Joseph Holmes, etc.).
• Retouch as needed & preferred, then save as PSD (to save on disk space when using Layers).
• Flatten image and convert to [a href=\"http://www.color.org/srgbprofiles.html]the sRGB profile with BPC.[/url]
• Resize to your preferred image size. Use pixel dimensions, not inches, when calculating final size. Make sure "Bicubic Sharper" is selected as your interpolation algorithm.
• Save as JPEG with the sRGB profile embedded. Close file.
• Open iWeb and insert file where needed. If you drag & drop an opened image, the program may be converting the image on the fly to your monitor colorspace.

If you'r curious about the sRGB colorspace and why I recommend it for web use, read this.

[Chris_Brown]

Aside from what you touched on, I will also add that viewers' viewing conditions vary drastically and are very different from your own. As an image creator, your monitor is likely to be huge, CRT, high resolution, calibrated, viewed in a certain color space, and in the dark. Missing a few of these, your images will appear very differently to a viewer.[a href=\"index.php?act=findpost&pid=94082\"][{POST_SNAPBACK}][/a]

I'm not always at my retouching station (thank God), and I surf the web more with my Mac laptop than any other 'puter. That's why I asked about ICC-savvy web browsers. Safari implements it well and gives acceptable gallery representations. The weak link is my laptop display. Its Delta E is greater than any other monitor I own. That's still better than a browser that doesn't recognize profiles.

My target audence (ad agencies, graphic designers, corp. marketing managers) is never in those kinds of viewing conditions either. The only way to assist in their viewing experience is with embedded ICC profiles.

[Chris_Brown]

What do you all think of this portfolio presentation?

ChrisT, does it load quickly for you?

[brianchapman]

Chris,

I am quite surprised that you find it difficult to control the space size. From my reading, if the page is laid out in css blocks, controlling the spacing within each block or between blocks should not be that big a deal.

That's what I thought as well!  When I put borders around the different css elements on the page I don't see anything that is pushing the links down further but for some reason they still sink.

How to deal with different monitor/widow sizes and resolutions at the viewers' end is an important consideration. I would like to know how this approach work, and what are the pros and cons. Please keep us updated on your findings.
[{POST_SNAPBACK}][/a]

I realized that while I was talking about the benefits of switching stylesheets based on browser window size that my own site wasn't actually doing it!  I had broken the switching by renaming one of the stylesheets...argh!  Anyway, it's working now - it bases the different sizes on browser width of 1240 - above that you get the larger version, below you get the smaller.  The only real changes are in the height of the header (and header images) but of course it would be possible to do a lot more if necessary.  

The technique is from a tutorial at [a href=\"http://particletree.com/features/dynamic-resolution-dependent-layouts/]Particletree[/url] which I minimally modified to work within wordpress which I am using to run my site.  I would give more detail but the tutorial pretty much covers everything necessary.  If anyone is interested in trying this out I'm happy to help if you run in to problems (I should say 'happy to TRY to help')!  

Brian
http://www.brianchapmanphotography.com

[Chris_T]

I will definitely look into the image size. Just proves bigger is not always better. I have to admit my target audience so far has not been the public but my friends and acquaintances. Time to prepare to go global ... Thanks for all the comments!
[a href=\"index.php?act=findpost&pid=94122\"][{POST_SNAPBACK}][/a]

I'm in the same boat. I have a template based site which I only dare sharing with my family and friends. For a wider audience site, I'm paying a lot more attention. Perhaps too much. <g>

[Chris_T]

Before you drag & drop into iWeb, you should save the JPEG in final form with the embedded sRGB color profile.

Using Photoshop, here's a good sequence to try:

• Process the raw camera file into a TIFF file with your preferred ICC workspace embedded (e.g., Adobe '98, ProPhoto, Joseph Holmes, etc.).
  
• Retouch as needed & preferred, then save as PSD (to save on disk space when using Layers).
  
• Flatten image and convert to the sRGB profile with BPC.
  
• Resize to your preferred image size. Use pixel dimensions, not inches, when calculating final size. Make sure "Bicubic Sharper" is selected as your interpolation algorithm.
  
• Save as JPEG with the sRGB profile embedded. Close file.
  
• Open iWeb and insert file where needed. If you drag & drop an opened image, the program may be converting the image on the fly to your monitor colorspace.

If you'r curious about the sRGB colorspace and why I recommend it for web use, read this.
[a href=\"index.php?act=findpost&pid=94123\"][{POST_SNAPBACK}][/a]

I will add the following finer points:

2a. After flattening and before converting to srgb, first convert a 16bit file to 8bit.

3a. When resizing, retain the aspect ratio.

4a. Compress accordingly when Save as Jpeg.

5a. Make sure that the pixel dimensions obtained during step 3 resizing are used to display the web image. This way, the image is displayed in the same pixel dimensions, regardless of monitor/window size. I know how to do so in html, but not sure if templates etc. can sneak in and do otherwise.

While these may be "intuitive" to some, I learned each of them the painfully way. Nothing is simple.

[Chris_T]

What do you all think of this portfolio presentation?

ChrisT, does it load quickly for you?
[{POST_SNAPBACK}][/a]

Comments on this site:

[a href=\"http://mike_cetta.photoworkshop.com/]http://mike_cetta.photoworkshop.com/[/url]

Yes, the flash loading is definitely faster than the other sites.

I like drop down menus like hovering over the Portfolio menu button. But the drop down menu does not disappear when the mouse pointer is away from the button. Only clicking elsewhere can make it disappear. I don't think this is a good implementation.

[Chris_T]

That's what I thought as well!  When I put borders around the different css elements on the page I don't see anything that is pushing the links down further but for some reason they still sink.

While I have read up on css, my coding experience is minimal. In your case, have you tried creating several nested blocks (I'm too lazy to read your source code)? That way, you can separate the links, etc. in differenent blocks and position or nest the blocks accordingly. From my reading, controlling the borders within each block or between the blocks seem quite straight forward. But then, I have yet to code such a page.

What I find frustrating is that there are plenty of css tutorials on handling text, but not many on images. I have yet to find one on how to centrally position an image in a css block. Sounds simple though.

I realized that while I was talking about the benefits of switching stylesheets based on browser window size that my own site wasn't actually doing it!  I had broken the switching by renaming one of the stylesheets...argh!  Anyway, it's working now - it bases the different sizes on browser width of 1240 - above that you get the larger version, below you get the smaller.  The only real changes are in the height of the header (and header images) but of course it would be possible to do a lot more if necessary. 

The technique is from a tutorial at Particletree which I minimally modified to work within wordpress which I am using to run my site.  I would give more detail but the tutorial pretty much covers everything necessary.  If anyone is interested in trying this out I'm happy to help if you run in to problems (I should say 'happy to TRY to help')! 

Will such a scheme require multiple sets of images: a set of small images for smaller monitors and a set of larger images for larger monitors, etc.?

[brianchapman]

Chris,

Will such a scheme require multiple sets of images: a set of small images for smaller monitors and a set of larger images for larger monitors, etc.?

Yes, this technique does require multiple sets of images.  However, I am only resizing the header and not the actual thumbnails or "full sized" images so I only have one set of those.  

Brian
http://www.brianchapmanphotography.com

[LoisWakeman]

Please correct me if I'm wrong, but most search engines still don't handle frames very well.

I'm correcting you: they can nearly all handle them fine these days (assuming they are coded properly)    

They are a bad thing for all sorts of other usability and accessibility reasons though, and to be deprecated for those.

[GerardK]

I'm correcting you: they can nearly all handle them fine these days (assuming they are coded properly)     

They are a bad thing for all sorts of other usability and accessibility reasons though, and to be deprecated for those.
[{POST_SNAPBACK}][/a]

OK Lois, thanks. The thing is, my site has developed over the years and I'm not much of a programmer, I just clicked and dragged it together in MS Frontpage. If I really were to redo the whole thing in other technology such as Flash or whatever, I'd have to outsource it and I really don't want to spend a lot of money on it - it works as it is. It contains over 630 individual pages with one photo each and keywords in the source, so it's well known in Google and I'd hate to lose that. Any suggestions? Do you see any of the disadvantages you mention in my site? Thanks,

Gerard Kingma
[a href=\"http://www.kingma.nu]www.kingma.nu[/url]

[GregW]

A lot of really interesting discussion here  

I'd like to answer a couple of questions and give some positive input regarding flash.

Answers

- Safari is still the only ICC compliant browser to date.  I have no direct knowledge but I can't believe this will not be addressed when Vista is publicly released or in the near term.

- Regarding slow iWed sites.  Elenor's not going to see any major speed benefits due to the underlying architecture of iWeb.  Crazy as it sounds all of the pages (including text) are rendered as images before upload.  This is a quick and dirty solution which allows the very free approach to layout and editing that iWeb is so good at.  It's rather lazy to say the least!  There has been quite a bit of pressure on Apple to put it right when the next version of iLife is released.  An alternative and some would say much better tool is RapidWeaver from http://www.realmacsoftware.com/ It's been around for a quite a while so it's developed a loyal following.  It build strict CSS compliant pages.  As befits it's age there are all sorts of useful plug-ins around to aid building a site.  

Design

Regarding design, the following keywords come to mind.  Effortless, simple, clean, focused.  I also quite like a front or enter page.  It's helps to define the intent of a site to me.  I don't want music or video or worst of all a clever animation, I want an engaging image (preferably one, but I also like Brian's approach with the triptych) to draw me in and make me want to see more.

Flash

Regarding flash.  It's badly abused by many.  Some sites are technically well executed but are the ultimate triumph of style over substance.  It's all rather unnecessary, and simply disguises the fact that the company/individual have nothing very much to say.  Sites promoting brands spring to mind.

There are also those which are poorly implemented on a technical level, often relying on the multitude of templates for sale on the market now.

There are some benefits to Flash.  While they don't protect a photog from copyright fraud or theft the do make it a bit harder which is likely to deter casual abuse.  Objects render accurately on the screen irrespective of the browser.  Large companies have the time and resources to extensively test operability.  Individuals and small companies do not.  Standards are the answer, but standards seem to be abused more than they are followed.  If the movie container is well designed it's possible to update content via a database or similar tool using and XML file.  Great for a photographer who want's to regularly update their pictures.  Tools like http://slideshowpro.net/ and it's companion Director demonstrate you can use flash galleries effectively.  There are many photography website examples listed on the page.

*I have no affiliation or contact with the developers of the software I mentioned.  I just like their products because they are performant and fairly priced.

[LoisWakeman]

Do you see any of the disadvantages you mention in my site? Thanks,

I think you have avoided most of them. And I love your images, especially the motion ones.

I discussed some of the practical pros and cons in a rather old article here:

http://www.lois.co.uk/web/articles/frames.shtml

which doesn't cover accessibility. You can find out a bit more here:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#fr...text-equivalent

http://www-03.ibm.com/able/guidelines/web/webframes.html