Pageflow Next
A new way of storytelling with Pageflow.
What's new about Pageflow Next?
Pageflow has been extended by a fundamentally new way of multimedia storytelling.
The original page-based structure of stories has been replaced with a new concept of sections that can be filled with any number of content elements.
The lightly guided "snapping" during scrolling at page changes has also been transformed into continuous scrolling, which now gives users more ease of navigation.
An intuitive header navigation with chapter and progress indication replaces the old navigation bars.
Pageflow Next responds to the previously not always guaranteed mobile suitability in portrait mode with several smart features.
This demo was published on 10th August 2022
All news, updates and new features since then can be found here:
And beyond?
The editor has also been overhauled and an inline editing feature has been added, allowing changes to texts and content elements to be made directly in the preview.
The different transitions between sections allow for a more flexible design and invite new graphical gimmicks.
With the mobile preview, articles can now be checked for display on smartphones directly while editing.
The new dynamic shadow feature helps optimize the readability of text on images or videos that offer little contrast.
A very special challenge has also finally been reliably solved in Pageflow Next:
Autoplay now everywhere
Due to technical restrictions of the browser manufacturers, ensuring autoplay for videos with sound, audios, and background audios on all devices and browsers has not been possible consistently.
Therefore, the media playback has been completely redesigned to make autoplay now available everywhere in a consistent way.
User interaction with the audio button at the top right activates autoplay for all media in the entry. This audio hint also fulfills the same function:
Sound can be muted again using the speaker icon in the navigation.
And even this short introduction shows: Pageflow Next can do a lot more - for example:
An inline image with caption
Let's go to Part 1 | Sections:
Sections instead of pages
With the sections, Pageflow says goodbye to the concept of structuring in pages and selecting page types.
The new basic framework of the story structure offers significantly more flexibility and variety in the design.
- Sections are part of a chapter and can be filled with any number of content elements.
- Sections can use the entire viewport height or be spanned by the length of the content.
- The section settings, determine the basic position and display of the content elements in left, centred or right.
Basic Settings:
- Selection of Backdrops: Image, video or color
- Alignment of content elements: left, center, right
- Creating contrast by darkening, brightening or card (new)
- Viewport height setting in full screen vs. short sections
- Optional selection of an atmo sound
Let's go to part 2 | Content Elements:
Content Elements
The overlaying content such as text, images, audios, videos, diagrams, etc. are inserted into the sections as content elements in Pageflow Next. This results in many advantages:
- More flexible design and more variety due to different formats (landscape, portrait, square, etc.)
- Usage of different media within one section
- Removal of scroll barriers for "click to start" content such as before/afters
- Arrangement of content in the text flow (inline), full-width or sticky next to the text
Adding Content
Each section already has a text block that can be filled and formatted directly.
By clicking on the plus symbol above or below the first block, the Inline Editor allows direct insertion of additional content:
The window with the plus symbol
The following elements are available for selection in the dialog that opens by click:
To add a text block, it is now sufficient to intuitively press the enter key at the beginning or end of an already existing text block. Text elements can be edited, formatted and linked directly as shown in the screenshot:
The new way of placing multiple pieces of content on top of each other on the background offers visual versatility and a mobile-friendly look.
Headline
Available Content Elements
1. Inline-Images
Inline-Image Landscape
Inline-Image Landscape Full Width
Inline-Image Vertical
Inline-Image Square
Inline-Bild Free Format
2. Inline-Videos
Inline-Video Landscape (without Autoplay)
Inline-Video Vertical (without Autoplay)
Inline-Video Square (with Autoplay)
Inline-Video Landscape Full Width (without Autoplay)
3. Inline-Audios
Inline-Audio (without Autoplay)
Inline-Audio with Waveform (without Autoplay)
Inline-Audio with Waveform, Poster.. (without Autoplay)
.. and caption
Inline-Audio with Waveform and Poster in Full Width (with Autoplay)
4. Before/After-Images
Before/After-Image (with Caption, Slide Controller, White)
Before/After-Images Full Width (Slide Controller Hidden)
5. Audio Hint
Sound can be muted again using the speaker icon in the navigation.
6. Video Embeds
Video Embed Landscape
Video Embed Vertical
Note: Placeholder for Vertical Video, Playout in Landscape Format
7. External Link
8. Datawrapper Embeds
Datawrapper Chart
Datawrapper Map (Background Color #e8e8e8)
Datawrapper Map (Background Color #2cbfcf)
9. 360° Images
360 ° Image Inline
360 ° Image Full Width
Let's go to part 3 | Transitions:
Transitions
The new transitions also contribute their part to a varied enty design and a smooth scrolling experience.
Impressive results can be achieved especially by graphically modified variations of backgrounds.
To set a transition it is necessary to click on the background so that an arrow symbol appears between 2 sections:
Click onto the arrow symbol
So far, there are 5 effects to choose from for the transitions between sections.
Some of them have already been applied in the first sections. To briefly introduce the transitions before we get to trying them out:
Here are a few examples
Scroll w/ Static Background
Graphical variations of an image enable new effects, here for example with the reveal function.
Scroll
Cross Fade
Scroll w/ Static Background
Reveal
Let's go to part 4 | Mobile Features:
Mobile Features
The special focus of the further development was the optimization of the user experience on smartphones
Mobile Preview
Until now, checking stories for mobile display required special effort.
With Pageflow Next, you can now switch between desktop and mobile with a single click:
Mobile Image
Pageflow Next also pursues the goal of always displaying backgrounds full-screen.
With some motifs on smartphones, this has sometimes led to essential components of an image not fitting into the viewport.
This is annoying with group photos, for example. As a first solution to this problem, the sections now optionally use separate mobile images. Here is an example:
In portrait mode, this image is inevitably cropped. It is impossible to show all persons in one viewport.
For this case, separate image in portrait mode can be used now. Just upload portrait version and check it via mobile preview:
What still bothers now?
The text often covers too many parts of an image. Especially in portrait mode, when the 2-column division of text and subject into left and right is not possible.
In addition, the contrast is sometimes not sufficient for readability. In this example, too, it is hardly possible to achieve good readability.
The solution: With a new intelligent feature, Pageflow Next ensures that it is possible to determine which part of the image should be visible in any case before it is overlaid with text when scrolling further.
Let's go to part 5 | Motif areas:
Motif Areas
Problem: In landscape format, this division into 2 columns works wonderfully. The image seems ideal. But for the mobile version, it would have to be checked and weighed whether sufficient contrast and the motif are compatible:
Previous display in portrait mode
The solution: Motif-Selection
Create a motif area by clicking on the blue box next to the selected file.
With the mobile preview you can check the scroll position of the text directly.
Let's go to part 6 | Dynamic Shadow:
Dynamic Shadow
To optimize readability beyond static dimming, Pageflow Next includes a tool that now allows you to adjust the intensity of dimming or brightening in interaction with motif areas as you scroll.
Up to now, this motif would also not be sufficiently effective in the smartphone version of a classic entry, as the face would initially be overlaid with text.
Dynamic shodow becomes more intense when scrolling
After selecting the motif area (head), the familiar static shadow takes effect. In addition, the intensity of the shadow or brightening when scrolling can now be increased with a slider.
As in this example: the further down you scroll, the stronger the contrast becomes.
This allows you to use images and videos as backgrounds, which in themselves would create too weak a contrast.
Let's go to part 7 | Desktop Features:
Positioning in width
The space available on wide screens can be used for separate positioning of media.
This also applies to tablets with a screen width of more than 955 pixels in portrait mode.
Indenting content elements
If a section is center-aligned, elements can be moved out of the text flow toward the left or right edge of the image. For example, the text can be to the right of the inline audio without the poster image, as in this example.
Alternating with an inline image indented on the other side, it looks like below. The content element is surrounded by the continuous text, as you know it from newspapers. As soon as the height of the content element is exceeded by the number of lines, the text continues to flow flush right or flush left in the respective alignment of a section.
And once the other side please
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 in Landscape
For sections that are aligned left or right, content elements can also be displayed next to the text flow on wide screens. This is especially useful for longer text passages.
The sticky elements are displayed at the height at which they were inserted in the text flow.
A sticky element remains next to the text until it is scrolled out by another sticky element. In the mobile view, sticky elements are shown below each other in the text flow.
As mentioned: This feature is useful for long text passages. And so it goes now towards the end. With excerpts from Blindtext.
We hope that this presentation was able to illustrate the many new possibilities of Pageflow Next.
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.
Thank you for your attention.
We hope you enjoyed the demo and look forward to your feedback. We are also happy to help with any questions! support@hosted-pageflow.com
Codevise Solutions GmbH | Deutz-Mülheimer Strasse 119 | 51063 Köln