How the biggest news organizations tackle the mobile homepage

The Wall Street Journal, The Washington Post, CNN, The New York Times and USA Today all take completely different approaches when it comes to developing a mobile homepage. Although the tactics and advertising options vary, the common thread among all of the publishers is that mobile deserves tailored, up-to-the minute news more than any other platform.

Mobile Marketer analyzed the mobile Web homepages of five news publishers to look at how the publishers — most of which have more than 50 percent of traffic coming from mobile — are shifting their news cycle approaches to accommodate for the smartphone first. The shift from a multi-column desktop set-up to a single news feed on mobile is still the underlying issue that publishers continue to play with.

“Big news is big news no matter what kind of device you use, so consistency across platforms – even between mobile and desktop – is often important,” said David Ho, editor for mobile, tablets and emerging technology at the Wall Street Journal, New York.

“We put a lot of thought into how you maintain news hierarchy and editorial intent when viewing a desktop’s multiple columns and a single column on a phone,” he said.

“That said, there are ways to do that and serve the different needs of audiences depending on where, when and how they consume and interact with news. Once you know the patterns and schedules both in the U.S. and around the world, it can guide your curation efforts.”

Here is a look at how the publishers design a mobile homepage, in alphabetical order.

CNNThe homepage on CNN’s mobile site features the company’s logo in the top left-hand corner of the screen.

The logo serves as the menu button and slides out to the right when clicked on. The menu lists all of CNN’s news sections, blogs, video and audio content and shows.

A weather button on the right-hand corner of the screen drops down, and consumers can enter either their ZIP code or city to find local weather.

Below, content is sectioned off by latest news and key areas of coverage, including latest news, politics, entertainment and world news.

Each news category pulls in five stories, and the content is a mixture of full-length stories and multimedia pieces, such as a video. Consumers can also click on a ‘more news’ button at the bottom of the news categories to be taken directly to the news page.

Interestingly, CNN chooses to include a search bar at the bottom of the homepage, where consumers can type in keywords or phases related to articles that they are looking for. Publishers tend to play up search at the top of the page on mobile, so CNN’s approach is a bit unique.

The publisher also divvies up the type of content based on the platform and time of day that readers are viewing it on.

For example, video is best suited on the iPad at night when consumers have more time to browse through content while the mobile site plays up spot news.

CNN's mobile site

CNN’s producers and editors also incorporate mobile into the story planning process itself.

“CNN Digital has a talented team of visual content creators and editors,” said Carl Lavin, lead homepage editor at CNN, Atlanta.

“The mobile site and apps present that content on different screen sizes and just as we are focused on making sure that our text pieces successfully serve the mobile audience, we are focused on making sure our graphics and other visual journalism is also successful on every screen size,” he said. “One way to ensure we keep the mobile audience in mind is to always show working versions on mobile screens during editing sessions and news meetings.”

CNN's mobile advertising options on the homepage are consistent with ads in other parts of the mobile site, including static, rich media and site takeovers.

The news publisher also has a box at the bottom of the homepage and on each news category page that groups several ads together and is labeled as “You may like.” The sections includes adds from companies including Rosetta Stone and translation app Babbel.

The ad unit is also a mixture of different ad units. For example, Babbel’s ad drives app downloads and links consumers to Apple’s App Store from an iPhone device, while Rosetta Stone’s ad directs consumers to the company’s mobile site to learn about products.

The New York TimesEarlier this year, the New York Times rolled out its long-anticipated Web revampwith responsive design.

However, these changes only impacted tablets and desktops, and as a result, the publisher does not offer a mobile homepage. Instead, individual story pages are optimized for mobile.

The most comprehensive part of the New York Times’ tablet and Web responsive site is the menu bar that can be accessed in the top left-hand corner of the screen.

There, consumers can toggle between the United States and international versions of the site and have a full list of all of the news sectors that the publisher covers.

The New York Times' site

Consumers can customize the font size to feature small, medium or large copy, and there is also a call-to-action at the bottom of the page that encourages consumers to either log-in or subscribe to the paper.

The homepage itself is set up to pull in top stories in different categories, including opinion, world, U.S. and political news.

A box at the bottom of the page lets consumers navigate to all of the different news sections.

The publisher monetizes the responsive site through banner ads and custom sponsored content ads that brands including Intel and Dell have already leveraged.

The New York Times did not respond to press inquiries for this article.

The Wall Street JournalOut of all of the sites examined, the Wall Street Journal’s mobile homepage is by far the most comprehensive and offers the most customized news features.

The top of the site’s homepage has a menu button on the left side and a search bar on the right side.

Three drop-down lists at the top of the page pull in the most popular stories, latest articles and stock market news.

The Wall Street Journal's mobile site

Similar to the other publishers, the menu slides out from the left side of the screen. What is unique though is the amount of information packed within the menu. The Wall Street Journal links to each of the publication’s 12 news categories.

Additionally, a large call-to-action prompts consumers to either log-in to their account to access all of the Wall Street Journal’s news content or subscribe.

Below, a section called “Quick links” directs consumers to five pieces of content: Blogs, videos, today’s paper, columns and politics and policy.

The homepage of the site also includes a big bar at the bottom that screen that pulls in breaking news that can be shared via social media.

The Wall Street Journal's mobile site also includes pop-ups that prompt consumers to add the site to a home screen.

Homepage stories stretch across the screen with big text and images. Images of keys appear next to headlines to indicate which articles can only be read with a subscription.

Readers can also adjust the content to display small, medium or large fonts. The content can be filtered to show specialized content from 12 editions across the world.

Below the top stories, more stories are grouped under subheads from several news categories. These include opinion pieces and U.S. news.

A swipable gallery of six video stories are also featured on the Wall Street Journal’s mobile homepage, and there is also a section with big links that make it easy for consumers to search for news by individual category.

Despite the breadth of editorial homepage content, the advertising opportunities on the Wall Street Journal’s mobile site are fairly simple. Static banners run underneath the company’s logo at the top of the page, much like the rest of the site.

“On the mobile Web site, we give prominent placement for WSJ’s live news coverage – that’s a recognition that mobile users often want and need and expect the most immediate, updating news,” The Wall Street Journal’s Mr. Ho said.

“We also emphasize special news packages and rich, immersive stories. In addition to top news, our mobile Web site also offers easy access to the most recent and most popular news stories right at the top,” he said.

For example, a big button prompting the $3.99 per month digital subscription is placed next to the publication’s logo at the top of the page.

The Washington Post is the only publisher that was looked at for this article that does not use the traditional menu bar on its mobile site. A call-to-action for consumers to log-in to an account or subscribe to digital content is played up here, too.

The Washington Post's mobile site

Instead of a menu button, four news categories line the top of the page: Politics, opinions, local and sports. When readers click on each of these buttons, they are directed to the homepage for that news sector.

Additionally a button labeled “More” on the right-hand side of the screen lists all of the Washington Post’s news sectors.

The bulk of the Washington Post’s mobile homepage features the latest and most popular stories, and each story includes a small picture next to the headline.

The publisher pulls in the headlines from the last four articles from news categories including world, lifestyle and business news.

There is also a section of the mobile homepage dedicated to video and photo galleries.

In terms of deciding which types of content to include on the mobile site, packaging related stories together and segmenting content is important to the publisher.

“We package our content in a way that makes sense for the platform,” said Cory Haik, executive producer and senior editor of digital news at Washington Post, Washington. “For example, we might feature a long-form, immersive story on our mobile homepage on a Sunday night, but we would not necessarily feature that on our desktop homepage until Monday morning.

“During special live events, we also make sure to package content specifically for mobile platforms,” he said.

Similar to the other publishers analyzed, a banner ad along the bottom of the screen stays locked in place as consumers scroll down the homepage.

USA TodayUSA Today’s mobile homepage is focused around simple calls-to-action that are designed with fat fingers in mind.

Take the menu button, for example.

When consumers tap on the menu icon in the top left-hand corner of the screen, a full-page pop up appears on the screen. The idea behind the big menu page is to eliminate readers from accidentally clicking on sections of news that they are not interested in.

One article and picture is placed at the top of the page with top headlines from four additional articles below.

Each piece of copy is big and stretches across the screen so that readers do not accidentally click on content that they are not interested in.

Below the top headlines and news, content is divided by news category and includes a mixture of text and multimedia articles. Each story includes an image of and is time stamped to show how new the piece is.

USA Today's mobile site

Certain news categories, such as sports, include more content. For example, a big button underneath the sports section directs consumers to scores and schedules.

Underneath the news categories, USA Today’s mobile homepage also pulls in weather information, popular videos, photo galleries and the publisher’s famous “Snapshots” infographics.

“So when it comes to curating content for those readers, we know that our smartphone traffic starts to rise sharply at 6 a.m.” she said.

“So we began a daily column for this mobile audience — 5 Things to Know — that we publish between 4 a.m. and 5 a.m. that’s meant to set up the day. It’s broken up into categories, it’s digestable, it’s information driven, and that’s the concept that extends to that smartphone audience.”

Final TakeLauren Johnson is associate reporter on Mobile Marketer, New York

Lauren Johnson is associate reporter on Mobile Marketer. Reach her at lauren@mobilemarketer.com.