Building the Ultimate Landing Page

A good landing page is the cornerstone of online marketing campaigns, and since it is usually the first area users learn about new products and services.

It has to be well executed. However, leaving a good first impression is not easy. Everything has to look and feel right.

In this brief guide, Toptal Freelance Software Engineer László Monda explains what it takes to design and implement a good landing page, and how and his team put together a fresh and attractive landing page for their Ultimate Hacking Keyboard project.

So, the development of the Ultimate Landing Page for Ultimate keyboard began in earnest.

How This Landing Page Guide Differs From The Rest:

When Google-searching for “landing page”, you’ll find dozens of excellent articles that points a number of important things, like “above the fold” content should load in a snap, be relevant and contain a form to gather leads etc.

The focus of this landing page guide will be more technical to help other developers narrow down on their search for the right third-party services and technologies. This will help them save time and money both, which could otherwise be wasted on fruitless experimentation.

Landing Page Video Production And Hosting:

Presenting video on the web is easier than ever, and yet, few sites use it. Once you have a video made for your article, you have to host it somewhere, which leads us to some options as below:

• YouTube
• Vimeo
• Wistia

Hosting 3D Content:

In order to give our landing page users a more immersive experience, we wanted them to be able to explore our keyboard in 3D.

Some services as below:

• Sketchfab
• Verold Studio

Creating 2D Animation:

2D animation is the another important component of landing page design, but it is not as easy as it sounds.

Real-Time Analytics:

Everybody uses Google Analytics and we are no exception but it is not specifically built for real-time operations. There are better candidates for this purpose as below:

• Chartbeat
• Mixpanel
• Clicky
• HotJar

Error Logging:

Websites are getting more and more JavaScript-heavy now a days, so much so that critical features of your site may depend on it. To notify the error, use the global window.onerror event handler to catch such errors and log them.

Optimizing For Performance:

Performance matters a lot, especially if your landing page gets Slashdotted and you get 260 visitors simultaneously.

Use nginx instead of Apache because Apache is a memory hog and everyone was getting daily disk IO threshold notifications from Linode because Apache was trashing. Noone never yet had another such notification since using nginx + PHP-FPM.

WP Super Cache is the easiest and probably most profound way to make your WordPress site go faster.

Image lazy loading is your friend especially if your page contains a lot of images. You can use WordPress Unveil Lazy Load plugin.

Conclusion:

• Don’t only use text content but include rich media like video, 3D and 2D animation that will make you stand out and encourage visitors to share your ideas.
• Use real-time analytics so that you can swiftly react to sudden traffic spikes and join the ongoing conversation.
• Always log errors because there are a lot of things that can go wrong.
• Split your codebase into small pieces for easy maintainability and set up a build process to assemble the tiny pieces and deploy the bundle.
• Optimize performance so that your site will keep up even when encountering with the highest traffic.

Original content taken from Toptal.