We love Blaine Fisher. Blaine is a killer photographic talent working in Kansas City and traveling the world shooting for Sports Illustrated, Prudential, ESPN, Sprint, The Girl Scouts, Farmland and Weight Watchers; among others. He’s a close friend of the agency and is responsible for making us look good on more than one occasion. So, when he needed a new site at BlaineFisherPhotography.com, we jumped at the chance to make him something special.
We had three major directives from Blaine:
- The site has to be easy to update by a casual computer user.
- It has to show BIG photographs. (The target audience for this site is predisposed to having large high quality monitors and fast internet connections – i.e. creatives and creative directors.)
- The site itself has to get out of the way of the photography.
The first thing we did was outline solutions to these challenges.
- Easy to update – build the site on a customized WordPress CMS install. Ease of use is one of the many reasons the WordPress platform is so wildly popular.
- Showcase BIG photographs – Make them as large as the medium will allow: fill the browser window completely. (No stretching or distorting allowed.)
- The site itself can’t get in the way – Make a minimal GUI with collapsible elements to put the focus on Blaine’s work.
Then we sketched up some concepts for him to look at…
As you can see we went for the biggest image size we could fit on a web site-one that fills the browser window completely. Then it’s over-laid with a semi-transparent minimal interface that allows a user to navigate between the pictures grouped into various categories and tags. We also wanted the user to be able to “hide” the interface, or at least a significant portion of it, for a better view of the photos. This is also good for Blaine when he wants to show off the site to a client and wants to hide the user interface, since he isn’t a casual browser.
Once approved, the next step was making it happen with pixels. The Photoshop mock up is below.
The next order of business (and the real challenge) was to find a way of making his photos the full size of the open browser window. This is hard because the browser window size is a moving target depending on user configuration and then once on the site they can re-size their window at will. In order to have the current photo take up the entire window we needed an image to fill that space dynamically without distorting.
After a some research, we found a little jQuery/CSS magic to make it happen without resorting to less elegant techniques such as defining window sizes (user hostile) or building it in Flash (hard to update and not search engine friendly). With some light modification, we got the plug in working on our WordPress install. Then we made the main interface elements hide-able at the click of a button using some custom jQuery and were ready to get Blaine up and running. After some light training, he was ready to go. Check out the video below to see it in action…
Or just head on over to Blaine Fisher’s site, we launched it July 1st.