So far, we've been making great progress. We've authenticated our users and set up our billing logic. Now, let's move on to making a beatiful and blazing fast landing page, like the one I made for FavoritesAPI.
There are a ton of templates and software to create landing pages with limited effort. The most important things (in my opinion) are that you:
- rely on a CDN
Just as importantly, you need to rely on a CDN to ship your landing page site. CDNs (or content delivery networks) allow you to easily host your content around the world. Without a CDN in place, your users would need to go all the way to your server in order to fetch your content. With a CDN, they will hit a server that has cached your content much closer to where they live.
Now that we've covered how we want our landing page to perform, let's talk about what we want it to contain.
Our #1 goal when constructing a landing page should be to properly inform our potential customers about the benefits of our service. They should quickly get the answers they are looking for, including:
- What benefits your service will provide
- What sacrifices they will need to make (cost, time, attention, etc.)
On top of having their questions answered, they should also have an action to take. This could be signing up for a waitlist, giving you their email, or paying for your product.
When building FavoritesAPI, I wanted the user to easily be able to scan my landing page to get the necessary information. The first thing they'll notice is the tag line, which is meant to give them a memorable hook into the product's purpose. Next, they'll want to know more specifically how that benefit is being provided. If you take a look at the landing page, you'll notice that your eye is drawn first to the tag line, and next to any of the bolded text. All of this bolded text is helpful information - how much the API costs, how much you will save, or how to consume the API. The unbolded text can be thought of as filler. If the user is willing to spend more time, they can peruse it, but it shouldn't be necessary.
The user should know your benefits and sacrifices in the first 10 seconds on the page
If they have to dig deep to figure those out, there's little chance they will go further.
Deployment and Hosting
This is probably a good time to talk about how your frontend landing page should be hosted, as opposed to your backend application. I prefer to keep the two separate with completely distinct Github repos and deployment pipelines. All of my backend code is hosted at api.favoritesapi.com or app.favoritesapi.com, while the landing page is on the base domain. This may seem like an unnecessary complication, but your marketing material has completely different needs than your backend code. Your landing page needs to be incredibly performant and rely on a first-class CDN. On the other hand, your backend code needs to be easy to deploy first and foremost. Keeping the two separate will also make it easier to make future changes to the landing page.
Personally, I enjoy using Netlify to deploy simple static sites. It is incredibly easy to integrate with Github, and I've found their CDN to be great. Deploying is as easy as
git push. If you decide to go with Netlify (or a similar service), you will also need to configure your domain registrar to point to their DNS servers in order to use a custom domain.
This has been a cursory overview of how I construct my landing pages. Next time we'll be tying together billing and authentication with an email layer. Thanks for reading!
If you've got any questions or suggestions, reach out to me at firstname.lastname@example.org