Ever heard the saying “Cart before the horse”? Or “You have to crawl before you can walk”? Or “You can’t put lipstick on a landing page with 27 links”?
That last one may be exclusive to landing page software employees, but the sentiment is the same. Unless the foundation of your landing page is strong, any optimization beyond that will be a waste of your time—and ad spend. Because even the slickest, fanciest landing page will leak precious conversions if it lacks certain crucial elements.
For the sake of those ad dollars, let’s go back to basics.
In collaboration with our friends (and customers!) at Skillshare, we’ve created a free video crash course on the fundamentals of a high-converting landing page. Whether you’re building your first page or just want a refresher, you’ll get a checklist to set up each of your pages for success.
The full course, Creating Dedicated Landing Pages: How to Get Better ROI for Your Marketing Spend, is hosted by Unbounce VP of Product Marketing Ryan Engley and comprised of 11 videos totalling a quick 31 minutes. Sign up for a free Skillshare account and dive right into binge mode, or keep scrolling for an overview of what every landing page you create should have.
Bonus: Skillshare is offering 2 free months and access to thousands of other marketing classes just for signing up through our course.
Who’s it for?
Anyone running marketing campaigns! But in particular, those who execute on them.
Whether you’re responsible for launching paid advertising campaigns, build and design landing pages yourself, or work with designers and copywriters to create them, this course will ensure you’ve covered every base to create a compelling and high-converting post-click experience.
In a nutshell: It’s for anyone who runs paid marketing campaigns and wants to get the most bang for their buck.
What will it teach me?
In 11 videos, Ryan will take you through the process of creating a persuasive marketing campaign, cover each step of building a successful landing page within it, and explain the “why” behind it all so you’re taught to fish instead of just being handed the fish.
A few tidbits to start
If you’re thinking, “What’s wrong with sending people to my homepage?” then Attention Ratio is a great place to start.
“Your website is a bit of a jack of all trades,” Ryan explains. “Usually it’ll have a ton of content for SEO purposes, maybe information about your team…but if you’re running a marketing campaign and you have a single call to action in mind, your website’s not going to do you any favours.”
The more links you have on your page, the more distractions there are from your campaign’s CTA. You don’t want people to explore—you want them to act. And an Attention Ratio of 1:1 is a powerful way of achieving that.
Somewhat self-explanatory, your Unique Selling Proposition describes the benefit you offer, how you solve for prospects’ needs, and what distinguishes you from the competition. This doesn’t all have to fit in one sentence, rather, it can reveal itself throughout the page. But if you’re going to focus on one place to do the “heavy lifting,” as Ryan calls it, this place should be your headline and subhead.
Take Skillshare’s landing page for a content marketing course by Buzzfeed’s Matt Bellassai (if his name doesn’t ring a bell, Google him, grab some popcorn, and come back to us with a few laughter-induced tears streaming down your face). Without even looking at the rest of the page, you know exactly what you’ll get out of this course and how it will help you achieve a goal.
What’s more convincing than word of mouth? Since we don’t advise stalking and hiring people’s friends to tell prospects how great you are, the next best thing is to feature testimonials on your landing page. The key here is that you’re establishing trust and credibility by having someone else back you up.
Customer quotes, case studies, and product reviews are just a few of the many ways you can inject social proof into your landing page. Think of it as a “seal of approval” woven into your story that shows prospects you deliver on the promise of your Unique Selling Proposition.
Customer testimonials serve as the proof in your pudding.
Watch all 11 episodes of Creating Dedicated Landing Pages: How to Get Better ROI for Your Marketing Spend to set your landing pages up for success in less time than it takes to finish your lunch break. Beyond being 100% free, it’ll save you a lot of guesswork in building landing pages that convert and precious ad spend to boot. So settle in for a mini binge watch with a sandwich on the company tab—you earned it.
There’s a joke in the marketing world that A/B testing actually stands for “Always Be Testing.” It’s a good reminder that you can’t get stellar results unless you can compare one strategy to another, and A/B testing examples can help you visualize the possibilities. I’ve run thousands of A/B tests over the years, each designed to help me hone in on the best copy, design, and other elements to make a marketing campaign truly effective. I hope you’re doing the same thing. If you’re not, it’s time to start. A/B tests can reveal weaknesses in your marketing strategy, but they…
Live chat and chatbots are gaining popularity. And there is a good reason for that: modern businesses continue to look for innovative way to improve their customers’ experience while they search for answers to their queries in real time. While some have opted for live chat, others prefer a chatbot. But the intent remains the same: improving customer service. Which of these options is better suited for your business? Both have their distinct pros and cons. Although a human-powered, live support software is a common element on most websites these days, there has a been a lot of noise about…
Your best customers don’t just buy one product or use your service once. They come back again and again for more. Customer retention increases your customers’ lifetime value and boosts your revenue. It also helps you build amazing relationships with your customers. You aren’t just another website or store. They trust you with their money because you give them value in exchange. What does customer retention mean? And how can you achieve customer retention through relationship-building strategies? Let’s explore these concepts in depth and look at a few examples that you can apply to your own business. What is Customer…
Have you ever faced down a giant table or spreadsheet of data and thought, “I have no idea what to do with this”? As marketers we’ve all probably had those deer-in-the-headlights moments once or twice, where we’ve floundered to figure out what the hell we’re looking at. Crazy Egg was built on the premise of simplicity and ease of use, for those that I fondly like to call “Google Analytics-averse” – but there’s always room for improvement when it comes to helping folks switch from analysis to action mode. Whether you’re a UX designer, small business owner, SEO expert or…
Entrepreneurs are always trying to figure out how to engage their user more and boost their website’s conversion rate. One way to do that is through social sign-on, also referred to as social login or lazy sign-in. With social login, users can access your website using the social account IDs that they already have instead of setting up new login details for your website. And they don’t have to remember a new set of login credentials. Simply put, social login enhances a website’s user experience while allowing marketers to collect more accurate user data, including gender, age, interests, relationship status and a…
When it comes to understanding your audience, you can’t get more granular than a website click tracking tool. Instead of looking at big-picture metrics, you can drill down to the basics and get to know what works with your audience — and what doesn’t. Lots of site tracking tools exist, but website click tracking tools offer the most depth when you want to better understand user behavior. To see what I mean, visit a website you’ve never seen before. Just Google a broad topic, such as “marathon training” or “best thriller novels.” It doesn’t matter. Click on one of the…
Admittedly, Conversion Rate Optimization is not the most sexy term in the marketing world – but if you’ve ever run an A/B test where the variant won by a landslide, or made a website design change that led to a significant increase in product purchases, you know firsthand how exciting and powerful CRO can be in action. Marketers who specialize in conversion rate optimization are often a rare mix of analytical and creative; tactical, and intuitive. They need to get inside a customer’s head, but they also need to dive deep into data. Often, CRO professionals are tasked with: Reducing…
Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers). You can see a similar effect happen in CSS scroll-snapping between elements.
Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read article →
A good understanding of scroll bouncing is very useful as it will help you to decide how you build your websites and how you want the page to scroll.
Scroll bouncing is undesirable if you don’t want to see fixed elements on a page move. Some examples include: when you want a header or footer to be fixed in a certain position, or if you want any other element such as a menu to be fixed, or if you want the page to scroll-snap at certain positions on scroll and you do not want any additional scrolling to occur at the very top or bottom of the page which will confuse visitors to your website. This article will propose some solutions to the problems faced when dealing with scroll bouncing at the very top or bottom of a web page.
My First Encounter With The Effect
I first noticed this effect when I was updating a website that I built a long time ago. You can view the website here. The footer at the bottom of the page was supposed to be fixed in its position at the bottom of the page and not move at all. At the same time, you were supposed to be able to scroll up and down through the main contents of the page. Ideally, it would work like this:
It currently works this way in Firefox or on any browser on a device without a touchscreen or trackpad. However, at that time, I was using Chrome on a MacBook. I was scrolling to the bottom of the page using a trackpad when I discovered that my website was not working correctly. You can see what happened here:
Oh no! This was not what was supposed to happen! I had set the footer’s position to be at the bottom of the page by setting its CSS position property to have a value of fixed. This is also a good time to revisit what position: fixed; is. According to the CSS 2.1 Specification, when a “box” (in this case, the dark blue footer) is fixed, it is “fixed with respect to the viewport and does not move when scrolled.” What this means is that the footer was not supposed to move when you scroll up and down the page. This was what worried me when I saw what was happening on Chrome.
To make this article more complete, I’ll show you how the page scrolls on both Mobile Edge, Mobile Safari and Desktop Safari below. This is different to what happens in scrolling on Firefox and Chrome. I hope this gives you a better understanding of how the exact same code currently works in different ways. It is currently a challenge to develop scrolling that works in the same way across different web browsers.
Searching For A Solution
HTML And CSS Only Solutions
Absolute And Relative Positioning
One of the first things I tried, was to use absolute and relative positioning to position the footer because I was used to building footers like this. The idea would be to set my web page to 100% height so that the footer is always at the bottom of the page with a fixed height, whilst the content takes up 100% minus the height of the footer and you can scroll through that. Alternatively, you can set a padding-bottom instead of using calc and set the body-container height to 100% so that the contents of the application do not overlap with the footer. The CSS code looked something like this:
This solution works in almost the same way as the original solution (which was just position: fixed;). One advantage of this solution compared to that is that the scroll is not for the entire page, but for just the contents of the page without the footer. The biggest problem with this method is that on Mobile Safari, both the footer and the contents of the application move at the same time. This makes this approach very problematic when scrolling quickly:
Another effect that I did not want was difficult to notice at first, and I only realized that it was happening after trying out more solutions. This was that it was slightly slower to scroll through the contents of my application. Because we are setting our scroll container’s height to 100% of itself, this hinders flick/momentum-based scrolling on iOS. If that 100% height is shorter (for example, when a 100% height of 2000px becomes a 100% height of 900px), the momentum-based scrolling gets worse. Flick/momentum-based scrolling happens when you flick on the surface of a touchscreen with your fingers and the page scrolls by itself. In my case, I wanted momentum-based scrolling to occur so that users could scroll quickly, so I stayed away from solutions that set a height of 100%.
One of the solutions suggested on the web, and that I tried to use on my code, is shown below as an example.
This code works on Chrome and Firefox on macOS the same way as the previous solution. An advantage of this method is that scroll is not restricted to 100% height, so momentum-based scrolling works properly. On Safari, however, the footer disappears:
On iOS Safari, the footer becomes shorter, and there is an extra transparent (or white) gap at the bottom. Also, the ability to scroll through the page is lost after you scroll to the very bottom. You can see the white gap below the footer here:
One interesting line of code you might see a lot is: -webkit-overflow-scrolling: touch;. The idea behind this is that it allows momentum-based scrolling for a given element. This property is described as “non-standard” and as “not on a standard track” in MDN documentation. It shows up as an “Invalid property value” under inspection in Firefox and Chrome, and it doesn’t appear as a property on Desktop Safari. I didn’t use this CSS property in the end.
To show another example of a solution you may encounter and a different outcome I found, I also tried the code below:
This actually works well across the different desktop browsers, momentum-based scrolling still works, and the footer is fixed at the bottom and does not move on desktop web browsers. Perhaps the most problematic part of this solution (and what makes it unique) is that, on iOS Safari the footer always shakes and distorts very slightly and you can see the content below it whenever you scroll.
One approach of solving the issue of scroll bouncing is by preventing the touchmove or touchstart events on the window or document. The idea behind this is that the touch events on the overall window are prevented, whilst the touch events on the content you want to scroll through are allowed. An example of code like this is shown below:
// Prevents window from moving on touch on older browsers.
window.addEventListener('touchmove', function (event)
// Allows content to move on touch.
document.querySelector('.body-container').addEventListener('touchmove', function (event)
I tried many variations of this code to try to get the scroll to work properly. Preventing touchmove on the window made no difference. Using document made no difference. I also tried to use both touchstart and touchmove to control the scrolling, but these two methods also made no difference. I learned that you can no longer call event.preventDefault() this way for performance reasons. You have to set the passive option to false in the event listener:
// Prevents window from moving on touch on newer browsers.
window.addEventListener('touchmove', function (event)
, passive: false)
You may come across a library called “iNoBounce” that was built to “stop your iOS webapp from bouncing around when scrolling.” One thing to note when using this library right now to solve the problem I’ve described in this article is that it needs you to use -webkit-overflow-scrolling. Another thing to note is that the more concise solution I ended up with (which is described later) does a similar thing as it on iOS. You can test this yourself by looking at the examples in its GitHub Repository, and comparing that to the solution I ended up with.
After trying out all of these solutions, I found out about the CSS property overscroll-behavior. The overscroll-behavior CSS property was implemented in Chrome 63 on December 2017, and in Firefox 59 on March 2018. This property, as described in MDN documentation, “allows you to control the browser’s scroll overflow behavior — what happens when the boundary of a scrolling area is reached.” This was the solution that I ended up using.
All I had to do was set overscroll-behavior to none in the body of my website and I could leave the footer’s position as fixed. Even though momentum-based scrolling applied to the whole page, rather than the contents without the footer, this solution was good enough for me and fulfilled all of my requirements at that point in time, and my footer no longer bounced unexpectedly on Chrome. It is perhaps useful to note that Edge has this property flagged as under development now. overscroll-behavior can be seen as an enhancement if browsers do not support it yet.
If you don’t want your fixed headers or footers to bounce around on your web pages, you can now use the overscroll-behavior CSS property.
Despite the fact that this solution works differently in different browsers (bouncing of the page content still happens on Safari and Edge, whereas on Firefox and Chrome it doesn’t), it will keep the header or footer fixed when you scroll to the very top or bottom of a website. It is a concise solution and on all the browsers tested, momentum-based scrolling still works, so you can scroll through a lot of page content very quickly. If you are building a fixed header or footer on your web page, you can begin to use this solution.
What happens when nobody clicks on your call-to-action phrases and buttons? You don’t get any leads. Nor do you generate any revenue. That’s the opposite of the point, right? Which is why I tell business owners and marketers to take the time to refine their CTAs. A poorly-written CTA negates all the hard work you do for the rest of your marketing campaign. Someone who visits your website might be with you up until that point, then decide to bail on the conversion. So, how do you write call-to-action phrases that convert? What is the Psychology Behind CTA Phrases? From…