{"id":289,"date":"2016-11-08T12:36:17","date_gmt":"2016-11-08T10:36:17","guid":{"rendered":"https:\/\/www.nonamehosts.com\/blog\/?p=289"},"modified":"2016-11-08T12:36:17","modified_gmt":"2016-11-08T10:36:17","slug":"landing-page-design-building-the-ultimate-landing-page","status":"publish","type":"post","link":"https:\/\/www.nonamehosts.com\/blog\/tutorials\/landing-page-design-building-the-ultimate-landing-page\/","title":{"rendered":"Landing Page Design: Building the Ultimate Landing Page"},"content":{"rendered":"

When I started to implement the Ultimate Hacking Keyboard<\/a>, I wasn\u2019t 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.<\/p>\n

Luckily for us, we realized that there\u2019s 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\u2019s attention, generating more subscribers and priming us for the campaign.<\/p>\n

<\/p>\n

So, the development of the Ultimate Landing Page<\/a> for our Ultimate keyboard began in earnest.<\/p>\n

How This Landing Page Guide Differs From The Rest<\/h2>\n

When Google-searching for \u201clanding page,\u201d you\u2019ll find dozens of excellent articles that raise a number of important points, like \u201cabove the fold\u201d content should load in a snap, be relevant and contain a form to gather leads.<\/p>\n

\"Landing<\/p>\n

The Arduino-based Ultimate Hacking Keyboard tries to be different, and so does its landing page.<\/div>\n
<\/div>\n

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\u2019ll talk about these.<\/p>\n

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.<\/p>\n

Landing Page Video Production And Hosting<\/h2>\n

Presenting video on the web is easier than ever, and yet, few sites use it. It\u2019s 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<\/a> 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Once you have a video made, you have to host it somewhere, which leads us to some options.<\/p>\n

YouTube<\/a> needs no introduction, as it is the undisputed market leader and a synonym for video on the web. It\u2019s a reasonable choice that would have worked well for us, but we didn\u2019t find its embedded player to be aesthetically pleasing.<\/p>\n

Vimeo<\/a> was an obvious second choice. It features a super clean, elegant, minimalistic design. It\u2019s 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.<\/p>\n

Wistia<\/a> 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\u2019t support full HD quality, a deal-breaker for us.<\/p>\n

This is our landing page trailer video on Vimeo<\/a>:<\/p>\n

\"Vimeo<\/a><\/p>\n

Vimeo is the way to go for landing page video.<\/div>\n
<\/div>\n

It\u2019s worth delving into the APIs of these services to better capture the attention of visitors. For example, using the Vimeo player JavaScript API<\/a> we made the \u201cI want one\u201d 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.<\/p>\n

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<\/a>.<\/p>\n

Hosting 3D Content<\/h2>\n

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.<\/p>\n

Sketchfab<\/a> is the most popular of these services. It\u2019s 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.<\/p>\n

Verold Studio<\/a> boasts some advanced features, such as animation and interactivity. I\u2019m sure it\u2019s the right choice for many, but we couldn\u2019t import our CAD model into it.<\/p>\n

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

This is how our keyboard looks in Sketchfab<\/a>:<\/p>\n

\"Check<\/a><\/p>\n

Check out why our landing page relies on Sketchfab for 3D content.<\/div>\n
<\/div>\n

Creating 2D Animation<\/h2>\n

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\u2019t as simple as it sounds.<\/p>\n

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\u2019t 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.<\/p>\n

\"\"<\/p>\n

2D animation is an important component of landing page design, but it’s not as easy as it sounds.<\/div>\n
<\/div>\n

Creating this landing page animation was certainly more time consuming<\/a> than we expected, but the end result<\/a> looks nice.<\/p>\n

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!<\/p>\n

Real-Time Analytics<\/h2>\n

Everybody uses Google Analytics and we are no exception, but it\u2019s not specifically built for real-time operations; there are better candidates for this purpose.<\/p>\n

Chartbeat<\/a> 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.<\/p>\n

Mixpanel<\/a> 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.<\/p>\n

Clicky<\/a> 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.<\/p>\n

HotJar<\/a> 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\u2019s the most privacy intrusive of all, so much so that it\u2019s almost scary!<\/p>\n

I surely couldn\u2019t 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.<\/p>\n

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.<\/p>\n

\n
\n
\n
<\/div>\n
\n
\n
No spam. Just great engineering and design posts.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/form>\n<\/div>\n

Error Logging<\/h2>\n

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.<\/p>\n

When implementing the subscription feature, I tested it on major browsers and sat back with confidence, believing that I\u2019ve done my part. Later on, I got an email from a visitor complaining that the landing page subscription feature doesn\u2019t work.<\/p>\n

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\u2019s embed code wasn\u2019t resilient in this respect, so upon logging the subscription action and referencing the Clicky object, the code generated an error.<\/p>\n

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<\/code> event handler to catch such errors and log them. Then, I searched for suitable logging services, found many, and ended up choosing Errorception<\/a>.<\/p>\n

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.<\/p>\n

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

I think it\u2019s impossible to account for every such outlier case, and only logging can reveal them.<\/p>\n

The Build Process<\/h2>\n

The index page started out as a single HTML page, hosted in WordPress, containing all the CSS<\/a>, 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.<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

Check out our landing page build process, step by step.<\/div>\n
<\/div>\n

Now the landing page build and deploy process looks like this:<\/p>\n