Landing Page Design: Building the Ultimate Landing Page

Creating the best and most efficient landing page is a hard task to do. This guide might help you get through with it. This is a guest-post by Toptal’s writer Laszlo Monda.

The focus of this landing page guide will be technical. My goal is to help other developers narrow down their search for the right third-party services and technologies, which they will deploy in their landing page designs. This will, hopefully, help them save time and money, 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. It’s not a technical challenge from a web perspective, but it is an investment of other resources, namely time and money. We created about 12 iterations of our landing page trailer video, gradually refining every little detail. The design process was exhausting but very rewarding. I consider this trailer video to be the crown jewel of our landing page which differentiates us from the pack.

Please bear in mind that high-quality content creation is expensive. If you want the best possible results, you will need to outsource the work to professionals, and obviously, start by making sure you can afford it. Depending on what you need, and what sort of budget you have, you could get away with an in-house video. It depends on your skill set and the type of landing page your plan to design.

We settled on a dynamic 3D animation, demonstrating the basic functionality of our keyboard on our landing page. However, if you need a 2D animation of an app or web service, or if you need camera footage, the process will be somewhat different and maybe less challenging than ours.

Once you have a video made, you must host it somewhere, which leads us to some options.

YouTube needs no introduction, as it is the undisputed market leader and a synonym for video on the web. It’s a reasonable choice that would have worked well for us, but we didn’t find its embedded player to be aesthetically pleasing.

Vimeo was an obvious second choice. It features a super clean, elegant, minimalistic design. It’s known for hosting quality content and for its superior high-definition. It was love at first sight, so we ended up choosing it for our landing page.

Wistia is another popular choice among marketers. It provides advanced features like video heatmaps that show you which parts of your videos have been watched, skipped and rewatched. It would have been a great choice, but it doesn’t support full HD quality, a deal-breaker for us.

It’s worth delving into the APIs of these services to better capture the attention of visitors. For example, using the Vimeo player JavaScript API we made the “I want one” buttons on our site pulse three times in a row right after our trailer ends. Used properly, little tweaks like this can increase the conversion rate.

To make matters even more complex, embedding videos on responsive sites is no easy matter. The video has to scale properly, and the experience must be fluid. It can be done by utilising some not-so-obvious CSS tricks.

Hosting 3D content

In order to give our landing page visitors a more immersive experience, we wanted them to be able to explore our keyboard in 3D. There are a few WebGL-based services created specifically for this purpose.

Sketchfab is the most popular of these services. It’s easy to master, provides a lot of visual settings, and is embeddable into a wide range of popular sites, which is why we chose it. However, depending on your needs, you may want to check out a couple of alternatives.

Verold Studio boasts some advanced features, such as animation and interactivity. I’m sure it’s the right choice for many, but we couldn’t import our CAD model into it.

The most minimalistic and simplistic of all WebGL services is p3d.in, but it didn’t support the high-resolution textures used in our 3D model, which was a deal-breaker. Also, it seems that it’s not possible to rotate the model until the textures are fully loaded, which doesn’t result in a great user experience.

Creating 2D animation

One of the major advantages of our keyboard is that it dramatically reduces hand movement. We wanted to visualise this on our landing page by putting the UHK and a regular keyboard side-by-side and displaying an animation. Implementing this wasn’t as simple as it sounds.

Using an embedded video did not only feel like overkill, but it would have to be rendered first, which is extra work. Animated GIFs weren’t a viable solution either given their huge size and limited palette. Canvas would work, but I found SVG to be even better suited for this purpose because the hand objects can be separately moved without affecting the rest of the graphics.

Sometimes you must make your way through cross-browser issues, JavaScript library bugs and nearly endless technical challenges just to make a seemingly obvious thing work. Never underestimate the number of things that can go wrong!

Real-time analytics

Everybody uses Google Analytics and we are no exception, but it’s not specifically built for real-time operations; there are better candidates for this purpose.

Chartbeat is great at notifying us when the site exceeds certain thresholds, most notably the number of simultaneous users on our site. Every now and then someone links our site in a forum, which generates a sudden traffic spike. Thanks to Chartbeat, we immediately know about such events, and able to join the ongoing conversation early on.

Mixpanel helps us gather and analyse events. Site visits, opening the subscription dialogue, subscription and confirming the subscription, are all events that we log. Mixpanel can build funnels out of these events and visualise conversion rates, making things measurable so that we can act upon the numbers.

Clicky is great at several things and we especially love its site heatmaps feature, which reveals where users click on our site. Based on the results, we can adjust the layout of the site, change its content or redesign it to achieve the desired outcome.

HotJar enables website owners to record the interactions of their users. It saves every mouse and keyboard action, and constructs videos out of them so that one can watch what visitors do on the site. Yes, it’s the most privacy intrusive of all, so much so that it’s almost scary!

I surely couldn’t do justice to these services by singling out one because all of them offer so much. Most such services can visualise real-time visitor activity on a map, on a summary screen, or in visitor list, along with lots of metadata such as the referrer URL, operating system and screen size.

I believe that these are some of the best real-time analytics services out there, but there are others, so if you have some specific requirements, Google search for alternatives.

Book an on-demand Q&A session where we answer all further questions you may have about this write-up.

About the guest blogger:

László is a full-stack developer experienced in a wide range of languages and frameworks. He boasts a system-wide understanding and comfortably moves across the various layers of the stack.

About Total:

Toptal is a marketplace for top developers, engineers, programmers, coders, architects, and consultants. Top companies and start-ups hire freelance developers from Toptal for their most mission-critical projects.