Building great Web Experiences with the JAM Stack

The first websites that I have built (over a decade ago) were more or less static pages that I assembled by putting together pieces of code from all over the web 🙇🏽‍♂️. I was playing around until I achieved what I had in mind. Today there are far better ways to build websites / landingpages than throwing some hardcoded php & HTML files on a server.

However, before we look at some serious options to realize the page of your dreams, I would like to take the opportunity and give you a quick Sum-Up of what you always need to do before you even think about design and code.

Simple Todo's before building a Website / Landingpage / Webapp

  1. Create a persona first: You need to know WHO you are building this page for, otherwise you will walk into wrong directions right from the start. There are great templates out there on how to build a Persona. Just google it
  2. Understand your persona's needs: I cannot stress enough how important it is to spend time on understanding the needs and barriers of your targeted persona. Think about the context that your visitors will be in, when they find your page: Will they be on the way to work, using their mobile device, will they search for your product or service during working hours? Again, there are great resources online to work on these questions in workshop formats with your team (Design thinking, User stories etc.). Make sure to spend time on these things, rather than on a fancy design.
  3. What is your goal? Do you want your visitors to fill out a form, a survey, sign up for your product, your newsletter.. Whatever it is, make sure that your goals is measurable.
  4. Plus: Do some research on keywords and define the channels that you will get your traffic from: Without traffic no leads, if you have no clue where your traffic will come from, stop here and please don't build anything. It will save you some frustration.
  5. Now you are ready to think about the next questions: How should the page look like and finally: How can you get it live?

Designing a Website

Okay, so you have your goals, your persona, her needs & barriers and you know where to get the traffic from. Now it's time to think about the actual content of your Landingpage. By the time of this writing, there are 72.200.000 Google results for "Landing page content strategy", so I will save you some reading and me some writing time and won't count all the standard tipps like "Keep it simple", "Write a compelling headline" etc. I still recommend reading (and implementing) all these tipps, but I don't think that I can sum them up in a better way then these articles do. So the only thing that I would like to add is: Remember that you are building this page for real humans. Sometimes it's easy to forget that your visitors are people like you and me. So take your Landingpage ideas for a walk and get feedback from real customers, your colleagues, friends, family etc. before you start building.

Ways how to build your Website

There are so many ways and great tools to build a website today that I could spend hours on listing pro's and con's for this or that approach. But in the end you can put all of these ways into a few categories. And choosing the right category often comes down to answering the tradeoffs between flexibility and speed of development/design.

A) Using a standard CMS like Wordpress, Joomla or similar. Even though Wordpress is still used as the go-to solution for websites, there are many reasons to not use it as your CMS for building that great new web experience: 1) Security: Since wordpress is so big (and old), it makes a lot of sense for hackers to learn about the system specific vulnerabilities and how to hack it. 2) Cluttered: Since wordpress has to serve thousands of different types of websites, it offers thousands of features that you don't need. 3) Speed: Related to point two, Wordpress is not as fast as other options (see later) 4) Flexibility: Of course, you can start your project with a nice theme and be like "yeay! look at my shiny new website!". But soon enough you will find out that it's not so much fun to frickle around with that theme and find out that it does not fit exactly your needs. I'd rather start fresh and minimal and build things up from there.

B) Using one of the countless no-code solutions to build Landingpages: In the past years we have seen the rise of many alternatives to simply build beautiful Landingpages. Many of them offer a great UX, more beautiful templates then Wordpress and a gentle learning curve. The problem with all no-code solutions is the missing flexibility. You will always be locked into their eco-system and usually you build your page upon existing templates and end up tweaking around for hours to achieve that certain style. Still, for many usecases, this is a valid and good approach, and it is the recommended one for getting things off the ground.

I have used these tools here and would recommend them to you in the following order:

  • Landen.co: Awesome to get started, asks you a few questions instead of just letting you choose from templates that later turn out to be a wrong choice
  • Webflow: Allows for more flexibility than Landen.co - so a little bit more developer friendly. Still it is not as much fun as coding. Has its own CMS integrated and even offers an E-Commerce solution out of the box.
  • Leadpages, Instapage: Simple and focused more on conversation rate optimization
  • Tilda: More design oriented, very simple and intuitive interface

All of them have options to easily AB test your page, include tracking etc. Whatever you end up choosing, make sure that you can live with the restriction of less flexibility. But especially for testing your business idea, these are great ways to start.

C) Purely code based: If you have a good Frontend Developer at your disposal, she might tell you that the fastest way to realize your beautifully designed page is by just coding it. She would start from 0, add some CSS framework like Bootstrap, a component based Frontend Framework like React or Vue and in a few hours/days you can have your customized page online, served for example from an AWS S3 Bucket via Cloudfront. The biggest Pro of this approach is that your page is completely customizable and fast. You don't have to make compromises like starting with a template and customize it to somehow make it look like in the designs. The offside with this approach is that you have no control over the content (very bad). You always have to ask your developer friends to push an update...

D) No worries, there is a better way to build your websites these days. And it combines the best of all of the aforementioned approaches. A headless CMS built on top of the JAM Stack means that you can build your Website from the ground up, using REAL code (your dev's will be happy) and all the flexibility in the world, plus adding the power of a beautiful CMS Backend for your Editors so that they don't need to look at code. JAM stands for JavaScript, APIs, and Markup. It describes a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. With an app built on the JAMStack, you serve generated HTML instead of rendering documents live on the server. This ensures faster loading times, reduces security risks and is a solution that is easy to integrate with a CDN. The great thing about the JAMstack approach is that you can easily pull in content from third-party APIs to manage your website's content. These systems are called "Headless CMS" and they are either git-based (content is saved in your git-repo) or API based (content is stored on a server and served through a fast API). Together this means:

  • Faster performance
  • More secure
  • Less expensive
  • Better developer experience
  • Scalability in-built

You can start today to build your own website on top of the JAM Stack. This page for example is built with the following tools: Gatsby.js (React based static side generator) and Netlify CMS (git based CMS).

Have fun!