In Part One of this two-part post, we met Brian Webster, founder of the LA-based design and development agency Delicious Simplicity. Brian described his search for a “happily ever after” solution to free his team from traditional CMS monoliths like WordPress and Drupal, and how he came to love Gatsby. So much so, in fact, that the agency refactored all their current projects to run on Gatsby.
Then came the opportunity to build a brand new Gatsby-from-scratch project, adding in the content management capability of Gatsby’s newest superpower: Gatsby Preview.
Now up and running on Gatsby, the Delicious Simplicity team was ready to take on a bigger challenge.
The opportunity arrived in the form of Evie Magazine, a startup online-only lifestyle publication aimed at women. Evie’s editors planned a vibrant and dynamic content stream, meaning they would be adding to and updating the site constantly. To do this seamlessly on the browser side — i.e., not interrupting user experience — yet easily on the editorial side, they needed a way to preview changes live in the browser before deploying. Preferably one that did not involve spinning up a local server in the CLI. They were content creators, not coders, after all, and so expected the preview capability of a traditional CMS.
Fortunately, Gatsby Preview had just become available in beta. Preview integrates with Contentful and other select headless CMS’s to allow users the fast and seamless benefits Gatsby brings, only now with the convenience of a live URL for viewing content changes instantly. “I saw right away that Gatsby Preview was the perfect match,” says Brian Webster, agency founder.
This means that in Gatsby Preview you’re not just previewing the article you are writing in draft stage, as happens in a traditional CMS. Instead, you are able to preview the entire site before actually deploying the new content. This gave Evie’s editors the ability to draft multiple new articles that will completely rearrange the website. “They can seamlessly preview how the landing page will look, how the new content changes the different verticals, and where it shows up in other places around the site,” he says. Suddenly they had complete confidence in their deploys – they knew exactly what it was going to look like when it went live. No guesswork.
“Gatsby Preview is an indispensable tool for them, every day,” he concluded.
“When publishing content that includes every kind of multimedia–GIFs, images, videos–knowing and experiencing exactly how it will look on both mobile and desktop in its published form is an absolute must,” agrees Brittany Martinez, Founder and Editor in Chief of Evie Magazine.
Great content by itself isn’t enough, she adds. It has to come in a great package, one that seamlessly marries cutting edge user-friendly tech with beautiful visual design. “This is nearly impossible to execute without the ability to preview and adjust every element of an article, as needed, before it goes in front of readers,” says Brittany. “This was a do-or-die for us.”
Preview does the job brilliantly. “Having a fully-functional ‘ghost’ copy of our site allows for seamless quality control and visual consistency. Preview puts user-friendly technical power in the hands of our non-technical editorial team.”
Preview puts user-friendly technical power in the hands of our non-technical editorial team.
It also facilitates their primary job — producing and sharing compelling, creative content. “The invaluable cherry on top is Preview’s ability to create live links for approval,” Brittany says. “This is key for when we are doing features on high-profile individuals, or content collaborations with other brands.”
“At this point, we can’t imagine editorial life without Gatsby Preview.”
SEO From the Get-Go
Gatsby was a win for Evie Magazine in other ways as well — most notably with seriously optimized SEO.
Gatsby helps new sites place high in search results starting as soon as they are published: because Gatsby pages are server-rendered, all page content is fully and openly available to search engines/crawlers. Using GraphQL to query your indexable content is a responsive and powerful capability that is built into the platform.
“For a startup publication trying to build an audience from scratch, with no big famous names writing for you, survival depends on readers finding you from as many different directions as possible–SEO is crucial,” Brian says. “By using Gatsby, you are creating an SEO-optimized site architecture before you even start developing your UI.”
Evie is equally ecstatic over their new site’s performance. Thanks to Gatsby’s predictive pre-fetching, where pages load just before they get scrolled into view, readers get near-instant access to content. “They love it. They aren’t tech people at all but appreciate what it means for the end experience,” Brian says.
“They are wildly, wildly in love with the entire thing. Everything they were told in the beginning that Gatsby would deliver, it did.”
The Happily Ever After Part
Delicious Simplicity’s search for a better way to build and deliver web apps was long, and even frustrating at times. But having now standardized on Gatsby, Brian Webster says, his agency will never go back to a traditional CMS. Especially now that Gatsby Preview has arrived to give content creators the ability to work as equal collaborators.
“When the notion of headless decoupling from Drupal or WordPress first came around, it just felt right. But the immediate question was how to make it work with non-technical contributors who need to be able to use it, too,” Brian says. “The first time I read the Gatsby docs I felt like, This was pulled forth from my wildest dreams and rolled into a solution! When the team and I realized that with Gatsby and Preview we really could escape the monolithic PHP situation forever, that really romanced us.”
Now, having conquered the learning curve, his dev team doesn’t want to work any other way.
“I love how Gatsby makes it possible to harness the power of React components, headless CMS architecture, and that it’s a much more delightful workflow for developers,” he says.”Now that we have Gatsby Preview, our content-creator clients get an equally powerful yet simple workflow.”
Brittany agrees. “It’s rare to find a team that doesn’t shy away from an ambitious vision but instead elevates it. Brian and his team were vital in bringing Evie successfully to life and to market,” she says. “They built us tech that isn’t just cutting edge, it’s a glimpse into the future.”
“It’s our happily ever after.”