Skip to main content
Mediacurrent logo
Hero Background Image

Blog Post

Gatsby for Marketers

January 14, 2020

open waters

About Linda

After a well-deserved winter break, we are back with our first episode of 2020. In this episode, we will be talking with Linda Watkins. Currently, Linda is Senior Director of Marketing at Gatsby, a modern website framework that creates blazing fast, secure, instantly scalable websites. She is sought after for her marketing expertise and frequently consults with large brands worldwide. But first and foremost, she is a practitioner that enjoys sharing her knowledge and experience by engaging with marketers and technologists. She lives in the San Francisco Bay Area and in her free time, plays flute with the Bay Area Rainbow Symphony and enjoys Netflix documentaries. 

Linda Watkins has worked for some of the biggest technology brands in the world including Amazon and Cisco Systems. She has also worked for various technology startups that specialize in modern website development. She has over 10 years of experience building scalable marketing programs, driving demand for new services, and planning and executing go-to-market strategies. She is a Stanford Certified Project Manager and has an MBA from Brigham Young University. 

Project Pick

Gatsby Preview

Interview 

  1. Mario: Tell us about your role as a Senior Director of Marketing at Gatsby? 
  2. Mario: For those listeners who aren’t familiar with Gatsby JS, can you tell us what it is?
  3. Bob: What benefits does Gatsby bring to large scale enterprise web teams? What’s attractive to marketers and IT managers?
  4. Mark: Are any notable brands using Gatsby? Who are they?
  5. Mark: Where does Gatsby fit into a martech (Marketing Tech 😊) stack?
  6. Bob: Your colleague Sam Bhagwat published a blog about a year ago describing this concept of a “content mesh.” Can you elaborate on what a content mesh is and how Gatsby plays a part in it?
  7. Mario: How is Gatsby changing the way marketers think about web CMS and app projects? What kind of impact is it having in the realm of agile marketing?
  8. Mario: What are some important things for marketers to consider when embarking on a Gatsby project?
  9. Mark: Is there anything we haven’t discussed about Gatsby that you feel would be good to share with our listeners?

Transcript

Mark Casias:Welcome to Mediacurrent's Open Waters podcast, navigating the intersection between open source technology and marketing. I'm Mark Casias and with me as always is Bob Kepford.

Bob Kepford:Hello, folks.

Mark:And Mario Hernandez.

Mario Hernandez:Hello, people of the internet.

Mark:This episode, we will be talking with Linda Watkins. Currently, Linda is senior director of marketing at Gatsby, a modern website framework that creates blazing fast, secure, instantly scalable websites. She's sought after for her marketing expertise and frequently consults with larger brands worldwide, first and foremost, she's a practitioner that enjoys sharing her knowledge and experience by engaging with marketers and technologists. She lives in San Francisco. In the Bay area, or in San Francisco itself?

Linda Watkins: In the Bay area, just south of San Francisco.

Mark: Yeah, I grew up in San Francisco. That's why I love going there. Anyway, in her free time, she plays flute with the Bay Area Rainbow Symphony and enjoys Netflix documentaries. Welcome to the show.

Linda: Thank you. Thanks for having me.

Mark: How are things in the Bay area?

Linda: They are beautiful and sunny and the rest of the country is cold, so I'm happy to be here.

Mark: It's even, I'm wearing a sweater in New Mexico as well. Yeah, definitely one of those, one of those cold snap days. So, to start off the episode, as we always do, we have our guests do our Pro Project Pick, so what is your project pick for us?

Linda: Yes, Gatsby preview. And that definitely plays into the, you know, what marketers care about. So, Gatsby preview is a way for content creators, marketers ,anybody working on the website to view the changes that they make to pages on their site before it goes live. So it's really great because you'll be able to see all of the content changes in context, and that gives you and your marketing team confidence before you actually publish a page. You know, you can even see how the new header kind of looks on the page, the layout, if you move an image around, or if you rearrange text, all of that's updated live on this real-time preview. So it's very useful for these content creators as you're getting pages updated or launching a new website.

Mario: Yeah. We've we've seen previews of that, previews of the preview.

Mark: Actually, as people in the know may know, or may not know, mediacurrent.com is on Gatsby itself with Drupal in the backend. And we've been working with the team to do the Gatsby preview, to actually test it and beta it and work with it. So we love it. We certainly have our content creators, our marketing people love it because they can actually see what's going on with it as well.

Mario: Yeah, pretty neat. Very excited about that coming out soon. So, Linda, thanks again for joining us and making time for us. I'm sure you are really busy. So tell us a little bit about yourself and your role as a senior director of marketing at Gatsby.

Linda: Sure. So I've been leading the marketing team for the past year and four months or so, and Gatsby is a small team right now. I think we're around 45 folks, although we just added a few more, so maybe getting close to the 50, and our marketing team is three people plus a few contractors, so small, nimble marketing team. Gatsby's a startup so, you know, everybody kind of needs to wear different hats. And I find that really exciting. So I enjoy working with small startups, small companies, and having a big impact and being able to help kind of craft the messaging and the narrative from the very beginning.

Mario: Great, wow. 50 people almost, that's impressive. I remember just a couple of years ago it was just Kyle and a couple other guys.

Linda: Right, when I joined, I think I was employee number nine, so it is very different feeling between a 10 person company and a 50 person company.

Mario: Yeah, absolutely. So for those who may not be aware or have never heard of Gatsby JS, can you tell us a little bit what that is?

Linda: Sure. So Gatsby is a modern website framework. And so what that means is that a developer can use Gatsby to build a website that is instantly scalable because it's hosted on the edge or the CDN. It's more secure. It is optimized for performance, which means this is something marketers really care about. You know, how does your website rank in organic search results? Is it search engine optimized? And the way that Gatsby builds a website is kind of out of the box optimized for search engines. So you get that great performance without having to do very much. One thing Kyle talks about is that when he developed Gatsby, he wanted to make doing the best thing, the easy thing. So in other words, he built Gatsby in such a way that it makes it difficult to make a poor performing website. You'd have to work really hard to make a poor website with Gatsby, just because there's so much performance out of the box that comes with it.

Since we're, you know, kind of, I'm a marketer and I will say right now, if you're building with Gatsby, that's really a developer tool right now. You need to understand, you know, basics of coding, but we do have features for the marketer, like preview, for example, because once you have your website built or you're updating pages or the website build is in process, then of course the content creators, the marketers, play a big role there in, you know, working out what the content is going to say and how the images should be laid out and that sort of thing.

Bob: So, Linda, what, what would you say are the benefits that a Gatsby brings for large scale enterprise web teams and on those types of teams, what's most attractive to marketers and the IT managers, folks that are kind of responsible for the website?

Linda: Sure. So for large scale websites, we actually have a couple of great case studies we've done recently. One is with Impossible Foods. They're kind of that hot new company that makes vegetarian hamburgers and they have a Gatsby website. So some of the things that I've heard larger enterprises enjoying about Gatsby is that you still get that blazing-fast speed for your website. Nobody wants to go to a website and it takes five seconds to load a page. That's not a great experience for anybody, and especially for e-commerce sites, that will literally cost you money. So for every second it takes a page to load, you're going to lose more sales, more revenue because people will bounce from the site. So that's one of the main benefits I hear from larger companies or companies like e-commerce sites that are trying to make money on the web.

They have to have the optimized site, it needs to be fast. It needs to be very interactive. So it's not just fast from the initial page load, but it's fast as you're navigating between pages because Gatsby does what you could call prefetching. It kind of sees where the user is on the page and it pre-loads the links depending on where they are in the page and what we anticipate the user will do next. So it really becomes a seamless experience for the user, that site visitor, which then, of course, marketers really care about because we always have the customer or the user experience in mind.

Bob: We just recently launched a project on Gatsby, magmutual.com, and it's a large enterprise type site, and we saw a big increase as far as, once you're on the site, you were talking about that prefetching where the second page you go to the third page you go to is, feels so much faster. It's, it's just the, the whole side feels a lot faster than than a traditional site.

Linda: Yeah. And Gatsby does another thing with images, too, where the, like a shadow of the image will load first and then of course the full high resolution will load later. But the reason that's great is that, you know, we've all had the annoying experience where, especially on your phone, you're trying to read something and an image at the top will finally load maybe even like five seconds after you're on the page. And it bumps all the text down. That's really annoying, and so, with Gatsby, the way Gatsby treats images is great because it'll load that kind of placeholder for the image and it kind of looks like a shadow so there is some definition there. You get the essence of the image, but then the full high res detail can come, you know, a little bit later. So it still has a really nice experience for that site visitor.

Mark: Yeah. Playing with Gatsby images has always been fun. So we'd mentioned Magmutual, we mentioned mediacurrent.com. What are some other notable brands that are using Gatsby?

Linda: Sure. Nike is using Gatsby. So they have, they did their site just do it. I think it's Nike.justdoit.com. And so they built that with, with Gatsby. That was their campaign with Colin Kaepernick that they did last year. And I believe they've done other Gatsby sites since that time as well. So that's exciting to see. We're doing a webinar this week with a nonprofit company called Starlight. And, although they're not a huge brand yet, they have a really compelling story about how they're using Contentful, Gatsby, [and] Netlify together which is a very popular and powerful combination. And so, they will be talking about how they set up their content modules and how they're making it a lot easier for the marketer to go in and create the pages that they need, cause that's kind of one, one struggle or tension that sometimes happens between a marketing team and a development team is that the marketing team wants to be as self-sufficient as possible.

But you know, usually a marketer doesn't code. Like if they're great at writing content, that's what they're great at. And isn't necessarily, you know writing code and working in React or that sort of thing. So what's nice with some of the headless CMSes is now that are becoming popular to use with Gatsby is that it can be set up in such a way that the marketing team can easily go into that interface and add, you know, their modules and arrange the text or the different content areas on their page and kind of build out the pages themselves and they don't need a developer to help them with that.

Mark: Yeah, that's it definitely makes it easier when you have a content management system - Drupal, Contentful WordPress - and that makes content management easy, and then you have a great display layer on top of that. So where does Gatsby fit into a marketing tech or MarTech stack?

Linda: Yeah. Well, this is something that I want more marketers to know about Gatsby, but also just about this kind of new, new wave of how websites are being built now. So this is something that I would say, as a marketer, is really important to know. And sometimes, you know, you'll hear it referred to as JAMstack, but what that essentially means for a marketer is, if we think about how a lot of current websites are built and how websites were built, you know, five, eight years ago, it makes sense why they're built that way, but essentially what happens is a site visitor types in a URL. You know, it goes to the CDN, which is the content delivery network. Then that gets routed maybe through a load bouncer, which then gets routed to a server. And then, you know, that kind of pulls the information that you need, which then gets routed back to the CDN, which then comes back and like displays it on your browser.

Linda: That works most of the time, but there's a lot of opportunity for things to break along that, along that path. Also then if, as a marketer, if you have content that goes viral and that could be a good thing, but maybe it overloads the server where your website's being hosted and then your website goes down. That's not a great experience. So this kind of new wave of using modern languages or modern tools to build websites means that with Gatsby and with, you know, similar type Gatsby frameworks, you can host your website on the edge, on the CDN. So from a user's perspective, the website visitor types in their URL, it goes to the CDN where the website is already built and ready to be served, and then comes back and you see the website in your browser. So that's a very simple explanation of what's going on there with Gatsby, but it makes it so that the site can instantly scale because you're not having to go out and, like, the browser doesn't have to pull it from the server, for example.

It's just kind of hosted on the edge, ready to go, prebuilt, and it ends up being incredibly fast. One example is I was just on a plane flight and, you know, WiFi on a plane is never really great quality. It's always going out super slow. And I was trying to access a couple of different websites. I couldn't get in. And I went to the Gatsby website and it loads right away. That was the only site I could get to load was a Gatsby website. So that is also impactful because for people that may not have the latest cell phone, smartphone, may not have, you know, the fastest internet connection, may live in an area of the world that doesn't have the, you know, the super speed that maybe some of us get spoiled with, that's meaningful to them because maybe the only sites that they can access easily are sites that are similar to Gatsby or built with Gatsby type technologies.

Bob: Yeah, that's, that is, I mean, there's just so much that Gatsby does just to help make this possible. I was, there's a blog post that was written, I think about a year ago by Sam Bhagwat. I don't know if I'm saying his last name, right. And he had this concept in there called content mesh. And can you elaborate on what's meant by content mesh and how Gatsby kind of facilitates that, makes it possible?

Linda: Yeah. So that is a great question, because it's hard to, when you're in kind of a new space, it's hard to find compelling ways to describe it. So the content mesh is our way of kind of describing this. So what that means is if you, let's see, sorry, let me back up a bit. So, content mesh has to do with the idea around the decoupling of the CMS. So let me explain that a little bit. So I'll explain this in the terms that I understand as a marketer, which means I have to simplify it a little bit. So many of us are used to working with content management systems or a CMS like WordPress or Drupal, or some of the headless CMS is like Contentful and others. And we're used to maybe these monolithic CMSes is where they try to do everything but, in the effort to do everything, maybe they don't do anything like super well.

They just do everything, you know, adequately. And that's been good enough in the past, but the way that we're moving forward to the future is that everybody, developers, marketers, we want to use the best tool for the job, for the specific job that we're trying to do. So we've an overall trend that we're calling kind of the decoupling of the CMS, which means that you can use the CMS to manage your content, but then on the front end of the website, you can use something like Gatsby to deliver those static HTML files, which is a great way to have a really fast performing website. So the content mesh kind of talks about Gatsby's place in this overarching trend of the CMS being decoupled, where you still need something to tie all the pieces together. So we see Gatsby playing a really core role in the content mesh so that with Gatsby, you can bring your content from anywhere on your website, meaning that maybe you have most of your content in Drupal, but maybe there's a page on your website that's pulling it from a Google spreadsheet because you want a list of a bunch of events that you're attending that year. And, or maybe there's another data source that you want to bring in like WordPress for your blog, for example. So with Gatsby, you can have all these different data sources or like content sources, and then you can just, Gatsby will pull it all in to deliver, serve your website. And that's what we're kind of talking about with the content mesh is that now people are not using or not as much using the big monolithic CMSes for everything. They're kind of picking and choosing the best tool for the job.

Mario: That's, that's pretty, yeah, it's, it's incredible how the landscape has changed when it comes to CMS and decoupled especially, which is still a pretty hot topic. So how is Gatsby changing the way marketers think about CMS or maybe app projects, and how does this impact the realm of agile marketing?

Linda: Yeah. Well, agile marketing, I think is really, really interesting. So I have a couple of thoughts there. One is the website is just so critical for most brands. And the reason is, is that it's your company's face to the world. Even if you're not an e-commerce site, even if you're not trying to capture leads on your site, it's still, how many or most brands present themselves to the world is like, oh, the website is that access point. And then it becomes even more important if you're using your website to get revenue like e-commerce or to gather leads, which a lot of like SaaS companies do and other companies do. Any improvements you can make to your website user experience, but also to the website update and build experience for the marketing team is potentially going to have just like incredible impact.

And so you need to keep in mind both the user's experience, the user in this case meaning the website visitor, but also the marketing team and the content creator's experience. So you need, hopefully, both to be a great experience. And so with a content creator and marketing team, the experience needs to be around editing and updating and publishing new content. That is the important aspect that needs to be taken into consideration there. And for the website visitor, of course, you know, speed, fast loading pages, optimized content for search engines, and secure and that sort of thing. So the content mesh and Gatsby is playing very strongly into both of those areas. And we actually, you know, I don't have any details to share in our specific roadmap, but I will just say that we are absolutely looking into building out more features and products for the marketing buyer, for the marketing persona and making sure that the collaboration in building a website becomes a great experience whereas now I've been through enough website rebuilds to know that that usually is not a great experience.

Mario: Right. Right. So as a marketer, I hear you talk and I'm sold on Gatsby. What are some of the things that I should take under consideration before embarking on a Gatsby project?

Linda: So for the marketer, it's not going to be really easy for the marketer to just get started with Gatsby because it's still a developer tool. So there isn't necessarily a lot of meaning for the marketer in going to gatsbyjs.com and like starting with a free trial site cause they'll still need a developer to build the site for them. So I would say the first thing that marketers should do if, you know, you're looking for a website rebuild or to refresh, is to talk with your developer team and ask them to check out Gatsby if they haven't heard of it already. We do have resources and case studies on our blog, which is that gatsbyjs.org. You can go there and see other companies and developers and marketers talking about Gatsby and how they built, a Gatsby site and then worked with our marketing team with that site.

And so I think those would be great resources. And we also have just a one-page summary of Gatsby for the marketer that talks about the benefits of using Gatsby, such as for search engine optimization, fast websites, more secure websites, and that type of thing. And so really the first thing is make sure you just learn more on the blog and then talk to your dev team about using Gatsby for a website build. And a great way to start for marketers is, you know, so many times marketers will have like a simple landing page that they'll want built out, or maybe they're doing a product release and they'll have a special website for that smaller site and that's a great way to do like a proof of concept with Gatsby. Use Gatsby for that landing page, for that site and see how it goes.

Mario: Excellent. Excellent. Thank you so much that. We want to thank you for taking the time out of your busy schedule to join us and talk about Gatsby for marketers and how that can benefit them. Good luck with all the new features that are coming out from Gatsby.

Linda: Thank you so much. Thanks for having me.

Mark: Okay. And that's it for today's show. Thanks for joining us. If you're looking for more useful tips, technical takeaways and creative insights, visit mediacurrent.com/podcast for more episodes and to subscribe to our newsletter. Thanks for playing.

Related Insights