In a few short days, I’ll be releasing the next step in my photographic endeavor: my official photography website. I’ve spent about two weeks working on the site, which, for me, is quite a bit of time. But I wanted to get it right. Every one who I’ve showed it to thus far has said that it look very professional. I thought I would spend some time discussing how I went about developing the site, in the hopes that it might be interesting to someone.
For a while now, I’ve maintained a Portfolio Set on Flickr. Recently, I used some slick software from Airtight Interactive called SimpleViewer, combined with a PHP script called FlickrViewer (which makes API calls to Flickr and creates the necessary files SimpleViewer needs), to launch a cleaner version of my portfolio: http://andrewferguson.net/portfolio/.
After my Photographer for Hire post from a couple weeks ago, I wanted an even slicker site that was dedicated (in part) to the type of photography I was targeting (i.e. portraits). Originally, my first though was to use this awesome WordPress theme that I’d recently heard about: Monotone. In a nutshell, the color of the site is based on the first picture of the blog post. There were a couple of issues with this method, however. First, the theme was really only designed to handle one image per a blog post (seriously, all the other images were stripped out). Second, I didn’t want to divide my blogging between two sites. Third, I had to manually upload photos that I had already put on Flickr; I wanted to be able to just pull them in from Flickr. So after about a week of messing around, I decided to abandon the WordPress-based site and go home brew.
I already had SimpleViewer working with Flickr, and I knew that Airtight Interactive had another similar program called AutoViewer. So I decided to use that as my starting point. I took my current portfolio viewer…
…and designed a main page around that. I got out a piece of paper and drew the following:
Three boxes. But what about content? I took a quick trip around some of my favorite photo sites and wrote down all the links they had, then dutifully narrowed them down to three categories: photos, about me, and cost. I decided that I’d divide photos into portraits and landscapes (although really it should be “pictures of people” and “pictures not of people”). From three boxes to four boxes: Portraits, Landscapes, Rates, Andrew.
Using Photoshop, I mocked up the following:
I really wish I had screenshots of all the interim steps. Instead, you’ll just have to trust me that this wasn’t a straight forward processes.
With a design in the bag, I started the process of converting image to code. First I coded the main page. It’s all done with DIV tags and CSS. It was really just a matter of specifying the size of each element box and then making the whole thing float in the middle with some margin-left: auto; margin-right: auto; magic. I created a couple of PHP functions to distribute common code elements, primarily the XHTML above and below the BODY tag. And that was pretty much it.
From that, I coded the rates and about me page. The portraits and landscape page was pretty much already in the bag, I just had to tweak the FlickrViewer code (which took longer then anticipated and involved a pretty heavy rewrite of the existing code, but that’s another story). I showed it to some people and got some feedback, incessantly tweaking every little detail until I finally had something that I thought was good:
I think it’s rather remarkable how close the final design is to the mockup. I’ve tested it across several browsers and everything seems to be in order, including fully XHTML 1.0 Transitional and CSS compliant.
Google Analytics are in place to track my stats; and using Google Webmaster Tools I’ve made the powers that be aware of my site. I also took the opportunity to upload a sitemap, which I generated using an online sitemap generator.
There’s just a couple more things to wrap up before I officially launch, so check back on Saturday for the official launch of Andrew Ferguson Photography.
Questions?
