Designing a seamless, engaging mobile news experience is critical for news publishers vying for reader attention.

During the Mobile-First News Sites master class organised as part of INMA’s Product and Tech Initiative, product leaders from Financial Times, The Atlantic, Information Architects, and Condé Nast shared some of the most important lessons they have learned about designing for mobile.

Financial Times designs for pockets of time

One of the factors influencing the Financial Times’ strategic approach is designing for pockets of time, Louise Robertson, senior product design director, said. In researching user experiences, the team learned three key insights that affected their design approach:

1. Most users carry their phones throughout the day and often use them to “fill time.”
2. Mobile devices are ideal for multitasking, and the morning is a key time for this.
3. Mobile devices are convenient, a means to an end, and are constantly available to users.

“Recognising the role of the device is ultimately key to understanding how to design for it,” Robertson noted, adding designers should think about how to design for those specific moments or pockets of time.

FT has worked to make the mobile content easy to read, offering a natural flow of information that encourages people to engage with the content wherever they are, Robertson said: “We’re constantly optimising for that mobile device, for somebody that’s always moving and always on the go.”

Designing for mobile-first is primarily about “the direction of travel of your thinking,” according to Robertson. She said embracing the concept of direction helped the team frame its approach to mobile-first design because it provided a starting point and an endpoint. 

The mobile story is optimised for readability on a screen and for vertical engagement using scroll. In contrast, a desktop story relies on horizontal engagement and has more real estate that can be used for images and graphics that may not work as well on mobile.

The Atlantic creates a homepage for each reader journey

The Atlantic’s shift towards a mobile-first design ethos is evident in its prioritisation of content visibility and relevance, Christopher Chester, senior product designer, said.

The mobile experience is not about limiting content but about presenting it in a way that respects the reader’s time and attention. This approach is crystallised in the concept of four “homepages” — the mobile Web homepage, article experience, e-mail newsletters, and the mobile app — each catering to different aspects of the reader’s journey.

For subscribers, the mobile homepage is a dynamic entry point that encourages repeat visits with updates allowing editorial customisation. This flexibility ensures readers are met with fresh and relevant content, reinforcing the value of their subscription.

“The mobile homepage’s most active readers, our subscribers, will make repeat visits,” Chester said, underlining the importance of a personalised experience.

A key feature of The Atlantic’s mobile homepage design is the emphasis on contextual awareness. Headers and article cards are used strategically to signify recent updates and guide readers through content, enabling them to easily access areas of interest.

Chester concludes with a simple yet profound principle: understanding and rewarding the reader. By knowing the habits of their readers, The Atlantic is able to serve them better, offering a navigational experience that is both intuitive and enriching.

“Readers appreciate contextual awareness when seeking out topics and curation,” Chester said, encapsulating the ethos that drives The Atlantic’s design philosophy.

Information Architects: Typography is a user interface

Imagine having a job that’s successful when no one notices how good you are at it. That’s the approach Oliver Reichenstein, chief executive officer and founder of Information Architects, wants media companies to take when creating a mobile news site.

If a mobile site is designed with the user experience top of mind, companies won’t have issues with layout, sizing, and perspective. Reichenstein said 95% of Web design has to do with typography. He recognises the word “typography” is looked at as a secret science for many people but promises it isn’t hard to learn and can really be fascinating in business.

“A lot of design has to do with observing how people act physically,” Reichenstein said. “What you are saying is being said within text, and the shape of that written text is typography. So you should really take care of it not just to look good or be on brand but so that people want to read it.”.

There are a lot of choices with fonts today. Reichenstein wants companies to treat text as a user interface. He recommended starting with how people open their phones and look at how their eyes move through the text and learn from that to optimise the reading experience for different devices.

“When you say typography a lot of people think it’s about choosing a special font, but typography is not about what font you use. It’s mostly about how you use it,” Reichenstein said.

Condé Nast measures and improves performance

For years, a user’s experience on a digital platform world was of the utmost importance. It’s now more true than ever as brands compete for attention and wallets.

One way to ensure a user’s experience is of the highest quality is to priortise Google’s Core Web Vitals, or trackable metrics to improve your Web site’s page performance, and ultimately the user’s experience.

“Just because your site is fast and has all the core vitals, it doesn’t mean you’ll rank above another page that has a better subject area expertise,” Noah Robischon, vice president product, global platforms at Condé Nast, said.

For the user, speed might rule the day. However, for search engines and ranking purposes, the quality of the content is critical.

When Core Web Vitals looks at the full range of viewers globally and to meet the “good” performance rating, 75% of pageviews must meet the “good” threshold over the prior 28 days. A “poor” performance means 25% or more of the site’s pageviews are within the “poor” threshold.

Some users will have a great experience with the pages loading appropriately, while others will not. Different factors impact results and not all pages will be equal. Fixing the poor performing pages is essential if you want Google to rank your site better.

In terms of data, Robischon makes the distinction between synthetic data found in Lighthouse and real user metric (RUM) data: “I highly recommend, if you really want to dig in to improving your core web vitals in your page performance, that you use real user metrics.” RUM will offer a larger sample size, better geographic coverage (of your audience) and it’s easier to identify outliers.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .