Content-App

Welche Inhalte für Ihre App

„Content-App“ ist ein weiter Begriff. Zwischen den Bereichen und den Funktionen, die Ihr Backoffice bereithält, decken Sie so gut wie jedes Vorhaben ab, in welchem Feld Sie auch arbeiten.

Dieser Leitfaden geht die neun Inhaltsbereiche durch und sagt zu jedem, was er erlaubt, wie Sie ihn einsetzen und welches Layout Sie wählen, wo es eines gibt. Er endet beim CMS und den Konnektoren, die eine grundlegende Frage klären: Ihre Inhalte in GoodBarber erstellen oder die Inhalte hereinholen, die Sie anderswo bereits produzieren.

Kapitel 1Die sieben Demo-Apps

Die folgenden Beispiele stützen sich auf sieben Anwendungen, aufgeteilt in drei Familien. Suchen Sie die, die Ihrem Vorhaben ähnelt, und passen Sie sie an.

Apps für Content-Macher

River Daily für eine Lokalzeitung, Piu Piu für ein Festival, Portland für einen Reiseführer.

  • Blog: Artikel frei anlegen, illustriert mit Bildern und Videos.
  • Galerie: Ihre Bilder in mehreren Darstellungen zeigen.
  • Video: Ihre gefilmten Inhalte teilen.
  • Audio: Ihre Podcasts veröffentlichen.
  • Karte: Inhalte anlegen, die an bestimmte Orte gebunden sind.
  • Formular: Ihren Nutzern Fragen stellen, die Antworten sammeln und auswerten.
  • Events: über Veranstaltungen informieren, nach Datum dargestellt.
  • Interne und externe Werbung: mit Ihren Inhalten Umsatz erzielen.
Drei Startscreens von Content-Apps: eine Lokalzeitung, ein Musikfestival mit seinen Daten und ein Stadtführer. Unter jedem Telefon erinnert ein Symbol an das Thema.

Dienstleistungsbetriebe

Freyja Spa für einen Kosmetiksalon, Ivar Madsen für ein Büro für Innenarchitektur.

  • Blog: Ihre Leistungen und Behandlungen vorstellen oder ein Portfolio aufbauen.
  • Kontakt: Ihre Kontaktdaten auf einer einzigen Seite versammeln.
  • Über uns: sich auf einer eigenen Seite vorstellen.
  • Formular: daraus eine Terminanfrage machen.
  • Treuekarte und Club Card: ein Treueprogramm aufbauen und die Bindung erhöhen.
Zwei Startscreens von Dienstleistungs-Apps: ein Spa und ein Innenausstatter. Unter jedem Telefon erinnert ein Symbol an das Gewerbe.

Bildung und Organisationen

Paraigua für eine Schule, Dali Corp für eine interne Firmen-App.

  • Blog: Ihre Inhalte an Ihr Publikum ausspielen.
  • Anmeldung: Ihre Nutzer ein Profil anlegen lassen.
  • Nutzer: die Liste Ihrer Nutzer und ihre Profile veröffentlichen.
  • Nutzergruppen: Ihr Publikum segmentieren und jeder Gruppe eigene Inhalte ausspielen.
  • Chat: einen Raum für Gespräche in der App öffnen.
  • Events: über Ihre Veranstaltungen informieren.
  • Formular: Ihren Nutzern Fragen stellen und die Antworten auswerten.
Zwei Startscreens: eine Schule und ein Unternehmen, die eine auf dem Foto ihres Gebäudes, das andere auf seinem Produkt. Unter jedem Telefon erinnert ein Symbol an das Feld.

Kapitel 2Einen Bereich hinzufügen

Der Handgriff ist bei jedem Bereich dieses Leitfadens derselbe. Gehen Sie zu My App Structure, klicken Sie auf Add und wählen Sie dann den gewünschten Typ.

Sie können einer App bis zu 120 Bereiche hinzufügen, und derselbe Inhalt kann in mehreren Bereichen zugleich erscheinen. Das macht die Ordnung so beweglich: Ein Bereich ist keine verschlossene Schublade, er ist ein Blick auf Ihre Inhalte.

Das Panel zum Hinzufügen eines Bereichs, geöffnet auf dem Katalog der verfügbaren Typen: Blog, Galerie, Video, soziale Netzwerke, Informationsseite, Kontakt, Karte, Kalender, Podcasts, Feed und Formular, mit einem Link, der weitere anzeigt. Unten der Zähler der bereits genutzten Bereiche. Links zeigt die Vorschau der App, wie das Menü wächst.

Kapitel 3Der Blog

Wozu er dient

Mit dem Bereich Blog legen Sie Inhalte unmittelbar aus dem Backoffice an, in Form von Artikeln, die mit Fotos und Videos angereichert sind.

Für einen Content-Macher ist er der zentrale Bereich. Aber wie Ihr Vorhaben auch aussieht, Sie werden ihn mindestens einmal einsetzen: Er ist der vielseitigste Bereich überhaupt, und Sie werden weiter unten sehen, dass er sich mühelos anderen Zwecken beugt.

Artikel anlegen. Ein Artikel wird aus Textabsätzen gebaut, denen Sie Fotos, Videos, Zitate oder Einbettungscode hinzufügen.

Der Editor öffnet sich über Content Add An article. Bereits veröffentlichte Artikel liegen unter Content Content list All articles.

Ist der Inhalt angelegt, legen Sie fest:

  • den Bereich oder die Bereiche, zu denen der Artikel gehört
  • den Autor
  • das Vorschaubild
  • eine Zusammenfassung, die in der Artikelliste erscheint
  • ob Kommentare eingeschaltet sind oder nicht

Im Reiter SEO tragen Sie außerdem die Metadaten ein und passen die URL an.

Das Bearbeiten eines Artikels im Backoffice. Links sein Titel und sein Bild. Rechts das Bearbeitungspanel, geöffnet auf seinem ersten Reiter: die Liste der Kategorien, in denen der Artikel erscheint, mit ihren Unterkategorien, jede ankreuzbar; der Autor; Datum und Uhrzeit der Veröffentlichung; ein Kästchen, um ihn oben in der Liste festzuhalten; und das in Listen verwendete Vorschaubild.

Drei Arten, ihn einzusetzen

Dynamische Inhalte. Das ist sein erster Zweck. In der Nachrichten-App River Daily decken mehrere Blog-Bereiche die verschiedenen Ressorts der Zeitung ab, einige mit Kategorien, um die Navigation weiter zu verfeinern.

Im Detail des Artikels wird das Datum der Veröffentlichung angezeigt, Kommentare sind eingeschaltet, ebenso Teilen und Merken.

Eine Vorstellung des Angebots. Bei Freyja Spa stellen die Blog-Bereiche die Behandlungen des Salons vor. Die drei genutzten Bereiche sind in einem Menübereich zusammengefasst.

Der interessante Kunstgriff steckt hier: Das Feld für die Zusammenfassung, eigentlich für einen Vorspann gedacht, wird genutzt, um in der Liste die Dauer jeder Behandlung anzuzeigen. Die entscheidendste Angabe ist damit auf einen Blick lesbar, ohne die Seite zu öffnen.

Das Detail wiederholt die Dauer, den Preis, die Beschreibung der Behandlung und einen Link zum Buchungsformular. Kommentare sind eingeschaltet und dienen als Sammlung von Kundenmeinungen.

Feste Inhalte. Die App Portland ist ein Reiseführer, und ihre Blog-Bereiche liefern Besuchern Tipps.

Hier gibt es weder Autor noch Datum der Veröffentlichung: Diese Angaben brächten Inhalten nichts, die nicht veralten.

Zwei Bereiche einer Nachrichten-App: links eine Liste, in der der erste Artikel groß erscheint und die folgenden in Zeilen; rechts ein Bereich mit einer Leiste von Unterkategorien darüber, die dieselbe Liste filtert.
Das Detail eines Artikels: das Bild oben, der Titel, das Datum der Veröffentlichung, dann der Text in Blocksatzabsätzen. Am Fuß des Screens Kommentare, Teilen und Merken.
Die Startseite einer Spa-App: drei Kategorien von Behandlungen, jede ein Bild über die volle Breite mit ihrem eingesetzten Namen.
Die Liste der Massagen: Jede Behandlung belegt eine Zeile mit ihrem Foto, ihrem Namen und ihrer Dauer.
Das Detail einer Behandlung: Foto, Name, Dauer, Preis, dann eine kursive Beschreibung und ein Link zur Buchung.
Zwei Screens eines Stadtführers: links die Liste der Artikel, jeder mit seinem quadratischen Vorschaubild und seinem Titel, unter der Kopfzeile des Bereichs und über der Tab-Leiste; rechts der geöffnete Artikel, sein Bild, sein Titel und sein Text.

Welches Layout Sie wählen

Neun Layouts stehen für die Liste zur Verfügung. Sie unterscheiden sich nach drei Kriterien: der Menge an Artikeln, die Sie veröffentlichen, der Kraft Ihrer Bilder, und der Frage, ob Sie einen Artikel hervorheben wollen oder nicht.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

Ohne hervorgehobenen Eintrag, alle Artikel im selben Rang:

  • Enriched Classic, der allgemeine Standard. Ruhiger Rhythmus, wichtige Metadaten sichtbar. Nehmen Sie es, wenn nichts Sie zu einem spezialisierteren Layout drängt.
  • Condensed, für große redaktionelle Mengen, die schnell überflogen werden. Das Bild kommt an zweiter Stelle.
  • Visual Card, Karten über die volle Breite in einer einzigen Spalte: großes Bild oben, Titel und Vorspann darunter. Für den Fall, dass das Bild zum Klicken bewegt.
  • Checkerboard, für feste Inhalte, mit Titeln, die im „Z“ gelesen werden.
  • Grid Visual, ein Raster gleichrangiger Artikel. Verlangt ein Bild bei jedem Eintrag.

Mit einem hervorgehobenen Artikel:

  • Une Condensed, ein Aushängeschild-Artikel, gefolgt von vielen kompakten Einträgen. Der Feed nimmt die Menge auf.
  • Une Grid Visual, ein hervorgehobener Artikel und dann ein Raster. Verlangt ebenfalls ein Bild bei jedem Eintrag.
  • Une Story, mehrere „Titelseiten“ in einem Karussell zum Wischen, im Stil sozialer Netzwerke, mit einem kompakten Feed darunter. Für sehr regelmäßiges Veröffentlichen mit starken Bildern. Nur für Artikel verfügbar.

Der Sonderfall:

  • Immersive, ein Artikel je Screen, beherrschendes Bild und Navigation durch senkrechtes Wischen. Großartig mit starken Bildern, aber es trägt keine großen Mengen.

Die Regel, die alle anderen sticht: Wenn Ihre Artikel keine Bilder oder nur schwache haben, schließen Sie Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story und Immersive aus. Es bleiben Condensed bei großer Menge und sonst Enriched Classic.

Für das Detail des Artikels setzt die Standardansicht das Titelbild in den Kopfbereich, dann den Titel, das Datum und den Autor, die Aktionsleiste (Teilen, Merken, Kommentieren) und den Fließtext. Hat ein Artikel kein Titelbild, kommt der Titel zuerst, statt einen leeren Kopfbereich stehen zu lassen.

Eine Bemerkung, die für jeden Bereich gilt: Auch wenn wir ein Layout manchmal mit einer Art von Verwendung verbinden, ist keines einem bestimmten Feld vorbehalten. Alles hängt von Ihren Bedürfnissen und von der Gesamtgestaltung Ihrer App ab.

Neun Entwürfe von Blog-Layouts, mit ihren Namen. In der oberen Reihe: Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. In der unteren Reihe: Une Condensed, Une Grid Visual, Une Story, Immersive. Jeder zeigt, wie Bild, Titel und Zusammenfassung in der Liste angeordnet sind und ob sich der erste Artikel von den anderen abhebt.

Kapitel 4Die Galerie

Wozu sie dient

Der Bereich Galerie zeigt eine Sammlung von Bildern. Die Funktionsweise ist denkbar knapp: Sie fügen Ihre Fotos hinzu, Sie wählen das Layout, und das war es.

Fügen Sie Ihre Fotos über die Schaltfläche Add a photo hinzu oder per Ziehen und Ablegen von Ihrem Rechner. Mehrere Dateien auf einmal sind möglich, was die Arbeit erheblich beschleunigt.

Dieser Screen liegt unter Content Content list All photos, und das direkte Hinzufügen unter Content Add A photo.

Sobald Ihre Bilder im Backoffice liegen, können Sie ihnen einen Titel und eine Beschreibung geben, die in der Detailansicht erscheinen.

Das Panel zum Hinzufügen eines Bereichs, ein Pfeil zeigt auf die Kachel der Galerie unter den verfügbaren Typen. Links die Vorschau der Festival-App mit ihrem Programm und ihrer Tab-Leiste.
Die auf eine Galerie gefilterte Inhaltsliste, in der Rasteransicht. Jedes Foto bildet eine Karte, auf der zwei Aufforderungen auf einen Titel und eine Bildunterschrift warten, ein Pfeil zeigt auf ihren Platz. Unter jeder Karte der Veröffentlichungsstatus, ein Papierkorb und ein Kontrollkästchen; oben die Suche, die Filter und die Schaltfläche zum Hinzufügen.

Zwei Arten, sie einzusetzen

Das Leben an einer Schule. Die App Paraigua liefert Schülern und Eltern Informationen und will eine Gemeinschaft rund um die Schule aufbauen. Ihr Bereich Galerie veröffentlicht regelmäßig Fotos aus dem Schulleben. Das gewählte Layout lässt Titel und Beschreibung jeder Aufnahme sichtbar, um sie einzuordnen.

Ein Musikfestival. Die App Piu Piu wird jedes Jahr für die neue Ausgabe aufgefrischt. Die Galerie wirkt als Archiv: Sie versammelt Fotos der vergangenen Jahre, was die Erinnerung für Stammgäste wachhält und den Geist des Festivals an Neuankömmlinge weitergibt.

Eine Galerie in einer Schul-App: Die Fotos folgen über die volle Breite aufeinander, jedes mit seinem Datum und seinem Titel darunter.
Eine Festivalgalerie als Mosaik: Die Fotos sitzen paarweise ohne Titel und antworten einander über ihre Farben.

Welches Layout Sie wählen

Drei Layouts, die auf drei verschiedene Absichten antworten.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

  • Visual Card, der Standard. Eine Spalte, Karten über die volle Breite, und vor allem ein Titel und eine Bildunterschrift je Foto. Es ist das einzige der drei, mit dem Sie Ihre Bilder einordnen können.
  • Square, ein zweispaltiges Raster aus Quadraten, ohne Titel. Für ein sehr dichtes Bildarchiv, wenn die Geschlossenheit des Ganzen mehr zählt als jedes Foto für sich.
  • Ratio, ein zweispaltiges Mosaik, das die ursprünglichen Proportionen jedes Bildes achtet. Für ein Portfolio mit gemischten Formaten.

Anders gesagt: Wenn Ihre Fotos Erklärung brauchen, nehmen Sie Visual Card. Wenn sie für sich sprechen und es viele sind, Square oder Ratio, je nachdem, ob sie einheitlich sind oder nicht.

Drei Entwürfe von Galerie-Layouts, mit ihren Namen: Visual Card, wo jedes Foto eine Karte mit seinem Titel und seiner Bildunterschrift belegt; Square, ein Raster quadratischer Vorschaubilder; Ratio, ein Raster, das die ursprünglichen Proportionen jedes Fotos beibehält.

Kapitel 5Videos

Wozu er dient

Der Bereich Video liefert Videos in Ihrer App, ob sie bereits auf einer externen Seite liegen oder nicht.

Fügen Sie Ihre Videos hinzu, indem Sie sie von Ihrem Rechner hochladen oder ihren Einbettungscode eintragen, wenn sie schon anderswo liegen. Wie beim Blog wählen Sie danach die Bereiche für die Anzeige, den Autor, das Datum der Veröffentlichung, die Zusammenfassung und ob Kommentare an sind.

Der Editor öffnet sich über Content Add A video.

Schließlich können Sie die Seite gliedern, indem Sie bei Bedarf Textabsätze, Fotos und Zitate ergänzen.

Dasselbe Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt diesmal auf die Kachel des Videos. Links zeigt die Vorschau der Firmen-App einen Artikel.
Das Anlegen eines Videos im Backoffice: in der Mitte ein Ablagebereich, der die maximale Größe nennt und entweder das Hochladen einer Datei oder das Einfügen eines Einbettungscodes anbietet, mit der Liste der akzeptierten Formate. Rechts die Kategorie, der Autor, das Datum, das Festhalten oben in der Liste, eine Zusammenfassung und der Schalter für die Kommentare.

Zwei Arten, ihn einzusetzen

Eine Lokalzeitung. River Daily hat keinen Fernsehsender, sendet aber regelmäßig Formate auf YouTube, darunter eines täglich. Sie sind im Bereich Video News der App versammelt.

Eine interne Firmen-App. Bei Dali Corp liefert der Bereich Video Online-Kurse, die Mitarbeitende für Mitarbeitende erstellt haben. Das Vorgehen erfüllt zwei Zwecke auf einmal: Es schart die Belegschaft um ein gemeinsames Projekt und bildet sie kostenlos weiter.

Eine Videoliste in einer Nachrichten-App: Jede Zeile trägt ihr Vorschaubild, mit einer Wiedergabeschaltfläche markiert, und daneben ihren Titel oder ihr Datum.
Eine Videoliste in einer Firmen-App: Die Vorschaubilder nehmen die volle Breite ein, ihre Dauer in eine Ecke gesetzt, mit dem Datum der Veröffentlichung und dem Titel darunter.

Welches Layout Sie wählen

Drei Layouts für die Liste.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

  • Enriched, der Standard. Kompakte Liste, kleines Vorschaubild im Format 16:9, Metadaten im Vordergrund (Titel, Datum, Autor, Beschreibung). Das ist die richtige Wahl bei großer Menge, die überflogen wird.
  • Une Condensed, ein hervorgehobenes Video, groß mit seinem Vorspann gezeigt, darunter ein kompakter Feed. Das ist die „Videozeitung“, mit der Titelseite des Tages. Trägt mittlere bis große Mengen.
  • Visual Card, große Karten über die volle Breite mit dem Bildausschnitt 16:9 und der mittig gesetzten Wiedergabeschaltfläche. Nehmen Sie es, wenn das Vorschaubild zum Klicken bewegt.

Für das Detail nimmt der Videoplayer den Kopfbereich ein, gefolgt von Titel, Datum, den Aktionen, der Beschreibung und, wenn Sie eine eintragen, der Adresse.

Drei Entwürfe von Video-Layouts, mit ihren Namen: Enriched, eine Liste, in der das Vorschaubild links vom Titel sitzt; Une Condensed, das das erste Video groß über die folgenden setzt; Visual Card, wo jedes Video seine eigene Karte belegt.

Kapitel 6Podcasts

Wozu er dient

Der Bereich Podcasts liefert Audio in Ihrer App.

Fügen Sie Ihr Audio hinzu, indem Sie es von Ihrem Rechner hochladen. Wie beim Blog wählen Sie die Bereiche oder Kategorien für die Anzeige, den Autor, das Datum, die Zusammenfassung und die Kommentare. Sie können außerdem externe Links ergänzen, über die sich das Stück kaufen lässt.

Der Editor öffnet sich über Content Add A sound.

Die Seite wird anschließend mit Textabsätzen, Fotos, Videos, Einbettungscode und Zitaten gegliedert.

Das Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt auf die Kachel des Podcasts. Links die Vorschau der Schul-App, deren Menü sich als Raster von Symbolen zeigt.
Das Anlegen einer Folge im Backoffice: in der Mitte ein Titelfeld und ein Ablagebereich für die Audiodatei. Rechts die aus dem Baum der Kurse gewählte Kategorie, der Autor, das Datum, das Festhalten, zwei Felder für Links zu den Stores und der Schalter für die Kommentare.

Zwei Arten, ihn einzusetzen

Eine Nachrichten-App. River Daily sendet außerdem ein Radioprogramm live. Der Bereich Podcasts hält bestimmte Sendungen dauerhaft verfügbar. In der Liste werden die Daten angezeigt, damit Hörer die gesuchte Sendung finden. Die Detailseite bleibt schmucklos, ohne zusätzliche Angaben.

Eine Schule. Paraigua musste ihren Unterricht aus der Ferne ausliefern. Er wird als Liste dargeboten, nach Fach in Kategorien geordnet.

Die Idee, die man sich merken sollte, steckt in der Detailseite: Dort wird eine Mitschrift der Lektion als Absätze und Bilder veröffentlicht. Die Schülerin folgt dem Text und den Illustrationen, während sie die Audiofassung hört, was die Lektion in sehr unterschiedlichen Situationen brauchbar macht.

Zwei Screens einer Nachrichten-App: links die Liste der Folgen, jede mit ihrem Titel, ihrem Datum und ihrem Vorschaubild; rechts der geöffnete Player, mit dem Cover, dem Datum, dem Titel, dem Fortschrittsbalken über einer Wellenform und den drei Schaltflächen für die Wiedergabe.
Eine Liste von Folgen in einer Schul-App, unter einer Leiste von Unterkategorien, die die Fächer trennt. Jede Zeile trägt ihr Vorschaubild und ihren Titel.
Das Detail einer Folge: Cover, Datum, Titel, Player, dann die schriftliche Lektion, die dem Audio folgt, in Absätzen mit Überschriften, von einem Foto unterbrochen.

Welches Layout Sie wählen

Zwei Layouts, und das Kriterium, das sie trennt, ist die Größe des Vorschaubilds. Beide betten den Player in die Zelle ein, mit der Wiedergabeschaltfläche und der Dauer: Nicht die Wiedergabe unterscheidet sie also.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

  • Classic Play, der Standard. Kleineres Vorschaubild, Text und Metadaten beherrschen. Es ist das Layout für lange Listen von Folgen und das für das Muster des Radios.
  • Enriched, größeres Vorschaubild, das das Coverbild herausstellt. Wählen Sie es, wenn das Cover zur Identität Ihrer Inhalte gehört, bei mittlerer Menge.

Für das Detail wirkt das Coverbild als raumgreifende Titelfläche, mit dem Audioplayer, dem Titel, den Aktionen und dem Fließtext.

Zwei Entwürfe von Podcast-Layouts, mit ihren Namen: Classic Play, wo jede Folge ihr Vorschaubild, ihren Text und ihre Wiedergabeschaltfläche aufreiht; Enriched, das dem Vorschaubild und der Zusammenfassung mehr Raum gibt.

Kapitel 7Live

Wozu es dient

Die obigen Bereiche veröffentlichen aufgezeichnete Inhalte, verfügbar, wann immer Ihre Hörerin es entscheidet. Live macht das Gegenteil: Es sendet in Echtzeit, und die Verabredung macht das Ereignis.

Drei Bausteine, die sich nach dem kombinieren lassen, was Sie senden.

  • Live-Audio ist der Grundbaustein: Den Bereich gibt es, ohne dass Sie etwas hinzufügen müssten. Sie tragen die Adresse Ihres Streams ein, und die App sendet ihn. Encoder nach IceCast werden von Haus aus unterstützt, was die allermeisten Radioaufbauten abdeckt.
  • Live-Video leistet dasselbe für eine Bildübertragung. Es ist eine Extension, und ihre Beschreibung zeigt den Preis, der für Ihre App gilt.
  • Live+ ist eine Schicht über dem Live-Audio, ebenfalls von einer Extension mitgebracht. Es zeigt die Metadaten Ihres Streams neben dem Player: das laufende Stück, die Moderation, die Sendung. Ohne es sieht Ihre Hörerin eine Wiedergabeschaltfläche und sonst nichts; mit ihm sieht sie, was sie hört.

Zwei Eigenschaften sollten Sie vor Ihrer Entscheidung kennen.

Der Ton bricht nicht ab, wenn Ihre Hörerin navigiert. Der Player folgt der Nutzerin von Screen zu Screen und läuft auch bei ausgeschaltetem Bildschirm weiter. In der Praxis kann man Ihren Sender hören, während man Ihre Artikel liest, was die Nutzung einer Radio-App vollständig verändert.

Sie können mehrere Live-Bereiche öffnen. Ein Radiosender mit zwei Programmen, ein Festival mit zwei Bühnen, eine Gemeinde mit zwei Gottesdiensten: Jeder Stream hat seinen eigenen Bereich.

Ein letzter Unterschied zu den obigen Bereichen: Live hat nur eine Darstellung. Es gibt kein Layout zu wählen.

Zwei Arten, es einzusetzen

Ein Lokalradio. Das Radio von River Daily, im vorigen Kapitel erwähnt, lebt in einem Live-Bereich. Die Podcasts halten die Sendungen auf Abruf bereit, der Live-Bereich trägt den Sender. Live+ zeigt das laufende Stück und seine Interpretin, was einer Hörerin, die mitten in der Sendung dazukommt, einen Anhaltspunkt gibt.

Ein Festival. Piu Piu überträgt seine Bühne über die vier Tage live. Das Publikum, das nicht kommen konnte, verfolgt den Abend, und die Stammgäste finden die Stimmung von zu Hause aus wieder. Live arbeitet neben dem Bereich Events, der der Hauptbereich der App bleibt: Das Programm kündigt an, das Live überträgt.

Zwei Einzelheiten auf diesem Screen verdienen einen Hinweis. Sleep mode beendet die Wiedergabe nach einer gewählten Frist, was bei einem Sender zählt, den man abends hört. Und der Player übernimmt die Farben und die Typografie der App: Es ist derselbe Screen wie bei River Daily, und doch wirkt er nicht wie dasselbe Produkt.

Der Live-Player von River Daily: rundes Coverbild, Wiedergabeschaltfläche, verstrichene Zeit, dann der Name der Interpretin und der Titel des Stücks, die Live+ anzeigt. Unten erinnert ein bleibender Mini-Player daran, was gerade läuft.
Ohne Live+ sähe die Hörerin nur die Wiedergabeschaltfläche.
Derselbe Live-Screen bei Piu Piu, in den dunklen und orangen Farben des Festivals, mit einer Schaltfläche für den Sleep-Modus oben rechts und dem bleibenden Mini-Player unten.
Derselbe Screen wie oben, zwei Identitäten: Der Player folgt der Gestaltung der App.

Kapitel 8Karte

Wozu er dient

Der Bereich Karte legt verortete Punkte an, die auf einer Karte angezeigt werden. Ihre Nutzer erkennen die Orte und lassen sich dorthin führen.

Um einen Punkt anzulegen, tragen Sie auf der Bearbeitungsseite seine Adresse oder seine Koordinaten ein.

Die Bearbeitungsseite öffnet sich über Content Add A location.

Anschließend füllen Sie die Beschreibung mit Text, Fotos, Videos, Zitaten oder Einbettungscode. Im rechten Panel wählen Sie die Bereiche für die Anzeige und fügen Aktionsschaltflächen hinzu:

  • eine Schaltfläche zum Anrufen
  • eine Schaltfläche für eine E-Mail

Schließlich können Sie einen externen Link ergänzen und Form und Farbe des Symbols anpassen, das den Punkt darstellt.

Das Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt auf die Kachel der Karte. Links die Vorschau des Stadtführers, mit seiner Suche und seinen Kacheln.
Das Anlegen eines Ortes im Backoffice: sein Name, seine Adresse, seine Koordinaten, und rechts die Karte, die sie setzt. Darunter ein Texteditor, um ihn zu beschreiben. Im rechten Panel die Kategorien, in denen er erscheint, eine Telefonnummer und eine E-Mail, die zu Aktionsschaltflächen werden, eine Webadresse, dann die Wahl der Form und der Farbe seiner Markierung.

Drei Arten, ihn einzusetzen

Ein Schulcampus. Paraigua verteilt sich über mehrere Gebäude. Neuankömmlinge, Schüler wie Eltern, mussten sie auf einen Blick erkennen und den Weg dorthin finden.

Vier Orte wurden angelegt, zunächst als Liste dargeboten. Die Kartenansicht zeigt alle Punkte und die Entfernungen. Ein Klick auf einen Punkt gibt eine Kurzfassung und den Zugang zum Detail, wo die Schaltfläche für die Route die Hauptsache ist, ergänzt um eine Beschreibung und ein Bild.

Ein Unternehmen mit mehreren Standorten. Dali Corp hat Büros in mehreren amerikanischen Städten und legt Wert auf seine Unternehmenskultur. Ein Bereich Karte stellt die drei Büros vor.

Das Detail ist ausführlicher als bei Paraigua: Fotos beschreiben das Büro und seine Atmosphäre, und die Schaltfläche für die Route sitzt unter den Fotos. Die Karte ist nicht nur dazu da, Menschen zu orientieren, sie ist dazu da, die anderen Standorte für die spürbar zu machen, die nie hinkommen.

Ein Reiseführer. In der App Portland ist die Karte das Herz des Produkts. Mehrere Bereiche Karte stellen die Orte der Stadt vor, nach Art sortiert.

Das Detail enthält eine vollständige Beschreibung, wo nötig Fotos, die deutlich herausgestellte Schaltfläche für die Route und einen externen Link zur Website jedes Hauses, sofern es eine hat.

Drei Screens einer Schul-App: die Liste der Orte, jeder mit seinem Foto, seinem Namen und seiner Adresse; die Karte, auf der sich die Markierungen verteilen und eine davon ihre Beschriftung öffnet; das Detail eines Ortes, mit seinem Foto, seiner Adresse, einer Schaltfläche für die Route, der Liste seiner Leistungen und einer Karte am Fuß.
Das Detail eines Büros in einer Firmen-App: das Eröffnungsfoto, der Name, die Adresse, eine einleitende Zeile, dann vier Fotos der Räume, die Schaltfläche für die Route und die Karte.
Zwei Screens eines Stadtführers: links die Liste der Orte, unter einer Leiste von Unterkategorien, mit einer runden Schaltfläche, die zur Karte wechselt; rechts die bildschirmfüllende Karte, ihre Markierungen und die Schaltfläche, die zur Liste zurückführt.
Das Detail einer Sehenswürdigkeit: Foto, Name, Adresse, Schaltfläche für die Route, dann eine Beschreibung, die Absätze, eine Aufzählungsliste und Fotos abwechselt, eine Schaltfläche zur Website und die Karte am Fuß.

Welches Layout Sie wählen

Drei Layouts, und das eigentliche Kriterium ist, wie viel Raum Sie der Karte selbst geben.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

  • Enriched, der Standard. Kompakte Liste, kleines Vorschaubild, Titel und Adresse, mehrere Orte je Screen. Die Karte verbirgt sich hinter einer Schaltfläche. Es ist das Layout des Verzeichnisses, für den Fall, dass der Nutzer schon weiß, wonach er sucht.
  • Visual, großes, beherrschendes Vorschaubild, wenige Orte je Screen. Die Karte bleibt hinter einer Schaltfläche verborgen. Für eine Galerie von Orten, bei der das Bild anzieht.
  • Split Enriched, die interaktive Karte nimmt den oberen Teil des Screens ein und die Liste erscheint darunter. Wählen Sie es, wenn die räumliche Beziehung zwischen den Orten Bedeutung trägt, also wenn die Karte das Thema ist.

Sie entscheiden außerdem, ob über der Karte eine Kurzliste erscheint oder nicht. Gehen Sie zu My App Structure, öffnen Sie den Bereich Karte und dann die Listenansicht der Punkte: Die Einstellung liegt im Inhaltsbereich, unter „Map view“.

Für das Detail eines Ortes erhalten Sie das Foto, den Namen, die Adresse, die Schaltfläche für die Route, eine Galerie und die verortete Karte.

Drei Entwürfe von Karten-Layouts, mit ihren Namen: Enriched, eine Liste, in der jeder Ort seine Markierung und seine Adresse trägt; Visual, das jedem Ort ein großes Vorschaubild gibt; Split Enriched, das die Karte oben und die Liste darunter setzt.
Die Gestaltungseinstellungen eines Kartenbereichs. Eingekreist steuern zwei Schalter, ob die Liste erscheint und ob sie vor der Karte öffnet. Darunter die Hintergrundfarbe, der Rahmen, die Deckkraft, was jede Zeile anzeigt, und die Typografie des Titels. Links wendet die Vorschau die Einstellungen unmittelbar an.

Kapitel 9Das Formular

Wozu es dient

Der Bereich Formular sammelt über Felder verschiedener Art Angaben Ihrer Nutzer ein.

Ihre Formulare sind unter Content Content list All forms aufgeführt. Eines zu öffnen zeigt rechts das Bearbeitungspanel des Formulars, dessen Reiter für die Felder die untenstehende Palette trägt.

Sechzehn Feldtypen stehen zur Verfügung:

  • einzelne Textzeile
  • Textabsatz
  • Mehrfachauswahl
  • Name
  • Datum
  • E-Mail
  • externer Link
  • Datei-Upload
  • Zahlen
  • Kontrollkästchen
  • Auswahlliste
  • Adresse
  • Uhrzeit
  • Telefon
  • Preis
  • Abschnittstrenner

Klicken Sie auf den gewünschten Typ, und er erscheint im Bearbeitungsbereich, wo Sie seinen Inhalt anpassen.

Denken Sie daran, das Formular auch mit Fotos, Videos, Text, Zitaten oder Einbettungscode anzureichern: Ein nacktes Formular erhält weniger Antworten als eines, das erklärt, worum es geht.

Das Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt diesmal auf die Kachel des Formulars, in einem länger gewordenen Katalog. Links die Vorschau der App des Innenausstatters, Menü geöffnet.
Das Bearbeiten eines Formulars: links sein Titel und eine Illustration; rechts die Palette der verfügbaren Felder, eine einzelne Textzeile, eine Zahl, ein Absatz, Kontrollkästchen, eine Einfachauswahl, eine Auswahlliste, ein Name, eine Adresse, ein Datum, eine Uhrzeit, eine E-Mail, ein Telefon, eine Website, ein Preis, eine Datei und ein Abschnittstrenner.

Zwei Arten, es einzusetzen

Eine Dienstleistungs-App. Bei Ivar Madsen, Innenarchitekt, übernimmt das Formular Termin- und Angebotsanfragen.

Die Seite hat drei Ziele: das Angebot vorstellen, die künftige Kundin kennenlernen, einen ersten Kontakt ermöglichen. Ein Bild und ein erklärender Text setzen den Rahmen, dann kommt das Formular gleich zur Sache:

  • ein Feld für den Namen und eines für die E-Mail, um die Kundin zu erkennen
  • zwei Absatzfelder, um ihre Bedürfnisse und ihr Vorhaben auszudrücken
  • ein Datumsfeld, um ihre Verfügbarkeit anzugeben

Eine Firmen-App. Bei Dali Corp führt die Personalabteilung regelmäßig Umfragen durch, um das Wohlbefinden der Mitarbeitenden zu messen und ihre Meinungen einzuholen.

Das Formular ist bewusst sehr kurz, um die Rücklaufquote zu maximieren. Ein einleitender Text, dann fünf Felder:

  • ein Feld für den Namen und eines für das Team, um die Person zu erkennen
  • zwei Felder mit Mehrfachauswahl, um die Fragen der Geschäftsführung zu beantworten
  • ein Absatzfeld, um frei zu sprechen
Ein Kontaktformular, von oben nach unten gescrollt: der Titel, ein Foto, vier Blöcke, die erklären, wonach gefragt wird, dann die auszufüllenden Felder, Name, E-Mail, Adresse des Objekts mit ihren Unterfeldern, Beschreibung des Vorhabens, bevorzugter Stil und Verfügbarkeit mit einer Datumsauswahl. Eine Sendeschaltfläche schließt die Seite ab.
Eine interne Umfrage in einer Firmen-App: nach der Einleitung ein Namensfeld, eine Auswahlliste für das Team, zwei Fragen mit Einfachauswahl und ein freies Feld, dann die Sendeschaltfläche.

Die Antworten nutzen

Gehen Sie zu Content Content list. Fahren Sie über den betreffenden Bereich Formular und klicken Sie auf den Link, der seine Inhalte zeigt. Dort finden Sie die Liste der eingegangenen Antworten.

Ein Klick auf eine Zeile zeigt die Antworten eines Nutzers, die Sie über Export data als .csv exportieren. Dieselbe Schaltfläche exportiert aus der Listenansicht heraus alle Antworten.

Dieser Export macht den Bereich erst wirklich nützlich: Ohne ihn lesen Sie Antworten einzeln; mit ihm werten Sie sie als Ganzes aus.

Die Antworten eines Formulars im Backoffice, als Tabelle: das Datum, die Felder des Formulars als Spalten und die angehängte Datei. Ein Papierkorb schließt jede Zeile ab. Vom Pfeil eingekreist, oben rechts, der Export der Daten und der Weg zurück zum Bearbeiten des Formulars.

Kapitel 10Einsendungen

Wozu er dient

Mit dem Bereich für Einsendungen schicken Ihnen Ihre Nutzer Inhalte aus der App, als Text, Fotos oder Videos. Alles landet in Ihrem Backoffice.

Was Sie erhalten, kommt unter Content Content list All sent in content an.

Es gibt nichts einzurichten, außer Sie wollen die angenommenen Inhaltstypen einschränken. Fügen Sie dafür die Extension API Access hinzu und bearbeiten Sie das JSON des Bereichs. Das ist ein einfacher Handgriff, und eine Schritt-für-Schritt-Hilfe steht in Ihrem Backoffice bereit.

Das Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt auf die Kachel für eingesendete Inhalte. Links die Vorschau der App des Innenausstatters, Menü geöffnet.

Drei Arten, ihn einzusetzen

Ein interner Briefkasten für Vorschläge. Bei Dali Corp hat die Geschäftsführung einen Raum geöffnet, in dem Mitarbeitende jederzeit ihre Anmerkungen und Empfehlungen hinterlassen können. Die eingegangenen Inhalte werden nicht veröffentlicht: Sie werden ausgewertet, um die Arbeitsbedingungen zu verbessern.

Die Erinnerungen eines Festivals. Piu Piu setzt auf seine Community und will die wirkliche Stimmung des Festivals zeigen. Der Bereich „Your Memories“ sammelt Fotos und Videos der Teilnehmenden. Das Einsenden von Text wurde abgeschaltet.

Hinweise von Lesern. River Daily will bei lokalen Nachrichten die Erste sein. Ein offener Bereich lässt Leser ihre Informationen weitergeben, die Journalisten vor der Veröffentlichung überarbeiten.

Diese drei Fälle zeigen drei verschiedene Regime: Inhalte, die nie veröffentlicht werden, Inhalte, die fast unverändert erscheinen, und Inhalte, die als Rohstoff für redaktionelle Arbeit dienen. Entscheiden Sie, welches Ihres ist, bevor Sie den Bereich öffnen, denn es ändert, was Sie Ihren Nutzern ankündigen.

Zwei Screens einer Firmen-App: links das Menü, in dem ein Eintrag die Mitarbeitenden zum Beitragen einlädt; rechts der Screen zum Einsenden, der drei Wege anbietet, ein Bild, ein Video oder einen Text, jeder mit seinem Hinweis.
Derselbe Mechanismus in einer Festival-App: Das Menü lädt die Gäste ein, ihre Erinnerungen einzusenden, und der Screen zum Einsenden behält zwei Wege, Bild und Video, jeder auf seinem eigenen farbigen Hintergrund.
In einer Nachrichten-App: Das Menü trägt zwei Einträge für Beiträge, und der Screen zum Einsenden lädt die Leser ein, über ihre Stadt zu berichten, indem sie ein Bild, ein Video oder einen Text schicken.

Verwalten, was Sie erhalten

Gehen Sie zu Content Content list, fahren Sie über Ihren Bereich für Einsendungen und klicken Sie auf den Link, der seine Inhalte zeigt.

Sie erledigen die Veröffentlichung in großer Menge, über die Kontrollkästchen rechts von jeder Zeile, oder Fall für Fall, indem Sie einen Eintrag öffnen. So bearbeiten und veröffentlichen Sie mit einem Klick, was Ihre Nutzer Ihnen geschickt haben.

Eingesendete Inhalte im Backoffice: Jede Zeile trägt das eingesendete Bild, einen Hinweis auf die App, aus der es kam, die E-Mail-Adresse der Verfasserin, das Datum und einen Statuschip, der es als eingesendet und auf Freigabe wartend kennzeichnet. Ein Papierkorb schließt jede Zeile ab.

Kapitel 11Events

Wozu er dient

Der Bereich Events stellt Ihre Inhalte als datierte Veranstaltungen dar.

Um ein Event anzulegen, wählen Sie zuerst sein Datum und seine Dauer. Die Option „All day“ erspart Ihnen, eine Zeitspanne einzutragen. Anschließend können Sie eine Adresse daran hängen.

Der Editor öffnet sich über Content Add An event.

Die Seite wird aus Absätzen gebaut, mit Text, Fotos, Videos, Zitaten und Einbettungscode.

Im rechten Panel wählen Sie die Bereiche oder Kategorien für die Anzeige, fügen Aktionsschaltflächen hinzu (anrufen, E-Mail), einen externen Link und eine Schaltfläche für den Ticketkauf.

Das Panel zum Hinzufügen eines Bereichs, der Pfeil zeigt auf die Kachel des Kalenders. Links die Vorschau der Festival-App, mit dem Programm und seiner Tab-Leiste.
Das Bearbeiten eines Events im Backoffice: sein Titel, sein Anfangs- und sein Enddatum, ein Kästchen für den ganzen Tag, dann der Ort mit seinen Koordinaten und die Karte, die ihn verortet. Rechts die Kategorie, ein Telefon und eine E-Mail als Aktionsschaltflächen, eine Webadresse, ein Link zum Ticketverkauf und das Vorschaubild für die Liste.

Zwei Arten, ihn einzusetzen

Eine interne Firmen-App. Dali Corp nutzt zwei Bereiche Events. Der erste informiert über interne Veranstaltungen: Workshops, After-Work, Tage der offenen Tür. Der zweite teilt die Roadmap des Unternehmens, damit alle die Termine und die laufenden Projekte kennen.

Diese zweite Verwendung lässt sich am besten übertragen: Der Bereich Events ist nicht Veranstaltungen vorbehalten, die man besucht, er dient auch dazu, einen Kalender sichtbar zu machen.

Im Detail erscheinen die Adresse und die Schaltfläche für die Route, wenn sie sinnvoll sind.

Ein Festival. Bei Piu Piu ist Events der Hauptbereich der App: Es ist das Programm des Festivals.

Das Detail ist vollständig: Adresse, Datum, Schaltfläche für den Ticketkauf, Beschreibung, Link zur Website der Künstler, Schaltfläche zum Anrufen, Schaltfläche für eine E-Mail, Schaltfläche für die Route, dazu Merken und Teilen.

Zwei Screens einer Firmen-App: links die Liste der Events, jedes mit seinem Datumschip, seinem Bild und seiner Uhrzeit oder seinem Ort; rechts das Detail eines Events, mit seinem Foto, seinem Ort, seinem Datum, einer Schaltfläche für die Route und der Karte.
Das Detail eines Konzerts in der Festival-App: das Foto, der Name der Band, der Ort, das Datum, eine Schaltfläche zum Ticketverkauf, die Vorstellung, dann vier Schaltflächen, Website, Telefon, Route und E-Mail, und die Karte am Fuß.

Welches Layout Sie wählen

Zwei Layouts, die zwei gegensätzlichen Haltungen entsprechen.

Das Layout wird unter My App Structure gewechselt: Öffnen Sie das Menü des betreffenden Bereichs und dann Edit the design.

  • Classic, der Standard. Die Events sind unter Tagesbannern gruppiert, mit einem kleinen Vorschaubild, der Uhrzeit, dem Titel und dem Ort, mehrere je Screen. Es ist der Kalender, den man nach Datum durchsieht, wenn das Wann und das Wo mehr zählen als das Bild.
  • Classic Bullet, jedes Event in einem großen, beherrschenden Vorschaubild mit einem Datumschip, eines oder zwei je Screen. Es ist das Schaufenster, wenn das Plakat des Events die Lust weckt zu kommen.

Die Wahl läuft also auf eine Frage hinaus: Kommen Ihre Nutzer, um ein Programm nachzusehen, oder um verführt zu werden?

Für das Detail eines Events erhalten Sie das Titelbild, den Titel, die Adresse, die Daten, die Beschreibung, die Route und die Karte des Ortes.

Zwei Entwürfe von Kalender-Layouts, mit ihren Namen: Classic, eine Liste von Events, nach Tag gruppiert, jedes mit seinem Vorschaubild und seinem Ort; Classic Bullet, das die Daten als Chips an den Rand reiht und jedem Event ein großes Bild gibt.

Kapitel 12Das CMS und die Konnektoren

Was das CMS bringt

Ein CMS (Content-Management-System) erlaubt Ihnen, Ihre Inhalte aus einem Backoffice heraus anzulegen und zu gestalten, um sie zu veröffentlichen. Bei GoodBarber ist es das Herz der Plattform.

Über das Anlegen hinaus gibt es Ihnen:

  • Die Verwaltung des Status der Inhalte. Published, In stock oder Draft, um zu steuern, was Sie veröffentlichen.
  • Geplantes Veröffentlichen. Sie legen Tag und Uhrzeit des Erscheinens im Voraus fest, was besonders bei Nachrichten- oder Blog-Apps zählt.
  • Kategorien. Unbegrenzt viele Kategorien, um die Inhalte eines Bereichs zu ordnen, also eine zusätzliche Ebene der Navigation, ohne Ihr Menü zu überladen.
  • Sortierung. Nach Datum der Erstellung, alphabetisch oder nach Zahl der Kommentare.
  • Zentrale Verwaltung. Ein Dashboard versammelt alle im CMS angelegten Inhalte, mit Filtern, um Einträge zu finden und in großer Menge zu bearbeiten.
  • Weitgehende Anpassung der Metadaten. Sie dient sowohl dazu, zum Lesen einzuladen, als auch Ihrem SEO, und Sie behalten die Kontrolle über ihre Anzeige.
  • Inhalte hervorheben. Bevorzugte Anzeige für den Inhalt Ihrer Wahl, von seiner Bearbeitungsseite aus.
  • Weitgehende Anpassung der Gestaltung. Die Gestaltung jedes Eintrags lässt sich unabhängig von den allgemeinen Einstellungen der Anwendung festlegen.

Was die Konnektoren bringen

Wenn Sie anderswo bereits Inhalte produzieren, müssen Sie sie nicht erneut veröffentlichen. Mehr als 30 von GoodBarber entwickelte Konnektoren holen sie in Ihre App und formatieren sie so, dass sie den Anzeigestandards und der Gestaltung der App entsprechen.

Ein System aus Zwischenspeichern sichert Ladezeiten und Stabilität, ohne Ihre Server zu belasten. Ihre Bilder werden von GoodBarber in der Größe angepasst, komprimiert und zwischengespeichert.

Der entscheidende Vorteil ist die Synchronisierung: Inhalte, die auf Ihrer externen Quelle entstehen, bleiben in der App aktuell, mit einer Darstellung, die an Telefon, Tablet, Laptop und Rechner angepasst ist. Sie veröffentlichen nie wieder zweimal.

Die Liste der Konnektoren

Jeder Konnektor speist einen bestimmten Inhaltstyp, und die hereingeholten Inhalte verhalten sich anschließend so, als wären sie im CMS angelegt worden.

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

Fotos: Flickr

Videos: YouTube, Vimeo, RSS

Audio und Podcasts: Ausha, Spreaker, Simplecast, Spotify for Podcasters, Podcast-Feed, RSS

Events: iCal und vCalendar, RSS

Karten: KML, RSS

Eigene Konnektoren. Wenn Ihre Quelle nicht abgedeckt ist, erzeugen Sie einen Feed in dem Format, das der Ziel-Inhaltstyp erwartet, und tragen seine Adresse ein. Die maßgeschneiderte Arbeit beschränkt sich auf das Erzeugen des Feeds: Anzeige, Layouts, Suche und Metadaten bleiben Sache der Plattform. Eine ausführliche Dokumentation beschreibt das erwartete Format.

Nichts zwingt Sie, zwischen beiden zu wählen: Sie können interne Inhalte, im CMS angelegt, und externe Inhalte, von den Konnektoren hereingeholt, in ein und derselben Anwendung mischen.