Voice of Developer (VoD): Landing Page Design, Building the Ultimate Landing Page

http://www.toptal.com/

BY LÁSZLÓ MONDA - FREELANCE SOFTWARE DEVELOPER @ TOPTAL

When I started to implement the Ultimate Hacking Keyboard, I wasn’t very marketing savvy. As an engineer, all I could see ahead was product development and technical challenges. However, marketing is just as important and must not be overlooked. A good landing page is a must-have.

Luckily for us, we realized that there’s a lot to do before we start our crowdfunding campaign, and an attractive site could turn this otherwise idle time to our advantage by capturing people’s attention, generating more subscribers and priming us for the campaign.

So, the development of the Ultimate Landing Page for our 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 raise a number of important points, like “above the fold” content should load in a snap, be relevant and contain a form to gather leads.

The Arduino-based Ultimate Hacking Keyboard tries to be different, and so does its landing page.

While most of these landing page design rules are important, I want to touch on a number of other aspects of our landing page. A lot of work went into choosing and integrating various third-party services and technologies that work behind the scenes, so I’ll talk about these.

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 have to 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.

This is our landing page trailer video on Vimeo:

Ultimate Hacking Keyboard Trailer from Ultimate Hacking Keyboard on Vimeo.

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 utilizing 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.

This is how our keyboard looks in Sketchfab:

Check out why our landing page relies on Sketchfab for 3D content.

Creating 2D Animation

One of the major advantages of our keyboard is that it dramatically reduces hand movement. We wanted to visualize 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.

2D animation is an important component of landing page design, but it's not as easy as it sounds.

Creating this landing page animation was certainly more time consuming than we expected, but the end result looks nice.

Sometimes you have to 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 dialog, subscription and confirming the subscription, are all events that we log. Mixpanel can build funnels out of these events and visualize conversion rates, making things measurable so that we can act upon the numbers.

Clicky is great at a number of 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 visualize real-time visitor activity on a map, on a summary screen, or a 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.

Error Logging

Websites are getting more and more JavaScript-heavy, so much so that critical features of your site may depend on it. In our case, the subscription dialog is triggered by JavaScript code.

When implementing the subscription feature, I tested it on major browsers and sat back with confidence, believing that I’ve done my part. Later on, I got an email from a visitor complaining that the landing page subscription feature doesn’t work.

As it turned out, the visitor in question used Adblock Plus in its strictest mode, which blocked the Clicky analytics script. Unlike other analytics services, Clicky’s embed code wasn’t resilient in this respect, so upon logging the subscription action and referencing the Clicky object, the code generated an error.

After this incident, I started to think hard about how to avoid such situations in the future. It occurred me that I should use the global window.onerror event handler to catch such errors and log them. Then, I searched for suitable logging services, found many, and ended up choosing Errorception.

I love Errorception because it does one job and does it very well; its user interface is minimalistic and functional, the support is great and it simply provides a lot of bang for your buck. One can look into the individual errors to investigate stack traces along with other information.

Since integrating Errorception, I’ve resolved about a dozen bugs some of which were very unlikely and unexpected. For example, once I got a localStorage related error, as it turned out, when Safari is in private browsing mode localStorage.setItem() results in an error.

I think it’s impossible to account for every such outlier case, and only logging can reveal them.

The Build Process

The index page started out as a single HTML page, hosted in WordPress, containing all the CSS, HTML and JavaScript code. In the beginning this was a feasible solution, but as it grew, it started to become a maintenance burden and a more modular approach was needed.

I ended up splitting the CSS, HTML and JavaScript code, resulting in a number of files. Then I converted the CSS files to LESS files to further increase maintainability. Finally, I needed a build process to assemble all these tiny files.

Check out our landing page build process, step by step.

Now the landing page build and deploy process looks like this:

• gulp-less takes the LESS files and outputs a single CSS file.
• gulp-browserify merges the JavaScript files as a single JavaScript file.
• gulp-file-include merges the HTML files as one HTML file.
• gulp-concat links the above into a master template.
• gulp-ssh uploads the master template to the server.
• gulp-ssh calls a node.js script on the server which generates multiple landing pages per ad campaign based on the master template and a spreadsheet.
• gulp-ssh calls wp-cli on the server to update the landing pages.

The above is a slightly simplified description because this process is not purely sequential. Various gulp tasks depend on each other and watchers are set up so upon modifying a file only the dependent files get rebuilt.

Optimizing For Performance

Performance matters a whole lot, especially if your landing page gets Slashdotted and you get 260 visitors simultaneously, like we did as can be seen above. Luckily, our $20 per month Linode VPS performed like a champ without breaking a sweat, although it wasn’t exactly luck to begin with, so let me share some tips.

Use nginx instead of Apache. Apache is a memory hog and I was getting daily disk IO threshold notifications from Linode because Apache was trashing. I’ve 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. Instead of generating pages from MySQL on-the-fly, it saves them as static files and serves the content of those files.

Image lazy loading is your friend, especially if your page, like ours, contains a lot of images. We’re using the WordPress Unveil Lazy Load plugin.

You can lazy load not only images but any assets. If a section of your page depends on an additional script you can lazy load it when it gets within the viewport. You can check viewport visibility with the jQuery inview plugin and load the script with jQuery.getScript() or with any other script loader.

Final Words

I touched on a lot of landing page design issues in this post, possibly too many for such a brief overview, so let me sum up the most important points:

• Don’t only use text content, but include rich media like video, 3D and 2D animation. It 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 (and will) 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.

This article is intended to be a glimpse into landing page design and deployment from a number of aspects, and as such, it’s not supposed cover everything in detail. In any case, I hope it gives you a couple of ideas and you find it useful and time-saving.

I always strive to learn more and improve things further so you’re welcome to visit our landing page at UltimateHackingKeyboard.com and give me additional feedback in the comments below on how to improve our site.