Luminous Landscape Forum

Raw & Post Processing, Printing => Digital Image Processing => Topic started by: Chris_T on December 29, 2006, 10:04:29 am

Title: Good and bad web gallery designs
Post by: Chris_T on December 29, 2006, 10:04:29 am
There appear to be quite a few suave web designers and programmers here. What are some photography web galleries that you consider to be "good" and "bad", and why?

The context here is not about a gallery's images, but rather how a gallery is designed in terms of information (gallery categories, image captions, image counts, etc.), presentation (thumbnails, enlargements, etc.), window size (fixed, fluid, scrolling, etc.), navigation (in particular from thumbnails to enlargements), colors and fonts, and last but not least security.

Please be as objective and subjective as you can. <g>
Title: Good and bad web gallery designs
Post by: Christopher on January 01, 2007, 08:49:49 am
Ok let me say following. What is important ? Easy clear fast. Sorry but I hate flash gallerys which are slow like hell. For me images should open in a new window, but in that window there should be a strip mode to navigate through the selected gallery. Each gallery should consist out of 10-25 images but plz not 50...
Title: Good and bad web gallery designs
Post by: simonkit on January 01, 2007, 09:08:20 am
Hi,

 I'm no expert but I also dislike sites with lots of flash - if the site is for photography I prefer the emphasis to be in the photographs themselves and not "flashy" menu options etc

 simon
Title: Good and bad web gallery designs
Post by: mikeseb on January 01, 2007, 10:57:01 am
I'll second what the previous two resondents mentioned: ease of navigation with some kind of thumbnail or preview of each gallery's contents.

Please, no Flash or very minimal Flash that serves some obvious necessity.

NO MUSIC!! I've got an iPod of my own, thanks. I'll likely hate the whale-song or inspirational crap you've chosen. Nothing makes me click off faster than music.

[Departing from the gist of your question for a moment, into areas not directly related to site design: I'd make a personal plea to all photographers/website publishers to spare us long-winded philosophical musings in the "bio" or "artist's statement" sections. "Bio" means biography, and a concise one at that. Really, it probably doesn't matter until you are as famous as Edward Weston, anyway. End curmudgeonly New Year's rant! ]

The photography is foremost; the visitor shouldn't have to run a gantlet to enjoy it.
Title: Good and bad web gallery designs
Post by: plugsnpixels on January 01, 2007, 10:17:36 pm
On those few occasions where I need a gallery (usually to share photos with family), I use the free JAlbum (http://www.plugsandpixels.com/jalbum.html). Easy to use and works great, with nice skins.

I agree with others in regards to use of Flash. It's a great technology, but on most websites its acrobatics just seems unnecessary ("Look at me, look at me!") and just slows visitors from accessing the info they came for in the first place. The technique is one step above the old useless "Enter" page.
Title: Good and bad web gallery designs
Post by: Brian Gilkes on January 02, 2007, 06:23:22 am
All the information I  have says search engines do not read Flash.As well as music it is a real pain. If you want hits and don't want to really annoy people, don't use flash and don't use music.Use images that open fast. Include only useful and/or interesting information. Content is king. Sprinkle the key words that you hope people will use to find you in your headings and through the site.Update your site all the time.
You want inspiration? Analyse Luminous Landscape.
Cheers,
Brian
www.pharoseditions.com.au
Title: Good and bad web gallery designs
Post by: Chris_T on January 02, 2007, 09:52:47 am
Quote
Ok let me say following. What is important ? Easy clear fast. Sorry but I hate flash gallerys which are slow like hell. For me images should open in a new window, but in that window there should be a strip mode to navigate through the selected gallery. Each gallery should consist out of 10-25 images but plz not 50...
[a href=\"index.php?act=findpost&pid=93113\"][{POST_SNAPBACK}][/a]

Agreed, I don't like flash either. In fact, for my site, I try to eliminate the need for plugins, frames, etc. The goal is for the viewers to access and navigate my site *easily*.
Title: Good and bad web gallery designs
Post by: Chris_T on January 02, 2007, 10:17:53 am
Quote
Hi,

 I'm no expert but I also dislike sites with lots of flash - if the site is for photography I prefer the emphasis to be in the photographs themselves and not "flashy" menu options etc

 simon
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93120\")

With all due respect, some comments on your site and mikeseb's site.

What I like (same comments for mikeseb's site also):

- Neutral colors for background
- Clean and concise navigation menu (a bit congested in mikeseb's case)
- Fixed design, which I think is better for image display
- Usable area is centered
- No vertical scroll necessary for a maximized window on my 19" monitor. (Some small amount of scrolling needed on mikeseb's site)

About Me page:

- Paragraphs not centered.

Galleries:

- Portrait thumbnails much bigger than landscape thumbnails. Why?
- Portrait thumbnails are grouped at the end and separate from the landscape thumbnails. Why? Ideally, I want my images sequenced in a particular order, and not dictated by their aspect ratios.

Many galleries tend to display the thumbnails on one page and an enlargement on a separate page. Once a viewer displays an enlargement, he is forced to view other enlargements sequentially, or have to go back to the thumbnails page to select a particular one.

My preference is to display a block of thumbnails and one enlargement, all on one page. This way, the viewers can have a top level view of the gallery (or part of it) and be able to select any thumbnail of his choice, all on one page. I think this is a much better way to navigate a gallery. The following pages are such designs, but they do have their own navigation problems though.

[a href=\"http://www.lezarimages.com/2939OrdwayPk.php]http://www.lezarimages.com/2939OrdwayPk.php[/url]

http://www.richardadamsphotography.com/Gal...gland/index.htm (http://www.richardadamsphotography.com/Gallery/New%20England/index.htm)
Title: Good and bad web gallery designs
Post by: Chris_T on January 02, 2007, 10:32:57 am
Quote
All the information I  have says search engines do not read Flash.As well as music it is a real pain. If you want hits and don't want to really annoy people, don't use flash and don't use music.Use images that open fast. Include only useful and/or interesting information. Content is king. Sprinkle the key words that you hope people will use to find you in your headings and through the site.Update your site all the time.
You want inspiration? Analyse Luminous Landscape.
Cheers,
Brian
www.pharoseditions.com.au
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93251\")

From what I understand, search engine hits are based on text and not images. For better hits, think text.

Some comments on one of your galleries:

[a href=\"http://www.pharoseditions.com.au/the_gallery/danielle_benson01.html]http://www.pharoseditions.com.au/the_galle...e_benson01.html[/url]

It has a thumbnail block and an enlargement on the same page. But unlike the two examples I sited, the thumbnail block is horizontal. This eats up a page's vertical real estate, which is more precious than the horizontal real estate on a regular monitor. This is particularly problematic for displaying a portrait enlargement *and* eliminating the need of vertical scrolling.
Title: Good and bad web gallery designs
Post by: mikeseb on January 02, 2007, 11:01:54 am
Quote
With all due respect, some comments on your site and mikeseb's site.

Chris, I appreciate your feedback. Don't want to hijack your thread here.
I agree with your assessment of my site's navigational difficulties; I wrestled with the thumbnail layout and have tweaked it repeatedly based on some customers' feedback. I like your suggested layout best of all.

My sites problems are twofold in origin: my inadequacies as a web designer, and the narrow range of design choices presented to me by the template-based hosting service I use. I'll likely upgrade the site to a custom design when I can justify it business-wise. Compromises we must all make, eh?

Good luck with yours, and thanks again.
Title: Good and bad web gallery designs
Post by: GerardK on January 02, 2007, 11:13:28 am
Quote
The technique is one step above the old useless "Enter" page.
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93216\")

As far as I know, the 'Enter' page isn't useless. Please correct me if I'm wrong, but most search engines still don't handle frames very well. I therefore have a non-frames 'Enter' page with some text, keywords and non-frame links to non-frame pages that are intended for robots, not real people. Real people can just click on 'Enter' which leads them to the frames version, which I hope is very easy to navigate.

And I agree - Flash is a nr. 1 attention killer for me. I use no flash whatsoever.

Gerard Kingma
[a href=\"http://www.kingma.nu]www.kingma.nu[/url]
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 12:28:30 pm
Quote
My preference is to display a block of thumbnails and one enlargement, all on one page. This way, the viewers can have a top level view of the gallery (or part of it) and be able to select any thumbnail of his choice, all on one page. I think this is a much better way to navigate a gallery.

While there's a lot to be said for this filmstrip / main image principle (which you see in Lightroom and Aperture for instance), the problem is that the thumbnails distract from the main image or are so small that they are effectively useless for navigation. There's no easy compromise - other than using a Flash galleries that enlarge the thumbnails upon cursor rollover... upon reflection, there's no easy compromise.

On the other point, search engines are OK with frames - Enter pages just make the site look like it was designed in the pre Dotcom days when it seemed obligatory to annoy your visitors with "Best viewed with Internet Explorer" or "Made with Mac" buttons.

John
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 02, 2007, 01:11:59 pm
Quote
And I agree - Flash is a #1 attention killer for me. I use no flash whatsoever.

I used to feel the same way, but after six months of on/off attempts to write my own php gallery, I decided to try a Flash site and have recieved more compliments than any other site I've had.

Here are a couple of examples of Flash used well to produce a quick loading gallery:
Fluid Galleries (http://www.evrium.com/store/fg2p_details.php)
SimpleViewer (http://www.airtightinteractive.com/photos/)

The biggest benefit to Flash galleries is the prevention of copying images, which helps protect against copyright infringement. Of course, one can still do a "screen grab" but not with the same results as copying the image file from server to client computer.

With Flash galleries you need to make sure your meta tags and meta data is concise & accurate and you'll need to tweak it to get the best search results (or else just advertise with Google & Yahoo!).

Then, there are php galleries. Here are a few php galleries:
Menalto Gallery (http://gallery.menalto.com/)
Simple Gallery v2 (http://memory.org/point.b/open.source/)
Qdig (http://qdig.sourceforge.net/Qdig/AboutQdig)
Copper Mine (http://coppermine-gallery.net/) (the grand-daddy of 'em all)

A php gallery uses a MySQL database and its greatest benefit is the ability to include IPTC data, captions and searchable key words (for those of us that sell stock photography).

The greatest benefit to a php gallery is that it's dynamic server side programming. Everything is executed on the server and the html is generated on-the-fly. No plug-ins, browser extensions or Java is needed. The browser can be Windows, Mac, Unix, or even Blackberry. Pages load as fast as your server can generate them.

Another benefit is that you can add and delete images and/or folders of images and the php script will change the site as the content changes. This makes gallery generation while working on location a breeze.

My old php site is here. (http://www.chrisbrownphoto.com/galleries/)
My current Flash site is here. (http://www.chrisbrownphoto.com/)

Both are pared down to simplify browsing.
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 01:17:39 pm
Quote
The biggest benefit to Flash galleries is the prevention of copying images, which helps protect against copyright infringement. Of course, one can still do a "screen grab" but not with the same results as copying the image file from server to client computer.

Screen grabs can be identical, so that's no protection. But the Flash gallery does help mask the images' location and makes it tougher for someone to serve your pics in their site. Then again, an htaccess file can stop that.

John
Title: Good and bad web gallery designs
Post by: plugsnpixels on January 02, 2007, 01:30:23 pm
Quote
Screen grabs can be identical, so that's no protection. But the Flash gallery does help mask the images' location and makes it tougher for someone to serve your pics in their site. Then again, an htaccess file can stop that.

John
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93302\")

Exactly. Your images are probably 72ppi, and the screenshot will be the same res. But as John says, preventing hotlinking might be the main avantage. I find sites doing that with my plug-in screenshots. So I swap the original source images for those pages to keep the layout intact and replace the hotlinked images with ones [a href=\"http://www.forumempire.com/viewtopic.php?t=43794&highlight=adobe+photoshop]overlaid with a little blurb[/url]!
Title: Good and bad web gallery designs
Post by: John.Murray on January 02, 2007, 01:31:48 pm
I'll also side *against* any flash based sites for 2 reasons:

Unacceptable load time for users with slow internet connections
Lack of alternate (ie: keyboard based) navigation
Title: Good and bad web gallery designs
Post by: Christopher on January 02, 2007, 01:34:23 pm
Ok, I think it really depends for what you use the gallery. if it's a portfolio page with only a few images and gallery FLASH is brillinat and wonderful. You'll never get such nice pages without it. BUT if you have lot's of images want to sell prints, then plz DON'T use flash. It's to slow and I hate to navigate through a lot of galleries and pictures.

Fluid Galleries is nice, but I think it has the same problems stated aboth. Just nice for a portfolio.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 02, 2007, 01:38:35 pm
Quote
Screen grabs can be identical, so that's no protection.

Screen grabs don't have correct ICC data nor any IPTC data. That's all been stripped out. At least, on the Flash sites I've checked.

For example, the images on my site all use the new, v2 sRGB profiles with BPC, (http://www.color.org/srgbprofiles.html) but if I do a screen grab, the images open in PS with my monitor profile. In addition, there is no IPTC data in the screen grab, while the original images have it.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 02, 2007, 01:42:02 pm
Quote
So I swap the original source images for those pages to keep the layout intact and replace the hotlinked images with ones overlaid with a little blurb (http://www.forumempire.com/viewtopic.php?t=43794&highlight=adobe+photoshop)!
Hey! Pretty cool!  

I prevent hot linking with a script on my server. It's set up so that only specific URLs can access image folders. So far, it seems to be working.
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 01:43:55 pm
Well if I were stealing an image, I'd want to flush the IPTC, and colour managed browsers aren't exactly ubiquitous.... Flash raises the cost in time of nicking your pics, but that's not enough of a reason for using it.
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 01:48:29 pm
Yes, you can have fun with that image replacement technique. In the past I've served a very large transparent gif that blows the other site's formatting and takes a while to spot. Equally you could serve a gruesome flashing gif.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 02, 2007, 01:54:42 pm
Quote
Well if I were stealing an image, I'd want to flush the IPTC, and colour managed browsers aren't exactly ubiquitous.... Flash raises the cost in time of nicking your pics, but that's not enough of a reason for using it.

If someone is going to appropriate (i.e., steal) an image, there's no way to stop 'em. However, in the list of pros & cons for site developement, a pro for Flash is its galleries with embedded images.

I'm not a die hard proponent for Flash, I've just done this mental exercise enough to post my thoughts.

On another note, YouTube (http://www.youtube.com/) uses Flash Video to generate the videos. It's slow to load, etc., but those guys did sell YouTube for over $2,000,000,000. Not a bad use of Flash, IMO.
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 02:09:20 pm
Quote
If someone is going to appropriate (i.e., steal) an image, there's no way to stop 'em. However, in the list of pros & cons for site development, a pro for Flash is its galleries with embedded images.
All you can do is deter and increase the cost in time, and Flash is just one way to do that, and not much better than others. Your case for Flash is on stronger ground when you spoke about the compliments you've received, and that's very much a matter of your site's character as a portfolio or stock/print vehicle.
Title: Good and bad web gallery designs
Post by: brianchapman on January 02, 2007, 03:39:31 pm
I should start this by saying I'm a web developer but not a web designer ;-)

I personally like (and use) Plogger (http://www.plogger.org) for my site.  There are a few shortcomings which I am told are being worked on for the next version - things like more control over image and album order, etc.  I modified the default look and feel to simplify the design and to remove some unwanted elements and also to use a lightbox to display the images.  

I'm thinking about moving to something a little more broadband reliant in the future - something like AutoViewer (http://www.airtightinteractive.com/projects/autoviewer/) (a cousin of SimpleViewer mentioned earlier).  I really like the presentation with the larger images and if each "album" isn't too large the scrolling seems to work well.  Another similar example is Joe Reifer's  (http://www.joereifer.com) site although I can't off the top of my head remember what software he is using.

Regarding flash...the only thing that bothers me is if there is a long initial load time.  If you check out the demo of Autoviewer, I don't think the load time there is a problem at all - many times it takes just as long to load a page full of thumbnails.  

Anyway, just another opinion...

Brian
http://www.brianchapmanphotography.com (http://www.brianchapmanphotography.com)
Title: Good and bad web gallery designs
Post by: john beardsworth on January 02, 2007, 05:53:47 pm
Brian

Not even gone past your home page yet, but thought I'd say I simply love the look of your site. OK, let's see what the rest's like....

John
Title: Good and bad web gallery designs
Post by: brianchapman on January 02, 2007, 07:38:08 pm
You've got me nervous now John...  

Brian
http://www.brianchapmanphotography.com (http://www.brianchapmanphotography.com)


Quote
Brian

Not even gone past your home page yet, but thought I'd say I simply love the look of your site. OK, let's see what the rest's like....

John
[a href=\"index.php?act=findpost&pid=93356\"][{POST_SNAPBACK}][/a]
Title: Good and bad web gallery designs
Post by: jliechty on January 03, 2007, 01:09:37 am
When I first saw the flash gallery that Chris Brown uses in his site, my opinion was not good (the usability of the hover-based navigation for scrolling the pictures is lacking). However, the visual appearance is good, and it appears from Joe Reifer's site that the photo scrolling can be done by clicking instead of hovering, so for now my opinion of one flash gallery is favorable.

With that said, sites that have an "Enter" page which opens a resized-to-full-screen-but-not-maximized browser window for a full-window flash object are as obnoxious as a particular goat-related internet shock site. That sort of nonsense should be illegal; fortunately Firefox prevents most of that sort of mischievous behavior.
Title: Good and bad web gallery designs
Post by: GerardK on January 03, 2007, 03:31:29 am
Maybe I should refrase my stated hatred of Flash, what I hate is not Flash technology in and of itself, but Flash, or indeed any technology, used badly. So what I really hate is a site the design of which doesn't need Flash but only uses it to dazzle me with frames and pictures and esoteric statements flying about that serve no purpose whatsoever. If sites are designed simply and effectively with Flash core technology from the ground up, that's no problem, I've seen good examples of that as well.

How about for instance Chris Honeysett's site at
http://www.chrishoneysett.com/ (http://www.chrishoneysett.com/)

It's built by http://www.livebooks.com/ (http://www.livebooks.com/) That seems to work well don't you think?

Agreed my site is built entirely in plain html, it's six years old basically. My nick on some games is OldFart.

Gerard Kingma
www.kingma.nu (http://www.kingma.nu)
Title: Good and bad web gallery designs
Post by: plugsnpixels on January 03, 2007, 03:51:51 am
Case in point: The Beatles website (http://www.thebeatles.com)

Dig around a bit until you get to the "1" section. That is the most awful use of Flash I have seen yet (spinning links like a funhouse game, large images displayed in teeny windows that need scrolling, etc.).

George Harrison's site (http://allthingsmustpass.com/) is much better, and uses Flash in a humorous way.
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 09:37:27 am
Quote
Chris, I appreciate your feedback. Don't want to hijack your thread here.
I agree with your assessment of my site's navigational difficulties; I wrestled with the thumbnail layout and have tweaked it repeatedly based on some customers' feedback. I like your suggested layout best of all.

My sites problems are twofold in origin: my inadequacies as a web designer, and the narrow range of design choices presented to me by the template-based hosting service I use. I'll likely upgrade the site to a custom design when I can justify it business-wise. Compromises we must all make, eh?

Good luck with yours, and thanks again.
[a href=\"index.php?act=findpost&pid=93283\"][{POST_SNAPBACK}][/a]

Without web design skills, but knowing what I like/dislike, I have yet to build my own site. Finding a good designer is far from easy. Most are Dreamweaver or template jockeys. They can crank out sites that they think are good, but can't build one to my likes and specifications. For that, I need someone who can hand code.

For now, I'll settle for criticising others' sites. <g>
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 09:43:16 am
Quote
Gerard Kingma
www.kingma.nu (http://www.kingma.nu)
[a href=\"index.php?act=findpost&pid=93284\"][{POST_SNAPBACK}][/a]

On my 19" CRT at 1280x1024 resolution, the text on your home page is so tiny that it is illegible. Check out Brian's site to see what good legibility is like.
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 09:53:24 am
Quote
While there's a lot to be said for this filmstrip / main image principle (which you see in Lightroom and Aperture for instance), the problem is that the thumbnails distract from the main image or are so small that they are effectively useless for navigation. There's no easy compromise - other than using a Flash galleries that enlarge the thumbnails upon cursor rollover... upon reflection, there's no easy compromise.
[a href=\"index.php?act=findpost&pid=93291\"][{POST_SNAPBACK}][/a]

Agreed that thumbnail size is a tradeoff. The two sites I referred to both have too many thumbnails on a page. A compromise for such a design is to limit the number of thumbnails to say six or eight in the block on a page, and be able to advance to the next block(s) on a new page for a gallery with lots of images. With a smaller thumbnail block, there is more room to fit a larger enlargement on the same page. Luminous Lanscape chooses the other extreme, in their galleries, there are NO thumbnails.

BTW, does anyone know of a non-Flash template or script that can produce such a page?
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 10:06:28 am
Quote
I used to feel the same way, but after six months of on/off attempts to write my own php gallery, I decided to try a Flash site and have recieved more compliments than any other site I've had.

Here are a couple of examples of Flash used well to produce a quick loading gallery:
Fluid Galleries (http://www.evrium.com/store/fg2p_details.php)
SimpleViewer (http://www.airtightinteractive.com/photos/)

The biggest benefit to Flash galleries is the prevention of copying images, which helps protect against copyright infringement. Of course, one can still do a "screen grab" but not with the same results as copying the image file from server to client computer.

With Flash galleries you need to make sure your meta tags and meta data is concise & accurate and you'll need to tweak it to get the best search results (or else just advertise with Google & Yahoo!).

Then, there are php galleries. Here are a few php galleries:
Menalto Gallery (http://gallery.menalto.com/)
Simple Gallery v2 (http://memory.org/point.b/open.source/)
Qdig (http://qdig.sourceforge.net/Qdig/AboutQdig)
Copper Mine (http://coppermine-gallery.net/) (the grand-daddy of 'em all)

A php gallery uses a MySQL database and its greatest benefit is the ability to include IPTC data, captions and searchable key words (for those of us that sell stock photography).

The greatest benefit to a php gallery is that it's dynamic server side programming. Everything is executed on the server and the html is generated on-the-fly. No plug-ins, browser extensions or Java is needed. The browser can be Windows, Mac, Unix, or even Blackberry. Pages load as fast as your server can generate them.

Another benefit is that you can add and delete images and/or folders of images and the php script will change the site as the content changes. This makes gallery generation while working on location a breeze.

My old php site is here. (http://www.chrisbrownphoto.com/galleries/)
My current Flash site is here. (http://www.chrisbrownphoto.com/)

Both are pared down to simplify browsing.
[a href=\"index.php?act=findpost&pid=93301\"][{POST_SNAPBACK}][/a]

Thanks for your inputs.

Comments on your site:

The php site's People gallery thumbnail page has way too many on one page. Once I enlarged a thumbnail, it takes me multiple clicks to display another gallery or other pages on your site. Not the best navigation scheme.

The flash site took so long to load that I didn't bother to wait.
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 10:24:29 am
Quote
I'll also side *against* any flash based sites for 2 reasons:

Unacceptable load time for users with slow internet connections
Lack of alternate (ie: keyboard based) navigation
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93306\")

Comments on your site:

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

The home page is not only a wasted page, but difficult to enter the site. Clicking on "Images by Murray" returns to the same page, and it takes mousing around to find the entry link. Help opens a pop-up, which I dislike in general. The Update time stamp is a good touch, but would be nicer if a (return) viewer knows what has been updated.

The About link is yet another pop-up. Why? The unlinked text color and the background color can be more contrasty for better legibility. The linked text color is better in this regard.

The biggest gallery has 20 images, and the thumbnails fit ok on a single page. I wonder how would you handle a bigger gallery.

The enlargement page has the same problem as Chris' page: no easy navigation to other pages. Did you guys hire the same designer, or use the same template?
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 04, 2007, 10:25:14 am
Quote
Comments on your site:

The php site's People gallery thumbnail page has way too many on one page. Once I enlarged a thumbnail, it takes me multiple clicks to display another gallery or other pages on your site. Not the best navigation scheme.

The flash site took so long to load that I didn't bother to wait.
[a href=\"index.php?act=findpost&pid=93633\"][{POST_SNAPBACK}][/a]
Strange wait time on my Flash site. It loads in at most 2 seconds on any of my computers, but I know what you mean about waiting for a site to load.

The bonus of the PHP galleries is that the original JPEG can be accessed by clicking on an image while browsing. Some find this a perk for clients, others find it a great way to steal images.
Title: Good and bad web gallery designs
Post by: GerardK on January 04, 2007, 10:56:53 am
Quote
On my 19" CRT at 1280x1024 resolution, the text on your home page is so tiny that it is illegible. Check out Brian's site to see what good legibility is like.
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93625\")

Chris,

Thanks for your input, but do you mean the text that you see on the Enter page, scrolling down below Enter? That text is intended for search engines, not humans. Humans are supposed to just click Enter. When you enter the site, all text on the news page should be a basic 10 pt Arial, which is perfectly legible on my 1280x960 19" CRT. Please confirm?

By the way, if you have a standard 3:4 CRT, you might want to try 1280x960 instead of 1280x1024. Display a perfect circle and measure its width and height with a ruler to check. Try a monitor checking utility such as Eizo Test or NTest.

Gerard Kingma
[a href=\"http://www.kingma.nu]www.kingma.nu[/url]
Title: Good and bad web gallery designs
Post by: LasseDPF on January 04, 2007, 11:10:38 am
Interesting.. It took me about 2 sec to load the site from where I am.

I experience the same thing with my new site. It takes me about 20 sec to load the site, others tell me it takes 2 sec and no problems..

It seems the choise of hosting service, the location of the server ++ are all important factors ?

Lasse
 
Quote
The flash site took so long to load that I didn't bother to wait.
[a href=\"index.php?act=findpost&pid=93633\"][{POST_SNAPBACK}][/a]
Title: Good and bad web gallery designs
Post by: eleanorbrown on January 04, 2007, 11:11:50 am
I've been following this discussion with interest as i have been wondering if I should try using Flash on my site (ie: the "way of the future" in sophisticated web design) but I'm hearing that most people don't like flash and personally I don't either.  I know nothing about html so i've used iWeb on my Mac (don't think that has been mentioned here) which is very easy for web site design, but has lousy slide show capability so I've been thinking of removing the slide show feature altogether and just having folks click on individual images.  But for those who know nothing about web design and have a mac, iWeb is a reasonable way to go. eleanor

Quote
Well if I were stealing an image, I'd want to flush the IPTC, and colour managed browsers aren't exactly ubiquitous.... Flash raises the cost in time of nicking your pics, but that's not enough of a reason for using it.
[a href=\"index.php?act=findpost&pid=93311\"][{POST_SNAPBACK}][/a]
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 11:40:19 am
Quote
You've got me nervous now John...  

Brian
http://www.brianchapmanphotography.com (http://www.brianchapmanphotography.com)
[a href=\"index.php?act=findpost&pid=93381\"][{POST_SNAPBACK}][/a]

Finally a site by a pro, and what a difference. Like the simple layout, and especially the large font size and spacing between lines. However, just to make you nervous, here are some comments:

Is the Enter page necessary? The About page is lacking in content. Perhaps beefing it up can be your home page and get rid of the Enter page.

The entry page to your site is your blog. Is this what you want? It loads slow, but the rotating flash is cute. The News menu botton can be more accurately be replaced with Blog. That's what it really is!

An exception to the overall good text legibility is the menu button names on the Portfolio page. The text color is way too faint for my eyes (the gallery titles' color on the same page is acceptable). Like the buttons' hover color change. But the color change is different from the blog page. Intended? Why?

The gallery thumbnail page has only eight images. Works fine for a small gallery. But how would you handle a large gallery? Unlike other sites I mentioned earlier, your gallery button page has links to other pages. Great. There is a large horizontal space between the thumbnails and the Recent News, etc. at the bottom. I think that these links at the bottom can either be part of your blog or implemented as button(s) at the top navigation menu. It makes navigation more obvious. Without the space and these links, you can get rid of the need of vertical scrolling on most monitors.

Displaying an enlargement as an overlay on top of a dimmed thumbnail page is an interesting idea. Is it done with flash? The Next/Previous buttons in the enlargement are hidden and need mousing around to find. I missed them the first time. Clicking on a blank space (I did it by mistake) closes the enlargement window. Is it intended? Is it possible to position the enlargement so that is does not cover up any thumbnails? That way, you will have something like the two example sites I posted earlier.
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 11:45:34 am
Quote
Chris,

Thanks for your input, but do you mean the text that you see on the Enter page, scrolling down below Enter? That text is intended for search engines, not humans. Humans are supposed to just click Enter. When you enter the site, all text on the news page should be a basic 10 pt Arial, which is perfectly legible on my 1280x960 19" CRT. Please confirm?

By the way, if you have a standard 3:4 CRT, you might want to try 1280x960 instead of 1280x1024. Display a perfect circle and measure its width and height with a ruler to check. Try a monitor checking utility such as Eizo Test or NTest.

Gerard Kingma
www.kingma.nu (http://www.kingma.nu)
[a href=\"index.php?act=findpost&pid=93644\"][{POST_SNAPBACK}][/a]

I have a standard CRT, and testing with a dialup. Yes, there are still some of us out here!

Yes, once I entered your site, the text font size is bigger, but still nowhere near Brian's. For short text pages, I think Brian got the right idea.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 04, 2007, 12:03:09 pm
Quote
Interesting.. It took me about 2 sec to load the site from where I am. I experience the same thing with my new site. It takes me about 20 sec to load the site, others tell me it takes 2 sec and no problems. It seems the choise of hosting service, the location of the server ++ are all important factors ?[a href=\"index.php?act=findpost&pid=93647\"][{POST_SNAPBACK}][/a]
This is one of the reasons I don't like Flash-- loading times. Is it the server? Is it the client/browser? Is it an old plug-in? Do I need the new version of Flash Player? This is where PHP (hosted by a conscientious hosting site) makes these questions moot.

Quote
I know nothing about html so i've used iWeb on my Mac (don't think that has been mentioned here) which is very easy for web site design, but has lousy slide show capability so I've been thinking of removing the slide show feature altogether and just having folks click on individual images.  But for those who know nothing about web design and have a mac, iWeb is a reasonable way to go.[a href=\"index.php?act=findpost&pid=93649\"][{POST_SNAPBACK}][/a]
I've experienced slow loading times with iWeb sites myself. A friend of mine who writes code used it briefly but didn't like the page structure. Still, it beats anything else when you don't know what to use.
Title: Good and bad web gallery designs
Post by: Chris_T on January 04, 2007, 12:04:35 pm
Quote
Interesting.. It took me about 2 sec to load the site from where I am.

I experience the same thing with my new site. It takes me about 20 sec to load the site, others tell me it takes 2 sec and no problems..

It seems the choise of hosting service, the location of the server ++ are all important factors ?

Lasse
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93647\")

Comments on your site:

[a href=\"http://www.morkhagen.net/]http://www.morkhagen.net/[/url]

A nice simple layout, but I find the green background distracting. The Folk gallery takes a while to load (flash?), but the first enlargement is displayed while the thumbnails load. The model is attractive enough to keep me waiting for the loading to complete. (A hint for those who use flash?) I like the Image Info, but can it be positioned so that it does not cover up the image? Is there any reason why the thumbnails are on the right instead of the left? The bottom thumbnail is chopped off. A better design would be to work around this. With a large gallery, scrolling down a long vertical list of thumbnails can be irritating.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 04, 2007, 12:09:47 pm
Quote
Comments on your site... A better design would be to work around this. With a large gallery, scrolling down a long vertical list of thumbnails can be irritating.
[a href=\"index.php?act=findpost&pid=93659\"][{POST_SNAPBACK}][/a]
Chris_T, looks like you'll need to become a code geek if you want to design your own site.
Title: Good and bad web gallery designs
Post by: djgarcia on January 04, 2007, 02:36:01 pm
My site is home-made, and you can have fun ripping it apart  ... Galleries are in the Beauty section.
Title: Good and bad web gallery designs
Post by: brianchapman on January 04, 2007, 03:35:10 pm
Thanks Chris!

The enter page is probably not necessary.  I have debated about what should be the entry page - I wanted the entry page to be images of some sort but I didn't want users to start at the portfolio page because it has a different look and feel from the rest of the site.  I decided I'd go with the blog because I figured that would be the page updated most frequently (although not very frequently apparently) but other than that it was a mostly arbitrary decision.  

Any font/rollover color differences in the main site are not intended...I will take a look.  I think consistency is important but I have a lot of extras in my css which has caused some problems finding things ;-)  Thanks for pointing it out.

The space between the bottom of the page content and the footer (links, etc) is extremely difficult to get right - I spent probably two days trying to get it right...to no avail obviously.  You're right though, the intent was for them to be just below the content if it was larger than a page or if it was smaller than the full window I wanted it sitting at the bottom to fill the page but not require vertical scrolling.  

The gallery size is intentional because I didn't want to handle a large gallery!!  I think I would have to make the thumbnails smaller to keep it well contained.  I used larger thumbnails because I didn't want images so small that they were useless as far as a preview is concerned.  Ultimately I may go with the no thumbnail approach like Autoviewer but there again keeping the gallery size in check is important.  

The image overlay is javascript.  There's a library called "lightbox" and I integrated that as part of the gallery management.  I didn't attempt to change anything within the library so the behavior is default.  

One more thing regarding sizing, etc, I saw a question earlier about it...I use some javascript to check the resolution of the users browser and then load one of two different style sheets depending on whether it is greater or less than 1024x768.  While it's not perfect, it does give me some flexibility for those of us who like to use 1280+ so I can size parts of the page differently.  It doesn't do anything to the thumbnail size (yet...) but it keeps the overall site size appropriate for the browser window.  I'll be glad to share if someone is interested.

Thanks again for taking the time to comment on the site!  
Quote
For now, I'll settle for criticising others' sites.
You're doing a great job!

Brian
http://www.brianchapmanphotography.com (http://www.brianchapmanphotography.com)

Quote
Finally a site by a pro, and what a difference. Like the simple layout, and especially the large font size and spacing between lines. However, just to make you nervous, here are some comments:

Is the Enter page necessary? The About page is lacking in content. Perhaps beefing it up can be your home page and get rid of the Enter page.

The entry page to your site is your blog. Is this what you want? It loads slow, but the rotating flash is cute. The News menu botton can be more accurately be replaced with Blog. That's what it really is!

An exception to the overall good text legibility is the menu button names on the Portfolio page. The text color is way too faint for my eyes (the gallery titles' color on the same page is acceptable). Like the buttons' hover color change. But the color change is different from the blog page. Intended? Why?

The gallery thumbnail page has only eight images. Works fine for a small gallery. But how would you handle a large gallery? Unlike other sites I mentioned earlier, your gallery button page has links to other pages. Great. There is a large horizontal space between the thumbnails and the Recent News, etc. at the bottom. I think that these links at the bottom can either be part of your blog or implemented as button(s) at the top navigation menu. It makes navigation more obvious. Without the space and these links, you can get rid of the need of vertical scrolling on most monitors.

Displaying an enlargement as an overlay on top of a dimmed thumbnail page is an interesting idea. Is it done with flash? The Next/Previous buttons in the enlargement are hidden and need mousing around to find. I missed them the first time. Clicking on a blank space (I did it by mistake) closes the enlargement window. Is it intended? Is it possible to position the enlargement so that is does not cover up any thumbnails? That way, you will have something like the two example sites I posted earlier.
[a href=\"index.php?act=findpost&pid=93653\"][{POST_SNAPBACK}][/a]
Title: Good and bad web gallery designs
Post by: plugsnpixels on January 04, 2007, 08:24:44 pm
Speaking of Flash, since my last post I found this music-related site (http://www.jbltour.com/) that shows how cool Flash can be when done well! Move your mouse over the stickers (left and right). After you're done enjoying that, click on any sticker. This beats shapes flying around and text spinning, dropping and zooming into place.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 05, 2007, 09:34:43 am
One other thing, I always "skip intro" when given the choice. They're never worth waiting for. Perhaps it's a way for the site programmer to make a little extra ca$h.
Title: Good and bad web gallery designs
Post by: Chris_T on January 05, 2007, 10:00:30 am
Quote
I've been following this discussion with interest as i have been wondering if I should try using Flash on my site (ie: the "way of the future" in sophisticated web design) but I'm hearing that most people don't like flash and personally I don't either.  I know nothing about html so i've used iWeb on my Mac (don't think that has been mentioned here) which is very easy for web site design, but has lousy slide show capability so I've been thinking of removing the slide show feature altogether and just having folks click on individual images.  But for those who know nothing about web design and have a mac, iWeb is a reasonable way to go. eleanor
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93649\")

Before proceeding any further, see my comments about your current site. There are numerous "easy" apps and templates for web design. While they let you come up with a site in minutes, you never know what is under the hood, nor would you know what your viewers' experiences are.

I'll post a couple of book recommendations on this topic later.

Comments on your site:

[a href=\"http://www.eleanorbrown.com/]http://www.eleanorbrown.com/[/url]

The home page takes forever to load (not flash and no large image, so why?). During the loading, the Menu buttons have three colors, one too many. It is white when page is displayed, as in Welcome. The rest are so lack of contrast against their background that they are almost illegible. When hovering on one of them, the text and background become the same, i.e. NO text! This makes it difficult for someone who wants to skip the home page during loading and access another page. After loading, the button colors are fine.

The About Me page takes even longer, and I didn't wait for it to complete.

On the Portfolio page, some gallery titles (Main Coast, Wine, etc.) are spaced too close too the bottom of the images. They don't line up with the other gallery titles.

I tried to open a gallery but had to punt after minutes. Too bad, I really would like to see some of your images.
Title: Good and bad web gallery designs
Post by: Chris_T on January 05, 2007, 10:07:11 am
Quote
My site is home-made, and you can have fun ripping it apart  ... Galleries are in the Beauty section.
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93688\")

You asked for it, and here are my comments on your site:

[a href=\"http://improbablystructuredlayers.net/]http://improbablystructuredlayers.net/[/url]

The Beauty gallery took a long time to load and I think I know why. The image is 162kb at 300dpi. For web display, you don't need more than 100dpi. Smaller file means faster loading. If someone should steal your image, they can't make a large and high quality print. That is one nice shot though. Wish I have patience to see more.

The overall design can be better in many regards, especially with navigation. Check my book recommendations in a later post.
Title: Good and bad web gallery designs
Post by: Chris_T on January 05, 2007, 10:16:30 am
Quote
Chris_T, looks like you'll need to become a code geek if you want to design your own site.
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93660\")

As a matter of fact, I did try to learn what I can. I started out with many html and css books, and was about to dive in. Thank god I didn't. After reading the following two books, I have a completely different view about site design. It is a heck of lot more than just HOW to code. It is more about WHAT to code! My scrutiny of others' sites are learned from these books, combined with my biased preferences.

Don't Make Me Think by Steve Krug
[a href=\"http://www.managementconsultingnews.com/interviews/krug_interview.php]http://www.managementconsultingnews.com/in...g_interview.php[/url]

Web Design On a Shoestring by Carrie Bickner
http://www.roguelibrarian.com/shoestring/ (http://www.roguelibrarian.com/shoestring/)

Both are skinny books, and worth their weight in gold for every web designer, pro or amateur.
Title: Good and bad web gallery designs
Post by: Chris_T on January 05, 2007, 10:45:42 am
Quote
Thanks Chris!

I appreciate your appreciation. <g> It is not often that cirticisms are well received. I'm just grateful that my comments have not started any flame wars, so far.

Quote
The enter page is probably not necessary.  I have debated about what should be the entry page - I wanted the entry page to be images of some sort but I didn't want users to start at the portfolio page because it has a different look and feel from the rest of the site.  I decided I'd go with the blog because I figured that would be the page updated most frequently (although not very frequently apparently) but other than that it was a mostly arbitrary decision. 

Yes, a home page is extremely important in many regards and should be given special attention. For this reason, a home page's layout can be different from the other pages. In many cases, an Enter page, on the other hand, is nothing more than an extra click.

Quote
Any font/rollover color differences in the main site are not intended...I will take a look.  I think consistency is important but I have a lot of extras in my css which has caused some problems finding things ;-)  Thanks for pointing it out.

Consistency is very important. If there is inconsistency, a viewer (like me) would wonder does the inconsistency mean something.

Quote
The space between the bottom of the page content and the footer (links, etc) is extremely difficult to get right - I spent probably two days trying to get it right...to no avail obviously.  You're right though, the intent was for them to be just below the content if it was larger than a page or if it was smaller than the full window I wanted it sitting at the bottom to fill the page but not require vertical scrolling. 

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. To really minimize the vertical scrolling on this page, why not get rid of these bottom links and incorporate them as menu buttons at the top? That way, the navigation is centralized. Too birds with one stone.

Quote
The gallery size is intentional because I didn't want to handle a large gallery!!  I think I would have to make the thumbnails smaller to keep it well contained.  I used larger thumbnails because I didn't want images so small that they were useless as far as a preview is concerned.  Ultimately I may go with the no thumbnail approach like Autoviewer but there again keeping the gallery size in check is important. 

As you may have noticed in my critiques on different sites, I am trying to solve this problem of how to manage and navigate a LARGE gallery with many thumbnails and displaying an enlargement on a single page. The thumbnail size, the number of thumbnails, how many to displayon a page, how to navigate between them, etc. all come into play. Size does matter, when it comes to galleries.

Quote
The image overlay is javascript.  There's a library called "lightbox" and I integrated that as part of the gallery management.  I didn't attempt to change anything within the library so the behavior is default. 

One more thing regarding sizing, etc, I saw a question earlier about it...I use some javascript to check the resolution of the users browser and then load one of two different style sheets depending on whether it is greater or less than 1024x768.  While it's not perfect, it does give me some flexibility for those of us who like to use 1280+ so I can size parts of the page differently.  It doesn't do anything to the thumbnail size (yet...) but it keeps the overall site size appropriate for the browser window.  I'll be glad to share if someone is interested.

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.

Quote
Thanks again for taking the time to comment on the site! 

You're doing a great job!

You are more than welcome, and thanks for the civility.
Title: Good and bad web gallery designs
Post by: eleanorbrown on January 05, 2007, 10:48:26 am
Hi chris and thanks for taking the time to comment on what you saw from your computer on my site.  Now I'm really preplexed because except for the labels being out of line on the portfolio page, i see none of what you are describing.  right now i'm looking at it from my old (very old and slow) apple Powerbook laptop.  I cleared the Safari cache and histories so everything should load from the get go, not being stored in the cache.  Home page took 3 seconds to load and all type is very readable (white against dark gray background) and there is no fading.  also i see only one color in the menu buttons (white).  the portfolio page took about 8 seconds to load and the about me, about the same time.  I opened the trees portfolio page (one of the larger) and it took about 13 seconds to load.  what i'm wondering is that could this be a difference in mac and pc using this apple made site?? (are you on a pc?).  also my internet connection is cable, reasonably fast.  I definitely would expect dial up to have slow loading with my site.  any ideas about the difference in your experiences and mine?  thanks again for taking the time to report your findings!! eleanor

The home page takes forever to load (not flash and no large image, so why?). During the loading, the Menu buttons have three colors, one too many. It is white when page is displayed, as in Welcome. The rest are so lack of contrast against their background that they are almost illegible. When hovering on one of them, the text and background become the same, i.e. NO text! This makes it difficult for someone who wants to skip the home page during loading and access another page. After loading, the button colors are fine.

The About Me page takes even longer, and I didn't wait for it to complete.

On the Portfolio page, some gallery titles (Main Coast, Wine, etc.) are spaced too close too the bottom of the images. They don't line up with the other gallery titles.

I tried to open a gallery but had to punt after minutes. Too bad, I really would like to see some of your images.
[a href=\"index.php?act=findpost&pid=93865\"][{POST_SNAPBACK}][/a]
[/quote]
Title: Good and bad web gallery designs
Post by: Chris_T on January 05, 2007, 11:46:31 am
Quote
Hi chris and thanks for taking the time to comment on what you saw from your computer on my site.  Now I'm really preplexed because except for the labels being out of line on the portfolio page, i see none of what you are describing.  right now i'm looking at it from my old (very old and slow) apple Powerbook laptop.  I cleared the Safari cache and histories so everything should load from the get go, not being stored in the cache.  Home page took 3 seconds to load and all type is very readable (white against dark gray background) and there is no fading.  also i see only one color in the menu buttons (white).  the portfolio page took about 8 seconds to load and the about me, about the same time.  I opened the trees portfolio page (one of the larger) and it took about 13 seconds to load.  what i'm wondering is that could this be a difference in mac and pc using this apple made site?? (are you on a pc?).  also my internet connection is cable, reasonably fast.  I definitely would expect dial up to have slow loading with my site.  any ideas about the difference in your experiences and mine?  thanks again for taking the time to report your findings!! eleanor

My comment about the menu buttons' colors is ONLY DURING the loading. Once loaded, the colors are fine. But often during a slow loading of a page, I like the option of clicking on a link and skip to another page. Not a big deal, but something worth looking into.

I'm on a PC and dial up. Upon further investigation, I think I know why the loading is so slow: you have HUGE image files.

Initially I tried to right click and save your home page image to see how big it is. But right clicking only got me a transparent file. Nice try, but it won't prevent someone who wants to work harder to "steal" your images. I saved the whole web page, and realized that that image is a whopping 798kb, at 24bits!!! For web images, you only need 8bit and no more than 100dpi. Read the Shoestring book and you will find out more.

Instead of preventing saving an image with right clicking (silly), post small low resolution images that would still look good on a site. Not only will the loading speed up, a thief will not be able to print a stolen image at high resolution and at a large size. Check out sites of famous photogs (John Shaw, e.g.) and see how they do it. Look at the detail properties of an image to see the pixel size (key), dpi, and bit depth.

One more time, read those two books. You will learn a lot more.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 05, 2007, 12:34:51 pm
Quote
I'm on a PC and dial up. Upon further investigation, I think I know why the loading is so slow: you have HUGE image files.
I'd say they're loading slow because you're on dial up.  

I don't know what the "norm" is nowdays, dial-up, DSL, cable, ISDN. But in my small business, more than half of my work is delivered on-line. Connection speed is very important for my biz. I zip large files and FTP 'em to a secure directory on my site. The week before Christmas I uploaded about 700MB (almost 1GB uncompressed) which was then dowloaded to both Japan and England within the hour. I couldn't have made the deadline without a fast connection.

Quote
One more time, read those two books. You will learn a lot more.
I bought a CSS and PHP book with the hope that I'd simply program my own site because I couldn't find a gallery I liked. Who was I kidding?  

The books look good though. Thanks for the link.
Title: Good and bad web gallery designs
Post by: eleanorbrown on January 05, 2007, 01:42:08 pm
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.

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".  

I will definitely look into checking some of the file sizes tho with consideration of faster load in mind! eleanor
Title: Good and bad web gallery designs
Post by: Gordon Buck on January 05, 2007, 01:42:46 pm
Quote
...  Now I'm really preplexed because except for the labels being out of line on the portfolio page, i see none of what you are describing.  ...

Nice website, Eleanor, and good photography as well.  From the portfolio page, other pages seem to take 10 to 15 seconds before completely displaying.  A bit of patience is required for that initial display and some people may not hang around that long.  

Until a page is completely loaded, many of the text/labels are displayed with white letters on a light cyan background.  This changes after the page is completely loaded.

I'm on a PC with cable modem connection.  I did get a message that Apple Quicktime was needed when I tried to look at "Dad's Workshop" page.
Title: Good and bad web gallery designs
Post by: eleanorbrown on January 05, 2007, 02:34:17 pm
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



  I did get a message that Apple Quicktime was needed when I tried to look at "Dad's Workshop" page.
[a href=\"index.php?act=findpost&pid=93906\"][{POST_SNAPBACK}][/a]
[/quote]
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 05, 2007, 04:10:51 pm
Quote
Web Design On a Shoestring by Carrie Bickner
http://www.roguelibrarian.com/shoestring/ (http://www.roguelibrarian.com/shoestring/)[a href=\"index.php?act=findpost&pid=93870\"][{POST_SNAPBACK}][/a]
I don't like the fact that a couple of links on this site end in a 404 error. Looks like she needs to read her own book.
Title: Good and bad web gallery designs
Post by: djgarcia on January 05, 2007, 04:12:13 pm
Quote
You asked for it, and here are my comments on your site:

http://improbablystructuredlayers.net/ (http://improbablystructuredlayers.net/)

The Beauty gallery took a long time to load and I think I know why. The image is 162kb at 300dpi. For web display, you don't need more than 100dpi. Smaller file means faster loading. If someone should steal your image, they can't make a large and high quality print. That is one nice shot though. Wish I have patience to see more.

The overall design can be better in many regards, especially with navigation. Check my book recommendations in a later post.
[a href=\"index.php?act=findpost&pid=93866\"][{POST_SNAPBACK}][/a]
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!

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 ...

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

Happy New Year!
Title: Good and bad web gallery designs
Post by: djgarcia on January 05, 2007, 04:27:57 pm
Eleanor, love the beautiful images! I like the basic layout, but I'm also getting the Quicktime installation prompt. You should probably use something more generic like MP3s :-).
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 06, 2007, 07:56:15 am
Quote
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] (http://index.php?act=findpost&pid=93937\")
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 (http://www.color.org/) has created a new sRGB profile (http://www.color.org/profiles.html) 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?
Title: Good and bad web gallery designs
Post by: Chris_T on January 06, 2007, 08:50:40 am
Quote
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.

Quote
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?
Title: Good and bad web gallery designs
Post by: Chris_T on January 06, 2007, 08:55:53 am
Quote
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.
Title: Good and bad web gallery designs
Post by: Chris_T on January 06, 2007, 09:08:23 am
Quote
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.

Quote
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.

Quote
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.
Title: Good and bad web gallery designs
Post by: Chris_T on January 06, 2007, 09:29:36 am
Quote
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. (http://improbablystructuredlayers.net/) 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 (http://www.color.org/) has created a new sRGB profile (http://www.color.org/profiles.html) 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.
Title: Good and bad web gallery designs
Post by: eleanorbrown on January 06, 2007, 11:02:47 am
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

Quote
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]
Title: Good and bad web gallery designs
Post by: djgarcia on January 06, 2007, 11:41:11 am
Quote
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]
Quote
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!
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 06, 2007, 11:41:52 am
Quote
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] (http://index.php?act=findpost&pid=94107\")
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:If you'r curious about the sRGB colorspace and why I recommend it for web use, read this. (http://en.wikipedia.org/wiki/SRGB)
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 06, 2007, 11:55:46 am
Quote
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.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 06, 2007, 05:30:18 pm
What do you all think of this portfolio presentation? (http://mike_cetta.photoworkshop.com/)

ChrisT, does it load quickly for you?
Title: Good and bad web gallery designs
Post by: brianchapman on January 06, 2007, 07:30:26 pm
Chris,
Quote
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.
Quote
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] (http://index.php?act=findpost&pid=93875\")
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 (http://www.brianchapmanphotography.com)
Title: Good and bad web gallery designs
Post by: Chris_T on January 07, 2007, 10:04:57 am
Quote
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>
Title: Good and bad web gallery designs
Post by: Chris_T on January 07, 2007, 10:22:48 am
Quote
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. (http://www.color.org/srgbprofiles.html)
  • 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. (http://en.wikipedia.org/wiki/SRGB)
[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.
Title: Good and bad web gallery designs
Post by: Chris_T on January 07, 2007, 10:28:40 am
Quote
What do you all think of this portfolio presentation? (http://mike_cetta.photoworkshop.com/)

ChrisT, does it load quickly for you?
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=94199\")

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.
Title: Good and bad web gallery designs
Post by: Chris_T on January 07, 2007, 10:52:43 am
Quote
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.

Quote
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 (http://particletree.com/features/dynamic-resolution-dependent-layouts/) 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.?
Title: Good and bad web gallery designs
Post by: brianchapman on January 08, 2007, 02:55:32 pm
Chris,
Quote
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 (http://www.brianchapmanphotography.com)
Title: Good and bad web gallery designs
Post by: LoisWakeman on January 11, 2007, 01:34:30 pm
Quote
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.
Title: Good and bad web gallery designs
Post by: GerardK on January 12, 2007, 02:42:35 am
Quote
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] (http://index.php?act=findpost&pid=95135\")

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]
Title: Good and bad web gallery designs
Post by: GregW on January 12, 2007, 08:42:21 am
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/ (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/ (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.
Title: Good and bad web gallery designs
Post by: LoisWakeman on January 12, 2007, 09:02:00 am
Quote
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 (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.w3.org/TR/WCAG10-HTML-TECHS/#frame-text-equivalent)

http://www-03.ibm.com/able/guidelines/web/webframes.html (http://www-03.ibm.com/able/guidelines/web/webframes.html)
Title: Good and bad web gallery designs
Post by: Nill Toulme on January 12, 2007, 09:29:37 am
As long as you guys are handing out free critiques, please have a go at my site.  It's entirely home-brewed, originally designed in Word of all things.  The galleries are generated by BreezeBrowser.  I am just making the transition from compulsive amateur to "pro."

The rotating images on the front page are badly out of date and due for freshening, BTW.  Not my best work, which is of course what they should be.

Nill
~~
www.toulme.net (http://www.toulme.net)
Title: Good and bad web gallery designs
Post by: GerardK on January 12, 2007, 11:04:35 am
Lois,

Thanks very much for the compliment and the links. I'll check them out!


Gerard Kingma
www.kingma.nu (http://www.kingma.nu)
Title: Good and bad web gallery designs
Post by: Chris_T on January 12, 2007, 03:39:50 pm
Quote
- 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.

O my god! Could I tell this is happening from the source code? I didn'l read that very carefully.

Quote
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/ (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.

And I have such high regards for Apple.

Quote
Regarding design, the following keywords come to mind.  Effortless, simple, clean, focused.

Now you are talking.

Quote
Large companies have the time and resources to extensively test operability.  Individuals and small companies do not.

Many sites are so blatantly broken (borken links, mispellings, etc.) that I often wonder if these web designers tested them at all. Both the authors I recommended spent much verbage on the need for testing.
Title: Good and bad web gallery designs
Post by: Chris_T on January 12, 2007, 03:46:02 pm
Quote
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 (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.w3.org/TR/WCAG10-HTML-TECHS/#frame-text-equivalent)

http://www-03.ibm.com/able/guidelines/web/webframes.html (http://www-03.ibm.com/able/guidelines/web/webframes.html)
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95261\")
Lois, thanks for the article on frames. I also enjoy reading the rationales behind your own site's design choices.

So that you don't feel left out, here are some (very subjective and nick picking) comments on your photo site:

[a href=\"http://photos.lois.co.uk/]http://photos.lois.co.uk/[/url]

What I like:

- Simple but elegant: minimal and consistent use of background/font colors

- Very legible: large font size and line spacing. (Am I repeating myself?)

- Speedy loading.

- Great description on each image and excellent comments on links. Wish more people will do it.

- The search options can be useful, but I didn't try it.

Other comments:

- Why is the navigation menu at the bottom of a page instead of the top (where all viewers are now "trained" to find it)? I almost missed it the first time.
.
- Why are the thumbnails displayed in a single vertical column? It means more vertical scrolling, and also leaves a big blank area to the right of the column.

- Once a thumbnail is enlarged, there is no navigation to view the next/previous enlargement.

- On the Portfoliolist page, Harbor Lights' image is missing. I think the text associated with each image on this page will look better if all the lines' starting points are aligned to the right of the image.
Title: Good and bad web gallery designs
Post by: Chris_T on January 12, 2007, 03:55:13 pm
Quote
As long as you guys are handing out free critiques, please have a go at my site.  It's entirely home-brewed, originally designed in Word of all things.  The galleries are generated by BreezeBrowser.  I am just making the transition from compulsive amateur to "pro."

The rotating images on the front page are badly out of date and due for freshening, BTW.  Not my best work, which is of course what they should be.

Nill
~~
www.toulme.net (http://www.toulme.net)
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95268\")

You asked for it. Here are my comments on your site:

[a href=\"http://www.toulme.net/]http://www.toulme.net/[/url]

- The rotating images are very annoying. Without your warning, I wound not have entered the site.

- Once in a page (sitemap, sports, etc.) all the top level menu buttons (souls, sounds, etc.) are lost. The exception is "order prints". I wonder why. <g>

- In the Sports page (and perhaps other pages as well), I expect the blue colored "soccer", "basketball" etc. to be links. But no, the black text underneath them are the links. Then each of these links opens yet another page with dozens of more links. When I finally get to see some images on a thumbnails page, I have no clue how many images are in this gallery. When I enlarge a thumbnail, I still don't know how many images I will see. (But I begin to realize why there are 50,000 images on your site!)

Here are a couple of suggestions:

- I think using multiple fly-out drop-down menus can improve the navigation. For example, the Sports page will display only the blue text (soccer, basketball, etc.) as menu buttons (NOT links) and NO black text. Clicking on soccer will display a fly-out drop-down menu with a menu option (NOT link) list which is the same black text list under soccer on the existing page (i.e., Atlanta Youth Soccer Association, Woodword Academy, etc.). Clicking on one of these menu options (e.g. Atlanta Youth Soccer Association) will display yet another fly-out drop-down menu which will list more menu options such as fall_2006, spring_2006, etc.) Clicking on one of these (e.g. fall_2006) will display the last fly-out drop-down menu which list the gallery thumbnail pages of each game in fall_2006 as links.

- For those who are not interested in viewing all the images of each game, provide a small gallery of your favorite/best images.

- Add a search function, like Lois'. Your site can use one!

- As I mentioned earlier, gallery size does matter.
Title: Good and bad web gallery designs
Post by: peterpix2005 on January 12, 2007, 04:29:14 pm
Perhaps some comments on my site, I have to work on the galleries obviously but that's coming.

Peter Randall
http://petererandall.com/ (http://petererandall.com/)
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 05:19:48 pm
This will be an odd post, catching up with almost two weeks of not nearly enough time to participate in an interesting thread.

I'll just summarize my responses to a bunch of posts, one post per person I'm responding to (as an arbitrary division).

Gallery examples

Quote
My preference is to display a block of thumbnails and one enlargement, all on one page. This way, the viewers can have a top level view of the gallery (or part of it) and be able to select any thumbnail of his choice, all on one page. I think this is a much better way to navigate a gallery. The following pages are such designs, but they do have their own navigation problems though.

http://www.lezarimages.com/2939OrdwayPk.php (http://www.lezarimages.com/2939OrdwayPk.php)
My first reaction was "ow, cluttered!"

This doesn't work very well, and the explanatory notes are only annoying.

Quote
http://www.richardadamsphotography.com/Gal...gland/index.htm (http://www.richardadamsphotography.com/Gallery/New%20England/index.htm)
Where are the photographs? All I see is a product site that tries to sell me services, or web links. Not a good site for showing off a photo gallery at all.

Perhaps the link died during the past ten days and I'm redirected to a main page or something, but it doesn't really say; bad usability.

(...)

Design templates/scripts

Quote
Agreed that thumbnail size is a tradeoff. The two sites I referred to both have too many thumbnails on a page. A compromise for such a design is to limit the number of thumbnails to say six or eight in the block on a page, and be able to advance to the next block(s) on a new page for a gallery with lots of images. With a smaller thumbnail block, there is more room to fit a larger enlargement on the same page. Luminous Lanscape chooses the other extreme, in their galleries, there are NO thumbnails.

BTW, does anyone know of a non-Flash template or script that can produce such a page?
I can't say that I do, but by juggling JavaScript/ECMAscript and xmlhttp ("AJAX"), it should be doable.

Maybe that's an excuse for finally learning Ruby.


(...)

Books and web site design

Quote
As a matter of fact, I did try to learn what I can. I started out with many html and css books, and was about to dive in. Thank god I didn't. After reading the following two books, I have a completely different view about site design. It is a heck of lot more than just HOW to code. It is more about WHAT to code! My scrutiny of others' sites are learned from these books, combined with my biased preferences.

Don't Make Me Think by Steve Krug
http://www.managementconsultingnews.com/in...g_interview.php (http://www.managementconsultingnews.com/interviews/krug_interview.php)
That book has seen quite a few recommendations.

I'd like to add the following books to your reading list:

Designing Web Usability - the Practice of Simplicity (Jakob Nielsen, 2000) (http://www.useit.com/jakob/webusability/)
Homepage Usability - 50 Web Sites Deconstructed (Jakob Nielsen, 2001) (http://www.useit.com/homepageusability/)

I also suspect that his latest book, Prioritizing Web Usability (2006) (http://www.useit.com/prioritizing/) is worth a read, but I haven't delved into it myself yet.

As with many others, I tend to prioritize by putting my time ahead of designing the perfect web pages, and allow some basic compromises that make me less than happy.

(...)

User interface consistency

Quote
Consistency is very important. If there is inconsistency, a viewer (like me) would wonder does the inconsistency mean something.
I then must recommend that you read the following article:

The Case Against User Interface Consistency (Jonathan Grudin, 1989) (http://portal.acm.org/ft_gateway.cfm?id=67934&type=pdf&coll=portal&dl=ACM&CFID=8909240&CFTOKEN=12165571)



Brief summary: there is a balance; a little bit of inconsistency may be healthy.

(...)

Colour conversion

Quote
2a. After flattening and before converting to srgb, first convert a 16bit file to 8bit.
That may introduce rounding errors resulting in visible image quality loss, especially when the differences between the colour spaces are large.

While converting in 16-bit mode will still result in rounding errors, they will be less significant than if you do them in 8-bit mode.

Convert to sRGB first, then to 8-bit mode.

(...)

CSS and floating elements

Quote
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.

It may sound simple, but browser bugs may get in your way here. The chance of success is greater with Opera than any other browser, and lowest with Internet Explorer.

But, in principle, if you add an alignment parameter of center for the object you want centered, it should work. Just keep in mind that it will be centered in relation to the block around it, not the page.


Gallery critique

In brief, I'm most happy with Lois's site.

My own (http://folk.uio.no/jani/hobbies/photo/)? A mish-mash of different ages of web design and photography, and unfortunately not something I've put a lot of effort into. I like the fact that I've mainly managed to stick to simplicity, but I think I'm too chatty, and that the images I present aren't interesting enough. That's why there are few updates to these images, too.

But since I may want to improve my own web visibility as a photographer and start advertising myself, I'll have to get down and dirty and find my own expression. The web presentation becomes increasingly important, and I'll be damned if I don't nail it.

In some ways, it's a bit annoying that photographers may need to acquire yet another skill set in their profession, that of specialized web design. Then again, it can be compared to composing a decent "real life" gallery exhibition, which also is a job requiring skill and experience.
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 05:23:53 pm
Quote
A php gallery uses a MySQL database
That in itself has nothing to do with PHP, and there are PHP galleries which don't use MySQL or a relational database at all.

Quote
and its greatest benefit is the ability to include IPTC data, captions and searchable key words (for those of us that sell stock photography).
You don't need PHP+MySQL for that.

Quote
The greatest benefit to a php gallery is that it's dynamic server side programming. Everything is executed on the server and the html is generated on-the-fly.
That is also its greatest downside; everything has to be dynamically executed on the server, unless you add a reverse proxy with caching. That is, unless you have another small web server in front of it, which caches the content generated by PHP.

And why is dynamically executed code bad, except for my repeated warnings against the security issues?

It is resource intensitive. It is far easier and quicker for a web server to provide what we call "static" content, or pre-loaded content.

Quote
No plug-ins, browser extensions or Java is needed. The browser can be Windows, Mac, Unix, or even Blackberry. Pages load as fast as your server can generate them.
And with static content, they load even faster, since the web server doesn't have to generate them.

The downside to static content is, of course, that you have to generate your galleries before presenting them, either through software like Photoshop, Lightroom, diverse "album" software, or on server-side installed software that also generates static content.

Quote
Another benefit is that you can add and delete images and/or folders of images and the php script will change the site as the content changes. This makes gallery generation while working on location a breeze.
As far as I know, Album (http://marginalhacks.com/Hacks/album/Themes.html) also offers similar functionality, yet it serves static pages.

I'm still undecided whether I'll go back to rolling my own HTML, use a ready-made product like Gallery, or do something else.


Quote
What do you all think of this portfolio presentation? (http://mike_cetta.photoworkshop.com/)
I like the presentation, though I don't see why Flash needs to be used here, except for showing a progress bar an "loading photograph". I concur with Chris T's comments on the obvious bugs in the Flash code.

There's a huge downside here, however, and that is that most of your images are over-compressed, showing clear artifacts that detract from the viewing pleasure of otherwise lovely photographs.

To me, you've compromised too much on the important bit: the presentation of your photos. Is the excellent speed worth that price?
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 05:24:41 pm
Quote
Interesting.. It took me about 2 sec to load the site from where I am.

I experience the same thing with my new site. It takes me about 20 sec to load the site, others tell me it takes 2 sec and no problems..

It seems the choise of hosting service, the location of the server ++ are all important factors ?
The location of the server in relation to you, yes, but not the geographical location as much as the network location.

Your neighbour's computer may be further away on the net than a website 500 km away.

Basically, the perceived "speed" of a web site depends largely on four factors (not in any particular order, but numbered anyway):

1) Available end-to-end network speed and capacity (from your computer to the server and back)
2) Available server speed and capacity
3) Website complexity
4) Available personal computer speed and capacity

You can go insane trying to figure out the problems if you don't know much about computers, networks and programming. Many professionals get confused, mainly from lack of wide experience and/or education.

For the record, the flash site takes 20-25 seconds to load for me. When I'm viewing web pages interactively, that's about four to five times as long as I'm willing to wait.

That labels me as an impatient guy, at least compared to studies around 1999/2000, when people tended to lose interest if a web site took more than 10 seconds to load.

Flash pages would do well to have a quicker initial load time (and thus a very small script size), and perform some fancy background loading tricks. That's basically what AJAX is about; load only the necessary framework to get the web page up quickly, load the content that's not immediately necessary in the background. An example of the latter is Gmail.
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 05:25:20 pm
Quote
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.
Boxes don't only have borders, but they also have padding and margin properties (http://www.w3.org/TR/REC-CSS2/box.html).

If you reduce a margin, the spacing to other elements will be reduced.

If you reduce padding, the spacing to the border will be reduced.


Quote
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.
What happens if you fail to detect the browser width, for instance if the user has disabled javascript?
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 05:30:37 pm
Quote
Perhaps some comments on my site, I have to work on the galleries obviously but that's coming.

Peter Randall
http://petererandall.com/ (http://petererandall.com/)
Simple and elegant on the front pages, and still simple and easily loaded on the following pages. Navigation is easy, too.

But it doesn't look very professional today, mostly because it's a run-of-the-mill gallery style. Just a little bit of work with the graphical elements in the galleries, and I think you're there. Is there a way you can include elements from your main page, perhaps?
Title: Good and bad web gallery designs
Post by: Lust4Life on January 12, 2007, 05:59:55 pm
Ok, so stay away from flash is the majority opinion.  How about what gamma to use for your images.  

I do all of my work on a Mac G5 out to the Epson 4800 and stay in a gamma of 2.2.  I've built my web site on that gamma but wonder what is the typical gamma on most folks monitors that they will be viewing my site on.

http://www.shadowsdancing.com (http://www.shadowsdancing.com)
Title: Good and bad web gallery designs
Post by: jani on January 12, 2007, 06:57:09 pm
Quote
Ok, so stay away from flash is the majority opinion.  How about what gamma to use for your images.

I do all of my work on a Mac G5 out to the Epson 4800 and stay in a gamma of 2.2.  I've built my web site on that gamma but wonder what is the typical gamma on most folks monitors that they will be viewing my site on.
Typical gamma will be around 2.2 unless it's an ancient Mac, and monitors usually are calibrated for that gamma.

If you want a source for this, try "Real World Color Management", ISBN 0-321-26722-2.

Quote
http://www.shadowsdancing.com (http://www.shadowsdancing.com)
I like your site design. While it's not perfect, it's mostly aesthetically pleasing to my eye, though it is a bit too long vertically; inter-gallery navigation is below the horizon on most displays.

You might want to try adopting Ctein's (http://ctein.com) grayscale wedges to help people along, in case their monitors need adjustment to get a half-decent contrast and brightness.
Title: Good and bad web gallery designs
Post by: John.Murray on January 13, 2007, 12:09:20 am
What a fun thread!  Great ideas - great images!

I'm quite taken with jAlbum a nice static site generator with a slick FTP upload utility.  My site is a bit modified from the generated version:

http://imagesbymurray.com (http://imagesbymurray.com)

The grayscale ramp is an excellant idea - I put one in the Help and About pages.  I'm also very carefull to make sure keyboard users have a way to navigate the site - something that many Flash components ignore.  Another common and very appropriate feature for a photo site are the "bread crumb" links at the top.

cheers - John
Title: Good and bad web gallery designs
Post by: Nill Toulme on January 13, 2007, 12:25:30 am
Quote
You asked for it. Here are my comments on your site:
...[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95325\")
Thanks Chris.  The flyout menus are a great idea.  I will look into that.

The typical visitor to my site is looking for a particular event or group of events, e.g., Woodward basketball games, as opposed to simply poking around to see what's there.  Does looking at it from that standpoint change your opinion at all?

I guess that might be cast as a more general question too — i.e., to what extent should the design and navigation of a site take into account the expectations and intentions of the typical visitor, as opposed to meeting some more general overall ideal?

Nill
~~
[a href=\"http://www.toulme.net]www.toulme.net[/url]
Title: Good and bad web gallery designs
Post by: jani on January 13, 2007, 08:22:52 am
Quote
The typical visitor to my site is looking for a particular event or group of events, e.g., Woodward basketball games, as opposed to simply poking around to see what's there.  Does looking at it from that standpoint change your opinion at all?

I guess that might be cast as a more general question too — i.e., to what extent should the design and navigation of a site take into account the expectations and intentions of the typical visitor, as opposed to meeting some more general overall ideal?
The answer is abundantly clear:

It depends.

If you're mainly interested in catering for the typical visitor you describe, and don't care about the others, then you should take care of that visitor. Find a few representative of that group of visitors, and ask them what they think of your site; do they find what they want to find, do they miss anything? Do they find your design aesthetically pleasing? Etc.

If you want to cater for a larger group while still taking care of the special interest groups, that adds a bit of extra work. Unless you can somehow direct the ones who are interested in those particular events directly to those events, you'll need a front page that makes it abundantly clear where you find what. And you should still talk to the different groups.

Perhaps you could include a small search engine (Google works here, too) based on keywords and descriptive text found within your site, perhaps you want to present both a traditional hierarchical navigation as well as an index or (urgh) a site map.

(I generally dislike "site maps" as found on most sites; they're not maps, they don't help in finding deeper links, they're often just a list of the main navigational elements on the front page.)
Title: Good and bad web gallery designs
Post by: Hendrik on January 13, 2007, 09:16:24 am
Wow, some have really negative opinions about Flash.  

I agree with the statement that flash used badly is bad, but that’s the case with every other tool you use to create your website. Flash is not always bad.

My own website is in flash, but I think it’s not slow. I’m already working on a new design, because some parts can be improved, but I like the overall look (opinions may differ).  

As with everything, it’s in my opinion wise to make notes on what goal you have with your website. Is it to show your art to the general public? Is it a portfolio for the graphic sector? Is it to attract new customers? Is it to sell products … or whatever. Decisions must be made based on your target audience you have in mind.

For example take this: www.robertcharlesphoto.com Maybe not the best flash-site, but they have something to say and I think they succeeded. For me it creates an intimate atmosphere or mood and it makes me confident that they can capture my family the way I like. Their target is clear: families. If they want to impress the professional art industry, they had to come with something else.
Title: Good and bad web gallery designs
Post by: John Camp on January 13, 2007, 11:25:42 am
Very interesting thread. A couple of peripheral notes:

I just googled "dial-up percentage" and there's a report that says dial-up decreased to 44 percent in 2006 -- 56 percent of web users are now on high-speed broadband. That's an eleven percent increase in 2006 alone. In a couple of years, I would say that dial-up won't be worth designing for, especially for photogaphy websites (I would be willling to bet that people who are interested in photography on the web are much more likely that the average user to be on a high-speed connection.)

Literary agents will tell you that the people most worried about sending their story off to NY, where it'll immediately be stolen or plagiarized, are the very people who should be least worried about it...and serious professionals don't worry about that at all. I have the feeling (but I may be wrong) that the same is true with photography. Who knows how many images there are on the web? It's gotta be literally in the billions...and they're mostly low-res. One might get picked up now and again, but I don't think it's a big danger; you're not going to lose major revenue from photo theft at 72dpi  

If I were designing a photo website, I would take a long look at the opening page of either Lightroom or Aperture.

A lot of you guys are very good photographers.

JC
Title: Good and bad web gallery designs
Post by: jani on January 13, 2007, 01:21:31 pm
Quote
Wow, some have really negative opinions about Flash.   

I agree with the statement that flash used badly is bad, but that’s the case with every other tool you use to create your website. Flash is not always bad.
Flash in itself may not be intrinsically bad, except for the lack of possible indexing and the requirement of a browser plugin.

Quote
My own website is in flash, but I think it’s not slow. I’m already working on a new design, because some parts can be improved, but I like the overall look (opinions may differ). 
"Voor deze site heeft u Microsoft Internet Explorer versie 5.5 (of hoger) en de Macromedia Flash plugin versie 7 (of hoger) nodig."

You might say that opinions may differ, yes.

For one thing, you don't need Microsoft Internet Explorer to view flash pages.

And if you're designing your web pages for Internet Explorer only, I can see why you need to redesign; IE 7 is not design compatible with IE 6 and previous versions.

Perhaps you should consider following web standards instead, and make exceptions for IE when IE doesn't follow the standards?

Quote
For example take this: www.robertcharlesphoto.com Maybe not the best flash-site, but they have something to say and I think they succeeded. For me it creates an intimate atmosphere or mood and it makes me confident that they can capture my family the way I like. Their target is clear: families. If they want to impress the professional art industry, they had to come with something else.
Let's see; annoying pop-up window, and almost 30 seconds to load (most of it on animations) on my broadband connection, even after I noticed that I could click "skip intro" to get, well, an intro ...

An additional 12-15 seconds to load the "galleries", most of the time spent on animations.

The rest is pretty quick, but there are no images that are above a slightly large thumbnail size that I can see. The thumbnails are so small that you can't see what you're going to look at next.

Perhaps the animations and general design are okay, but the picture presentation is, unfortunately, lousy.

Basically, the designer has fallen into the trap of using Flash because Flash is kewl, d00d! Not because he added features that were necessary, useful or impossible to do with a more basic presentation.

"Has potential, but a lot of work is needed."
Title: Good and bad web gallery designs
Post by: Chris_T on January 13, 2007, 02:48:13 pm
Quote
Perhaps some comments on my site, I have to work on the galleries obviously but that's coming.

Peter Randall
http://petererandall.com/ (http://petererandall.com/)
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95332\")

Here are my comments on your site:

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

Almost all the things I like about Lois' site apply to yours as well. In addition, I like your fixed design as opposed to Lois' fluid design. I think for a site dominated by (large) images, a fixed design works better. Also I like the centered active area. Almost every page fits nicely on my 1280x1024 window without the need of scrolling. I like that a lot. I suspect that your design targetted this intentionally, and some thoughts had gone into deciding each page's content and the number of pages. Last but not least, your thumbnails+enlargement layout is what I have in mind.

When I first entered the Isles of Shoals gallery, only the thumbnails are displayed without an enlargement. Perhaps displaying the first thumbnail as an enlargement will be better. After an enlargement is displayed there is no navigation for the next/previous one. BTW, my planned gallery layout is very close to yours. There will be no text at the top, the number of thumbnails is six, and the enlargement size is 300x450 pixels. It will fit nicely in a 1024x768 window (my target) without vertical scrolling. For each enlargement there will be captions, and next/previous navigation. For a gallery with more than six images, there will be navigation to load the additional thumnails. When advancing from one enlargement to another, only the new enlargement will be loaded, but not the thumbnails. (I think I need to use iframe for that, yuck.) All I have to do is figure out how to code this. How was yours done? (No. I won't steal your code.)

I wish your Ghana gallery is done the same way as the Shoals gallery. Then, I can see how you handle a large gallery with the same page layout. I have a plan but have yet to figure out how to code it.

The Ghana page's navigation menu at the top is very different from the other pages'. I suspect that this page is "borrowed" from another source, or done by a different designer. Have a good trip. Wish I'm coming along.

Among all the sites reviewed so far, I like yours the most.
Title: Good and bad web gallery designs
Post by: mikeseb on January 13, 2007, 03:31:11 pm
Quote
Wow, some have really negative opinions about Flash. 

Because often such sites seem to exist to serve Flash, not the images they purport to display.

Quote
For example take this: www.robertcharlesphoto.com Maybe not the best flash-site, but they have something to say and I think they succeeded. For me it creates an intimate atmosphere or mood and it makes me confident that they can capture my family the way I like.

I see your point, Hendrik, but I still find robert charles photo to be one of the most annoying sites i've ever visited. It's practically a graduate-level tutorial in how to make a site maximally irritating.

I made myself stay long enough to ascertain that the photography is actually quite good. So why is it smothered in heinous music and laden with syrupy platitudes? And all the while something is spinning, or whirling, or moving, or loading, while the guitarist strums away in the background, like a three-fingered street musician who won't get out of your way.

Had I not deliberately wanted to view the work, I'd have run like a scalded dog from that site. The only atmosphere it creates for me is one of "what are they hiding?" and "aren't they confident enough in the work to present it without adornment?" and "do they think their target clients are so unsophisticated they'll not purchase their services without the nonsense?"

I don't know the owners of the above-referenced site, and I'm not trying to pick on them specifically.
Title: Good and bad web gallery designs
Post by: Chris_T on January 13, 2007, 03:38:44 pm
Quote
This will be an odd post, catching up with almost two weeks of not nearly enough time to participate in an interesting thread.

I'll just summarize my responses to a bunch of posts, one post per person I'm responding to (as an arbitrary division).

Better late than never. Great to have a programmer jumping in.

Quote
Gallery examples
My first reaction was "ow, cluttered!"

This doesn't work very well, and the explanatory notes are only annoying.
Where are the photographs? All I see is a product site that tries to sell me services, or web links. Not a good site for showing off a photo gallery at all.

Perhaps the link died during the past ten days and I'm redirected to a main page or something, but it doesn't really say; bad usability.

I used those two pages to illustrate a layout with thumbnails and an enlargement on the same page. They are by no means what I consider good designs. Peter's site is a much better example of the page layout I have in mind.

Quote
Design templates/scripts
I can't say that I do, but by juggling JavaScript/ECMAscript and xmlhttp ("AJAX"), it should be doable.

Maybe that's an excuse for finally learning Ruby.

You are the second person who suggests that it can be done with javascripts, etc. Almost everyone else can only do it with php. I would like to learn more about how to do it in javascripts, which I know next to nothing. What is Ruby? Is it possible to e-mail you directly?

Quote
Books and web site design
That book has seen quite a few recommendations.

I'd like to add the following books to your reading list:

Designing Web Usability - the Practice of Simplicity (Jakob Nielsen, 2000) (http://www.useit.com/jakob/webusability/)
Homepage Usability - 50 Web Sites Deconstructed (Jakob Nielsen, 2001) (http://www.useit.com/homepageusability/)

I also suspect that his latest book, Prioritizing Web Usability (2006) (http://www.useit.com/prioritizing/) is worth a read, but I haven't delved into it myself yet.

As with many others, I tend to prioritize by putting my time ahead of designing the perfect web pages, and allow some basic compromises that make me less than happy. 

Too many books and too little time. The two I recommended happen to be skinny and easy to digest.

Quote
User interface consistency
I then must recommend that you read the following article:

The Case Against User Interface Consistency (Jonathan Grudin, 1989) (http://portal.acm.org/ft_gateway.cfm?id=67934&type=pdf&coll=portal&dl=ACM&CFID=8909240&CFTOKEN=12165571)



Brief summary: there is a balance; a little bit of inconsistency may be healthy.

I agee that there is room for inconsistency, provided that they are intended and serve some purposes. For the inconsistency in that particular site, I found it served no purpose and did not appear to be intended. The site's owner acknowledged that it was unintentional.

Quote
Colour conversion
That may introduce rounding errors resulting in visible image quality loss, especially when the differences between the colour spaces are large.

While converting in 16-bit mode will still result in rounding errors, they will be less significant than if you do them in 8-bit mode.

Convert to sRGB first, then to 8-bit mode.

I stand corrected.

Quote
CSS and floating elements
It may sound simple, but browser bugs may get in your way here. The chance of success is greater with Opera than any other browser, and lowest with Internet Explorer.

But, in principle, if you add an alignment parameter of center for the object you want centered, it should work. Just keep in mind that it will be centered in relation to the block around it, not the page.

I'll look into that center alignment parameter. Thanks.

Quote
Gallery critique

In brief, I'm most happy with Lois's site.

My own (http://folk.uio.no/jani/hobbies/photo/)? A mish-mash of different ages of web design and photography, and unfortunately not something I've put a lot of effort into. I like the fact that I've mainly managed to stick to simplicity, but I think I'm too chatty, and that the images I present aren't interesting enough. That's why there are few updates to these images, too. 

I'll check out your site, but be prepared for some opinionated feedback. Too many sites to review, and too little time. <g>

Quote
But since I may want to improve my own web visibility as a photographer and start advertising myself, I'll have to get down and dirty and find my own expression. The web presentation becomes increasingly important, and I'll be damned if I don't nail it.

In some ways, it's a bit annoying that photographers may need to acquire yet another skill set in their profession, that of specialized web design. Then again, it can be compared to composing a decent "real life" gallery exhibition, which also is a job requiring skill and experience.

You got that right. After spending the amount of time/effort creating an image, it makes perfect sense to me to display it the best way I know how. And that means work, web or no web. Long before web came along, I learned how to mat and frame so that I can hang at home or give as gifts. Then I was so desperate to exhibit my work in public that I was thrilled even when they were hung on dirty walls in a dark and deserted pub. Now I'll scout the location for traffic, lighting and clean walls prior to commiting to an exhibit. Being a DIY type with a tech background, I fall into the trap of wanting to design my site. Oh, yeah, I still shoot, in my spare time.

Many great photogs who are not web saavy ended up with horrific sites for their wonderful work. They need to either become techies (not recommended) or search out the great web designers out there. My first level of screening is to ask a designer whether he/she is *proficient* at hand coding in html/css. It is a good test whether they are just Dreamweaver/template jockeys or do they really know what is under the hood. That quickly separates the men/women from the boys/girls.
Title: Good and bad web gallery designs
Post by: Chris_T on January 13, 2007, 03:55:44 pm
Quote
Thanks Chris.  The flyout menus are a great idea.  I will look into that.

The typical visitor to my site is looking for a particular event or group of events, e.g., Woodward basketball games, as opposed to simply poking around to see what's there.  Does looking at it from that standpoint change your opinion at all?

I guess that might be cast as a more general question too — i.e., to what extent should the design and navigation of a site take into account the expectations and intentions of the typical visitor, as opposed to meeting some more general overall ideal?

Nill
~~
www.toulme.net (http://www.toulme.net)
[a href=\"index.php?act=findpost&pid=95413\"][{POST_SNAPBACK}][/a]

Great questions, and Jani answered them well. I'll add my $.02.

The first questions a site builder should ask are: what is the site's purpose and who are the audience. All design decisions should then be based on these objectives.

In your case, I would have to retrack my recommendation. If you have a targeted audience who are already "trained" to navigate your site, changing it may rub them the wrong way. Instead, I will put some text/links in your homepage that will allow them to quickly get to the game gallery pages they are interested in. Actually, before even that, have a "What's New" section that lists the most recent games.

One of the things that really bugs me is few sites provide info about when the site was last updated, and what was updated. This is particularly important for sites like Luminous Landscape. None of the articles here are dated. With technology changing at the current speed, many writings can become obsolete in a hurry.
Title: Good and bad web gallery designs
Post by: jani on January 13, 2007, 04:01:00 pm
Quote
When I first entered the Isles of Shoals gallery, only the thumbnails are displayed without an enlargement. Perhaps displaying the first thumbnail as an enlargement will be better. After an enlargement is displayed there is no navigation for the next/previous one.
At this point, I went "huh?! have we even looked at the same site?".

And it appears that we have not.

I was evaluating the Ghana library, which is completely different.

Ironically, I don't like the Isles of Shoals gallery as much, because it feels a bit more cluttered and fiddly.

Quote
BTW, my planned gallery layout is very close to yours. There will be no text at the top, the number of thumbnails is six, and the enlargement size is 300x450 pixels. It will fit nicely in a 1024x768 window (my target) without vertical scrolling. For each enlargement there will be captions, and next/previous navigation. For a gallery with more than six images, there will be navigation to load the additional thumnails. When advancing from one enlargement to another, only the new enlargement will be loaded, but not the thumbnails. (I think I need to use iframe for that, yuck.)
I believe you'll find that it's possible to replace the image in-place with AJAX.

Quote
I wish your Ghana gallery is done the same way as the Shoals gallery. Then, I can see how you handle a large gallery with the same page layout. I have a plan but have yet to figure out how to code it.
flickr has examples of that, I guess.  

Quote
The Ghana page's navigation menu at the top is very different from the other pages'. I suspect that this page is "borrowed" from another source, or done by a different designer. Have a good trip. Wish I'm coming along.
I think that navigation is the result of a standard HTML gallery product.
Title: Good and bad web gallery designs
Post by: jani on January 13, 2007, 04:15:14 pm
Quote
You are the second person who suggests that it can be done with javascripts, etc. Almost everyone else can only do it with php.
The important difference between javascript and PHP is:

PHP runs on the server, javascript in the browser.

So when PHP renders a page, it cannot actually change content that's already been sent to the web browser.

However, the web browser can change content that it's already received, and javascript contains mechanisms to manipulate that.

Here's an online AJAX (Asynchronous Javascript and XML) tutorial (http://www.w3schools.com/ajax/default.asp), and an example AJAX-based gallery (http://dhtmlnirvana.com/ajax/gallery/ajaxgallery.html) (javascript source code (http://dhtmlnirvana.com/ajax/gallery/ajaximage.js)).

Quote
I would like to learn more about how to do it in javascripts, which I know next to nothing. What is Ruby? Is it possible to e-mail you directly?
I was actually thinking about using Ruby on Rails (http://www.rubyonrails.org/).

To send me email, just click on my nickname to get my profile, there's a link to sending email or PMs there.

A warning, though: I have no experience coding in javascript.

Quote
I'll check out your site, but be prepared for some opinionated feedback. Too many sites to review, and too little time. <g>
Hehe

I wouldn't have volunteered the link if I couldn't take opinionated feedback, even though I know the presentation isn't very good...
Title: Good and bad web gallery designs
Post by: Nill Toulme on January 13, 2007, 04:18:25 pm
Thanks again Chris.  A "What's New" item for the front page is a particularly good idea, and also perhaps a particularly good place to experiment with the flyout idea.

Nill
~~
www.toulme.net (http://www.toulme.net)
Title: Good and bad web gallery designs
Post by: Chris_T on January 13, 2007, 04:22:30 pm
Quote
Ok, so stay away from flash is the majority opinion.  How about what gamma to use for your images. 

I do all of my work on a Mac G5 out to the Epson 4800 and stay in a gamma of 2.2.  I've built my web site on that gamma but wonder what is the typical gamma on most folks monitors that they will be viewing my site on.

http://www.shadowsdancing.com (http://www.shadowsdancing.com)
[a href=\"index.php?act=findpost&pid=95359\"][{POST_SNAPBACK}][/a]

I think the navigation menu will be more visible at the top instead of the bottom of a page.

What percentage of your targeted audience will understand the meaning of  "gamma 2.2"?

I dislike "Under Construction" or "Future Image". In a gallery exhibit, will you leave an empty space on the wall with a "Work in Progress" note?

On a thumbnails page, "click in any image to enlarge" is not necessary, and the text is sitting right on top of the thumbnails without any spacing.

The color of a thumbnail's background and an enlargement's borders is the same as the overall background. I think a lighter (off-white?) color may work better. The enlargement borders are way too narrow for my taste.

Once an enlargement is displayed, there is no way to view a previous one.

The few thumbnails pages I checked don't have too many images and the layout is adequate. How will you handle a gallery with, say, 30 images?
Title: Good and bad web gallery designs
Post by: Hendrik on January 13, 2007, 04:56:31 pm
Quote
Flash in itself may not be intrinsically bad, except for the lack of possible indexing and the requirement of a browser plugin.
"Voor deze site heeft u Microsoft Internet Explorer versie 5.5 (of hoger) en de Macromedia Flash plugin versie 7 (of hoger) nodig."

You might say that opinions may differ, yes.

For one thing, you don't need Microsoft Internet Explorer to view flash pages.

And if you're designing your web pages for Internet Explorer only, I can see why you need to redesign; IE 7 is not design compatible with IE 6 and previous versions.

...

Hmm, didn't know it wasn't viewable on Firefox. I shall mail the one who made this for me and ask him about this issues. (I designed it, but cannot make it in flash).
Title: Good and bad web gallery designs
Post by: jani on January 13, 2007, 05:55:55 pm
Quote
Hmm, didn't know it wasn't viewable on Firefox. I shall mail the one who made this for me and ask him about this issues. (I designed it, but cannot make it in flash).
All he needs to do is to remove the browser check, that's so ... 1995.
Title: Good and bad web gallery designs
Post by: Chris_T on January 14, 2007, 10:24:26 am
Quote
Because often such sites seem to exist to serve Flash, not the images they purport to display.
I see your point, Hendrik, but I still find robert charles photo to be one of the most annoying sites i've ever visited. It's practically a graduate-level tutorial in how to make a site maximally irritating.

I made myself stay long enough to ascertain that the photography is actually quite good. So why is it smothered in heinous music and laden with syrupy platitudes? And all the while something is spinning, or whirling, or moving, or loading, while the guitarist strums away in the background, like a three-fingered street musician who won't get out of your way.

Had I not deliberately wanted to view the work, I'd have run like a scalded dog from that site. The only atmosphere it creates for me is one of "what are they hiding?" and "aren't they confident enough in the work to present it without adornment?" and "do they think their target clients are so unsophisticated they'll not purchase their services without the nonsense?"

I don't know the owners of the above-referenced site, and I'm not trying to pick on them specifically.
[a href=\"index.php?act=findpost&pid=95528\"][{POST_SNAPBACK}][/a]

Wow, and I worried that my comments may be too blunt and opinionated. LOL.

Thanks for the warning, I won't bother going there.

Can you share with us your favorite photo gallery sites?
Title: Good and bad web gallery designs
Post by: Chris_T on January 14, 2007, 10:28:20 am
Quote
The important difference between javascript and PHP is:

PHP runs on the server, javascript in the browser.

So when PHP renders a page, it cannot actually change content that's already been sent to the web browser.

However, the web browser can change content that it's already received, and javascript contains mechanisms to manipulate that.

Here's an online AJAX (Asynchronous Javascript and XML) tutorial (http://www.w3schools.com/ajax/default.asp), and an example AJAX-based gallery (http://dhtmlnirvana.com/ajax/gallery/ajaxgallery.html) (javascript source code (http://dhtmlnirvana.com/ajax/gallery/ajaximage.js)).
I was actually thinking about using Ruby on Rails (http://www.rubyonrails.org/).

To send me email, just click on my nickname to get my profile, there's a link to sending email or PMs there.

A warning, though: I have no experience coding in javascript.
Hehe

I wouldn't have volunteered the link if I couldn't take opinionated feedback, even though I know the presentation isn't very good...
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95541\")

First Ruby, now Ajax. My head is spinning and now I wonder what I'm getting myself into.

I'm quite surprised by your photo pages:

[a href=\"http://folk.uio.no/jani/hobbies/photo/]http://folk.uio.no/jani/hobbies/photo/[/url]

I was expecting fine work from someone with great technical competence. But these pages are so basic that they look like something coded by me. Perhaps you designed your site this way to serve a particular purpose or for a targeted audience? I have no doubt that you can come up with something quite different.
Title: Good and bad web gallery designs
Post by: Chris_T on January 14, 2007, 10:41:35 am
Quote
At this point, I went "huh?! have we even looked at the same site?".

And it appears that we have not.

I reached the following Shoals gallery page

http://petererandall.com/shoals.html (http://petererandall.com/shoals.html)

by clicking the Gallery menu button on the home page followed by clicking the Shoals gallery link. The above page opens with the thumbnails, but *without* an enlargement.

Which page are you looking at?

Quote
I was evaluating the Ghana library, which is completely different.

My comment as well. Perhaps that's another work in progress.

Quote
Ironically, I don't like the Isles of Shoals gallery as much, because it feels a bit more cluttered and fiddly. 

Not quite sure what you meant by cluttered and fiddly. As stated earlier, designing a layout with a bunch of thumbnails and an enlargement on the same gallery page is my holy grail. The Shoals page is a good example, but I would remove the text paragraphs, and reduce the number of thumbnails to six, and incorporate better navigation. Perhaps that will be less cluttered.

Quote
I believe you'll find that it's possible to replace the image in-place with AJAX.
flickr has examples of that, I guess.   
I think that navigation is the result of a standard HTML gallery product.
Yet another alternative to look into. Thanks.
Title: Good and bad web gallery designs
Post by: Chris_T on January 14, 2007, 11:14:46 am
Quote
Very interesting thread. A couple of peripheral notes:

I just googled "dial-up percentage" and there's a report that says dial-up decreased to 44 percent in 2006 -- 56 percent of web users are now on high-speed broadband. That's an eleven percent increase in 2006 alone. In a couple of years, I would say that dial-up won't be worth designing for, especially for photogaphy websites (I would be willling to bet that people who are interested in photography on the web are much more likely that the average user to be on a high-speed connection.)

What images we want to share, with whom and by what means are entirely our personal decisions. We can all achieve such goals with a little thinking before designing a site and executing accordingly.

Unlike many other services (like clean tap water and indoor plumbing), the Net (and cell phones), is much more easily available to those less fortunate than us. Building easily accessible sites is one way to make good use of the Net to reach the broadest audience out there.

Sorry to let my bleeding heart slip, and stepping off my soap box.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 14, 2007, 02:07:57 pm
Quote
Building easily accessible sites is one way to make good use of the Net to reach the broadest audience out there.
ChrisT,

This is where I think you're being too conservative and leaning towards the dial-up crowd too much. If Amazon.com (http://www.amazon.com/) were to design for dial-up, they wouldn't display their vast database as they do, nor have the success they do now. As a photographer (I only assume you're one because you've not shown us your site or work) your market/niche is much more limited than Amazon's. In my judgement, you could design for faster download times for your audience because they expect a higher level of image quality and are willing to wait a few more microseconds for better quality reproduction.

A simple, well-coded PHP site with a MySQL backend would load just as fast as a simple-but-customized HTML site. Even if the visitor was on dial-up.
Title: Good and bad web gallery designs
Post by: jani on January 14, 2007, 02:49:18 pm
Quote
First Ruby, now Ajax. My head is spinning and now I wonder what I'm getting myself into.
The two are not mutually exclusive, any more than "web server" and "web browser" are.

Ruby runs on the web server, AJAX runs in the web browser.

Ruby can be used to generate AJAX pages, for instance with Ruby on Rails.

Quote
I'm quite surprised by your photo pages:

http://folk.uio.no/jani/hobbies/photo/ (http://folk.uio.no/jani/hobbies/photo/)

I was expecting fine work from someone with great technical competence. But these pages are so basic that they look like something coded by me. Perhaps you designed your site this way to serve a particular purpose or for a targeted audience?
I think the hint is in the URL; it's a hobby page. If you strip down to http://folk.uio.no/jani/ (http://folk.uio.no/jani/), you'll see that it's a bit of work even to get there.

The design was made simple to save time, and to easily share a few pictures with fellow ex-students, and because PHP and CGI aren't reliable alternatives.

You'll probably note that the photographic quality isn't much to boast about, either.

Quote
I have no doubt that you can come up with something quite different.
I definitely can, but I have the same problem as many others; time and inclination do not match the ability.

I also find it very hard to motivate myself; I spend all day with computers, spending evenings with them, too, is not high on my list of priorities, and that unfortunately also results in less work with afterprocessing of images, too.

Criticizing others is easy and effortless, though.
Title: Good and bad web gallery designs
Post by: brianchapman on January 14, 2007, 03:48:25 pm
This thread is hard to keep up with!!
Quote
What happens if you fail to detect the browser width, for instance if the user has disabled javascript?
If I fail to detect browser width I simply use the default style (I honestly can't remember at the moment whether it is the large or small on though!)  I don't worry about those people who disable javascript - it's becoming important enough for a rich user experience that I assume that the majority of people who expect such an experience will not disable it.  That assumption is supported by the percentage of people visiting my site with javascript disabled - 1%.  That said, my site does degrade gracefully for that 1%...but it wasn't an intentional feature.

Brian
http://www.brianchapmanphotography.com (http://www.brianchapmanphotography.com)
Title: Good and bad web gallery designs
Post by: AWeil on January 14, 2007, 07:34:21 pm
Indeed, hard to follow this hread - but fun.
I second Jani: Easy to criticize, hard to do/find the time/the motivation.

Mine is a php site, no flash, just images:
http://www.awl-photo.com (http://www.awl-photo.com)
The site is meant to share images, a 'This is what I do' type of page.
 
A similar one, but constructed much better, is this one:
http://www.nick-hermanns-photography.de/ (http://www.nick-hermanns-photography.de/)
I like the text overlays, but I don't know how to implement that.

And this site I like a lot, very simple and straight forward - even better than the other two sites:
http://www.kalpeshlathigra.com/main.php (http://www.kalpeshlathigra.com/main.php)

Cheers
Angela
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 14, 2007, 10:15:54 pm
Quote
http://www.nick-hermanns-photography.de/ (http://www.nick-hermanns-photography.de/)

http://www.kalpeshlathigra.com/main.php (http://www.kalpeshlathigra.com/main.php)
I really like these two galleries also. For my connection (standard DSL) they are very fast loading.
Title: Good and bad web gallery designs
Post by: Gregory on January 15, 2007, 05:37:31 am
Quote
Any font/rollover color differences in the main site are not intended...I will take a look.  I think consistency is important but I have a lot of extras in my css which has caused some problems finding things ;-)[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=93706\")
As your site grows, the css will become more complex; assuming that you write your own code. I use [a href=\"http://macrabbit.com/cssedit/]CSSEdit[/url] to write my CSS code and Xyle Scope (http://culturedcode.com/xyle/) to examine the site and see which css code is governing the appearance of what content. It makes things much much easier to manage.

regards,
Gregory
Title: Good and bad web gallery designs
Post by: Gregory on January 15, 2007, 05:44:25 am
Quote
The Beauty gallery took a long time to load and I think I know why. The image is 162kb at 300dpi. For web display, you don't need more than 100dpi.[a href=\"index.php?act=findpost&pid=93866\"][{POST_SNAPBACK}][/a]
Most web browsers ignore the dpi setting and display at native resolution. As such, the resolution should not affect the size of the image. The pixel dimensions and jpeg compression quality setting would affect the size. If you're using a Mac, a custom icon will also increase the size of the file. I remove my custom icons via a script and GraphicConverter before ftp'ing up to my server.

regards,
Gregory
Title: Good and bad web gallery designs
Post by: Gregory on January 15, 2007, 06:07:47 am
Quote
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.
[a href=\"index.php?act=findpost&pid=94230\"][{POST_SNAPBACK}][/a]
hi.

I just checked your site out with CSSEdit. the problem that you're seeing is because #container is set to 100% and #footer is outside of #container. I'd try this:

move the #footer div inside of the #container div and set it to
 position: absolute;
 bottom: 0;

this will line up the footer div with the bottom border of the container div.

you might also need to set:
 display: block;

optional: remove all of the height rules from #container except for min-height: 100%; (although this works with all modern browsers except IE6 and earlier.)

regards,
Gregory
Title: Good and bad web gallery designs
Post by: Gregory on January 15, 2007, 06:10:15 am
Quote
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.[a href=\"index.php?act=findpost&pid=94075\"][{POST_SNAPBACK}][/a]
I'm guessing that Eleanor has a Cinema display and that Photoshop is embedding the display's profile into the exported jpg files. if so, for web use, Eleanor's Photoshop colour management is set up incorrectly. I don't use Photoshop (at all) so maybe someone else can help her correct the colour management settings so that the images embed sRGB instead (the web standard profile that even non-profile-aware browsers use by default).

regards,
Gregory
Title: Good and bad web gallery designs
Post by: LoisWakeman on January 15, 2007, 06:10:49 am
Thanks Chris! Nice to get back what you give...

Quote
- Why is the navigation menu at the bottom of a page instead of the top (where all viewers are now "trained" to find it)? I almost missed it the first time.
Call me old-fashioned, but I want people to look at what's on this page rather than leap off elsewhere. However, I may revisit this and see about links at the left instead.

Quote
- Why are the thumbnails displayed in a single vertical column? It means more vertical scrolling, and also leaves a big blank area to the right of the column.
Accessibility/futureproofing - it avoids tables. Once CSS supports proper grid / snaking column layouts, I can use that instead. Also, I wanted biggish thumbnails and no horizontal scrolling.

Quote
- Once a thumbnail is enlarged, there is no navigation to view the next/previous enlargement.
Good point! I need to save up for some programmer's time to add that.

Quote
- On the Portfoliolist page, Harbor Lights' image is missing. I think the text associated with each image on this page will look better if all the lines' starting points are aligned to the right of the image.
Thanks: there is a bug in the d/b handler that means it randomly loses info: I haven't had time to check very recently. I see there are 2 others missing too: damn. Probably need to change to SQL Server instead of Access: but when the site started out, it wasn't worth the extra cost.

I'll think about the alignment thing. It's easy enough to fix in CSS.
Title: Good and bad web gallery designs
Post by: Gregory on January 15, 2007, 06:19:15 am
Quote
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.[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=94315\")
margin-left: auto;
margin-right; auto;

It took a while (I solved it several months ago) but I created a set of div's etc to display my blog photos with descriptions, etc. The bird photos also include name info etc; eg, my [a href=\"http://www.hokwokwing.hk/archives/200701/the_yellowbellied_prinia.html]Yellow-bellied Prinia[/url] blog article/photo.

I can spend a lot of time with xhtml and css. I feel that good structure and css will keep a site's code efficient. I'm not very apt with JS although Ajax is very intriguing. For the moment though, I have other more important things to work on.

regards,
Gregory
Title: Good and bad web gallery designs
Post by: Chris_T on January 15, 2007, 11:31:28 am
Quote
Mine is a php site, no flash, just images:
http://www.awl-photo.com (http://www.awl-photo.com)
The site is meant to share images, a 'This is what I do' type of page.

Comments:

I like your site a lot: elegant and simple to the max. It's all about your images, which are not distracted by common web design problems, such as awful colors, sale promotions, grandiose artist statements, etc., etc. You have an objective for your site, and your design meets it perfectly.

Without an *obvious* navigation menu or any text on the homepage, my first reaction and assumption was that each of the vertical circles is a selector for a single image. It didn't help when the first cirlce's description is Marginot I, and the second is Marginot II. But once I figured out what they really mean, navigation is easy and "intuitive".

The three red navigation buttons at the lower left are somewhat misleading. Since they are positioned right under the verticle circles (and no horizontal numerals on the homepage), I assumed that they are for navigating between the circles. But only the top button returns me to the homepage, while the +/- buttons navigate the horizontal numerals. Replacing the +/- buttons with left/right buttons sandwidching the numerals would make their meaning more obvious.

Assuming that the images in the two Marginot galleries are actually one big gallery separated for better navigation/display, I have the following suggestion. Add a More button after Marginot I's last numeral 9. Clicking on More (or when viewing 9 and the + button is clicked) will go to Marginot II and display its first image. The Marginot II images will be labelled 10 through 21, instead of 1 through 12. Hate to repeat myself, gallery size does matter when it comes to web design. I have found few large web galleries handle grouping and navigation well. The above is a fine point.

Last but not least, I really like your Marginot images (perhaps influenced by my recent viewing of "The Pity and the Sorrow") and they load very fast. In fact, for a change, I am not bothered by the lack of thumbnails. When each image looks so good and loads so fast, I was tempted to view them all. Sites like yours make me wonder if I should stop worrying about web design and work on my images instead. <g>


 
Quote
A similar one, but constructed much better, is this one:
http://www.nick-hermanns-photography.de/ (http://www.nick-hermanns-photography.de/)
I like the text overlays, but I don't know how to implement that.

Comments:

Similar to the awl site in simplicity and focusing on images. While the images are nice, they take much longer to load, and I didn't spend time to go through them.

The homepage' right side can be put to better use than an icon, such as some text to bait the search engines.

In a gallery page without any thumbnails (actually in any gallery), it would be helpful to know how many images are in it, and which one is the enlarged one.

I also like the text layover on the images. They describe the images without taking up extra real estate. Great solution. I seem to remember that it can be done with javascripts, but I'm not certain.

Quote
And this site I like a lot, very simple and straight forward - even better than the other two sites:
http://www.kalpeshlathigra.com/main.php (http://www.kalpeshlathigra.com/main.php)

Comments:

The most sophisticated site of the three, but not necessarily the best.

The homepage and galleries load reasonably fast. I like the fade_in/fade_out images on the homepage. It can be used to mimic a real slide show. How is that done?

The text/background colors are lacking in contrast for good legibility. The biography page is the exception. Why not make all pages legible like that?

The homepage's menu buttons have right arrows, leading me to think that there are fly-out menus. But there are none. The arrows serve no purpose other then to confuse.

A gallery page does let me know how many images are in it, but I can only view previous/next image, but not pick a random one (in case someone told me to look at #15, e.g.). Nor can I jump back to the first one to view it all one more time  (in case I really like the gallery). Nor can I click on the gallery's menu button to do so.

It is a fluid design, and the image size scales with the window size! Love that, but is it done with flash? Or, can it be done without flash?
Title: Good and bad web gallery designs
Post by: jani on January 15, 2007, 07:58:34 pm
Quote
Thanks: there is a bug in the d/b handler that means it randomly loses info: I haven't had time to check very recently. I see there are 2 others missing too: damn. Probably need to change to SQL Server instead of Access: but when the site started out, it wasn't worth the extra cost.
If you're paying for the actual software, you probably want to consider PostgreSQL, a gratis edition of Sybase or Oracle instead (or a gratis version of SQL Server, if that exists and floats your boat). I have a preference towards the one mentioned first; robust, good at standards compliance, decent features, well-known, mostly platform-independent.

If it's all part of a web hosting package or done by someone developing your site for you, then that probably doesn't matter much to you.
Title: Good and bad web gallery designs
Post by: brianchapman on January 16, 2007, 02:33:29 pm
Hey Greg,

Quote
I just checked your site out with CSSEdit. the problem that you're seeing is because #container is set to 100% and #footer is outside of #container. [{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=95805\")

Thanks for the info.  I tried the suggestion but when I absolute position the footer at the bottom it screws up some other things - I will go back when I have time to try to work those out.  I think they are mostly style problems...hopefully at least!  

Brian
[a href=\"http://www.brianchapmanphotography.com]http://www.brianchapmanphotography.com[/url]
Title: Good and bad web gallery designs
Post by: AWeil on January 16, 2007, 03:05:27 pm
Hi Chris
Thank you for taking the time to look at my web-site and for writing such extensive comments.

The lack of an 'obvious' navigation menu: That was a decision after a long debate between design (me) and function (my spouse, who did the programming). It is confusing at first, I agree. If I can think of another strategy, it will be implemented.

The red navigation buttons: You are right, they don't contribute to clarity. Their functionally has to be corrected or they have to go. There is no need for +/- buttons to navigate between the vertical numerals anyway.

The Maginot galleries: Yes, both belong together, but each has a different angle on the subject. 'Maginot' is about a large bunker from WWII in France and its peacetime use. Thus 'Maginot I' is above ground (where you don't see much of it) and 'Maginot II' is the interior, about 40 meters below. In a real gallery, 'Maginot I' should be prints as large as my printer and the resolution of the images would allow for. The images from the 'Maginot II' set would be small, dark and dusty. Nevertheless, your point is important. The arrangement needs to be changed to make sense. Maybe, a simple name change would help for starters: 'Maginot Above' and 'Maginot Below' or something like that.

Grouping and navigation on large web galleries: That is difficult. The easiest solution is to not have large galleries on the web. Not as many images (not more than 10 in a series), not as many topics (not more than five) and less is even better. Pick a few really good ones and leave it at that. They can be updated often, if need be. But, as my site obviously shows, I don't know how to handle that issue either. I have too many images and too many topics there as well. Photographers are the worst editors of their own images.

The other sites:
http://www.nick-hermanns-photography.de (http://www.nick-hermanns-photography.de)

You mentioned the use of the left space: True, the space could be used for more interesting material. But to bait search engines? I'm not convinced that random search engine hits would be very meaningful or beneficial. Even if the aim is to attract business with the site (sales of images for example), my guess is, one is better off to list the site at pertinent places, join stock agencies or art listings, whatever the goal might be. It is important that the 'right' potential users find it.

http://www.kalpeshlathigra.com/main.php (http://www.kalpeshlathigra.com/main.php)
Text/background: Right, I thought so too. Very dark. It's good for the images (no distraction) but not very serviceable for reading.
Image sizes scale with window size: Scalable design can not be done with Html or Html plus CSS, as far as I know. Anyhow, I picked this site as an example, because the use of flash is very unobtrusive.

cheers
Angela
Title: Good and bad web gallery designs
Post by: StephenEdgar on January 16, 2007, 05:18:16 pm
Hi Folks,

Having spent too much time   trying to develop my own site using Front Page etc I decided to try try out the Clikpic template system. I was suprised at how quickly I was able to build a reasonably competent web site.
www.stephenedgarphotography.com
I emphasise that the picture content on this site is still in progress, but I'd be interested to know how others view the site from a design and accessibility point of view
Thanks
Stephen Edgar
Title: Good and bad web gallery designs
Post by: Chris_T on January 17, 2007, 04:16:46 pm
Quote
Hi Folks,

Having spent too much time   trying to develop my own site using Front Page etc I decided to try try out the Clikpic template system. I was suprised at how quickly I was able to build a reasonably competent web site.
www.stephenedgarphotography.com
I emphasise that the picture content on this site is still in progress, but I'd be interested to know how others view the site from a design and accessibility point of view
Thanks
Stephen Edgar
[a href=\"index.php?act=findpost&pid=96047\"][{POST_SNAPBACK}][/a]

A simple and fast loading site. You know about the empty pages so I won't get into that.

I think centering the active area would be better.

The two dividing horizontal lines have spacing at the left but none at the right. I don't think that is the intended design.

On the Galleries page, the Various thumbnail's size is different from the other landscape oriented ones. The portrait oriented thumbnails are bigger than the landscape oriented ones. People is the biggest of them all. Some may be tempted to go to the galleries with the bigger thumbnails, which I doubt is your intent.

Some thumbnails have text below them, and some don't (e.g. London).

The gallery categorization is a mix bag of themes and film types, somewhat confusing.

For these small galleries and enlargement size, I think a layout with both the thumbnails and an enlargement on the same page will work well, like Peter's.

If you really want people to contact you, add your e-mail address to the Contact page.
Title: Good and bad web gallery designs
Post by: Chris_T on January 17, 2007, 04:19:30 pm
Quote
ChrisT,

This is where I think you're being too conservative and leaning towards the dial-up crowd too much. If Amazon.com (http://www.amazon.com/) were to design for dial-up, they wouldn't display their vast database as they do, nor have the success they do now. As a photographer (I only assume you're one because you've not shown us your site or work) your market/niche is much more limited than Amazon's. In my judgement, you could design for faster download times for your audience because they expect a higher level of image quality and are willing to wait a few more microseconds for better quality reproduction.

A simple, well-coded PHP site with a MySQL backend would load just as fast as a simple-but-customized HTML site. Even if the visitor was on dial-up.
[a href=\"index.php?act=findpost&pid=95704\"][{POST_SNAPBACK}][/a]

I am indeed a photographer, and my pitiful template based site is reserved for those who can stand it, like my mom.

The intent for my site is to show my work, and not necessarily to sell them. Those who purchased prints from my site are either repeat customers who had seen my prints elsewhere, or their referrals. I have no expectation that anyone would buy my prints just based on what they see at my site. As discussed here, the difference between a print and a web image can be huge. It amazes me that so many photogs (other than those already famous) seem to think that they can sell prints from their sites. I wonder what their success rates are.
Title: Good and bad web gallery designs
Post by: Chris_T on January 17, 2007, 04:26:50 pm
Quote
The Maginot galleries: Yes, both belong together, but each has a different angle on the subject. 'Maginot' is about a large bunker from WWII in France and its peacetime use. Thus 'Maginot I' is above ground (where you don't see much of it) and 'Maginot II' is the interior, about 40 meters below. In a real gallery, 'Maginot I' should be prints as large as my printer and the resolution of the images would allow for. The images from the 'Maginot II' set would be small, dark and dusty. Nevertheless, your point is important. The arrangement needs to be changed to make sense. Maybe, a simple name change would help for starters: 'Maginot Above' and 'Maginot Below' or something like that.

I would not have paid that much attention to the Marginot galleries if I had not recently watched the outstanding documentary about France during WWII, "The Sorrow and the Pity".

http://www.rottentomatoes.com/m/sorrow_and_the_pity/ (http://www.rottentomatoes.com/m/sorrow_and_the_pity/)

For someone living on another continent and with limited knowledge of WWII history, this documentary is eye openning as well as riveting. I wonder what a similar documentary made 50 years from now on Iraq would be like.

Quote
Grouping and navigation on large web galleries: That is difficult. The easiest solution is to not have large galleries on the web. Not as many images (not more than 10 in a series), not as many topics (not more than five) and less is even better. Pick a few really good ones and leave it at that. They can be updated often, if need be. But, as my site obviously shows, I don't know how to handle that issue either. I have too many images and too many topics there as well. Photographers are the worst editors of their own images. 

After viewing numerous web galleries and trying to come up with solutions for their shortcomings, I too come to the conclusion that designing a large gallery well is not trivial. I'm glad that at least one more person agrees.

Like you, I also have different topics, each with many images (~30). My goal is to manage and display this kind of gallery well.
Title: Good and bad web gallery designs
Post by: Chris_T on January 17, 2007, 04:29:07 pm
This thread is getting huge, and I will stop posting here.

Thanks to all those who have contributed and remained cordial all the way through. I better quit while I'm ahead. For further web gallery design reviews, please post them at the User Critiques forum:

http://luminous-landscape.com/forum/index.php?showforum=26 (http://luminous-landscape.com/forum/index.php?showforum=26)

See you all there, and hopefully we'll see some great sites that will leave me wordless.
Title: Good and bad web gallery designs
Post by: Eric Myrvaagnes on January 17, 2007, 05:38:35 pm
Quote
This thread is getting huge, and I will stop posting here.

Thanks to all those who have contributed and remained cordial all the way through. I better quit while I'm ahead. For further web gallery design reviews, please post them at the User Critiques forum:

http://luminous-landscape.com/forum/index.php?showforum=26 (http://luminous-landscape.com/forum/index.php?showforum=26)

See you all there, and hopefully we'll see some great sites that will leave me wordless.
[a href=\"index.php?act=findpost&pid=96233\"][{POST_SNAPBACK}][/a]
I want to thank Chris and all the others who contributed so much of real substance to this thread. I, too, am planning to redesign my website "real soon now," and the tips here are all very helpful.

I hope people will keep pointing us to good sites, and offering their own whenever they think they might be worth a look. Gone are the good old days when photography stopped after the print was made (or else mounted and framed.)

Eric
Title: Good and bad web gallery designs
Post by: Bob Laughton on January 18, 2007, 07:39:53 pm
No wish to prolong the agony and no vanity here, but my site is fairly easy to navigate and still uses minimalist flash. Clean and simple - just like me . . .

http://www.boblaughton.com (http://www.boblaughton.com)
Title: Good and bad web gallery designs
Post by: BernardLanguillier on January 19, 2007, 01:50:38 am
I am in the process of creating a quick site myself. Some questions:

1. Is there an easy way to embed an html gallery (jview generated for instance) into an exsiting page?

I have used frames in the past to do that, but would like to avoid using them this time around.

2. What is the fastest method to get a domain name?

3. What are the leading hosting companies at the moment?

Thanks,

Cheers,
Bernard
Title: Good and bad web gallery designs
Post by: ckimmerle on January 19, 2007, 09:52:55 am
Bernard,

You can get a domain name in just a few minutes at any of thousands of authorized registration sites on the net. Here are a couple:

http://www.networksolutions.com (http://www.networksolutions.com)
http://www.register.com (http://www.register.com)

As for hosting companies, there are too many to count. I went with register.com since their support is fantastic. I pay $149 a year, which is more than many other hosting companies, but security and reliability were important to me (and my first choice went out of business). Perhaps you can find a local hosting company that you like, or do like I did and go with an larger organization.

Chuck
Title: Good and bad web gallery designs
Post by: LoisWakeman on January 19, 2007, 09:53:13 am
Quote
1. Is there an easy way to embed an html gallery (jview generated for instance) into an exsiting page?
I don't know the software or even what it does - but does it have a facility to "top and tail" the pages with your own custom HTML? Otherwise, does Jview allow you to create non-gallery pages to go with the others? If not, you might be better off investigating one of the many image gallery applications/services on the web.

I'd agree that frames are not a good way to go.

Quote
2. What is the fastest method to get a domain name?

Buy it online in a few seconds: there are hundreds of registrars. Just choose someone with a  good reputation who doesn't charge an arm and a leg. There are many reviews online to help you choose.

Quote
3. What are the leading hosting companies at the moment?
How long is a piece of string? Again, do a bit of research online to find someone with good reviews and the features you want. My top priority in a good host is excellent support: others may be more sensitive to issues like price, platform, features offered, etc.
Title: Good and bad web gallery designs
Post by: Chris_Brown on January 19, 2007, 10:24:23 am
Quote
1. Is there an easy way to embed an html gallery (jview generated for instance) into an exsiting page?

I have used frames in the past to do that, but would like to avoid using them this time around.

2. What is the fastest method to get a domain name?

3. What are the leading hosting companies at the moment?
Bernard,

I don't know about Question 1, but for #2 & 3 I'll make this suggestion:I hope this helps.  
Title: Good and bad web gallery designs
Post by: BernardLanguillier on January 19, 2007, 07:17:13 pm
Dear all,

Thanks a lot for your kind help.

Regards,
Bernard
Title: Good and bad web gallery designs
Post by: plugsnpixels on January 19, 2007, 08:07:24 pm
After some rough experience with cheapie web hosts, I am currently hosting my Plugs 'N Pixels site (URL in sig) with HostGator (http://secure.hostgator.com/cgi-bin/affiliates/clickthru.cgi?id=plugsnpixels). It's shared hosting, though quite reliable and very affordable. Storage and bandwidth are quite generous, and tech support is great as well.

I have registered my domains with GoDaddy, thus keeping domain registration and hosting separate.
Title: Good and bad web gallery designs
Post by: Chris_T on February 18, 2007, 11:42:22 am
Quote
This thread is getting huge, and I will stop posting here.

Thanks to all those who have contributed and remained cordial all the way through. I better quit while I'm ahead. For further web gallery design reviews, please post them at the User Critiques forum:

http://luminous-landscape.com/forum/index.php?showforum=26 (http://luminous-landscape.com/forum/index.php?showforum=26)

See you all there, and hopefully we'll see some great sites that will leave me wordless.
[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=96233\")

And the beat goes on:

[a href=\"http://luminous-landscape.com/forum/index.php?showtopic=14811]http://luminous-landscape.com/forum/index....showtopic=14811[/url]