I recently completed a website for a local photographer, and I thought it would be a good chance to discuss what I learned, what went wrong, and what I’d do better next time.

What I learned..

This project required a large number of photographs to be displayed in galleries, under a few different categories. The client already had an active Flickr account, with plenty of photos already online. I had recently played around with integrating flickr images on my site, after following an article from CSS-Tricks.com.

This solution wasn’t quite sufficient, as clicking on an image thumbnail would send the user offsite, to Flickr. There probably is a solution like this that allows thumbnails to load larger images from flickr within the page out there somewhere, but rather than reinvent the wheel (and charge the client extra to do so), I went for a solution called flickrSLiDR, a prebuilt service to integrate a Flickr slideshow into a web page.

This solution made things quicker and easier. Ofcourse the downside to using a prebuilt component such as this one, is the limited ability to control the look and feel of the final slideshow (the black background wasn’t optional, and it wasn’t particularly clever at resizing horizontal or vertical images to fit the space, unless the slideshow was square in proportion). Still, the advantages this prebuilt solution offered far outweighed the minor features it lacked, and the client now has a series of robust galleries on their site that they can update themselves, simply by updating their flickr account. A win for everyone, I think.

What went wrong..

I had a few cross browser compatability issues with the Flickr Slideshows. The code that flickrslidr dishes up to embed the slideshow in your page comes in two varieties: an object element, or an iframe element. The Object tag was the ‘Standards Compliance Mode’ option; ofcourse I later realised this was useless, as their are issues with rendering the object element in IE7. A further look at the flickrSLiDR website mentioned the IE issues, and gave a workaround. Long story short, the workaround seemed to solve the ‘object not appearing’ issue, but gave me another issue (the object and the page containing it were forced to display unnecessary scrollbars.) There was a solution to hide the scrollbars if IE7, however this meant that the entire page had no scrollbars (not a problem until someone viewed it on a laptop).

In the end, I went for the option of embedding the slideshow using an iframe. As I was using a DocType of XHTML 1.0 Transitional, this option was accepted, and the site still validated fine. The CSS validated fine as well, which was great. (A lesson learned in standards compliance for me).

What I’d do better next time.

I had some trouble scoping the project at the beginning. It was hard to determine the amount of pages, and development time needed to acheive the FlickrSLiDR solution that I ended up with. I’m sure other people will agree, it’s hard to estimate how long it will take you to do something you’ve never done before. It’s all a valuable learning experience.