The general idea of the last iteration is carried over: minimal structure with the focus on the presentation of the photos. However, by avoiding the use of Flash, the site is made both more accessible and better performing. The ‘lights out’ feature and scaling images are achieved with JavaScript in this version, while the content is again managed with an XML/PHP backend. A new cross-browser font replacement technique called Cufón was used to enable the use of a non-standard font for the site, maintaining the look and feel of the mockups in the translation to a dynamic version.

I think JD’s photography, Lukas’ design, and my development work have come together to make this latest iteration of www.jdhowell.ca minimal and lightweight, while effectively communicating JD’s unique brand and style. As always, the primary emphasis is on the photos, with the design and functionality serving the work.

I did a couple new things this time around. I’m a big fan of Google Maps and thought it would be cool to embed a map of the various locations we visit in the sidebar of the blog (the long skinny shape of New Zealand helped make this fit!). It was very easy to do. After creating the map, I grabbed the Paste HTML to embed in website iframe source from Google and dropped it into the sidebar.php file of the WordPress Sandbox theme that I had built for the blog. Piece of cake! Check out the map or see it embedded on the blog. It’s a simple thing, but I think it helps to make the country and places more tangible to readers of the blog back home in Canada. I think this is a tiny pointer toward the need for a more cohesive web service for travel blogging. Writing travelogues was my introduction to the blogosphere, and it’s still what I primarily use blogs for. A service that could easily integrate travel data (maps, photos, stories) into a blog would be very useful! The public API’s of Flickr and Google Maps make this just a matter of programming and time, but as such a service doesn’t exist yet (to my knowledge), I have to mark my map in Google, post my photos to Flickr, post my entry in WordPress, then path my entry photos to Flickr. Also, I have to modify the WordPress theme files by hand to embed the results in the sidebar. Kind of a lumpy process.

Speaking of Flickr, the other new thing I did (after adding a similar feature to my website) was add a randomized Flickr badge to the sidebar of the blog, which pulls 10 random photos with the tag newzealand on each page load. This too was a very simple task. Simply use the wizard to generate your badge (HTML or Flash), select whether you would like your photos limited to a specific set or tag, select layout and color options (or none so you can write your own CSS), and you’re done! I dumped all the junk that the generator spits out (ugly HTML tables and verbose CSS selectors) and just grabbed the one line of JavaScript responsible for the communication with Flickr. All the parameters selected in the wizard are appended as a query string to the script URL, and can be edited inline. I embedded the script and tried to edit it to select more than 10 photos, but Flickr doesn’t respond to requests over this limit. No bother – 10′s enough, and the badge adds a little bit of random Flickrness to the blog! Now I just hope Microsoft doesn’t end up buying Yahoo, rebranding Flickr as Windows Live Photo Sharing Utility for Vista Internet Service Pack 2 and breaking the badge

Welcome Page

We adapted the Portfolio interface to suit the Wedding photography, keeping things consistent, minimal, and graceful. Each Wedding that JD adds appears in a list on the left, with a representative thumbnail from that event appearing on the right on rollover. Clicking on either the menu item or the thumbnail then takes the user to an interactive contact sheet of shots from the Wedding.

Weddings Interface

Susan & Angelo Wedding Index

The shots are gorgeous and touching. Having a regularly updated selection of Wedding shots online will help to promote this aspect of JDH Photography & Imaging, and will give clients a broad idea of the quality and scope of JD’s work.

Thanks for another great project, JD. To the rest…book early!

The solution was fittingly named Amass: “to gather together or accumulate (a large amount or number of valuable material or things) over a period of time.” JD has selected a range of images from his archives and organized them into events he has photographed, and a group of images he calls Heart Felt. These images conjure views of a realm that is unsettling, intriguing, emotive, and which always seem to hint at more than the subject offers at first glance. Feeling that such images should be searchable by mood as much as subject, JD has tagged his images with emotive, expressive keywords, rather than restricting his descriptions to subject and composition.

Amass has been integrated with JD’s Portfolio in two ways. First, a beautiful tab has been embedded on the right side of the browser when viewing the Portfolio. On rollover, it slides out gracefully to reveal itself, and a click takes the user to Amass. Additionally, images featured in the Portfolio which are available in Amass are marked with a subtle purchase link which appears above the image in question. Selecting this link presents the user with that image’s details and purchase information within Amass. The works are available in both digital and print format.

The design of the site reflects the ‘floating’ nature of the Portfolio design, keeping visual distractions to a minimum and the work at the forefront. This is further emphasized by the minimal, muted colour palette and font treatment, all of which suit the elegance and austerity of the images.

As always, it was a pleasure to work with an artist of JD’s calibre. I’m sure this won’t be the last innovative project to come from his direction.

I developed the project in two stages. First, I designed an XML schema which the client could populate with albums of works, separated into Photography and Imaging sections. Each work can be tagged with an optional Title and Description. This setup allows the client to populate and update their current works without needing to use Flash, and without the need of a developer.

Secondly, I built the interface in Flash. After importing the XML, the interface is populated with Albums, each of which holds a set of works. When an album is selected, the works within it are loaded as thumbnails, to be selected by the user. The fun part was developing the animations which are generated dynamically between image positions. First, the border of the image tweens from the current to the selected image shape and size, then the entire interface shifts to center the new image. When this is complete, the image is loaded in, resolving in from a blur and oversaturation filter. Check out the site to get the effect, as these screenshots only tell part of the story!

JD makes beautiful images, and it was a pleasure as always to work with him on this project. He had a clear vision for the site, and it was fun to work together to get the transitions and effects right to suit it.