How we'd build a photography website: lessons from Clikzline Studios

Clikzline Studios is a street-cinematic photo and film studio in Canberra. It shoots for startups and new businesses, event organisers and cultural associations, under the line "Art beyond the Frame". When we met the studio in September it had an Instagram account and no website. Today it has www.clikzline.com, built by Spidee.

Here is what we did, and how we would approach a website for any photographer or studio.

The problem: a feed is not a website

Instagram is a good place to be seen. It is a harder place to be hired from: a profile runs newest first, and nothing in it asks a new client what they need.

A photography website also has a harder job than most. The site is a piece of work in its own right. If it looks like a template, the photos look like they came from one too.

Three directions to start

We built this site ourselves, from our meeting with the studio and its Instagram, and started with three directions:

• Darkroom. Cinematic and dark.
• Gallery Wall. Minimal and white.
• Contact Sheet. Editorial, with the feel of paper.

We went with Darkroom, and it is the design live today. We think it suits the work. The studio calls itself street-cinematic, and its frames are full of stage lights, tail-lights and motion. That kind of picture wants dark around it, the way a film does in a cinema.

We then pushed it further. The background went from a warm near-black to a neutral, almost pure black, so the page reads black rather than grey. A light film grain sits over the page, like the texture of a darkroom print.

The studio's own change list made the design better. Two requests stand out, and both apply to any photographer: show every photo whole, with nothing cropped by its frame, and move text off the pictures so the photograph stays the main thing on screen. The gallery now shows each photo whole, and Photo of the Month keeps its wording outside the picture.

Photos first: galleries by mood

The first version of the gallery used images sourced from Instagram. For launch we replaced them with the studio's own files from its Drive folder.

That folder held 101 files, which came down to 88 unique photos, because some were filed under more than one mood. We merged those, so one photo can carry several moods.

The homepage shows a selection of 20 frames with filters for Speed, Lights, Atmosphere, Emotion, Black and white, People and Vehicles. A button leads to the All frames page, which holds all 88 with the same filters and a full-size view.

One decision there is worth copying: the order is mixed across moods, so one night's shots do not clump together. On All frames, captions show the mood only.

Film is handled differently. The studio's reels use licensed songs that only play on Instagram, so the site links out to them rather than embedding them.

Handling big images: what we did

A site made of photographs is heavy by nature. There is no single trick, just a few habits:

• Two sizes of every gallery photo. Each one ships as a JPG about 800 pixels on its long side and a larger one of about 1,400. The browser picks the size that suits the screen.
• Only the first tiles load straight away. On All frames, the first three load at once and the other 85 wait until the visitor scrolls near them. We started with twelve, and in testing on a slowed connection they competed with each other, so we cut it to three.
• The main image goes first. The homepage tells the browser to fetch its hero photo early, at high priority.
• Long caching for images. Browsers can keep images for a year, while the pages themselves are checked on every visit, so an update shows at once.

Enquire, not price

In our post on City Edge Catering we said a caterer should show every price. Clikzline does the opposite, and we think that suits this business. The site says it plainly: "No rigid packages. No prefabricated templates."

So the site asks instead. The enquiry form wants a name, an email and the idea, then offers phone, date, location and more detail. Budget range is optional, and the form says a rough figure is fine. The site says next to it: "We'll come back with ideas, and a price that fits."

A checklist for photographers

• Choose a look that suits your work. Try more than one direction.
• Show gallery photos whole. No cropping by the layout, and keep text off the picture where you can.
• Start from your own files. Use web-sized versions of your originals, not copies taken from Instagram.
• Sort by mood or subject. A selection on the homepage, the full set one click away.
• Load big images in stages. Two sizes per photo, and only the first few straight away.
• Decide on prices deliberately. If every job is different, ask about the job, with budget optional.
• Only show proof that is real. Clikzline's client logos and reviews stayed hidden at launch rather than being filled with samples.

Where Spidee comes in

If you are a photographer, a studio or any small business with an Instagram account and no website, tell us what you do and we will show you what a site could look like. Or see three designs for your business, free.

And if you have something worth shooting in Canberra, have a look at Clikzline Studios.