Firefox 3 is out
What are you waiting for?
You’re a bad web developer
Or: How to build a photographic website.
Photographers are a creative breed: put a camera in our hands and we will give you works that will make you, laugh, cry, and think. I can go up to an unremarkable tree and come away with a stunningly beautiful photo, or I can make you reflect on your whole life in the face of a baby. But I cannot draw a picture or create a graphic, or code to save my life. I accept this limitation, and so I simply hacked together Wordpress themes and tacked on a serioes flash galleries in order to rebuild my website.
That’s not to say that I didn’t look at other websites for inspiration. I searched through Google, followed my blogroll links and followed links through forums and took note of what I saw. What surprised me was the plethora of bad photography sites out there on the web. There are photographer’s websites with no meta information to speak of (this is important), expensive flash templates that just server as a glorified link to a Flickr/MySpace/SmugMug/Whatever gallery.
I found other websites with no persistent navigation between pages or entirely different themes from one section to the next. One photographer’s portfolio is a series of animated .gif images. Although I’m not going to name offenders in this post because you all know who you are already, I express the hope that you feel a slow-burning shame for your laziness.
When I was rebuilding the website I kept to KISS as much as I could. No elaborate graphics. Clean, simple layout and easy navigation. Consistent appearance. Outside of a few rough edges, I think I’ve managed this.
As such, I want to try and communicate not so much the technical side of building a website, as I do things that you might not have considered that are important.
1: Meta Information
The absolute first thing you need to consider is your meta information, which defines you in the eyes of Google. Are you a generic “photographer” or are you a “Saskatchewan outdoor wedding photographer?” You need to specify who you are specifically, and this will influence your page rank and ultimately how much attention you receive. I can’t stress this enough; just by adding some general tags to my website the traffic going through tripled in a week. No expertise or special tools are needed. There are websites out that that will help you to both create and analyse your meta information to help improve your ranking.
All that this boils down to is a few lines in your header, but this is by far the most important part of your website, and in this article. It gets you seen.
2: Load Time
…load what?
If a potential customer has to sit around waiting for your portfolio gallery to load up, they’re more likely to lose interest and close the tab.
There are several steps you can take: If you’re using a theme for Wordpress or another CMS, you can modify the theme to your site and replace the database lookups with static links. You can use a caching plugin which generates and serves static HTML pages from your ordinary index files, and you can reduce the quality of any graphics or images on the front page very easily through the Gimp, Photoshop or any number of other programs.
3: Content
You’re a photographer. This is a photographic website. Why must I click through two pages before I find a single photo? Sure, you have an excellent splash page graphic. And MP3 welcome. And wordy introductory spiel. Absolutely none of this has relevance to your photography. Never forget that a good photo is a thousand words, and so pick pictures accordingly.
4: Navigation
This is another omission on many websites: Persistent navigation. The ability to go from one page to another without having to hit the backspace key or search for the menu which this page uses is taken for granted and there’s really no excuse for not having it.
The easiest way to achieve this is to add a menu to your header script, after the <body> tag and then include your content below it. This (at least it should) takes five minutes in total to achieve. You don’t even need to write code! Just copy and paste suitable code from a Wordpress theme into your style sheet and header.
5: Consistency
It’s easier to just slap up an index page that links to your Pbase page, but that doesn’t mean that it will look professional. Even this morning, I was on one website where I clicked through three pages and was presented with a completely different appearance on each. If I didn’t check the URL I would have sworn that they were separate websites:
Index: Big jpeg link. Looks like just a static HTML page.
Index2/Main page: Spawn of Microsoft Frontpage and cheap web template.
Portfolio Page: Expensive flash gallery.
It was jarring.
On a second website a consistent appearance was maintained, except for the image quality and presentation. I counted no less than six different watermark styles, and multiple images had more than one. Photo resolution quality different. There were 900kb full sized images mixed with with pixelated 20kb pictures.
None of this looks professional and I see it all too often, even though consistency in presentation is easy to achieve. Use a content management system and stick to a set policy regarding image size and website presentation.
6: Simplicity
Keep it simple, stupid. Toss out those tables, those awesome 9-column pages, the esoteric flash menu and those elaborate fonts. Someone coming to your website should never have to hunt for a link or a page. I’m speaking as someone who has trouble reading serif fonts at the best of times, and I never want to suffer your ”handwritten” About page again (you know who you are).
Pick an accessible appearance, no matter how simple it seems to you, and then stick with it. The point of your website isn’t to display your Flash or CSS knowledge, at the end of the day it exists to showcase your photo, no matter your focus, and nothing should interfere with this.
6: Focus
Last, but not least. Know what you want from your website: Print store, photo blog, online portfolio? How do you want to achieve this? Off-the-shelf CMS? All flash or no flash?
Sit down and ask yourself these questions and theb apply your answers to your website.
Oh Linux, how I miss thee
I’ve decided to reinstall Gentoo Linux. It basically came down to a choice between a new MMOG, and reacquainting myself with Linux, and it’s easier to go AFK from a compilation, than from a quest party.
Better yet, I actually have a practical reason for it - I want to set up a network file server once we have a place of our own, and I’d like to brush up on Shorewall, Image Magick and other and funner utilities.
It’ll be Gentoo again, I guess, as Ubuntu invariably Breaks Things when I install it.
Woe is me.
Sigh
Nice one NTL, I can’t even reach your dammed homepage to cancel my service.
The Abbey
I braved the inclement horribly shitty weather to take some photos of the Abbey church on Eglinton Street.
As I have a terminal lack of anything to do tonight, I’m going to fill in some of my workflow on the photo. The first step is to actually get the photos from my memory card, for which I use a shell script. It does nothing exciting and I don’t accept any responsibility if it accidently dumps ten thousand photos into one folder (which happened to me). There’s not much to say for the script, it takes all the .cr2 files from the memory card and places them under ~/Pictures/Imports in a subfolder, going by today’s date - 2006-12-31.
After that, I import the photos to Lightroom:
Workflow 1
Normally I’d use the raw editor to screw with whatever aspect of the photo needed screwing with, but in this case I wanted to compose a HDR shot in Photoshop, so I just exported the three photos I wanted to tiff format and used the HDR function in Photoshop to create the final photo. I used Photomatix before, but in 90% of shots people go utterly overboard with tone mapping, which leads to a horribly fake and cartoony image, which was never to my tastes when it came to HDR. Going through the HDR group on Flickr I find this and this.
Workflow 2
Creating a HDR photo in Photoshop is insanely easy if you have good shots taken, so I’ll skip on the detailed instructions. Suffice to say, to pick File-> Automate-> Merge to HDR, click a few buttons and go get a coffee if that’s your thing. At this point I’ve composed the HDR, converted it to 16-bit for ease of work and straightened it:
Workflow 3
I’ve started working in layers where I can, I did a lot of tweaking of colours and lighting, with a little clone work for a few annoying cables and wires that were in the church:
Workflow 4
Squinting at the above picture, I had layers for the shadow/highlight tool, levels, hue/saturation, curves, colours and the channel mixer. And behold, the final shot:
Workflow 5
Me, elsewhere
