Popping the Hood on LNWY.co

jakec / 08102017

I used a music website a few days ago that convinced me I had never enjoyed using a music website before. The experience was indelible. The PR bite that went with its launch said they believe they’ve pulled off a world first by partnering a music publication with a festival. Which, yeah! That's a thing! Great job.

But here is the most exciting part: it has this sidebar. You hover over a button that says “INDEX”. The button spins around. You click the button. The sidebar slides out from the left hand side of the screen. The article you were just reading goes dark. All the other stories on the site are in that sidebar. And suddenly you realise the concept of the home page is dead.

LNWY.co was created by a digital agency called Bolster together with St Jerome’s Laneway Festival. To launch a web publication in 2017 is to throw one to ten million dollars of other people’s money into a wishing well and hope the wraith at the bottom starts whispering to you before those people come looking. There are faster ways to alienate your family, friends, industry partners, your authentic self, and any sense of emotional stability you ever craved as a precocious high schooler. American sites have drawn a roadmap for this sort of thing and the road itself is littered with their corpses: Grantland, Tomorrow, Matter, Racket, MTV News, Buzzfeed Music, The Dissolve, Genius, etc etc etc. And though it didn’t save them, the hot tip is to launch with the most impressive stable of writers you can.

In Australia, music sites typically launch with a bunch of hungry unknowns, but LNWY brought enough talent to rival whatever site Music Twitter was memorialising last. The list is a mix of relevant young writers and veteran reporters that constitutes roughly 89% of the best music writers in the country: Shaad D’Souza, Kate Hennessy, Brodie Lancaster, Chris Johnston, Guy Blackman, Lillian Ahenkan, and Michael Dwyer, with American imports Jeff Weiss, Patrick Rapa and Katie Bain joining from the US. Capping it off, editor Darren Levin himself.

[There isn't a masthead (that I could find) so there are people missing from this list, particularly the photographers/videographers. I love your work, and sorry.]

I don’t want to focus on the editorial here except to note two things: 1) It’s consistently strong, as you’d expect from that stable. 2) Levin’s mostly been riding the coach’s chair for the last few years at Junkee but for LNWY’s launch he climbed down to show ‘em how it’s done. Going to the mat on Father John Misty, Japandroids, and The National, he leaves no question thats this is his house. I find Tillman fundamentally insufferable and Levin breaks all the rules your lecturer told you constituted good taste: the druggy opener, the man-myth smoking in the journalist’s hotel room, the use of first-person. It's all deliberate. I’m not going to do your comp-lit homework for you here, but when you read the story, you immediately grok what Levin’s doing and why, and it kills.

What I do wanna focus on is that LNWY feels better than any site I’ve used in a long time. Oh sure, I’ve had some nice experiences — the last was probably with Medium’s text editor. But largely nobody talks about how good a site can or does feel. How good could it, right? You click a link. It shows you some text and a photo. Big deal. Feel is for experiences that have some kind of transaction of input. A tactile response. Like video games. NB: I’m not talking about feeling, the thing you have when you hear Sticky Fingers in a shopping centre (the feeling of superdread) although the former sometimes leads to the latter. I’m talking about you doing something and that something doing something back at you. (It's Newtonian.)

Every website should be a video game about reading a website.

Bolster, the agency behind LNWY, love feel. They’re megafans of visually rich design. This is not the same as visually busy. You take a site like BIGSOUND Buzz and you could lay out a 1:1 replica in your paper prototypes. BIGSOUND Buzz doesn’t look like it has a lot happening. But there are a thousand tiny things happening to create a larger impression. Bolster’s obsession with this kind of granularity is what makes them so good at this stuff.

Looking at their portfolio, there isn't a whole lot like Buzz, but you can piece it together from the sum. LNWY is a different thing. LNWY feels like they’ve been let off the leash. They’re embedded in the project itself. From the outside, at least, it looks like this is more than fulfilling a brief. Levin isn’t just LNWY’s EIC, but the head of Bolster Content. This isn’t black-ops-splinter-cell-hope-we-don’t-get-canned-by-our-daddy-company publishing. This feels like as much a passion project for Bolster’s devs as the writers. If you were a music nerd and a developer, could you imagine anything better than getting to build your dream music site with a budget?

This stands out to me because so many spiritually similar attempts look, in retrospect, like pleasant distractions next to the main business of who’s attempting them. In these instances, the editorial side and the design/development side have never really felt like they got each other.

The common thread here is an attempt to leverage web technology to present journalism in a way that’s more than a replication of print standards. It should be obvious, but maybe it isn’t, that 30 years of text-based websites cribbed all their moves from the broadsheets: the center or left-aligned title, the front page grid, the subheads, leading photos, bylines — besides rounded corners and colour palettes, not much has changed in decades. A few years ago, sites with brand partnerships tried doing something different. These were full-hearted experiments but they seemed to fall off into half-hearted, laborious annoyances.

Early and notable to the game was Pitchfork’s Cover Stories. Okay, they preempted gracing the pages of your favourite Conde Nast publication by taking notes from the glossies. They were called Cover Stories, you know? The intent was bare (no shots; we all wanted it.) Reading the Passion Pit story now is like going back and playing the original Doom. But I remembered it looking so real. It’s hard to overstate how mind-blowing people thought this was at the time though. It did something magical: it made the story better. The Passion Pit profile was already gripping, but presented in a context that felt like it had been given the same care and thought as the text itself leant that text authority.

A lot of the DNA for LNWY was swimming in the primordial soup of those Cover Stories. Okay, the layout for the Passion Pit story isn’t that exciting in retrospect, but sometimes they got weird in interesting ways: the semi-linear chapters in the Aphex Twin piece with the heat map that looked like bacteria stalking the reader’s mouse, the moving portraits of Mac DeMarco. (Like, who didn't watch the Prisoner of Azkaban and stan for moving portraits in our news? It's the future, baby, and we're livin' in it.) For the most part, these were just parallax layouts with scroll events attached. Folks were going bananas with these scroll events. In the Janelle Monae piece, it feels like you’re scrolling for half an hour before any new content appears. We’ll come back to this.

A little after Pitchfork, FasterLouder (where Levin was at the time) fronted their own decorative feature stories. Their Headliners series launched with a deep dive into Lorde’s history. Besides creating its own headlines when Lorde was quoted stepping on Taylor Swift, they kept the back-end pretty simple: this was essentially parallax again. Without getting into the weeds, “parallax” means using full-page photos in fixed elements to make it look like content in one section is sliding over the top of content in the previous section (coders don’t fkn @ me.) It was the sexiest trend for a couple of years and although it was massively played out by the end of 2014, Headliners got some good mileage out of it.

Like all design trends, though, it was ultimately just a tool that could be used judiciously and on a smaller scale to produce great results. And Bolster are judicious. Bolster are great at small scale.

There were plenty more of these experiments but for as gratifying as they were, they never really stuck. They were time-consuming to produce relative to the churn of the daily music content treadmill, and they justified that by having brand partnerships for the pieces, but I imagine even that added another block to the schedule (finding brands, convincing them that a shiny long story was as good as 10 listicles, etc.) That all sets up the path to LNWY pretty well, but there’s one more design trend to talk about, because both its ethos and its function informs how (I think) LNWY’s design was conceived.

In the later years of last decade and the early parts of this decade, publishers tried to capture mobile devices with dedicated mobile apps. The surveys were in: everybody’s reading shit on their phone, therefore we’ve gotta go to where the audience is. These mobile apps were a total blight on the reading experience. It wasn’t fun. It felt like nothing. Worse, it felt frustrating. App design conventions were still emerging and web design conventions for mobile likewise. But they were ubiquitous. Every site had the subdomain m.whateversite.com with its own stylesheets and functions but, ideally, it had the same content.

But between 2011 and 2014, folks started catching on to Responsive Web Design. In short: what if instead of maintaining a desktop site and a mobile site, you just had one site that reacted to the size of the user’s browser window? If it was, say, 1208 pixels wide, show this wide open design with 20px font and plenty of whitespace. If it was 600 pixels wide, have everything collapse into one long column - better for the narrowness of a phone - and strip a few elements to emphasise readability.

I’m coming from the perspective of a charlatan here, but RWD is the most groundbreaking thing to have happened on the web since whoever created the first login form.

Why responsive web design is so crucial to LNWY isn’t that the site looks good on a phone. That’s par for the course. (It looks very good on a phone.) The idea that conceived responsive web design is the important part: forget everything you believe about how the web looks and how it responds to devices. Start by asking how it could look and how it could respond to users.

All of this context matters because LNWY isn’t reinventing the wheel, but they are pulling a lot of technologies and ideas that hadn’t been fully realised together under this unifying principle. They didn’t build their own streaming service: why would they, when Apple Music’s is already great? They didn’t build their own servers: why would they, when they could spin up an EC2 instance and fall back on Amazon’s security and reliability? They’ve got parallax and scroll events and text animations and moving photos, but by going back to first principles, asking how they could use the last 10 years of web design history better, they wound up pretty close to a perfect music publication for the web. Because they made it feel good.

So let’s look at some of these components.

The Front Page

From a tech standpoint, here’s what interests me: the video header is a 4mb mp4 which is incredibly small for how good it looks spanning most of the screen. Look close and you can see the compression, but on dogshit Australian internet connections that load-in time is essential, and it makes a big impression.

Scroll down and the site’s personality really starts to come through. When you hover over the container element of each article it triggers a CSS animation causing the text to flicker. This is the kind of thing that might ordinarily look goofy used to simulate a broken neon sign (this goes in the bin with fake glitching) but LNWY’s pastel colour palette makes it look more lit mag than shit gag. The visuals alternate between impressionist illustrations (peep that Tyler portrait), videos, and photography. The photo of Winston Surfshirt is, confoundingly, a zero second-long video. Sometimes genius is inexplicable. (But really what’s up with that?)

Once you start hitting the bottom of the page, Dom O’Connor and Missy Scheinberg’s September playlist scrolls in full. This gates off the stories published before it but again, I’ll get into why that’s irrelevant below.

The Story View

In UI design, folks talk about escape hatches. In web design, typically they’re the link or button you slam when you’re done with whatever page you’re on to get back to the home page. Curious thing about the home page of publications: not that many folks read ‘em any more. For years now people have used sites like Facebook and Reddit as their entry point into a publication. Design trends haven’t really caught up. Most site maps still look like a traditional network graph, with a server (the home page) in the middle and nodes (articles) orbiting around it. LNWY’s is more like a mesh. (Peer-to-peer (you wouldn't steal a music publication.))

LNWY has its own escape hatch in the subtle logo displayed on the top navigation bar, but I didn’t even notice this linked back to the home page until after I’d read everything on the site. I imagine that’s by design. LNWY understands that there’s no need to go from one story, back to the home page, and then to another story. In fact, it might even be detrimental to retention (aka time-on-site.) To that end, there are two elements in the story view that are much more apparent than the logo: the hamburger menu in the top left corner that leads to search, and the animated “INDEX” sidebar which slides out to reveal other stories.

Even further to that end, the bottom of each story has a grid of other recommended stories, and below that, the page keeps scrolling into the next story. The Quartz-style infinite scroll might not be a huge hook:

“We understood the appeal of infinite scrolling, but there wasn’t a lot of extra browsing or consumption of stories happening after people clicked that first article,” said Forbes chief product officer Lewis DVorkin. “People were reading maybe one or two in the stream.”

And I’m personally never inclined to keep scrolling onto the next story wherever it shows up. But it doesn’t detract, and every extra second counts.

(Quick aside re: time-on-site: Bolster have said this is the key metric they’re using with brand partnerships. I think everyone who’s been in publishing for the last few years has seen this coming/happening: pageviews and UBs are value-neutral, meaning there’s no way to tell if someone is hatereading your site or lovereading it, and we’ve all been waiting for advertisers to figure this out in the age of outrage. Meanwhile, Facebook’s choices are all driven by time-on-site as a better indicator of user engagement (which, like, duh) and LNWY are smart to move on that.)

Here's a minor element that deserves special praise, though: albums and song titles are bold and steadily fade in and out like this. Here's an example of the specificity of creating feel: the fade is 1.2 seconds long from 100% opacity to 20% opacity. Believe that someone went back and forth on whether it should be 1.2 or 1.3 (1.4? Ugh, that's too slow. 0.9? Christ, I'm getting a migraine.) The convention is that text like this is a link to another page; here, it relies on that to get you to hover over it, at which point the audio player pops out with a clip from whatever's highlighted.

The Playlist

I talked about parallax and how it could be used well. Here’s where we pay the piper. There are a bunch of nested elements in the monthly playlist that are a perfect example of how good LNWY feels. The heading and the copy are in separate containers but grouped together in the “content” container. The album art is in its own “sticky” container. This means you can scroll the text up and down while the album art stays in the same place behind it, and then when you’re done reading the text relevant to that album, it scrolls to the next one. On desktop, the Apple Music player sticks on the left hand side, leaving the right half of the screen to scroll smoothly like this. On mobile the player is at the top of the page and doesn’t follow, but if you hit play before reading, at least on iOS you’ll have the tracks playing in your Notification Center.

I know I said I didn’t wanna talk about editorial, but I was really expecting these song blurbs to be about as horrendous as most singles columns, and I was wrong. No surprise O’Connor and Scheinberg know their stuff, but pulling off tight, legible paragraphs is a widely insurmountable challenge for music writers, and these two do it.

Returning to the phenomenon of writing sounding smarter for its presentation: Romy Vager’s Go-Betweens playlist would be pretty typical fare on any other site. Here, in LNWY’s layout, washed in maroon (The Go-Betweens are from Queensland, geddit) it’s elevated to a bonafide feature.

The Sidebar

When you hit the “INDEX” menu on the side of every story view, the site adds some classes to the body and other elements that changes the state of the site, essentially making the main content “frozen”. In practice this means fixing the content of the article in place and adding a greyish overlay. We all know this convention. Items in focus are fully lit; items out of focus are dimmed/blurred. Man, this thing feels so good. I’ve never used a sidebar on a site that felt this good. Here are some things that I think make it feel so good:

1) The time it takes for the “INDEX” element to spin around is roughly half the time it takes for the menu to slide out (I think there might be a difference of maybe .1 or .2 seconds but it’s close.)

2) “INDEX” doesn’t overlap the headline. There’s about a pixel’s worth of space that feels oddly satisfying.

3) There are two options for how the sidebar orders the stories: popularity and most recent. It doesn’t tell you that they’re there or what they are, you just see the two icons, and you know what they are.

4) It doesn’t emphasize what’s video, written, or a playlist. The medium doesn’t matter to people any more. They just want some good content about a band they care about, or about something weird. I’m middle-aged by music writer standards and I still watched a video about The Creases doing a lie detector test. That’s a testimonial.

5) It doesn't look like a tab or a page corner or any other cliche that usually accompanies side elements like this. It doesn't bounce trying to grab your attention. It just floats there. I N D E X. Waiting for you. When was the last time you clicked on every button on a site just to find out what it all does?

The absence of a sidebar in the playlists ruins me.

Sure, there are some sticky parts to this site. In the upper right hand corner is a circle with a dot inside it. I’m not sold on this — circles are used elsewhere to denote a playlist or something you can listen to (evoking a vinyl record or CD, you might figure) and the dot in the middle enlarges but it’s immediately covered by the site’s social media profiles. It probably shouldn’t enlarge at all and it should probably be a different shape. Most of LNWY's symbols are basic shapes rather than elaborate imagery and I really like that abstraction. The site looks cleaner for it. The downside is they're limited in variation, forcing them to be more creative if they wanted to change this circle. What I'm saying is: use a triangle.

The function itself changes in the story view and it becomes actually great: it shows a little preview of what the story will look like in a Facebook post or tweet. This ties into the Open Graph and Twitter Card tags LNWY has on every site: they’re controlling the experience down to how their stories look on sites that aren’t even theirs.

But earlier I said what Bolster do best is a lot of little things that add up to one larger impression. And this is the thing: a dot expanding its radius by two pixels and being immediately covered by another element anyway is not a big deal. It is 1/1000th of a deal because I’m convinced Bolster deliberated over the other 999 parts. I’m convinced Bolster meditated on the other 999 parts. And in the pure tone of spiritual silence found a way to balance uniformity against novelty. Every page on this site, from the font colour up, feels personally attended to. At the same time, it’s templatised enough that you could see how it’d work with a CMS.

This kind of richness was previously the domain of print. On the web, richness is cheap, but coupling the endless possibiliities of a n-dimensional blank canvas with restraint is the real trick. Literary publications, even music ones like Swampland Magazine, feel luxurious, and being outside the news cycle has meant they could showcase this kind of thought and attention with their talent roster. LNWY found a way to do that in an online space that might actually be commercially viable. Typically when a new music publication launches, everyone kind of smiles through gritted teeth, like listening to a friend brag about their sixth career change in three years — a mixture of obligation and hope that it actually sticks this time, but maybe mostly jaded that good things just don’t happen to good people. Instead, LNWY feels like a harbinger of form meeting content, the Australian music press finally finding the direction it’s been missing through its awkward pubescent tangle with the web.