How to create a fast, secure, and SEO-oriented landing page for free
Captain's log, stardate d667.y36/AB
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.
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.
When we want to build fast websites, we use static site generators like Middleman and Jekyll.
Both Middleman and Jekyll create static sites, which means that the sites they generate have nor backend neither databases. They're pure HTML, CSS and JavaScript.
Long story short, both tools define a site structure that will compile to static content (the aforementioned HTML, CSS and JavaScript) so you can deploy it anywhere without having to install PHP, Java, Ruby or mess with server setups.
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.
As mentioned above, both Jekyll and Middleman compile to HTML, CSS and JavaScript files, hence not needing to install anything.
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.
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.
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:
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!
We work a lot with web applications, and we need to apply SEO everywhere. Here's what we do.
Read full article
As our company grows, so do our projects and clients, and not all of them can be developed with out-of-the-box solutions. Thus, we created a bespoke frontend framework for ourselves.
Read full article
Schema.org has been around for some years now, but recently they introduced a cleaner implementation that doesn't mess up with your code so much as the first one, this time by using JSON.
Read full article