At RJI, we’ve been working to improve how we share information with our readers.

Subscribe

Local newspaper sites have long broken all the rules for building a sticky site. Most still load painfully slowly. They are difficult to navigate and — let’s be honest — often ugly.
Matthew Hindman, Shorenstein Center

For centuries newspaper design has stayed about the same. In 1880 printers introduced halftone photographs and in the 1980s the four-color process. Many newspapers use this centuries-old aesthetic to design their websites, then surround the design with slow-loading ads.

Pittsburgh Post Gazette front page, 1927
1927 Pittsburgh Post-Gazette
Pittsburgh Post Gazette front page, 2013 (print layout)
2013 Pittsburgh Post-Gazette (print layout)
Pittsburgh Post Gazette, post-gazette.com front page, 2015
2015 Post-Gazette.com (Web page)

Some papers, though, are exploring beyond the printed page. They’re experimenting with simple ways to enhance print articles online, adding multimedia, interactivity and auto-updates while making sure these enhanced Web pages load quickly.

It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
—Brad Frost, "Performance as Design"

The examples below are all print newspapers with innovative Web page design and speedy Web page performance. These papers — large, small and student — illustrate the range of what news sites can do. All use WordPress, the most popular open-source content management system (CMS) for newspapers. I consider WordPress the most flexible CMS. It powers 25 percent of all websites and is the focus of my fellowship project at the Donald W. Reynolds Journalism Institute.

Page design, page performance

225 Magazine, Baton Rouge LA, 225batonrouge.com, homepage
225 Magazine, Baton Rouge, Louisiana.
Page speed: 2.3 seconds (60 requests, 1.6 MB).
Uses: Bootstrap framework, CloudFront CDN, WordPress API (to pull content), Mustache (for HTML templates), Typekit fonts.
LEO Weekly, Louisville KY, leoweekly.com, homepage
LEO Weekly, Louisville, Kentucky.
Page speed: 2.6 seconds (70 requests, 3.4 MB).
Uses: WP Engine hosting, Font Awesome icons, Underscore.js library, Typekit fonts.

Alternative weeklies are pioneers of nontraditional home pages. The 225 Magazine, from Baton Rouge, Louisiana, is unafraid of color. Louisville, Kentucky’s LEO Weekly likes lots of photos with a wide one front and center.

These newspapers are page-speed demons, loading in less than three seconds. Compare that to the 16-second load time of the Pittsburgh Post-Gazette, above, and the industry average of 17 seconds.

Readers, however, don’t care about home pages. They come for content. So let’s look inside to see how local newspapers augment their print stories online.

In-depth multimedia reports

Graves of Shame cover article, Texas Observer, July 2015
“Graves of Shame,” Texas Observer, Austin, Texas.
Page speed: 4.2 seconds (105 requests, 2.6 MB).
Uses: HTML5 Boilerplate template, Starkers starter theme, TN3 Gallery, SoundCloud audio.
The Temple News article heading: Watching the Unthinkable
“Watching for ‘the unthinkable’,” The Temple News, Philadelphia, Pennsylvania.
Page speed: 3.5 seconds (58 requests, 13.5 MB).
Uses: Novella child theme, StoryMapJS, W3 Total Cache, Google Fonts, Font Awesome.

The Texas Observer’s “Graves of Shame” is a collaboration with The Nation Institute investigating the mishandling of migrant remains. The Web article is a multimedia version of its July 2015 cover story. Images and large pull-quotes guide the reader down the page. At the bottom is a click-through photo gallery and an audio embed of a Texas Standard public radio interview with the reporter.

Additional kudos to the Texas Observer for making its archives available back to its first issue in 1954. That’s a good first step in the preservation advocated by RJI’s Journalism Digital News Archive initiative.

A WordPress plugin named Aesop Story Engine “presents rich, interactive stories or articles in any WordPress theme.” The student-run Temple News puts the plugin to work in the paper’s Longform section. “Watching for ‘the unthinkable’” comprehensively covers “active-shooter situations on college campuses” with videos, a large infographic, a StoryMap of past incidents and striking browser-wide photographs.

Longer articles must be readable and “brain-friendly.” That requires a keen design eye and an intimate relationship with practical typography. The websites LongReads.com and Longform.org curate collections of great online journalism features.

Photo galleries

Los Angeles Times, Framework section, Immigration inspectors place detained Mexican nationals on a detention bus, from article: 1954 roundup of illegal immigrants

“1954 roundup of illegal immigrants,” Los Angeles Times, Los Angeles, California.
Page speed: 5.9 seconds (169 requests, 8.1 MB).
Uses: Galleria gallery, WordPress VIP hosting.

San Francisco Examiner photo of artist displaying her work, from article: Fama the artist
“Fama the artist,“ San Francisco Examiner, San Francisco, California.
Page speed: 6.4 seconds (171 requests, 2.1 MB).
Uses: NextGEN Gallery, HTML5 Blank child theme, Google Fonts.

When an article has enough good shots, a photo gallery is a good way to go. The Framework section of the Los Angeles Times highlights its visual work by “capturing the world through photography, video and multimedia.” The designers use the Galleria image gallery.

The San Francisco Examiner’s Photo Galleries use the popular NextGEN Gallery, a WordPress plugin with 1 million active installs.

WordPress has its own built-in gallery. Combined with the Jetpack plugin’s Carousel module, it can display slideshows or a tiled mosaic of thumbnails that open into a full-page gallery (see the collection of “Qatar’s seafaring history” photos at Doha News).

Interactivity

Albuquerque Journal interactive map for article: New Mexico Voting Locations
“New Mexico Voting Locations,” Albuquerque Journal, Albuquerque, New Mexico.
Page speed: 4.1 seconds (77 requests, 1.1 MB).
Uses: MapBox with Leaflet map library, D3.js data visualizations.
Current, table of: What top executives are making
“What top executives are making,” Current, Washington, D.C.
Page speed: 3.3 seconds (48 requests, 0.8 MB).
Uses: Largo child theme, TablePress plugin, WP Engine hosting.

Data no longer must sit statically in a chart. The Web lets people interact with information, drilling down into individual data points or rearranging the entire sample.

The Albuquerque Journal's “New Mexico Voting Locations” map shows addresses inside the map markers. The newspaper for public media, Current, embedded a table of compensation for station executives with user-sortable columns.

“How They Did It — Part I” (and Part II), subtitled “Spotting Storytelling Tools in The Wild,” lists the tools major news sites use to present interactive data. Storybench, from Northeastern University, tells the behind-the-code stories about making visualizations at news sites.

Landing pages

New York Times section heading: First Draft
“First Draft,” The New York Times, New York, New York.
Page speed: 7.7 seconds (241 requests, 2.1 MB).
Uses: WordPress REST API, RequireJS loader, oEmbed.
Winds hit Washington State news acticle
“Winds hit Washington State,” The Seattle Times, Seattle, Washington.
Page speed: 41.1 seconds (496 requests, 5.5 MB).
Uses: Storify, Brightcove video.

Landing pages are the Web’s way of aggregating information on a single subject, whether it’s the UFO Blog at the Syracuse New times, the kitschy covers of the New York Post or the World Cup coverage of USA Today.

First Draft is a “vertical for politics" updated throughout the day by reporters at The New York Times’s Washington bureau. Blogs like this at the Times run on WordPress. The nerds among us will appreciate developer Scott Taylor’s posts about getting the paper’s many platforms to place nice together, and the deft date queries needed to form First Draft.

The idea is: you open the site in a tab at the beginning of the day, and you receive updates throughout the day when new content is available.
—Scott Taylor, The New York Times

The Seattle Times page, above, fails from a performance perspective, but it succeeds as an example of turning a news article into a landing page: The paper’s initial post about a powerful wind storm shows how a story can grow online to become a hub for the latest updates. Reporters added breaking-news posts all day. They created a Storify embed of tweets from readers and from the state transportation department, videos of raging ocean waves and Snoqualmie Falls, and a gallery by staff photographers.

Lauren Rabaino, now at Vox Media, was the news applications editor at The Seattle Times when she wrote “The New, Convoluted Life Cycle Of A Newspaper Story.” This seminal essay considers how stories evolve online, from reporters’ tweets to by-lined articles, which are later inter-linked with future articles and shared on social sites.

Special sections

Homicide Watch section of the Chicago Sun-Times
"Homicide Watch Chicago," Chicago Sun-Times, Chicago, Illinois.
Page speed: 6.5 seconds (205 requests, 1.5 MB).
Uses: Google Maps, Google Calendar.
Bangor Daily News author photo and category arrive heading for: Act Out with Aislinn
“Act Out with Aislinn,” Bangor Daily News, Bangor, Maine.
Page speed: 6.8 seconds (193 requests, 2.7 MB).
Uses: Photon CDN, custom theme based on Twenty Thirteen.

Beyond landing pages is the ability to easily add entire new website sections that can expand with its topic. Those special sections can house both an archive and breaking news.

The “Homicide Watch” section of the Chicago Sun-Times extends the idea of obituary to include video remembrances, map navigation, and a calendar of court dates to “Remember every victim. Follow every case.” It’s part of a national network of Homicide Watch sites.

A simpler special section is the Bangor (Maine) Daily News (BDN) “Act Out with Aislinn” column. It auto-lists all posts in the “1-Minute Adventures” category, with links to local hikes, dog walks and trail maps, along with lots of photos and videos. Like The New York Times, the BDN's developers also blog about building special features. Among them: “Proof,” on rape survivors, and “Homeless,” about a night in a shelter.

WordPress in the news

The galleries of newspaper themes at WordPress and WordPress VIP demonstrate how far news sites can transcend what’s possible on paper — using free, open-source CMSs.

Here's a map of U.S. newspapers, both daily and alternative weekly print papers, which run their main websites on WordPress:

Need for Speed series

  1. Newspaper load times give ’slow news days’ new meaning
  2. Newspaper data diving, metrics and methodologies
  3. A news diet for overweight newspaper sites

Tools We Use series

  1. Publishing print newspapers online: CMSs
  2. Publishing print newspapers online: Servers
  3. Newspaper names

Top image: Moving Missourian printing presses, 1961, courtesy of University Archives (C:11/15/1 Box 3 FF 11), University of Missouri at Columbia.

Correction (March 9, 12:10 p.m.): An earlier version of this article had references to features in Vox Magazine which are no longer online. The earlier version also did not have image from the The Seattle Times.

Barrett Golding  
 
Residential fellow



Share

Recommended for You

Related Stories

True or false: PolitiFact, pols and pundits

Storytelling Tools
True or false: PolitiFact, pols and pundits
March 7, 2017

Breaking News 4: When real news is fake

Storytelling Tools
Breaking News 4: When real news is fake
February 15, 2017

Breaking News 3: New media myths

Storytelling Tools
Breaking News 3: New media myths
November 15, 2016

comments powered by Disqus