advertisement
advertisement

How Flipboard Found Itself On The Web By Letting Go Of Its Past

Until now, the app has been defined by its slick, magazine-like presentation. But the web wants to be like the web.

When Flipboard, the pioneering social-magazine app, first brought a subset of its features to web browsers in July 2013, CEO and cofounder Mike McCue told me that he expected to make a full-blown web version available no later than early 2014. But he added “We’re not going to ship it until we love it.”

advertisement

That proviso turned out to be meaningful. Only now is that full web-based Flipboard experience becoming available. And though it’s true to the Flipboard spirit, it’s also quite different from any previous incarnation of the app–on tablets, phones, or the web.

The July 2013 web version focused on bringing one Flipboard feature to the browser: magazines, which let anybody from an individual user to a major media company curate links on any subject. Aside from the fact it ran in a browser, it looked much like the original iPad edition, with lists of stories broken down into pages. As you moved from page to page, it performed Flipboard’s signature visual flourish: a stiff page-flipping effect, as if the app were a magazine printed on rigid boards rather than floppy paper.

Flipboard’s old web version

It was an impressive technical achievement. But it was also out of whack with the way of the web, where page-flipping is a foreign notion and up-and-down scrolling has been a core concept from the start.

So rather than building out that version, the company decided to reboot the whole interface. “There was this inkling that we knew we had to basically start from scratch,” says Didier Hilhorst, a Flipboard designer. “The reason we knew this is because we do this with every platform. It’s a different experience. The biggest, biggest thing is, you don’t touch computer screens. That changes everything.”

Giving up Flipboard’s trademark elements, McCue says, “was really hard. We really liked the idea of paginating and flipping in general, because it helps you structure content. But the feedback we got from users was that it didn’t feel natural. A lot of new users didn’t know that you were supposed to flip pages. They didn’t know how to do it.”

Flipboard’s new layout

A Dream Deferred

This new webified version of Flipboard is the long-delayed fulfillment of a journey that goes back to the company’s birth, before it launched on the iPad in 2010.

advertisement
Flipboard as it appeared in 2010 on the iPad

“Very, very early on, when we were first thinking about Flipboard, we thought about doing it on the web,” McCue says. “And then later, we started hearing these rumors about the iPad, and we thought okay, the iPad is really the ultimate place for us to start. We really believe, obviously, that mobile is ultimately where everything is headed. But we started to realize that having Flipboard on the desktop is important to complete the whole loop.”

In a way, though, it was just as well that the company pressed pause on the web version for so long. Earlier browsers could never have handled the demands of something like Flipboard, which interleaves text and visual elements with a high degree of polish and fluidity.

“It’s a huge challenge,” McCue says. “Frankly, I don’t think this was even possible to do in 2010, when we were first building Flipboard. HTML5 was not at that point, browsers were not at that point. And the rendering engines on the computers were not.”

Even with today’s technologies in its toolkit, it wasn’t immediately obvious what the new browser-based version of Flipboard should be. “We didn’t want to try to make the web into something that it isn’t,” McCue says. “We wanted to advance what we could do on the web, but not try to make the web feel like a mobile app.”

At first blush, the design that the company came up with looks a little like Pinterest or Tumblr: Every story is boxed off, with a snippet of text, a link, and (where available) an image. But the more you examine the layouts, the more subtleties you spot. Different stories are presented at different sizes, from small and unassuming to big, bold, and beautiful.

Some articles show multiple images; others display one photo in a browser-wide, billboard-esque panorama. To determine which ones merit the latter approach, McCue says, “we look at both the importance of the story as well as, is there an image in the story that’s kind of full-bleed worthy?” The service is even smart enough to overlay text on a part of the image that’s dark and solid, so it remains legible.

advertisement
Image-analysis technology overlays text on photos in spots where it will remain legible.

Though this presentation is much less literally magazine-like than earlier iterations of Flipboard for tablets and phones, it still aims to weave words and images together in a way that draws the eye to the most significant items and avoids visual monotony, giving it a spiritual kinship with the goals of print magazines.

“You really need to think in terms of the pacing of the page,” says Hilhorst. “The team spent a lot of time trying things out. Because if we use one layout over and over again, obviously the effect is totally lost.”

With the presentation that Flipboard settled on, he says, “You get these moments when you can just sit back and say ‘Damn, that’s a nice picture’ or ‘I appreciate the beauty of this.’ And then you go back to your cadence of checking out these little tidbits.”

Making all this happen in a web browser in a way that feels snappy rather than sluggish still isn’t a cakewalk. “If you think about the big images that are coming down—the 5 MB GIFs that are coming down—I think the engineering team really pushed the boundaries of performance,” Hilhorst says. “If you have a lot of animated GIFs in one magazine, it can get a little hairy. That’s the limitations of the current technology.”

Work In Progress

As snazzy as this version of Flipboard looks, the company pushed some design decisions off into the future. In its apps, the company partners with numerous media properties (including Fast Company) to present articles right inside Flipboard, handsomely formatted and accompanied by splashy, magazine-like ad spreads.

On the web, if a media source provides the full text of its articles as an RSS feed, you can read them inside Flipboard, with a presentation that’s ad-free and uncluttered but not particularly ambitious. Otherwise, clicking on a link takes you to the story at the originating site.

advertisement

“We did that because we wanted to do right by our publishing partners,” McCue says. “We wanted to make sure that they can have advertising in here, and they can benefit from the traffic that we’re going to be sending them. And also, a lot of our publishers already do a pretty darn good job on the web as it is. There’s a little less value in us trying to reformat everything.”

Still, he stresses that the company does plan to bring article presentation more in line with its apps in a future web release. (Full disclosure: Fast Company is one of the first publications that will get this fancier treatment.) Also on the way: more tools to help magazine curators customize their publications.

“One of the nice things about the web is that we can iterate it,” McCue says. “We can make it better and better soon after launching.”

A photo gallery format used in Flipboard’s own Daily Edition magazine

Flipboard For Beginners

The new version also reflects a basic shift in emphasis that Flipboard introduced last October in its phone apps. Before that, the app felt like it was aimed at media mavens. Getting going required a fair amount of work, including connecting it to your social-networking accounts and selecting specific sources of news to add to your reading list.

You can still do all that tinkering if you want. But you can also start out by specifying as few as seven topics of interest, out of 34,000 options. Using the technology it acquired last year from erstwhile archrival Zite, Flipboard will use those signals to create a stream it calls Cover Stories, culling material from an array of sources, including items being shared by your friends and stories in 15 million magazines curated by Flipboard users.

“Our focus has been, let’s create an experience for people who haven’t tried Flipboard before,” McCue says. “Let’s create an experience that gets them started, on the desktop. Where we landed, we think, is just a really good, solid release that is geared around making Flipboard feel natural on the web.”

advertisement

Last year’s paginated, flip-effect web version of Flipboard didn’t make a whole lot of sense unless you were already familiar with the app. By erring on the side of being true to the web–and appealing to as broad an audience as possible–the new one could have a much greater impact.

“It will definitely create a somewhat broader perception of what Flipboard is,” McCue says. “In some ways, you could think of this as a way to create a website without having to create a website. You just pick some great content.”

“There’s a huge number of people curating all sorts of things, whether it’s camping or food art or the Dodd-Frank Act. There’s going to be lots of places on the web where people will discover Flipboard magazines, and they’ve never heard of Flipboard before.”

About the author

Harry McCracken is the technology editor for Fast Company, based in San Francisco. In past lives, he was editor at large for Time magazine, founder and editor of Technologizer, and editor of PC World.

More