Pageflow Next
Eine neue Art, mit Pageflow Geschichten zu erzählen.
Was ist neu an Pageflow Next?
Mit den Scrolled Entries wird Pageflow um eine grundsätzlich neue Art des multimedialen Erzählens erweitert.
Die ursprüngliche Seiten-basierte Struktur von Beiträgen wurde durch ein neues Konzept von Abschnitten ersetzt, die mit beliebig vielen Inhaltselementen befüllt werden können.
Das beim Scrollen leicht geführte "Einrasten" bei Seitenwechseln wurde zudem in ein kontinuierliches Scrollen überführt, was Usern jetzt mehr Leichtigkeit in der Navigation verleiht.
Eine intuitive Header-Navigation mit Kapitel- und Fortschrittsanzeige löst die alten Navigationsleisten ab.
Auf die bislang nicht immer gewährleistete Mobil-Tauglichkeit im Portraitmodus reagiert Pageflow Next mit gleich mehreren klugen Features.
Dieses Demo wurde am 10. August 2022 veröffentlicht.
Alle News, Updates und neuen Features seitdem findest du hier:
Und sonst?
Auch der Editor wurde generalüberholt und um ein Inline Editing Feature ergänzt, mit dem Änderungen an Texten und Inhaltselementen direkt in der Vorschau vorgenommen werden können.
Die unterschiedlichen Transitionen zwischen den Abschnitten ermöglichen eine flexiblere Gestaltung und laden zu neuen grafischen Spielereien ein.
Mit der mobilen Vorschau können Beiträge jetzt auch direkt beim Editieren auf die Darstellung auf Smartphones geprüft werden.
Die neue dynamische Abblendung unterstützt die Optimierung der Lesbarkeit von Text auf Bildern oder Videos, die wenig Kontrast anbieten.
Eine ganz besondere Herausforderung konnte in Pageflow Next nun auch endlich verlässlich gelöst werden:
Autoplay jetzt überall
Aufgrund technischer Einschränkungen der Browser-Hersteller war die Gewährleistung von Autoplay für Videos mit Ton, Audios und Hintergrund-Audios auf allen Geräten und Browsern bislang nicht einheitlich möglich.
Daher wurde die Medienwiedergabe komplett überarbeitet, um Autoplay jetzt überall einheitlich verfügbar zu machen.
Über die User-Interaktion mit dem Audio Button oben rechts wird das Autoplay für alle Medien im Beitrag aktiviert. Die gleiche Funktion erfüllt auch dieser Audiohinweis:
Der Ton kann über das Lautsprecher-Symbol in der Navigationsleiste wieder deaktiviert werden.
Und schon nach dieser kurzen Einführung zeigt sich: Pageflow Next kann so einiges mehr - zum Beispiel auch:
Ein Inline-Bild mit Beschriftung
Auf geht's zu Teil 1 | Abschnitte:
Abschnitte statt Seiten
Mit den Abschnitten verabschiedet sich Pageflow vom Konzept der Gliederung in Seiten und der Auswahl von Seitentypen.
Das neue Grundgerüst des Story-Aufbaus bietet deutlich mehr Flexibiltät und Abwechslung in der Gestaltung.
- Abschnitte sind Teil eines Kapitels und können mit beliebig vielen Inhaltselementen befüllt werden.
- Abschnitte können die ganze Viewport-Höhe nutzen oder durch die Länge der Inhalte aufgespannt werden.
- In den Abschnitten wird die grundsätzliche Position und Darstellung der Inhaltselemente gesteuert.
Grundsätzliche Einstellungen:
- Auswahl der Backdrops: Bild, Video oder Farbe
- Ausrichtung der Inhaltselemente: Links, Mitte, Rechts
- Herstellung von Kontrast durch Abdunklung, Aufhellung oder Karte
- Einstellung der Viewport-Höhe in Bildschirmfüllende vs. Kurze Abschnitte
- Optionale Auswahl einer Atmo
Auf geht's zu Teil 2 | Inhaltselemente:
Inhaltselemente
Die über dem Hintergrund liegenden Inhalte, wie Text, Bilder, Audios, Videos, Diagramme usw. werden in Pageflow Next als Inhaltselemente in die Abschnitte eingefügt. Dadurch ergeben sich viele Vorteile:
- Flexiblere Gestaltung und mehr Abwechslung durch unterschiedliche Formate (Quer, Hoch, Quadrat etc.)
- Einsatz unterschiedlicher Medien innerhalb eines Abschnittes
- Aufhebung von Scroll-Barrieren bei "Click to Start" Inhalten wie Vorher/Nachher
- Anordnung von Inhalten im Textfluss, in ganzer Breite oder Sticky neben dem Text
Einfügen von Inhalten
Jeder Abschnitt verfügt bereits über einen Text-Block der direkt befüllt und formatiert werden kann.
Über ein Klick auf das Plus-Zeichen ober- oder unterhalb des ersten Blocks ermöglicht der Inline Editor ein direktes Einfügen von weiteren Inhalten:
Das Fenster mit dem Plus-Zeichen
Zur Auswahl im sich dann öffnenden Dialog stehen bislang die folgenden Elemente:
Um einen Text-Block hinzuzufügen reicht reicht ab jetzt das intuitive Drücken der Enter-Taste am Anfang oder Ende eines bereits vorhanden Text-Blocks. Text-Elemente können wie auf dem Screenshot zu sehen direkt editiert, formatiert und verlinkt werden:
Die neue Art, mehrere Inhalte untereinander auf dem Hintergrund zu platzieren bietet optische Vielseitigkeit und eine mobil-freundliche Aufmachung.
Headline
Verfügbare Inhaltselemente
1. Inline-Bilder
Inline-Bild Landscape
Inline-Bild Landscape Volle Breite
Inline-Bild Vertical
Inline-Bild Square
Inline-Bild Freies Format
2. Inline-Videos
Inline-Video Landscape (ohne Autoplay)
Inline-Video Vertical (ohne Autoplay)
Inline-Video Square (mit Autoplay)
Inline-Video Landscape volle Breite (ohne Autoplay)
3. Inline-Audios
Inline-Audio (ohne Autoplay)
Inline-Audio mit Waveform (ohne Autoplay)
Inline-Audio mit Waveform, Poster.. (ohne Autoplay)
.. und Beschriftung
Inline-Audio mit Waveform und Poster in voller Breite (mit Autoplay)
4. Vorher/Nachher-Bilder
Vorher/Nachher-Bild (Mit Beschriftung, Schieberegler weiss)
Vorher/Nachher-Bild Volle Breite (Schieberegler ausgeblendet)
5. Audio Hinweis
Der Ton kann über das Lautsprecher-Symbol in der Navigationsleiste wieder deaktiviert werden.
6. Video Embeds
Video Embed Landscape
Video Embed Vertical
Hinweis: Platzhalter für Vertical Video, Ausspielung im Querformat
7. Externe Verweise
8. Datawrapper Embeds
Datawrapper Diagramm
Datawrapper Karte (Hintergrundfarbe #e8e8e8)
Datawrapper Karte (Hintergrundfarbe #2cbfcf)
9. 360° Bilder
360 ° Bild Inline
360 ° Bild volle Breite
Auf geht's zu Teil 3 | Transitionen:
Transitionen
Auch die neuen Transitionen steuern ihren Teil zu einer abwechslungsreichen Beitragsgestaltung und einem geschmeidigen Scroll-Erlebnis bei.
Besonders durch graphisch modifizierte Variationen von Hintergründen lassen sich beeindruckende Ergebnisse erzielen.
Um eine Transition festzulegen muss auf den Hintergrund geklickt werden, sodass ein Pfeile-Symbol zwischen 2 Abschnitten erscheint:
Auf das Pfeile-Symbol klicken
Bislang stehen 5 Effekte für die Übergänge zwischen Abschnitten zur Auswahl.
Einige davon wurden bereits in den ersten Abschnitten verbaut. Um die Transitionen kurz vorzustellen, bevor es ans Ausprobieren geht:
Hier ein paar Beispiele
Scrollen mit statischem Hintergrund
Grafische Variationen eines Bildes ermöglichen neue Effekte, hier zum Beispiel mit der Freilegen-Funktion.
Aus-/Einscrollen
Überblenden
Scrollen mit statischem Hintergrund
Freilegen
Auf geht's zu Teil 4 | Mobile Features:
Mobile Features
Im besonderen Fokus der Weiterentwicklung stand die Optimierung der User Experience auf Smartphones
Mobile Vorschau
Um Beiträge auch auf die mobile Darstellung zu prüfen, benötigte es bisher besonderen Aufwand.
Mit Pageflow Next kann jetzt einfach per Klick zwischen Desktop und Mobil umgeschaltet werden:
Mobiles Bild
Auch Pageflow Next verfolgt den Anspruch, Hintergründe immer bildschirmfüllend anzuzeigen.
Genau das hat bei einigen Motiven auf Smartphones manchmal dazu geführt, dass essentielle Bestandteile eines Bildes nicht in den Viewport passen.
Ärgerlich ist dies beispielsweise bei Gruppenfotos. Als erste Lösung auf diese Problematik verwenden die Abschnitte jetzt optional separate Mobil-Bilder. Hier ein Beispiel:
Im Portrait-Modus wird dieses Bild unweigerlich abgeschnitten. Es ist unmöglich alle Personen in einem Viewport zu zeigen.
Für diesen Fall kann jetzt separates Bild im Hochformat verwendet werden. Einfach eine Portrait-Version hochladen und über die Mobile Vorschau prüfen:
Was jetzt noch stört?
Der Text verdeckt oftmals zu viele Teile eines Bildes. Besonders im Portraitmodus, wenn die 2-spaltige Aufteilung von Text und Motiv in links und rechts nicht möglich ist.
Zudem reicht der Kontrast für die Lesbarkeit dann manchmal nicht aus. Auch in diesem Beispiel ist es kaum möglich eine gute Lesbarkeit herzustellen.
Die Lösung: Mit einem neuen intelligenten Feature sorgt Pageflow Next dafür, dass bestimmt werden kann, welcher Teil vom Bild auf jeden Fall sichtbar sein soll, bevor er beim Weiterscrollen mit Text überlagert wird.
Auf geht's zu Teil 5 | Motivbereiche:
Motivbereiche
Problem: Im Querformat funktioniert diese Aufteilung in 2 Spalten wunderbar. Das Bild scheint ideal. Doch für die mobile Version wäre zu prüfen und abzuwägen, ob ausreichender Kontrast und das Motiv miteinander vereinbar sind:
Bisherige Darstellung im Portraitmodus
Die Lösung: Motiv-Auswahl
Erstelle einen Motivbereich durch klicken auf das blaue Kästchen neben der ausgewählten Datei.
Mit der mobilen Vorschau kann die Scroll-Position des Textes direkt geprüft werden.
Auf geht's zu Teil 6 | Dynamische Abblendung:
Dynamische Abblendung
Um die Lesbarkeit über die statische Abblendung hinaus zu optimieren, enthält Pageflow Next ein Instrument, mit dem sich die Intensität der Abdunklung bzw. Aufhellung im Zusammenspiel mit den Motivbereichen beim Scrollen nun einstellen lässt.
Auch dieses Motiv würde bislang in der Smartphone-Version eines klassischen Beitrags nicht ausreichend zur Geltung kommen, da das Gesicht initial mit Text überlagert werden würde.
Dynamische Abblendung wird beim Scrollen intensiver
Nach Auswahl des Motivbereichs (Kopf) greift die bekannte statische Abblendung. Zusätzlich kann nun die Intensität der Abdunklung bzw. Aufhellung beim Scrollen per Schieberegler erhöht werden.
Wie in diesem Beispiel: Je weiter nach unten gescrollt wird, desto stärker wird der Kontrast.
So lassen sich als Hintergrund auch Bilder und Videos nutzen, die an sich einen zu schwachen Kontrast erzeugen würden.
Auf geht's zu Teil 7 | Desktop Features:
Positionierung in der Breite
Der auf breiten Bildschirmen zur Verfügung stehende Platz kann für eine gesonderte Positionierung von Medien genutzt werden.
Das gilt auch auf Tablets mit einer Bildschirmbreite von über 955 Pixeln im Hochformat.
Einrücken von Inhaltselementen
Ist ein Abschnitt mittig ausgerichtet, können Elemente zum linken oder rechten Bildrand hin aus dem Textfluss gerückt werden. So kann der Text wie in diesem Beispiel rechts neben dem Inline-Audio ohne Posterbild stehen.
Im Wechsel mit einem auf der anderen Seite eingerückten Inline-Bild sieht es dann so aus, wie weiter unten. Das Inhaltselement wird, wie man es aus Zeitungen kennt, vom Fliesstext umgeben. Sobald die Höhe des Inhalts-Elements von der Anzahl an Zeilen überschritten wird, fliesst der Text in der jeweiligen Ausrichtung eines Abschnittes rechts- oder links-bündig weiter.
Und einmal die andere Seite bitte
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.
A small river named Duden flows their place and supplies it with the necessary regelialia. It is a paradise country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life
The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
Sticky Position im Querformat
Bei Abschnitten, die links oder rechts ausgerichtet sind können Inhaltselemente auf breiten Bildschirmen auch neben dem Textfluss dargestellt werden. Das bietet sich besonders bei längeren Textpassagen an.
Die Sticky Elemente werden in der Höhe angezeigt, in der sie in den Textfluss eingefügt wurden.
Ein Sticky Element bleibt solange neben dem Text stehen, bis es von einem weiteren Sticky Element raus-gescrollt wird. In der mobilen Ansicht werden Sticky Elemente untereinander im Textfluss gezeigt.
Wie erwähnt: Dieses Feature bietet sich bei langen Textpassagen an. Und so geht es nun dem Ende entgegen. Mit Auszügen von Blindtext.
Wir hoffen, dass diese Präsentation die vielen neuen Möglichkeiten von Pageflow Next anschaulich darstellen konnte.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.
but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
Vielen Dank für die Aufmerksamkeit.
Wir hoffen, das Demo hat Euch gefallen und freuen uns über Rückmeldungen. Auch bei Fragen helfen wir gerne weiter! support@hosted-pageflow.com
Codevise Solutions GmbH | Deutz-Mülheimer Strasse 119 | 51063 Köln