Good and bad web gallery designs

[Gregory]

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

[Gregory]

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

[LoisWakeman]

Thanks Chris! Nice to get back what you give...

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

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

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

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

[Gregory]

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]

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

[Chris_T]

Mine is a php site, no flash, just images:
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>


 

A similar one, but constructed much better, is this one:
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.

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

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?

[jani]

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.

[brianchapman]

Hey Greg,

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]

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]

[AWeil]

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

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

[StephenEdgar]

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

[Chris_T]

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.

[Chris_T]

ChrisT,

This is where I think you're being too conservative and leaning towards the dial-up crowd too much. If 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.

[Chris_T]

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/

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.

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.

[Chris_T]

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

See you all there, and hopefully we'll see some great sites that will leave me wordless.

[Eric Myrvaagnes]

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

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

[Bob Laughton]

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

[BernardLanguillier]

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

[ckimmerle]

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

[LoisWakeman]

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.

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.

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.

[Chris_Brown]

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:

• Go to Network Solutions or Go Daddy to acquire your domain name. Both these services will find what names and extensions are available. Getting your domain name takes an hour at most. (They will try hard to also get you to sign up with their hosting services, so be careful and read their fine print.)
• After you get your domain name, you will be prompted for your site's IP address. Since it is non existent, opt for their "under construction" page, if possible. Otherwise, don't worry about it.
• Join a reputable hosting site. There are basically two types: shared hosting and dedicated hosting. Shared hosting is when your data resides on the same hard drive/server as other sites. Dedicated is when your site is on its own hard drive/server. Dedicated hosting is much more expensive but offers things shard hosting cannot. I've had shared hosting at BlueHost for almost 7 years and only once did they have a serious downtime problem (Utah's forest fires threatened their town of Orem, Utah and cut power for about 10 days). Other good shared hosting sites are Host Element, and Host Monster. You can find a lot more info here.
• After you pay and join a hosing company you will be given the IP addresses for their servers, and thus, your web site. Put up your site now, because in the next step you will go "live".
• Go back to where you registered your domain name (e.g., Network Solutions), login and enter the IP address data. Make sure it's correct. Once entered, it will take 24 - 48 hours for all the DNS (Domain Name Servers) in the world to propigate your domain name and address.
• Go back to your web site and spend the next month tweaking it for beauty and eye candy.

I hope this helps.  

[BernardLanguillier]

Dear all,

Thanks a lot for your kind help.

Regards,
Bernard