January 9, 2008

Travelvice Realignment: Snapshots Gallery
Lima, Peru

I've been working at a furious pace since the New Year to create a new design and safe migration strategy to an updated version of the application that manages the Snapshots gallery on this site. Today, I'm pleased to release a new Snapshots theme, with enhanced functionality, navigation, and integration with the Travelvice Travelogue.

When this site was originally built (back in 2005), a spankin' new iteration of the Gallery content management system had finally come out of beta testing, just in time for me to integrate it into Travelvice. I wanted a solution that wasn't hosted elsewhere (such as Flickr), and what the system lacked in aesthetics it made up for in content management.

Although I made the best of what I had to work with at the time, I've always thought the Snapshots gallery on this site to be a bit of an eyesore. Not only did it generally break the branding, but it didn't adhere to the tableless Web site design methodology that I practice.

Well, those days are over.

Goals

My objectives for the redesign/realignment of the Snapshots gallery were to:

  • upgrade the gallery from 2.0.0 to 2.2.4, patching security holes and enhancing functionality
  • enhance the (abhorrent) search engine optimization (SEO)—an example of the problem
  • match the new, 2008 branding
  • more effectively direct people from the gallery to relevant content on within the Travelogue, not just the other way around
  • make album pages with an excessive amount of thumbnails load faster
  • make it easier and more intuitive for people to move between images
  • make it easier for visitors to see what's new
  • discourage image hotlinking (bandwidth theft)
  • keep visitors in the gallery longer
  • encourage one of three exit paths from a page: another photo or album, the Travelogue, or an advertisement

Notable features that would be depreciated:

  • multiple resized photo resolutions—site statistics show less than 5% of visitors view a size larger than the default displayed
  • the album slideshow—it wreaks havoc with Google, and few people were using it
  • the 'random memory' displayed on some pages throughout the site—fun to click on occasionally, but adds unnecessary weight to pages

I've tried my best to satisfy the two biggest feature requests from my dad, who has been vocal for several years about what he has liked and didn't like about the gallery's page presentation.

Vertical Scrolling

The ability to look at consecutive images without having to vertically scroll around the page was big request of dad's.

In April, 2007, I moved the photo captions above the image because he, and the others I questioned about the site, didn't like scrolling down to see if I'd written any remarks about a particular photo.

This was something I gave quite a bit of thought to, and ultimately broke his request down into two areas: Moving between images, and the size of an image on the page.

I recently asked my good friend Tristan how he moves through a new batch of photos. Interestingly, he precisely aligns his mouse cursor over the 'next' button, and uses only the scroll-wheel to examine an image before moving onto the next. Clearly, larger navigation was needed.

Photo-to-Photo Navigation and Image Size

The new iteration of the Snapshots gallery gives visitors the option of clicking on the left- or right-hand side of an image to proceed back and forth (through an album of images). A large, hovering arrow near the top of each image denotes this ability. For people using browsers that can't handle this effect, hyperlinked navigation text has also been placed directly below the image.

I like big photos because of the detail lost in thumbnails, and I designed the new gallery to embody this sentiment.

It was easy to rationalize such things, as I've designed the page to still fit within the confines of a visitor with a monitor running at 800×600, yet allows even greater detail for folks looking at the gallery with significantly higher screen resolutions (which the stats show is very much the case).

There are no simple solution for displaying non-scrolling images across such a wide multitude of operating systems, browsers, and screen resolutions. There are some Flash-based galleries or plugins out there that do such things, but feel the usability and search engine constraints, coupled with the overhead, are far too great. These are good for artists showcasing a few images, not for a traveler with many thousands of captured memories.

Album Thumbnails

In this design I really wanted to draw and define the line between a thumbnail image and a single-photo page image. Some folks told me that they weren't looking at the enlarged images because they could "see the photo well enough" without doing so. And considering how I take the time to title and caption so many images—and it does take considerable amounts of time in the aggregate—I wanted to ensure people were looking at as many of them in an enlarged state as possible. (This is done not just with the thumbnails, but also with the layout and structure of the single-photo page navigation.)

What I envisioned for album pages was modeled after a photographer's proof/contact sheet. I use to do this back when I was developing images in a darkroom. You expose several strips of negatives on a single piece of (8×10) photographic paper with an averaged exposure, so that you (or a client) can select what frames should be developed.

Thumbnails are now programmatically cropped to a square, regardless of their original landscape or portrait orientation/dimensions. Although I think pretty thumbnails for albums are neat, they are not the priority in this iteration of the gallery—the photo pages are. That's where the content and adverts are at.

The resultant is a rather neat compressed collection of images that loads up significantly faster than before, and encourages clicking, while still allowing the visitor to figure out what's going on in the frame.

Hide the Banner

One of my favorite new feature additions is the ability to hide the Travelvice banner image and navigation on single-photo pages. When browsing between a series of photos, there's really no need for all that banner, and I've enabled visitors to do away with it.

Inspired by dad's request to reduce vertical scrolling, this setting will remain enabled in the configuration of your choosing, even after you close and reopen your browser.

Recently…

The next big pleaser for some visitors could very well be the 'Recent Additions' page.

There was a time that I was moving quite briskly through Central America, and was adding photos to many different cities and countries in batch dumps, when I could find an inexpensive Internet connection. Dad didn't like to have to keep checking albums to see if anything was new—he dreamed of a centralized location where he could see the latest photos uploaded.

Well, you've got it.

The 2008 Travelvice Snapshots Gallery

I'm still working and tweaking things a bit now that the (seven-hour) upgrade has been completed while the Americas slept last night. I won't bore you with the stressful details of the conversion.

The new design looks rather simple, and probably comes off as a little sparse in some places, but I'm moving towards simpler visual designs these days, without all the gold plating clutter.

Just for historical purposes, here are some before and after screenshots:

Enjoy!

Comments:

Peru

Craig | travelvice.com

January 10th, 2008

FYI:Looks like tomorrow (the 10th) will probably be the day for Tatiana.She's been going to the doc every three days, and he's recommending surgery tomorrow afternoon… something about a thinning uterus indicating she's in labor, even though such things don't qualify as "labor" in my mind… as there's no water break, huffing and puffing, etc. She's the same as usual — save for the even more massive than normal belly.So anyways… more news in the maƱana.I have my cigar and camera on stand by.

Carrie

January 10th, 2008

I didn't know I was in labor till they hooked me up to induce labor. Once the monitor was on, the nurse asked if I felt that contraction. Nope. Guess I'd been having them for a while but since they didn't hurt, I thought it was the baby moving around! Who knew?! Hope all goes well.

Note: Comments are open to everyone. To reduce spam and reward regular contributors, only submissions from first-time commenters and/or those containing hyperlinks are moderated, and will appear after approval. Hateful or off-topic remarks are subject to pruning. Your e-mail address will never be publicly disclosed or abused.