How to create a fast, secure, and SEO-oriented landing page for free
Captain's log, stardate d667.y36/AB
When working with product companies, one of the most requested features we get for every project is the landing page.
Every product or services company requires a landing page that will attract new potential customers and convert them into paid users, newsletter subscribers, beta testers, etc. Here's how you can do it efficiently and for free.
This is what a static site looks from the inside. It'll look better on the outside!
What is a landing page?
Let's start with a definition. According to Unbounce, a landing page is any website a visitor can arrive at or "land on". It is, therefore, the first thing a visitor will see when loading your website.
Research proves that most visitors will bounce off a website if they don't like it or if it loads too slow. Therefore, landing pages should be optimised to increase the percentage of conversion from mere visitors to paying customers.
Kissmetrics say that you've got a maximum of 8 seconds to convince your visitors before they switch to the next website and that a difference of just one second when loading the page can make your conversion rate drop significantly.
Therefore, we suggest that your landing pages should load fast and be easy to find in order to increase your chances of success.
Use static site generators
When we want to build fast websites, we use static site generators like Middleman and Jekyll.
How do they do it?
What are the differences between Jekyll and Middleman?
There's a lot of literature on the internet comparing these two static site generators, but we will summarise it here for you.
Jekyll is more complete out-of-the-box, as some of the most-used functionalities come with the base package already, like the blog.
However, Jekyll is more difficult to extend if you want to develop functionalities not contemplated by the base software, as it uses a very intuitive yet rather limited templating system called Liquid (used by Shopify, among others). As much as it might be limited, it can take you virtually anywhere once you learn it.
Jekyll is also the most popular static site generator, which means it's got a broader user base and lots of documentation.
Middleman, on the other side, is more developer-oriented. Instead of Liquid, it uses ERB, the Rails templating system, which makes it more flexible to implement new functionalities (even more so if you are a Ruby on Rails developer!). However, the base package does not include the blog or other basic functionalities, and one needs to install them one by one by invoking their respective Rails gems.
Middleman, while not as popular as Jekyll, is faster, as it's been optimised using Rails assets out-of-the-box.
In all truth, Jekyll and Middleman have a lot in common: they both use Ruby as the base language, use Markdown to process content, allow templating/layouts/includes, use Frontmatter to define metadata for every page, use YAML for almost all configuration files, include Sass as a CSS preprocessor and more.
TL;DR? If you are not a non-tech person you might want to opt for Jekyll. If you are a developer, you will choose Middleman.
Why are static sites fast?
The main advantages for you are very clear: by not having database nor backend, there's no processing, therefore your website will be blazing fast, as it does not need to send petitions to the backend and process them.
The website will not lag because the server is processing too many petitions, and will not break because it's overloaded. It just won't happen. Moreover, by loading the content of the site once, you will always have it in your cache, thus ensuring a fast browsing experience.
Obviously, there are some drawbacks to using these tools. By not having a backend you won't be able to perform server-side processing. If you want to have forms, payment platforms, search and other stuff, you will have to externalise it using third-party apps. However, we're talking about sites with only static content that might lead the user to perform a certain action (which might happen elsewhere) so most likely we won't be needing that.
Why are static sites secure?
This is actually an advantage to you as a site owner, rather than to the visitor.
By not having a database or a backend, no one will be able to break into it using security breaches. Since there are no username/password combinations to log in, no one will be able to impersonate real users by force-generating these combinations.
Why are static sites SEO-oriented?
Search engines take loading times into consideration when generating the ranking scores. Therefore, Google will up your site in the search results list if it loads fast.
Moreover, the main search engines also favour sites that deliver a good mobile experience to visitors. Since both Jekyll and Middleman offer mobile-first templates, you'll be able to profit from this for your site. Plus, neither of them include rubbish HTML into your code like most CMS's do.
Last, but not least, by using the templating system and the configuration files you can configure your site to be SEO-optimised by:
- Changing the URL structure to your liking.
- Configuring the blog posts' permalinks.
- Implementing schema.org, Twitter cards and Facebook Graph very easily.
- Adding metadata information to every page and blog post.
- Configuring canonical URLs for multilanguage sites.
Why are static sites free?
We have saved the best for last.
One of the best things about Jekyll and Middleman, and therefore static sites, is that you can host them in Github Pages for free.
Github Pages is a hosting service for static sites. It is free for every Github user (most developers are) and will allow you to get your website online, with your custom domain, for free. Our website is hosted in a Github Pages, for instance. Yes, this very one you are reading right now!
Check Github's tutorials to learn how to use Github Pages to host your static site for free!
To sum up, using Jekyll and Middleman to generate static sites is good for your landing page because it is fast (low loading times), secure (no way to hack them), SEO-oriented (optimise to your heart's content!) and free (no server costs).
We hope we have helped you to decide what tools to use to create your next landing page.
If you have an idea for a project or need help with your Middleman or Jekyll sites, you can drop us a line for a free quote (no obligations!). We'll be happy to help!