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.
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.
Vimeo is the way to go for landing page video.
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.
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.
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.
All suggestions,
constructive criticism and ideas will be appreciated.
This article was
originally published on Toptal
About Author
László Monda
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.
Email: jordan.lyons@toptal.com
xxxxx
%20in%20India.png)
