5 vertical scrolling trends for 2015

Where does the future of vertical scrolling websites lie?

2014 was the year that vertical scrolling bubbled through from burgeoning fad to mainstream trend. With awesome advertising, prime portfolios and crafted content all benefiting from single page scrolling, it’s now certain that the technique is here to stay.

This was the year designers took control of the technique, pushing the boundaries of what could be achieved. We’ve come a long way from Snow Fall – the New York Times microsite that kickstarted the trend in 2010.

What’s left for vertical and parallax scrolling in 2015? As it turns out, quite a lot. The maturity of the best work will be tempered by some of the perils that come with popularity – but this is a technique that won’t be going away. Here are five trends we expect to see from vertical scrolling in 2015…

01. Lots of really bad scrolling sites

From dancing bananas and the <BLINK> tag to Flash, every time the web gets animated it ends in tears. There’s a danger that vertical scrolling could go the same way. Creating parallax sites is already much easier than it was just two years ago. There are libraries and tools that enable amateurs to assemble scrolling sites with the smallest amount of coding knowledge.

Vertical scrolling done wrong. This longform article at Fast Company includes graphic elements that obscure content

While that all helps to push innovation forward, it also opens up the floodgates for lots of annoying, amateur parallax design. We don’t just mean badly executed work either – but work that uses vertical scrolling tropes simply because it can. As Matter editor Bobbie Johnson said of the New York Times article that started it all:

“Almost every example of ‘snowfalling’ that I’ve seen in action puts reading second to the razzle-dazzle… While the multimedia elements provided atmosphere, in all honesty they didn’t mean much.”

For a year or two we’ll have to deal with a lot of web design content that puts style before substance. Does that mean vertical scrolling will have the same ultimate fate as blinking text? We think its more a case of ‘it’ll get worse before it gets better’.

02. A mobile-first approach

Vertical scrolling should work well on mobile by default, but that hasn’t been the driving principle behind it to date. That has to, and will change in 2015 – not least because the way that users consume online content is changing.

Year zero for this transition was 2010; the introduction of the iPad. While there were Android devices in 2009, the iPad defined this new space so immediately and completely that it now seems impossible to imagine a time before it or its smaller sibling, the smartphone.

Apple’s Your Verse campaign highlights personal uses of the iPad – and is developed with tablet viewing in mind

Tablet PC ownership leapt from 30% of the US population in 2013 to 44% in 2014, with the curve predicted to continue its rise next year. Meanwhile, around 58% of US adults now tote a smartphone. The UK loves its phones even more, with 61% smartphone ownership – concentrated in the lucrative younger age groups.

And yet, most vertical design has – so far – been a showcase for websites. Partly, that could be explained away as waiting for CSS rules used for parallax effects to migrate to mobile. But designers can no longer ignore that mobile content consumption is a huge market.

The metaphor works on mobile so well that the best stuff going forward will be mobile first; responsive, simple and chock full of content rather than bells and whistles.

03. More substantive content

In 2015, there will be more substance to vertical scrolling as the technique beds in. Again, it’s no contradiction to say that there can be an increase in best practice usage at the same time as there’s a flood of horrible stuff. At the professional end of the continuum, expect the vertical scrolling craze to become more subtle; for it to become part of the toolkit and for designers to be responsible for creating re-usable templates and containers for denser content.

UX guru Jakob Nielsen amended his guidelines on online content production as tablet computing took off, defining two categories. In the red corner is ‘lean forward’ content – the kind of stuff we’re traditionally used to on the web.

Users skim through this, don’t necessarily reading every word or looking at every caption. They tend to choose their own route through that content and will often jump off if a link in the sidebar looks shinier than the content they’re consuming.

“Lean back” content is optimised for immersive, linear reading, rather than the scanning and shallow engagement of traditional web content

In the blue corner is ‘lean back’ content. This the traditional engagement model we see with books and long articles in magazines. Readers, because that’s what they are now rather than users, consume this kind of stuff in a linear way – from start to finish. It’s more conducive to in-depth material.

What else does the lean back model work on? Tablet media consumption – and its natural mode of presentation is vertical scrolling.

While digital magazines are struggling to take off – with subscription numbers actually falling rather than rising – scrolling web content remains popular on tablets.It fits the UX metaphors of a window you can hold, sit back in a chair with and flick through at your leisure.

04. Fewer cues

In the early days of the web it was common for links to be clearly flagged. Again, web UX expert Jakob Nielsen was well known for his diktat that hyperlinks should always be blue, always be underlined.

But the web’s now 22 years old. Whole generations have grown up with the UX concepts behind hyperlinks – and we need them to say ‘click here’ or for links to to be styled with a standard #0000EE blue.

The vertical scrolling craze is long enough in the tooth that we should no longer need arrows to show users where to go, unlike this cue-filled scrolling take on the history of Mario

In the same way, the cues in vertical scrolling pages will begin to disappear. It’s currently common to see buttons that take users from one section to the next and arrows pointing in the direction of scroll. As the technique becomes a convention, perhaps the convention for longform content, these flags will no longer be needed.

05. Better authoring support

This may be more wishful thinking than a trend we can predict, but vertical scrolling sites need more intuitive production tools. As web design has become more sophisticated – and more CMS driven – the very idea of a ‘web authoring tools’ has fallen out of fashion, but this is one area where they would be welcome.

The meat of a vertical scrolling site can be put together in a conventional authoring tool like Dreamweaver, but the animated effects and parallax elements require third party libraries like Skrollr and Stellar.js. While these do most of the donkey work for you, they’re developer tools rather than design tools.

The much maligned Adobe Muse is nearly there. Intuitive as only Adobe can be, the introduction of parallax animation in late 2013 makes it a great program for quickly prototyping vertically scrolling pages. You can create assets in other Adobe tools and throw together a demo for a developer lickety split with Muse’s drag and drop animated layers. But the code? It’s horrible.

Scrollkit has been sold to the makers of WordPress

The holy grail has to be an authoring tool dedicated to scrolling pages, that creates clean HTML5 and JavaScript based scrolling sites. Here’s the really strange thing; one already exists. Scroll Kit.

Famously chastised by the New York Times for reproducing Snow Fall in a single afternoon (the original took the NYT’s multimedia team months to create), the developers sold the company to Automattic, owners of WordPress in April this year. The beta version of Scroll Kit went offline at the same time. WordPress has yet to incorporate Scroll Kit functionality into the tool.

The potential’s still there, but the ball’s now in Automattic’s court.

Posted on December 18, 2014 in Information & Tutorials, Uncategorized

Share the Story

About the Author

Back to Top