February 2017

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.

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

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.

Get your FREE copy of our 2017 digital trends ebook and SUBSCRIBE to our newsletter!

The Dark Side of A/B Testing: How to Test Your Site with a Bazooka

Testing a website is the most popular passing time for digital analytics experts. However, testing the right thing is harder than ever.

Website optimisation relies heavily on A/B or multivariate testing with digital analytics tools. However, if it comes down to testing, most of the experts test only minor comparisons on a site. But testing should go forward only if you test highly tangible differences; this is where you can learn something and open new frontiers. So instead of burning through your site with a bunch of matchsticks, use a bazooka instead and start some real flames.

Test What Matters and Test Less

Real productivity comes when you leave your comfort zone

You have read this many times we guess; your life starts after you leave your comfort zone. Well, that is the same with marketing. Technology made us busier and helped to boost our productivity, but it also killed a lot in the details. Meetings, chat, endless notifications, these are the time killers, and we haven’t even mentioned social media. Being busy is nothing, being productive is something. If you get lost quickly in the little details, non-productive testing comes up in the digital analytics space, and you find yourself in the situation where you test two ad copies with minor changes between and drawing conclusions where there is none, only pure randomness.

Test less and test what matters

Now that you have stayed away from little details, you can focus on the real issues. Test what matters only, and test way-way less. By stopped paying attention to things that do not matter in the details, you can focus on testing the important stuff.

Testing, its name is an experiment. And most of the scientific experiments are dead ends for 99% of their time, producing non-accurate results. In 1%, the science team has a eureka moment, usually when they slip away from the original focus of the experiment. This is the same with digital analytics testing when you test small changes on a site; you usually end of testing random outcomes. But when you test with tremendous tangible differences, you might will learn something on your business and customers.

Be Patient with your RPG

Science is a game of patience and marketers are not scientists. There was a study with an investment firm; they concluded that their most successful investors are either dead or non-active. The reason for this is because live and active traders are impatient and burn their positions with their little actions. It’s the same with testing. So, when you set up a testing experiment, you have your goals, you made a tangible difference to the chamber and started the testing.

Don’t even look at the test until you have reached your goal. Don’t change the variables. Don’t change the tested markers. Don’t even open the testing chamber. Be patient. Draw conclusions only when the testing has finished, and you have all your figures.

Remember: testing needs a perfectly clean environment

Most experts fail in their tests because the environment they are testing in is imperfect. The site that they are testing has huge usability issues. The testing material isn’t ready yet. There is nothing to be tested. The traffic is not there so the figures are so small that drawing conclusions would be simply just guessing in the cloud.

Be ready first and sort your stuff out. Only test when you need to develop even further. Further means, you already have a pretty solid ground: a good site, with a high number of visits and only minor usability issues.

All in all, these are the simple steps you need to follow when you do testing:

  • Test with an RPG: test only tangible vast differences
  • Test only when you have scientist mindset: be patient and be ready to fail
  • Test only in clean environment: your lab/site should be stable and established

Learn more about A/B Testing and Multivariate Testing. Visit the Insights Academy Today!

Book an on-demand Q&A with us where we answer all questions you may have about this topic.

Get your FREE copy of our 2017 digital trends ebook and SUBSCRIBE to our newsletter!