Hi there.

I am currently in the UK for this week’s INMA World Congress of News Media. I’ll be moderating the main stage with the fantastic Robert Whitehead. If you have questions for any of the incredible lineup of speakers, send them my way. 

In the meantime, here is part two of my takeaways from our master class on mobile first news Web sites (you can find part one here and here). 

Drop me a note if there is anything you’d like to see in this newsletter — whether it’s on a particular subject or a feature you’d like to see. I’m at Jodie.hopperton@INMA.org.

Thanks, Jodie

Three sets of best practices for mobile-first news Web sites

A few best practices came out loud and clear through our expert speakers and case studies shared: 

1. Navigation has some best practices

Take a look at the four examples below. There is a bottom navigation with three to five icons. These take you to another zone to browse. The bottom navigation makes sense for mobile as it’s easy to reach with thumbs as you hold the phone. This navigation is often “disappearing” so when a user is out of browse mode, the content can fit the full screen.

Sign-in is often at the top right of the screen — a little further away as it is used less, likely rarely. The top left usually contains the logo or a hamburger menu (≡). 

However, in discussion with expert designers, they were quick to point out that, again, conditions matter. It’s important to look at how the user is coming in, which zones you may want to take them to, or not, and the overall user journeys. 

At the end of the day navigation, and UX have to be simple. Oliver Reichenstein of IA has a great benchmark: It should be so good that a drunk person with blinders is able to use it.

2. Declutter everything

It’s a small screen already so don’t try and fill it with too much. Be efficient: with space, with your users’ time, with everything. As Louise Robertson of the FT told us, we should consider whether something is essential, supplementary, or unnecessary. And Chris Chester of The Atlantic reminded us that “there is nothing wrong with white space.” 

See the screenshot below of NTM in Sweden’s before and after. Bolder images and headlines make it easier for users to read. They are used to swiping.

If you want to add features, think about audience appropriateness: swipe, scroll, emojis. German Fressa of Vocento told us the benefit of simple tuition pointers up front, and Grzegorz Krawczyk of Onet.pl told us emojis had proved a great alternative to comments.  

Last but not least, as INMA Researcher-in-Residence Greg Piechota recently shared with me, based on the data from the latest 2023 surveys by Oxford’s Reuters Institute — across 45 markets, printed newspaper, and Web site/app — readers and customers are mostly men and they are at least 45 years old. This is a prime group for reading glasses, and they will appreciate clarity and space.

3. Think visually

The small screen lends itself to visuals. What is going to attract someone’s attention? 

Consider responsive images for ease working across multiple screen sizes and platforms. And think about the breaklines in content for easy viewability. 

Many sites and apps use “cards,” which are great for swiping. These can work well for the right content and with the right direction. You may need to consider onboarding direction.  

Don’t forget the power of text. Fonts matter. They have personalities (just check this out!). Trust your designers on using complementary fonts, and try to use as few as possible.  

Date for the dairy: See you in London this week? 

I’m already in London, preparing for the INMA World Congress of News Media, where I have the delight of moderating the main stage. We have an exceptional lineup of speakers from around the world, delivering INMA’s signature blend of big picture strategy and practical insights for immediate implementation — with a splash of fun.

Please hit me up if you are coming or if you are London based. I’d love to take the opportunity to meet you in real life.  More about the World Congress here: www.inma.org/WorldCongress.

The golden rules to improve advertising on mobile Web

Revenue is necessary to our business, and advertisers can be considered a different kind of customer for us. Thinking about mobile Web — which likely has more casual readers than the loyalist, likely subscribers that apps bring — means advertising is likely the predominant revenue stream. 

So here are a few things we learnt during the master class:

Advertising does not need to be above the fold in the first view to be effective. And while a pop-up may be sold for more, it’s often a huge, negative interruption to the reader experience.

We saw countless examples — The New York Times, NTM, Onet.pl — who showed that if you can improve the experience and scroll depth, you will get more revenue.

Here are the golden rules of advertising on mobile Web:

• Ads should fit with your content in terms of size and style. See how The New York Times has square ads that fit their columns, and they have gone one step further to create ‘flex fit” ads that align more with content formats (more about those here). 

• Images should lead, in the same way we have seen visuals work for all content.

• Ensure the ads work to constraints with speed load so both site load and viewability are improved. 

• If you can combine ad spots with first-party data, you can push prices up and lead to better ad relevance for consumers and effectiveness for advertisers.

About this newsletter 

Today’s newsletter is written by Jodie Hopperton, based in Los Angeles and lead for the INMA Product and Tech Initiative. Jodie will share research, case studies, and thought leadership on the topic of global news media product.

This newsletter is a public face of the Product and Tech Initiative by INMA, outlined here. E-mail Jodie at jodie.hopperton@inma.org with thoughts, suggestions, and questions. Sign up to our Slack channel.

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