Behind the Scenes of LENS

June 1st, 2009 | Category: Featured | Tags: Flash, Interactive, The New York Times | 11 Comments

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.

Why does it scroll sideways?

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.

Mock-ups and Design Evolution

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

lens_mock_270

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.

lens_prototype_2_270
lens_prototype_1_270
lens_prototype_3_270

WordPress, Flash and XML Driven

All of the NYTimes’ blogs are produced in WordPress. WordPress has a great API and allows you to customize the data from posts for things like RSS feeds and XML feeds without much effort.

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.

xml_spec_1_270
xml_spec_2_270

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.

About this entry

You’re currently reading “Behind the Scenes of LENS,” an entry on digitalartwork

Published:: June 1st, 2009 | 3pm

Category:: Featured

Tags:: Flash, Interactive, The New York Times

Social:: View blog reactions

Comments are closed

Comments are currently closed on this entry.

11 Responses to “Behind the Scenes of LENS”

Tracy Boyer says:

June 3, 2009 at 6:59 am

Hi Zach,

Thanks so much for your insight on LENS. I love the idea of slideshows within slideshows, and the ease of transition between featuring a video, a photo, a slideshow, etc.

I have a couple of questions. Currently the blog is ordered chronologically (of course). Do you see a possibility in the future to also sort the posts by subject, or medium? Or, possibly providing an index or legend of posts to give the user an idea of where they are looking in relation to what else has been uploaded, as well as other similar posts that they might enjoy?

Also, because this is always a popular question: how many people worked on this project, what was the breakdown in roles, and what is a rough estimate in time it took to brainstorm, produce and launch this blog?

Thanks in advance!

Cheers,
Tracy Boyer
- Zach Wise says:
  
  June 4, 2009 at 9:03 am
  
  Currently you can see related posts, and view an archive of categories or tags at the post view level. We currently don’t have much interest in building that functionality into the LENS homepage, but it would be nice.
  
  I would say that the entire multimedia, photo, blog, and design department worked on LENS to some extent. It took a long time to agree between all of us what that site should look like. Before I started at the Times, there was already some movement on making this happen.
  
  It’s really a bit more nuanced than a list of people and roles. In the final months/weeks it was mostly myself and Tom Jackson tweaking the interactive elements, and Heena Ko on design. The Blog team was implementing our changes.
  - Tracy Boyer says:
    
    June 4, 2009 at 9:55 am
    
    Thanks for the feedback, Zach!
Drew says:

June 3, 2009 at 10:24 am

My biggest gripe about LENS is the over-use of flash. And the difficulty in linking to specific features. …hitting the back button and starting over on top of the stack. It doesn’t take long for the cool-factor of the flash to be overshadowed by it’s drawbacks. Otherwise, the content is AMAZING.
Drew says:

June 3, 2009 at 10:39 am

I want to back up and be a little less snobby about the flash comment. The interior pages of the site are easily linked to and very well done. The MAIN page of LENS is merely the entrance. Sometimes it’s easy to question things when I haven’t fully investigated them. BTW, the feature on the old Arkansas prison photographs made the rounds in several big email chains at my university, as well as in an email listserv made up of local historians and archivists from Arkansas. I bet stats for this site are through the roof.
rob says:

June 5, 2009 at 7:01 am

Hey Zach,

thanks for doing this. Lens is great.

i have a slightly different version of Tracy’s question.

Now that you all are up and running and doing wonderful work, i am curious what the editing work flow is like? Does Lens have a designated editor or is it a group or how does content get pitched, evaluated and edited?

again, great work!
thanks
- Zach Wise says:
  
  June 5, 2009 at 4:24 pm
  
  Yes, LENS has a designated editor(s). David Dunlap is the blog’s primary editor but James (Jim) Estrin also plays the role of editor. Josh Haner arguably is an editor for the blog also. Between the three of them, content is pitched written and edited.
Leonardo says:

June 8, 2009 at 7:30 am

Hi Zach,
Thanks fot sharing some of the behind the scences of LENS. It looks and works great. Can’t wait to see the next great things you guys come up with.
take care,
Leonardo
Amy says:

June 3, 2010 at 5:33 pm

Thanks for the feedback, Zach!

Trackbacks/Pingbacks

Behind the Scenes of LENS says:

June 4, 2009 at 7:53 pm

[...] Wise, a multimedia producer at the New York Times, takes us behind the scenes their new photo blog — LENS. Be sure to check the comments, where he’s also answering [...]
War without Borders: Fueling Mexicos Drug Trade « says:

August 1, 2009 at 12:03 pm

[...] very informative. High production values! I also luv the Behind the scenes blog post over at digitalartwork.net by Zach Wise about the NYTimes Lens blog, have a [...]