Today I want to offer part two of my takeaways from our master class on mobile first news Web sites (you can find part one here and here). 

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.  

If you’d like to subscribe to my bi-weekly newsletter, INMA members can do so here. 

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