Forbes rebuilt its new mobile website as a Progressive Web App
With its intersitial quotes and lengthy load times, Forbes is “known for having a slower site than average and a more hefty ad experience,” Salah Zalatimo, Forbes’ senior VP of product development told me.
That’s why Forbes on Tuesday is beginning the public roll out of its new mobile site, which it says loads in 0.8 seconds — down from anywhere from 3 to 12 seconds on its current mobile site.
The new mobile site is a Progressive Web App, a Google-backed mobile web format that looks and functions a bit more like a native app — but most importantly loads quickly.
PWAs work on all mobile devices, but they have added functionality on Android, where users can add them to their homescreen like a native app. Once Android users take that step, Forbes’ PWA will work offline and be able to send push notifications.
As part of its new mobile site, Forbes is introducing a new story format called Cards (sound familiar?) that was modeled after Snapchat Stories. Users will be able to swipe through the stories, which can feature, photos, video, infographics, or quizzes.
“The way a mobile article is for most of the world right now is just a reformatted version of your desktop article,” Zalatimo said. “When you take that away and start from just a mobile device and think about what is the best way to show this information on a mobile-only device — forget desktop for now, don’t worry about reformatting it for desktop, just for mobile — how different those experiences become. That’s why we looked at Snapchat for inspiration. It is the only mobile-only social network. There is no desktop version of it.”
Forbes also created a new in-house ad format for the PWA site called Fluid, which is also meant to load quickly on mobile devices.
Up to 60 percent of Forbes’ audience comes from mobile — and it expects that to reach 80 percent in the coming years.
Forbes wouldn’t provide me many specific figures when it came to performance of the new site, but it said that tests showed that the new site doubled the average user session duration, resulted in six times the completion rate, and had 20 percent more viewable impressions than its previous mobile site.
When it began development of the PWA site, Forbes intended for it to be a secondary mobile experience, but after seeing positive responses to it, it decided to make it its primary mobile site.
There are a number of other publications that have introduced PWA sites — including The Washington Post and the Financial Times — but Forbes said it is the first to make its primary mobile site a PWA.
Zalatimo said Forbes has been meeting biweekly with Google as it begins to implement the PWA site in stages.
The PWA site is now live for all Forbes stories that are published in AMP, another Google-favored mobile format. “There’s a specific tie-in that you can do between AMP pages and PWAs. It allows for our site to load instantly as the second article that somebody reads from an AMP article,” he said.
Later this month, Forbes will redirect all of its social traffic to the PWA site, and by April it expects all of its mobile traffic to go to the PWA site.
It began testing versions of the mobile site last summer and went through numerous iterations of the site. Additionally, Forbes had to build the internal processes for how its staffers would create the Card stories.
On the backend, Forbes was able to add the Cards to its current CMS, so there hasn’t been much of a change for the newsroom, Zalatimo said.
“The real beauty of this is that we were able to find a way to publish these stories using our existing CMS,” he said. “We built custom templates that our newsroom can now use to tell these stories. From a workflow standpoint, we were able to find a way to roll this out to our entire newsroom — and our contributor network, eventually — at scale without any dramatic change in workflow. The real change is in the creative process of our journalists. It’s not in the process of building these new templates, it’s in the process of thinking about how you would convey a story in these different templates.”
Photo by Billie Grace Ward used under a Creative Commons license.