The murmur of the snarkmatrix…

August § The Common Test / 2016-02-16 21:04:46
Robin § Unforgotten / 2016-01-08 21:19:16
MsFitNZ § Towards A Theory of Secondary Literacy / 2015-11-03 21:23:21
Jon Schultz § Bless the toolmakers / 2015-05-04 18:39:56
Jon Schultz § Bless the toolmakers / 2015-05-04 16:32:50
Matt § A leaky rocketship / 2014-11-05 01:49:12
Greg Linch § A leaky rocketship / 2014-11-04 18:05:52
Robin § A leaky rocketship / 2014-11-04 05:11:02
P. Renaud § A leaky rocketship / 2014-11-04 04:13:09
Jay H § Matching cuts / 2014-10-02 02:41:13

What can I say? It seemed cool at the time

We’re going to look back on this era of parallax scrolling web features with embarrassment — the kind you feel when you discover, say, an old picture of yourself in baggy jeans and a grungy plaid button-up. It’s not a bad thing; sometimes we have to go through these phases. But we shouldn’t mistake them for anything other than that: phases. Strange and fleeting fashions. Fads.

Vox Media has given us an opportunity to compare two treatments of the same subject, one in parallax plaid and the other in a classic white HTML-shirt:

As a reading (and thinking?) experience, I think the Verge’s low-key treatment is many times stronger. I’d be curious to know if you disagree.

I was just scrolling through this great NYT feature on the ramifications of long-term unemployment in Europe, exulting at the flat elegance of it. Make no mistake: this is a beautiful page, and it took hard work from a talented designer to make it so. But the result serves the text and images — not the other way around. This is the treatment we’ll carry forward into the future. This is the shirt we’ll keep.


Louis-Jean Teitelbaum says…
  1. There’s something with scrolling-based animations that make them special to the web platform.

    In theory, parallax-based features are more native to the web than, say, embedded videos: scrolling down feels as natural as turning a page or reading a sentence spread across multiple columns, so it’s no wonder that the idea of overloading this gesture with animation got popular.

    In this way, parallax sites are the pop-up books of the web, squeaky noises being replaced by choppy frames. The limitations of pop-up books apply there too: expensive and clumsy; only capable of honoring a few kind of stories.

  2. I love the idea of there being fashions in interaction design. As a proof of its continuing maturity as a medium, the computer interface is not just a container for entertainment, but an entertainment form in itself.

I’ll make a guess that the trends and fads that are more embarrassing are the ones that were, in their time, less sincere.

Like that first PS4 review. I mean, it’s awesome really, but it does not seem to be about the review itself in any way. “No, don’t read the text!” it says. “LOOK AT ME DRAWING THIS PICTURE!”

Maybe this sort of design style suits ads better? I thought the Coin site was pretty perfect. In this case, of course, there’s no text, so there’s nothing to be distracted from. It’s fun to scroll up and down and that’s okay, because that fun is the point.

Agree 100 percent. But I will pedantically point out the widespread misuse of the word “parallax” which describes “a displacement or difference in the apparent position of an object viewed along two different lines of sight” (thanks, Wikipedia). There isn’t any parallax in the Polygon piece.

But there is! — the big ads, apparently positioned somewhere “behind” the content.

I’m a parallax pedant, too, and wouldn’t have used the word without reason 😉

Though it was confusing to call the design both “full-parallax” and “very restrained”. In fact, it’s barely parallax. Note taken.

Yes, okay, I was wondering about that. I thought maybe the term was being used more generally.

Is there a name, then, for the interactive design the Polygon piece shows more of–the animations triggered by being at a certain location on the page?

Jay: I refer to it as a “window pane effect.” It is achieved by using the background-attachment: fixed CSS property, so maybe just “fixed background”?

This review is definitely one of the more egregious uses of parallax. But it’s not the only way things are done at polygon, take this story on the birth of Xbox Live:

or this one on defense grid 2:

I’ve seen some pretty good examples of more subtle parallax usage, both on and, though I don’t remember them right now.

Parallax has been used pretty well in some cases, but pretty poorly in others – I think it’s going to take a period of calibration until its use is ironed out.

A wise man quoting a wise man: “Should you Snowfall all the things? I’m here to tell you that you shouldn’t.”

I 100% agree. I tend to see the parallax/Snow Fall trend like desktop publishing affected graphic design in the nineties—new tools are available to us so we’re flexing our muscles to see what we can do. But like it did before, the pendulum will swing back to a more “conservative” presentations. The part that interests me is how will/can this interactive overindulgence help push the medium forward without sacrificing the beauty of the text/content?

For further reading, some thoughts on digital canvases from Frank Chimero, parallax-style.

One correction and two thoughts:

1. My page doesn’t have any parallax. Only two pieces of javascript: one to phase the bg color, and another to lazy-load image assets to decrease the page size. Everything honors natural scroll behaviors/physics.

2. Some of the parallax stuff is cool, some of it is dumb and heavy handed. It’s like most anything other technique on the web. If you go back to the genesis, Nike Better World, the parallax effect was actually quite light. That feels appropriate to me. Aside from the “wow” factor, I think there’s another reason these sites keep appearing: scrolling is the easiest interaction possible across devices, so it makes sense to use it as a trigger for change.

3. Tall, singular pages make sense, because it is the only way to ensure linearity on the web. It’s a boon to storytelling, so that’s why you often see them for product announcements. Unfortunately, people balk at the kind of content parallax and single-page sites create, saying “it’s long,” but I think there’s a place for this sort of stuff. I prefer to say the pages are tall—not long—and that their dimensions suggest depth. Unfortunately, most people aren’t using the medium to say substantive things, and the results usually come across as too little butter spread across too much bread.

I’m going to say that I vastly prefer the Polygon review; I think it’s gorgeous, the animation is exciting, and the min/max way it handles navigation on the left hand side is near perfect. Maybe it is showy, maybe it “overwhelms” the content, but by god it is fun to experience. It’s one of the best through-designed pieces I’ve seen from Vox, and I’ve seen more than my share.

Now as for the parallax in the ad: yeah, maybe that’s kind of a bummer as you’re scrolling through, to suddenly see this advertisement peek between the covers at you. Ideally, it would have been an ad that is as fun to look at as the graphics the team put together for the review content itself — which is where the whole “native advertising” thing starts to get turned on its head. What we need arenn’t ads that look and read like articles — it’s ads that are as beautiful as the graphics and video the site makes for itself!

But how do you do that, how do you encourage advertisers to buy full-page, beautiful ads? You don’t do them as preroll; you don’t stack them on top. You embed them in the article, use scrolling within the article as something, whether it’s a parallax image or a mouseover animation, that reveals something wondrous, and then you give the advertiser a defined space on the scroll-over.

It’s like buying a page for an ad in a magazine. And the scroll-through becomes the new page-flip. If you want, you can just flip right past, but when it works? The ads are less obnoxious, they’re more visible, and they’re worth more to everybody. And parallax is one of the less obnoxious ways you can make it happen. (I consider preroll and popup and blackout way more intrusive.)

As a counterexample — or, a signpost on the way forward — I think this new NYT piece is incredible. It’s a long-scrolling presentation, rich with media — but it’s all totally in service of the story, and (as Frank says) it honors natural scroll behaviors. Totally engrossing.

Thanks for linking to this counterexample, Robin. I’m writing a book about rest and renewal for caregivers of elders, and I see the NY Times piece as a model for the kind of layering and meshing of multimedia content that I would really like to develop as a companion web site for the book.

The snarkmatrix awaits you

Below, you can use basic HTML tags and/or Markdown syntax.