Awesome Post by David Brooks about how he implemented my websites new design this past week.
Over the past few weeks I’ve been working on a really cool redesign of Chris Arace’s website, thereason.us, and I’m thrilled to announce that the site is officially live.
When I first spoke to Chris, he told me that Flickr is his CMS, it’s how he manages his photography. So I built the underlying structure of the new site like that of a robot that goes out and collects the latest updates from Flickr and then reinterprets them for his personal site. This way, when he updates Flickr, things stay synchronized with his site automatically.
Having a design background, Chris designed the site in a few days and sent me the comps. I think visually it sets a new bar for photography sites. It’s current, and has some really great details that make it uniquely his.
On the front page, he wanted to show his latest work in almost a mashup of Pinterest and 500px. There’s a bit of jQuery Masonry in place to allow images to flow around as you resize your browser, or as you scroll down. That’s especially interesting when you scroll to the bottom and hit the next loading point of the infinite refresh. A quick word about that… typically I despise infinite refreshes, but in this case it actually makes sense. You don’t want to initially load 450 photos into the view, and since we’re using the jQuery colorbox to show his work, you don’t have to worry about losing your place on the page.
One of the star pieces of the site is the lightbox view, which is built by adapting the jQuery Colorbox to match the way Chris wanted it to look and function. The shell is the same as any other implementation of Colorbox, but the center of it is built around a custom request to the server that brings back the image and details about it, populates the colorbox and then builds the arrow key functionality.
And last but certainly not least is the map feature which places all, or some of his photos onto a custom-styled Google Map. You can interact with the map, or the slider to jump around and see where each photo in his portfolio was taken.