Back

How to create a good app for a news website?

on 

A few days ago, I was talking with Jerome and Arianna about the frequently asked questions we receive from our users, and about the subjects we should handle on this blog to answer these questions. We've realized that you now have quite a bit of experience with our service and you have created apps for wide range of contents.
So instead of talking about the technical aspects of the creation of an app, about which you surely already know tons, I decided talk about how to organize your contents in order to deliver the best possible user experience.


In this article, I'll give you some insight on what is the best way to plan and design your app. The first and most important thing you should know is who your readers are, so you can find the best way to arrange and structure your app.

What does my mobile traffic represent?

If you regularly check the statistics of your website (and I 'm sure you do), you 've probably noticed that a significant proportion of your readers come to your site from a mobile device. And if you can discover the weight that these readers represent on the your overall traffic, you will see how an investment in the mobile segment can make a significant positive impact on your traffic.  

There are several options for providing a dedicated mobile experience to your users: responsive design, dedicated native applications and mobile sites ... there no single best practice, every solution has it's pros and cons.
I will not get into the debate on mobile web vs. native apps, or responsive design vs. apps,  because we will probably talk about it in the coming weeks on this blog. :)  

You probably know that at GoodBarber we are big fans of native apps due to their superior power and rendering, so here I will focus more on how to design the application that will best meet the needs of your readers.

What do my readers look for when visiting my website?

There are as many editorial approaches than there are news sites. But it's not that difficult to find the best one for you, looking at the behavior of your users, you might identify your value proposition in one or more of the following categories:  

- You want to be the first to publish hot news and scoops;
- You publish mainly analytical papers;
- You occasionally publish on your website, because your presence is dispatched more on social networks;
- Your writings are addressed to a specific user community;
- You create a knowledge base  

For example, I situate blog GoodBarber in the last two categories.  The design of your app should be determined by your placement in these categories.

How to create an app and organize your content?

If you have decided to create an app for your news website you should know that there is no better service then GoodBarber’s to build your project.
GoodBarber offers a series of tools that enable you to adapt your content to mobile device displays and offer the best user experience.
In summary: You can directly synchronize your website content with your app and create a professional design in only few minutes.

GoodBarber is a DIY tool, but you don’t have to worry because you don’t need any particular developing skills to use it. Creating your app using an app builder is very easy if you know how to organize your content.
One of the first things you should know that will influence the success of your app is that the ergonomic paradigms of the web cannot be reproduced on mobiles.
Your readers want to have access to your content in the right moment and in the right format for the devices they have at hand, smartphones.
If you’ve followed me, you have now understood why there not only one best way to develop your project. The limited space of mobile screens will be your guide (I’m not talking about design, but of something much more suggestive).

Let’s talk about the features that you should include in your app and that will help you fascinate your readers.

Which are the features that characterize a news app?

Like all apps, even news app need to be fast and fluent and have a high quality design.
Starting from these considerations,there are 7 top features that your app must have:

1. Complete access to the content [content feed, offline, browser, articles’ layout, categories];
2. Push notifications;
3. Ergonomic features [Text and image size, etc..];
4. Sharing / Social networks [Share, Like];
5. Comments;
6. Features for users [Favourites, pocket, etc..];
7. Monetization [Ad networks]

When creating an app, you should keep in consideration that it’s impossible to completely reproduce your website. More than concentrating yourself on the layout, you should reason by sections.
It’s thanks to the organization into sections that you will help your users to surf comfortably through your app according to their necessity.
Less is more! Don’t add to many things, this will only confuse your users.

Take a deeper look at the category in which you have collocated your web site and answer this question: “What do my readers look for when visiting my website?”, and then put it in relation with each of the features above.

I want to show you different examples of websites and propose a suited design for each one, keeping all the previous statements in mind.
Anyway, whatever the context, the main feature of your app will always be the the possibility to synchronize it with the website.

Example n°1 : News and gossip website

Editorial policy: The goal is to publish all the hottest news. Your readers follow you because they are sure that you will always keep them updated with the lasted scoops. 

In this case push notifications will be very important for you. Having an app is ever so important for this type of news because they are usually short and fast flowing, so it’s important that users are able to read them via mobile.

I advise you to offer a simple and direct access to the contents and to try to avoid a complicated navigation (You shouldn’t add to many categories unless you publish a dozen of articles per day).
To increase the number of visualized pages it’s important to add photo or video sections, these medias are pertinent with your editorial policy.

Tips and tricks of GoodBarber:
- Use an Article section for the access to the last published news (this can be used as the HOME section of the app), and use a second article section if needed, dedicated to specific categories (3/4 filters max);
- Use one or more CMS sections for photos, video, etc;
- Offer the access from the app to social networks (Facebook page, Twitter, Instagram);
- Add the shearing feature in the detail page of the article;
- Monetize the app using the dedicated spaces for ads;
- Involve your readers making them into "mobile reporters" using the Submit section of GoodBarber.

Example n°2 : IT news website

Editorial policy: Little bit of actuality and lots of material. Your readers follow you for the relevance of your content.

These kind of news have a higher lifetime span then gossip. So it’s not a mistake to consider a display by themes to make the navigation easier for the user. Obviously it’s very important to add a browser.
Many IT news website use videos as a second source of communication. If you have some video sources I advice you to add them to provide various types of content. Because your articles are surely long, the key to the success of your app will be confort in reading.

Tips and tricks of GoodBarber:
- Use an Article section for the access to the last published news, and use more article sections dividing content using filters;
- Choose the disappearing option for the header to offer a full screen visual of the article;
- Offer features focused on the users (Favorites, Text size, etc);
- Abilitate comments;
- Use the HTML5 version of GoodBarber to make the access to your content easier from mobile devices.

Example n°3 : Politician’s blog during the elections

Editorial policy: A bit of news, lots of press releases, some static presentation articles. You mostly address your supporters and you’ve created the website as a showcase for your campaign.

In this case the risk can be to not find the right placement for each content.
For example, press releases shouldn’t be displayed directly in the home page of the app, It’s better to put them in sub-menus. On the other hand, you have to put emphasis on the latest news to encourage a frequent use of the app.

I would advise you to create a welcoming section with a static content to present the candidate (program, team, …).
Here you can add all the events regarding the campaign and lastly, to make the app more attrattive you can add photos, videos, podcasts, etc…

Tips and tricks of GoodBarber:
- Use an Article section for the access to the last published news (this can be use as the HOME section of the app), and use other article sections for the program, team and press releases;
- Use a Calendar section to notify everyone of the events in program;
- Add one or more sections dedicated to the media you already have on the web [Flicker, YouTube, SoundCloud podcast, etc];
- Give access to your social networks [Facebook page, Twitter and Instagram];
- Add the shearing option in the detail pages of the articles;
- Use push notifications sparingly to mobilize your community;
- Use a Live section to transmit your public speeches.

Usage statistics: A good way to know which changes you can make to your project

The previous examples obviously need to be adapted to each situation.
It’s not a good idea to frequently modify the app, but it could be interesting to consult the usage statistics after some months from it's publication and, if needed, make some little changes to improve the user experience.

It’s easy!
If you see that some sections are less seen then others, this means it’s not worth it to give them importance in the navigation menu because they're not arousing enough interest in the readers.

Now it’s your turn!

This article offers a small view on the infinite possibilities you have to create a news app.

And you… How did you approach the task? How did you decide to structure your app?
If you share your experience with us and our readers we will have the opportunity to grow together. :)