WordPress And Storyform, The Path To Better Long-form Stories?

WordPress And Storyform, The Path To Better Long-form Stories?

Despite the seemingly never-ending stream of cookie-cutter WordPress themes, if you look carefully enough you can find innovation in the delivery of WordPress-based content.

Joining the Aesop Story Engine in the long-form storytelling space is Storyform, a platform for creating magazines and photo-stories that provides tight integration with WordPress.

As we’ll find out though, Storyform’s slightly different approach often results in a headstrong solution that looks great but thinks it knows best and will often override your content flow.

Feature image
Storyform – Magazine and photo stories in one click?

When the future of WordPress is talked about, it’s often a conversation where the user platform is often considered to the only consideration. WordPress is fundamentally about delivering content and this strangely myopic view fails to take into account the ever-changing landscape of content form.

Sure, it’s a slow-burn but then how long have we been hearing that the future is mobile? Or even that print is dead (and yet, at 40 million, Australian magazines had a total readership for the 12 months to June 2014 that is 1.8 times the size of the country’s population)?

One of the most significant content trends is long-form. Support for long-form on WordPress has been slow to get going and for a long time the only major player was Nick Haskin’s recently-updated Aesop Story Engine (although Brenda Barron has some good suggestions for a long-form toolkit).

Now the ASE has company with Storyform, a long-form delivery solution that is not exclusively WordPress but is tightly integrated via a plugin, that promises to “[let] you create rich, immersive Storyform magazines with just a one click”.

A Simple Way To Build Stories?

Cover shot of Storyform's website
Storyform and Aesop Story Engine – two disimilar peas in a pod

Not that Storyform has much in common with the ASE. Storyform has no components or shortcodes to configure but uses a combination of semantic markup and positioning. This means that it feels a little underpowered compared to ASE but requires only a minor deviation from the standard post creation process.

For example, if an image or video is placed at the top of the post then it will be used as the background for the cover page. The first, and only the first, H2 heading that precedes the first paragraph in the post will be used as the sub-title on the cover page.

Screenshot of the post editor screen showing the video and subtitle which will form the cover page
No shortcodes here, just reliance on semantic markup and content flow

Pull quotes can be added by highlighting text and then clicking on the solitary Storyform-specific icon that has been added to the Visual Editor toolbar. In Visual mode, the text is highlighted in yellow (in Text mode it is enclosed in a span tag with a class of pullquote).

And in keeping with the simple approach, text overlays are achieved by specifying the text in the existing caption field and using a new icon that appears when you click on an image in the post editor to draw the placement of the caption.

It all feels like a normal WordPress post creation process which is not something you could say about the ASE although version 1.1’s use of styling the shortcodes makes a considerable improvement. And because the markup is basically semantic HTML (other than the standard WordPress shortcodes for video and images with captions) it’s not a complete disaster if you decide to stop using the plugin.

However, it’s when you start viewing your stories that you start to realize that you’ve traded something for all that simplicity: control.

Flying By The Seat Of Someone Else’s Pants

In order to use Storyform in WordPress, you need to sign-up, get an API key and enter this into the plugin’s settings. Why? Because it turns out that the plugin is not self-contained. Whilst the basic javascript, template and CSS are included, the specific files that belong to the theme selected in the post edit screen are supplied by the Storyform website.

Presumably this is to retain some control over Storyform’s use, perhaps to make expanding the stable of themes (there is only one, Puget, currently) easier and more than likely it’s to be able to add some form of monetization down the track. But the introduction of another potential single point of failure in delivering site content – you’ve got to rely on those Storyform files being constantly available – may well cause a few WordPress owners to pause for thought.

It also seems unnecessary. The ASE seems to have found a working model for monetizing this kind of product (give away the basic functionality and charge appropriately for extensions and themes) and it does make you wonder why Storyform didn’t go down the same path and allow all the necessary files to reside on the one domain.

When you initially preview your stories though, those concerns are quickly shuffled to the back of your head. There’s your full-page cover image, your title and subtitle, a navbar that appears top right that includes social media shares and a home link, an elegant progress bar and down in the bottom right-hand corner, a page counter that turns over as the Storyform javascript engages in content layout alchemy.

And it is alchemy.

I’ve got no idea how Storyform takes a virtually standard WordPress post and transform it into a multi-column, horizontal-scrolling article with a true magazine look-and-feel. Initially, this ignorance is irrelevant because the output looks so good and took ludicrously little effort to create. But then you start to realize that this magic comes at a cost.

Pages generated by Storyform on a desktop
From WordPress post to magazine article – desktop (click for bigger view)

You have no real idea, no real control over the layout process. Whilst it is consistent across the major browsers (disclaimer: I tested with Chrome, Firefox and Safari but not IE), Storyform’s decisions are highly sensitive to the size of the browser window. Often only a few pixels difference in one dimension is enough to significantly alter the layout, the page count, even where your images, video and pull quotes are inserted into the post.

Sometimes just refreshing the page can alter the layout.

How big a cost is this unpredictably? That will depend on the type of articles that you are creating. If your images are fairly standalone then perhaps the randomness of their location in the piece will not be too much of an issue. If you are a stickler for layout or need an image in a specific location then Storyform could drive you mad.

That pull quote and Spider-Man image on page 3, for example, were not that close together in the actual post – so you’ve got to trust that it has something in common with the image. And the Superman logo was actually at the end of the post.

It may also depend on the platform that you are targeting with your Storyform content. Storyform works and looks stunning on tablets and here you would have the opportunity to play with your post’s content flow to have at least some influence on the final layout.

Composite image of the pages created by Stroyform on a tablet
Same post on a tablet has 2 extra pages! (Click for bigger view)

As you can see the layout changes a fair bit when viewed on a tablet. The cover image becomes fullscreen as does the photo of the Golden Gate Bridge (most likely due to not using a big enough image for fullscreen on a desktop). That Superman image is even further away from the end of the article.

You’ve also got to be content with the design. I just wanted to change the look of the image overlays but a combination of the main theme files being delivered remotely and the plugin’s dequeuing of existing styles (which neutered the Custom CSS plugin I was trying to use) made overriding the styles very difficult.

And whilst I’m griping, I would prefer the home link in the post navbar to go to the cover page of the article rather than the home page of the site.

Storyform: A Trust Fall Exercise

There is a lot to like about Storyform. It requires very little deviation from the normal post creation process and with no complicated shortcodes to embed it will work just as easily with existing content as it will with new posts.

Above all, it looks stunning, be it desktop or tablet and navigates smoothly (both mouse and gestures). Actually tablet is where Storyform performs best: horizontal scrolling seems much more appropriate on this platform and you have more influence on the layout.

But Storyform is not for the layout pendant. It will routinely override the original content flow and place images, video and pull quotes where it thinks they should go and the window-size sensitive nature of the layout engine produces considerable variability in the results.

And that remote loading of the themes does introduce a single point of failure into your content delivery. If, for whatever reason, Storyform is unable to deliver the theme then you are left high and dry.

Storyform is, perhaps, the ultimate content trust fall exercise. You publish your post, you lean back and you hope that Storyform will catch you. If you are a trusting soul then Storyform is well worth a play.