What content for your app

The examples below rest on seven applications, split into three families. Find the one that looks like your project, then adapt.

River Daily for a local paper, Piu Piu for a festival, Portland for a travel guide.

• Blog: create articles freely, illustrated with images and videos.
• Gallery: display your images in several presentations.
• Video: share your filmed content.
• Sound: publish your podcasts.
• Map: create content tied to specific locations.
• Form: ask your users questions, collect and analyze the answers.
• Events: communicate about events, presented by date.
• Internal and external advertising: generate revenue from your content.

Freyja Spa for a beauty salon, Ivar Madsen for an interior design agency.

• Blog: present your services and treatments, or build a portfolio.
• Contact: gather your contact details on a single page.
• About: introduce yourself on a dedicated page.
• Form: turn it into an appointment request.
• Loyalty card and club card: build a loyalty program and increase engagement.

Paraigua for a school, Dali Corp for an internal company app.

• Blog: distribute your content to your audience.
• Authentication: let your users create a profile.
• Users: publish the list of your users and their profiles.
• User groups: segment your audience and serve content specific to each group.
• Chat: open a discussion space in the app.
• Events: communicate about your events.
• Form: ask your users questions and analyze the answers.

The move is the same for every section described in this guide. Go to My App › Structure, click Add, then choose the type you want.

You can add up to 120 sections to an app, and the same content can appear in several sections at once. That's what makes the organization so flexible: a section isn't a sealed drawer, it's a view onto your content.

The Blog section lets you create content directly from the back office, in the form of articles enriched with photos and videos.

For a content creator, it's the central section. But whatever your project, you'll use it at least once: it's the most versatile section of all, and you'll see below that it bends easily to other uses.

Creating articles. An article is built in paragraphs of text, to which you add photos, videos, quotes or embed code.

The editor opens from Content › Add › An article. Articles you've already published are in Content › Content list › All articles.

Once the content is created, you set:

• the section or sections the article belongs to
• the author
• the thumbnail
• a summary, which will appear in the article list
• whether comments are switched on or not

The SEO tab also lets you fill in the metadata and customize the URL.

Dynamic content. That's its first purpose. In the River Daily news app, several Blog sections cover the paper's different desks, some with categories to refine navigation further.

In the article detail, the publication date is shown, comments are switched on, along with sharing and favoriting.

A catalog presentation. At Freyja Spa, the Blog sections present the salon's treatments. The three sections used are gathered inside a menu section.

The interesting diversion is here: the summary field, meant for a standfirst, is used to display each treatment's duration in the list. The most decisive piece of information is therefore readable at a glance, without opening the page.

The detail repeats the duration, the price, the description of the treatment and a link to the booking form. Comments are switched on and act as a collection of customer reviews.

Static content. The Portland app is a travel guide, and its Blog sections serve tips to visitors.

Here there's no author and no publication date: that information would add nothing to content that doesn't go out of date.

Nine layouts are available for the list. They're told apart on three criteria: the volume of articles you publish, the strength of your visuals, and whether or not you want to feature one article.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

Without a featured item, every article at the same rank:

• Enriched Classic, the universal default. Moderate rhythm, key metadata visible. Take it when nothing pushes you towards a more specialized layout.
• Condensed, for high editorial volume to be skimmed quickly. The visual comes second.
• Visual Card, full-width cards in a single column: large image on top, title and standfirst below. For when the image is what makes people click.
• Checkerboard, for static content, with titles read in a "Z" pattern.
• Grid Visual, a grid of equal articles. Requires a visual on every item.

With one article featured:

• Une Condensed, one flagship article followed by many compact items. The feed absorbs the volume.
• Une Grid Visual, one featured article then a grid. Requires a visual on every item too.
• Une Story, several "front pages" in a swipeable carousel, social-network style, with a compact feed below. For very regular publishing with strong visuals. Available on articles only.

The special case:

• Immersive, one article per screen, dominant image and vertical swipe navigation. Superb with strong visuals, but it doesn't hold high volume.

The rule that overrides all the others: if your articles have no visuals, or poor-quality ones, rule out Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story and Immersive. That leaves Condensed if the volume is high, Enriched Classic otherwise.

For the article detail, the default view puts the cover image in the hero, then the title, the date and the author, the action bar (share, favorite, comment) and the body text. When an article has no cover, the title comes first rather than leaving an empty hero.

One remark that holds for every section: while we sometimes associate a layout with a type of use, none is reserved for a particular field. It all depends on your needs and on your app's overall design.

The Gallery section displays a gallery of images. How it works is minimal: you add your photos, you choose the layout, and that's it.

Add your photos with the Add a photo button, or by dragging and dropping from your computer. Multiple uploads are possible, which speeds the work up considerably.

That screen is in Content › Content list › All photos, and direct adding is in Content › Add › A photo.

Once your images are in the back office, you can give them a title and a description, which will appear in the detail view.

Life at a school. The Paraigua app serves information to pupils and parents, and aims to build a community around the school. Its Gallery section regularly publishes photos of life at the school. The chosen layout leaves the title and description of each shot visible, to put them in context.

A music festival. The Piu Piu app is refreshed each year for the new edition. The gallery acts as an archive: it gathers photos from previous years, which keeps the memory alive for regulars and passes the festival's spirit on to newcomers.

Three layouts, answering three different intentions.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

• Visual Card, the default. One column, full-width cards, and above all a title and a caption per photo. It's the only one of the three that lets you put your images in context.
• Square, a two-column grid of squares, with no titles. For a very condensed visual archive, when the coherence of the whole matters more than each photo taken on its own.
• Ratio, a two-column mosaic that respects each image's native proportions. For a portfolio with mixed formats.

In other words: if your photos need explaining, take Visual Card. If they speak for themselves and there are many of them, Square or Ratio depending on whether they're uniform or not.

The Video section serves videos in your app, whether they're already hosted on an external site or not.

Add your videos by uploading them from your computer, or by entering their embed code if they already live elsewhere. As with the blog, you then choose the display sections, the author, the publication date, the summary and whether comments are on.

The editor opens from Content › Add › A video.

You can finally structure the page by adding, if needed, paragraphs of text, photos and quotes.

A local paper. River Daily has no television channel, but broadcasts regular shows on YouTube, including a daily one. They're gathered in the app's Video News section.

An internal company app. At Dali Corp, the Video section serves online courses created by employees for employees. The scheme does two jobs at once: it rallies staff around a shared project, and it gives them free training.

Three layouts for the list.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

• Enriched, the default. Compact list, small 16:9 thumbnail, metadata in the foreground (title, date, author, description). It's the right choice for high volume to be skimmed.
• Une Condensed, one featured video shown large with its standfirst, then a compact feed below. This is the "video paper", with the day's front page. Holds moderate to high volume.
• Visual Card, large full-width cards with the 16:9 frame and the play button centered. Take it when the thumbnail is what makes people click.

For the detail, the video player takes the hero, followed by the title, the date, the actions, the description and, if you enter one, the address.

The Podcasts section serves audio in your app.

Add your audio by uploading it from your computer. As with the blog, you choose the display sections or categories, the author, the date, the summary and comments. You can also add external links to buy the track.

The editor opens from Content › Add › A sound.

The page is then structured with paragraphs of text, photos, videos, embed code and quotes.

A news app. River Daily also broadcasts a live radio station. The Podcasts section makes certain shows permanently available. Dates are shown in the list, to help listeners find the show they're after. The detail page stays bare, with no extra information.

A school. Paraigua needed to deliver its lessons remotely. They're presented as a list, categorized by subject.

The idea worth keeping is in the detail page: a transcript of the lesson is published there as paragraphs and images. The pupil follows the text and the illustrations while listening to the audio version, which makes the lesson usable in very different situations.

Two layouts, and the criterion that separates them is the size of the thumbnail. Both embed the player in the cell, with the play button and the duration: so it isn't playback that tells them apart.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

• Classic Play, the default. Smaller thumbnail, text and metadata dominant. It's the layout for long episode lists, and the one for the radio pattern.
• Enriched, larger thumbnail, putting the artwork forward. Choose it when the cover art is part of your content's identity, on moderate volume.

For the detail, the artwork acts as an immersive cover, with the audio player, the title, the actions and the body text.

The sections above publish recorded content, available whenever your listener decides. Live does the opposite: it broadcasts in real time, and it's the appointment that makes the event.

Three building blocks, to be combined according to what you broadcast.

• Live audio is the base block: the section exists with nothing added. You enter your stream's address, and the app broadcasts it. IceCast encoders are supported natively, which covers the vast majority of radio setups.
• Live video does the same for a picture broadcast. It's an extension, and its listing shows the price that applies to your app.
• Live+ is a layer on top of live audio, also brought by an extension. It displays your stream's metadata next to the player: the track playing, the host, the show. Without it, your listener sees a play button and nothing else; with it, they see what they're listening to.

Two properties are worth knowing before you decide.

The sound doesn't stop when your listener navigates. The player follows the user from screen to screen and keeps going with the screen off. In practice, people can listen to your station while reading your articles, which completely changes how a radio app is used.

You can open several live sections. A radio station with two channels, a festival with two stages, a parish with two services: each stream has its own section.

One last difference with the sections above: live has only one presentation. There's no layout to choose.

A local radio station. River Daily's radio, mentioned in the previous chapter, lives in a Live section. The podcasts keep the shows on demand, the live section carries the station. Live+ displays the track playing and its artist, which gives a listener arriving mid-show something to place themselves by.

A festival. Piu Piu broadcasts its stage live across the four days. The audience that couldn't come follows the evening, and the regulars find the atmosphere again from home. Live works alongside the Events section, which remains the app's main section: the program announces, the live broadcasts.

Two details on that screen are worth pointing out. Sleep mode stops playback after a chosen delay, which counts on a station people listen to in the evening. And the player picks up the app's colors and typography: it's the same screen as at River Daily, and yet it doesn't look like the same product.

The Map section creates geolocated points displayed on a map. Your users spot the places and get directions to them.

To create a point, enter its address or its coordinates on the editing page.

The editing page opens from Content › Add › A location.

You then fill out the description with text, photos, videos, quotes or embed code. The right-hand panel lets you choose the display sections and add action buttons:

• a call button
• an email button

Finally you can add an external link, and customize the shape and color of the icon representing the point.

A school campus. Paraigua is spread over several buildings. Newcomers, pupils and parents alike, needed to identify them at a glance and get directions.

Four locations were created, presented first as a list. The Map view shows all the points and the distances. Clicking a point gives a summary and access to the detail, where the directions button is the main feature, completed by a description and an image.

A multi-site company. Dali Corp has offices in several American cities, and cares about its company culture. A Map section presents the three offices.

The detail is fuller than at Paraigua: photos describe the office and its atmosphere, and the directions button sits below the photos. The map isn't only there to orient people, it's there to make the other sites exist for those who never go.

A travel guide. In the Portland app, the map is the heart of the product. Several Map sections present the city's places, sorted by type.

The detail includes a full description, photos where needed, the directions button given prominence, and an external link to each establishment's website when it has one.

Three layouts, and the real criterion is how much room you give the map itself.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

• Enriched, the default. Compact list, small thumbnail, title and address, several places per screen. The map is hidden behind a button. It's the directory layout, for when the user already knows what they're looking for.
• Visual, large dominant thumbnail, few places per screen. The map stays hidden behind a button. For a gallery of places where the image is what appeals.
• Split Enriched, the interactive map takes the top of the screen and the list appears below. Choose it when the spatial relationship between the places carries meaning, that is when the map is the subject.

You also decide whether or not to display a summary list over the map. Go to My App › Structure, open the Map section, then the point list view: the setting is in the content area, under "Map view".

For a location's detail, you get the photo, the name, the address, the directions button, a gallery and the located map.

The Form section collects information from your users, through fields of various types.

Your forms are listed in Content › Content list › All forms. Opening one shows the form editing panel on the right, whose fields tab carries the palette below.

Sixteen field types are available:

• single line of text
• paragraph of text
• multiple choice
• name
• date
• email
• external link
• file upload
• numbers
• checkboxes
• dropdown
• address
• time
• telephone
• price
• section break

Click the type you want and it appears in the editing area, where you customize its content.

Remember to enrich the form with photos, videos, text, quotes or embed code too: a bare form gets fewer answers than a form that explains what it's after.

A service app. At Ivar Madsen, interior designer, the form handles appointment and quote requests.

The page has three goals: present the offer, get to know the future client, allow a first contact. An image and an explanatory text set the context, then the form gets straight to the point:

• a name field and an email field to identify the client
• two paragraph fields to express their needs and their project
• a date field to indicate their availability

A company app. At Dali Corp, HR regularly runs surveys to measure employee wellbeing and gather their opinions.

The form is deliberately very short, to maximize the response rate. An introductory text, then five fields:

• a name field and a team field to identify the employee
• two multiple-choice fields to answer management's questions
• a paragraph field to speak freely

Go to Content › Content list. Hover over the Form section concerned and click the link that shows its content. There you'll find the list of answers received.

Clicking a row shows one user's answers, which you can export as a .csv through Export data. The same button, from the list view, exports all the answers.

That export is what makes the section genuinely useful: without it you're reading answers one by one; with it, you analyze them as a whole.

The Submission section lets your users send you content from the app, as text, photos or videos. It all arrives in your back office.

What you receive arrives in Content › Content list › All sent in content.

There's nothing to configure, unless you want to restrict the types of content accepted. In that case, add the API Access extension and edit the section's JSON. It's a simple operation and step-by-step help is available in your back office.

An internal suggestion box. At Dali Corp, management opened a space where employees can leave their remarks and recommendations at any time. The content received isn't published: it's analyzed to improve working conditions.

A festival's memories. Piu Piu banks on its community and wants to show the festival's real atmosphere. The Your Memories section collects participants' photos and videos. Sending text was switched off.

Readers' tip-offs. River Daily wants to be first on local news. An open section lets readers pass on their information, which journalists rework before publishing.

Those three cases show three different regimes: content that will never be published, content published almost as it is, and content that serves as raw material for editorial work. Decide which is yours before opening the section, because it changes what you announce to your users.

Go to Content › Content list, hover over your Submission section and click the link that shows its content.

You handle publication in bulk, through the checkboxes to the right of each row, or case by case by opening an item. So you can edit and then publish in one click what your users have sent you.

The Events section presents your content as dated events.

To create an event, first choose its date and its duration. The "all day" option saves you entering a time range. You can then attach an address to it.

The editor opens from Content › Add › An event.

The page is built in paragraphs, with text, photos, videos, quotes and embed code.

The right-hand panel lets you choose the display sections or categories, add action buttons (call, email), an external link and a ticket purchase button.

An internal company app. Dali Corp uses two Events sections. The first communicates about internal events: workshops, after-work drinks, open days. The second shares the company roadmap, so that everyone knows the deadlines and the projects under way.

That second use is the most transferable: the events section isn't reserved for events you attend, it also serves to make a calendar visible.

In the detail, the address and the directions button appear when they're relevant.

A festival. At Piu Piu, Events is the app's main section: it's the festival program.

The detail is complete: address, date, ticket purchase button, description, link to the artists' website, call button, email button, directions button, along with favoriting and sharing.

Two layouts, matching two opposite stances.

The layout is changed in My App › Structure: open the menu of the section concerned, then Edit the design.

• Classic, the default. Events are grouped under day banners, with a small thumbnail, the time, the title and the place, several per screen. It's the calendar you browse by date, when the "when" and the "where" matter more than the image.
• Classic Bullet, each event in a large dominant thumbnail with a date pill, one or two per screen. It's the shop window, when it's the event's poster that makes people want to come.

So the choice comes down to one question: are your users coming to consult a program, or to be tempted?

For an event's detail, you get the cover image, the title, the address, the dates, the description, the directions and the map of the place.

A CMS (content management system) lets you create and format your content from a back office in order to publish it. At GoodBarber, it's the heart of the platform.

Beyond creation, it gives you:

• Content status management. Published, In stock or Draft, to steer what you publish.
• Scheduled publishing. You set the day and time of going live in advance, which matters especially for news or blog apps.
• Categorization. An unlimited number of categories to sort a section's content, so an extra level of navigation without overloading your menu.
• Sorting. By writing date, alphabetically or by number of comments.
• Centralized management. A dashboard gathers all the content created in the CMS, with filters to find and handle items in bulk.
• Advanced customization of the metadata. It serves both to encourage reading and your SEO, and you keep control of how it's displayed.
• Featuring content. Preferential display for the content of your choice, from its editing page.
• Advanced design customization. Each item's design can be set independently of the application's general settings.

If you already produce content elsewhere, you don't have to publish it again. More than 30 connectors developed by GoodBarber bring it into your app, formatting it to respect the app's display standards and design.

A caching system guarantees loading times and stability, without overloading your servers. Your images are resized, compressed and cached by GoodBarber.

The decisive advantage is synchronization: content produced on your external source stays up to date in the app, with a display adapted to mobile, tablet, laptop and desktop. You never have to publish twice again.

Each connector feeds a specific content type, and the content brought in then behaves as if it had been created in the CMS.

Articles: WordPress, Squarespace, Wix, Medium, Substack, X, RSS

Photos: Flickr

Videos: YouTube, Vimeo, RSS

Audio and podcasts: Ausha, Spreaker, Simplecast, Spotify for Podcasters, podcast feed, RSS

Events: iCal and vCalendar, RSS

Maps: KML, RSS

Custom connectors. If your source isn't covered, you produce a feed in the format expected by the target content type, and you declare its address. The bespoke work is limited to producing the feed: the display, the layouts, the search and the metadata remain the platform's. Detailed documentation describes the expected format.

Nothing forces you to choose between the two: you can mix internal content, created in the CMS, and external content brought in by the connectors, in one and the same application.