A few people have been asking me how the LENS Blog on The New York Times site came to be and what software it was built on. I thought I’d shed a little light on the development process and answer some of these questions.
When we started this project many months ago, The Big Picture was obviously one of the successful models for a photo blog, not just in terms of traffic but also in terms of presenting photographs in my favorite way. BIG.
When you go as big as The Big Picture, you can run into big problems. Depending on your monitor, the photos can’t fit on your screen. Scrolling through many large photos causes you to have scrolling precision and dexterity for an optimal viewing experience. Slide-shows on the other hand are easy to view. The scroll position remains the same and the photos scroll. We started to think of the LENS blog as a slide-show, and slide-shows within slide-shows. We fell in love with the idea of being able to stay on one page and have a mass consumption of images.
My first crack at a mock-up was fairly traditional and was concerned with finding a way to make the image as large as possible
As our thinking evolved to the side-scrolling approach, we mocked-up some quick Fireworks working pages so we could see what it would feel like.
For the homepage of LENS we built a Flash presentation that takes a custom XML feed from wordpress. The real reason we went with Flash for the front-end presentation was because of it’s full screen ability.
You can see in the spec screen-shots on the right, that we are using existing wordpress variables to construct the feed for flash. You may also notice a “custom field“. This is where we link to the slide-show, and video xml feeds exported by existing tools we use on NYTimes.com everyday.
Obviously this is a quick overview of how LENS came together and how it works. If you have specific questions, hit me up in the comments and I’ll try and answer them as best I can.