PetaPixel

On Design: Searching for a More Visual News Site

visualnews_1

When the Chicago Sun-Times laid off its entire photo staff last year, I commented that one of the problems was the utter failure of website design to appropriately showcase photography. Above is an example of the current design and the way photography is displayed.

The only image that appears “above the fold” is a staggering 306 pixels wide.

Design is a much higher priority at The New York Times, and they have a few distinct layouts: 1) lede image, 2) lede image + slideshow, 3) sidebar image, 4) dedicated slideshow, 5) Lens blog. Here’s what they look like:

Lede image (600px) plus slideshow preview (190px)

Lede image (600px) plus slideshow preview (190px)

Sidebar image (190px)

Sidebar image (190px)

Dedicated slideshow (600px)

Dedicated slideshow (600px)

NY Times Lens Blog

NY Times Lens Blog

I would still argue that these designs aren’t optimal for photography. Photos are subordinate to text and don’t make the best use of vertically scrolling screen real estate.

Perhaps this is part and parcel for a news site as opposed to a photography site. The New York Times Magazine does a better job with larger images. And of course, having a great image helps enormously.

Photo (1280px) by Martin Schoeller

Photo (1280px) by Martin Schoeller

They have made strides with their “Snowfall” layout to infuse more and smarter online design into their pages.

“Snowfall” design with full width images

“Snowfall” design with full width images

The Snowfall and Magazine designs aside, I find the New York Post website to be more visually-oriented.

visualnews_8

There are no ledes. There are only titles overlaid atop photos — The Post’s photos are often lascivious and/or provocative, but still front and center. And in the inner pages of the site, photography acts as “click bait” for the reader.

Even though the concept is old by Internet years, The Atlantic still does a great job of incorporating large images (1280px) in a vertically-scrolling display, rather than relying on the more typical pagination or filmstrip display styles.

visualnews_9

In non-news website land, things have gotten noticeably larger. A trend, perhaps influenced by tablet design, is full-screen, full-bleed photos. Consumers are familiar with this from their smartphones, iPads, Flickr, and even our own PhotoShelter Beam websites feature a number of full-screen templates.

visualnews_10

A consequence of full-screen design on a multitude of devices with different aspect ratios is unintended cropping of images. Photographers spend a lot of time composing images. They look from edge to edge and are mindful of concepts like the Rule of Thirds, so perhaps the lack of adoption of full-screen design in news websites is a result of wanting to display the image with the photographer’s crop.

A full-screen image conforms to the browser size which can vary by device or user preference.

A full-screen image conforms to the browser size which can vary by device or user preference.

This concern, my friends, is malarky.

It’s not that I don’t believe in the photographer’s right to compose the image, it’s that images are cropped all the time by photo editors and others in the publishing chain. Horizontals are turned into verticals. Landscapes become squares. Details are zoomed in. The photographer simply does not control how an image will be viewed the moment he/she delivers the file to the editor.

And unlike “art” (which exists to ask “what is art?”), I would argue that the goal of photojournalism is to convey a story through the image. If a larger, cropped photo is more effective than a smaller uncropped photo in grabbing the reader’s attention, then mission accomplished. If different crops of the same image still capture the reader’s attention, then mission accomplished.

The cropping issue is similar to the “pan-and-scan” version of movies (aka “This film has been modified from the original to fit your screen”). Purist hate it, and given the choice, I’d pick the letterbox version every time. But not given the choice, I don’t know what I’m missing visually, and the story still comes through even if the DP is rolling over in his/her grave.

The point is that in order to raise the profile of photojournalism, we need to figure out better ways to make photos stand out.

Here is the ESPN Body Issue online.

visualnews_12

Glorious, right?

Here it is again as envisioned in The Atlantic layout:

visualnews_13

And envisioned in The New York Times layout:

visualnews_14

And envisioned in the Sun-Times layout:

visualnews_15

Which would you rather look at?

ESPN expends a modicum of effort to prevent drag and drop of the image, but anyone with a hint of technical acumen can get at the large digital image. Apparently, they don’t care. And neither should you. This is the 2nd decade of the 21st century. Worrying about online theft of images is akin to being baited by trolls. Don’t do it.

Which reminds me, this is the 2nd decade of the 21st century. Let’s make sure that our treatment of photography on news websites reflects that fact.


About the author: Allen Murabayashi is the Chairman and Co-founder of PhotoShelter. Allen is a graduate of Yale University, and flosses daily. This article originally appeared here.


 
 
  • ISO640

    The problem as I see it is photography is often treated as an afterthought. I’m a hobbiest photographer and a professional web developer and you see this all the time, no matter the site. As a developer, we have to be mindful of using all the screen real estate for imagery because more than likely, the photos will be mediocre at best. There’s no excuse for not using larger real estate for good photography though and if they’re concerned about the content, they can always make the photo scalable (you click or mouse over the image to enlarge it over the content and then it goes back to the original size). But again, it only really works if you have good photography to start with… which brings us to the other obvious point–even the news business is beginning to use less than spectacular photography because it’s cheaper to plop “citizen journalist” photos taken with their smartphones than pay a real photographer to cover the news.

  • Rabi Abonour

    As someone who has worked for several newspapers, I have always been appalled by the way photos are used online. Print newspapers are bad for displaying photos because the print quality is fairly poor and space is limited. Those constraints go away completely with the Internet, yet you still see newspapers running galleries of photos taken with 20+MP cameras a couple hundred pixels on the long side.

  • Peng Tuck Kwok

    Also consider that bigger photos take longer to load. So they might factor that into the design.

  • Junpei

    I totally agree about photography being treated as an afterthought in the newsroom. I work as a photographer at a small paper where the photo desk is made up of myself and two other guys. there’s no proper photo editor and the ‘word people’ get to push us around…in their eyes, photos only serve as a design element on the page so it doesn’t look like there’s only text. It’s sickening.

  • http://www.sebastian-auer.com Sebastian

    As a web developer myself (and a hobby photographer) we are often required to make the web fit in criteria that are not always achievable for each element/section/context we work with. With load times and frame redrawing and code bottle necks to think of it is sometimes harder to re-focus and be mindful of the visusual aspects. Yes it’s great to have aside with less than a handful of load requests (a challenge) but would anyone other than a fellow developer notice? Will the site still be worth visiting with the visually appealing elements optimized into obscurity? Probably not.

    In my opinion this is the time when it becomes that all parties involved are able to give their input as contributors; be able to voice their concern of how their contribution is seen by the end user. In my experience get all contributors in the room and write complaints on a board. Then work this into the spec of the site. Hopefully this gives the designers and developers a forest of obstacles to navigate.

    It rather easy to develop a great site. It’s a whole different ball games to develop a great site that people actually to visit. And photography is an art that requires space to be examined/taken in.