Tag Archives: pages

How to Turn a Long Landing Page Into a Microsite – In 6 Easy Steps

Landing pages can get really long, which is totally fine, especially if you use a sticky anchor navigation to scroll people up and down to different page sections. It’s a great conversion experience and should be embraced.

However, there are times when having a small multi-page site, known as a microsite (or mini-site) can offer significant advantages.

This is not a conversation about your website (which is purely for organic traffic), I’m still talking about creating dedicated marketing-campaign-specific experiences. That’s what landing pages were designed for, and a microsite is very similar. It’s like a landing page in that it’s a standalone, controlled experience, but with a different architecture.

The sketch below shows the difference between a landing page and a microsite.

The landing page is a single page with six sections. The microsite has a homepage and 5 or 6 child pages, each with a persistent global navigation to conect the pages.

They are both “landing experiences”, just architected differently. I’ve noticed that many higher education landing experiences are four-page microsites. The pharmaceutical industry tends to create microsites for every new product campaign – especially those driven by TV ads.

What are the benefits of a microsite over a long landing page?

To reiterate, for most marketing campaign use cases, a single landing page – long or short – is your absolute best option. But there are some scenarios where you can really benefit from a microsite.

Some of the benefits of a microsite include:

  1. It allows more pages to be indexed by Google
  2. You can craft a controlled experience on each page (vs. a section where people can move up and down to other sections)
  3. You can add a lot more content to a certain page, without making your landing page a giant.
  4. You can get more advanced with your analytics research as there are many different click-pathways within a microsite that aren’t possible to track or design for on a single page.
  5. The technique I’m going to show you takes an Unbounce landing page, turns it into a 5-page microsite.

How to Create a Microsite from a Long Landing Page

The connective tissue of a microsite is the navigation. It links the pages together and defines the available options for a visitor. I’ll be using an Unbounce Sticky Bar as the shared global navigation to connect five Unbounce landing pages that we’ll create from the single long landing page. It’s really easy.

First, Choose a Landing Page to Work With

I’ve created a dummy landing page to work with. You can see from the zoomed-out thumbnail on the right-hand side how long it is: 10 page-sections long to be specific. (Click the image to view the whole page in a scrolling lightbox.)

The five-step process is then as follows:

I’ll explain it in more detail with screenshots and a quick video.

  1. Create the microsite pages, by duplicate your landing page 5 times
  2. Delete the page sections you don’t want on each microsite page
  3. Create a Sticky Bar and add five navigation buttons
  4. Set the URL targeting of the Sticky Bar to appear on the microsite pages
  5. Add the Unbounce global script to your site
  6. Click “Publish” << hardly a step.

Step 1: Create Your Microsite Pages

Choose “Duplicate Page” from the cog menu on your original landing page to create a new page (5 times). Then name each page and set the URL of each accordingly. In the screenshot below you can see I have the original landing page, and five microsite pages Home|About|Features|FAQ|Sign Up.

Step 2: Delete Page Sections on Each Microsite Page

Open each page in the Unbounce builder and click the background of any page section you don’t want and hit delete. It’s really quick. Do this for each page until they only have the content you want to be left in them. Watch the 30 sec video below to see how.

Pro Tip: Copy/Paste Between Pages

There is another way to do it. Instead of deleting sections, you can start with blank pages for the microsite, and copy/paste the sections you want from the landing page into the blank pages. This is one of the least-known and most powerful features of Unbounce.

The best way is to have a few browser tabs open at once (like one for each page), then just copy and paste between browser tabs. It’s epic! Watch…

Step 3: Create the Navigation With a Sticky Bar

Create a new Sticky Bar in Unbounce (it’s the same builder for landing pages and popups). Add buttons or links for each of your microsite pages, and set the “Target” of the link to be “Parent Frame” as shown in the lower-right of this screenshot.

Step 4: Set URL Targeting

This is where the connective tissue of the shared Sticky Bar comes together. On the Sticky Bar dashboard, you can enter any URLs on your domain that you want the bar to appear on. You can enter them one-by-one if you like, or to make it much faster, just use the same naming convention (unique to this microsite/campaign) on each of the microsite page URLS.

I used these URLs for my pages:

unbounce.com/pam-micro-home/
unbounce.com/pam-micro-about/
unbounce.com/pam-micro-features/
unbounce.com/pam-micro-faq/
unbounce.com/pam-micro-signup/

For the URL Targeting, I simply set one rule, that URLs need to contain “pmm-micro”.
For the Trigger, I selected “When a visitor arrives on the page.”
for the frequency, I selected “Show on every visit.” because the nav needs to be there always.

Step 5: Add the Unbounce Script

We have a one-line Javascript that needs to be added to your website to make the Sticky Bars work. If you use Google Tag Manager on your site, then it’s super easy, just give the code snippet to your dev to paste into GTM.

Note: As this microsite solution was 100% within Unbounce (Landing Pages and Sticky Bar), you don’t actually have to add the script to your website, you can just add it to the each of the landing pages individually. But it’s best to get it set up on your website, which will show it on your Unbounce landing pages on that domain, by default.

Ste 6: Hide the Sticky Bar Close Button

As this is a navigation bar, and not a promo, we need to make sure it’s always there and can’t be hidden. It’s not a native feature in the app right now, so you need to add this CSS to each of the microsite pages.

 .ub-emb-iframe-wrapper .ub-emb-close 
  visibility: hidden;
 

Click Publish on #AllTheThings!

And that’s that!


You can see the final microsite here.
(Desktop only right now I’m afraid. I’ll set up mobile responsive soon but it’s 2am and this blogging schedule is killing me :D).


I’ve also written a little script that uses cookies to change the visual state of each navigation button to show which pages you’ve visited. I’ll be sharing that in the future for another concept to illustrate how you can craft a progress bar style navigation flow to direct people where you want them to go next!

A Few Wee Caveats

  • This use of a Sticky Bar isn’t a native feature of Unbounce at this point, it’s just a cool thing you can do. As such, it’s not technically supported, although our community loves this type of thing.
  • As it’s using a shared Sticky Bar for the nav, you’ll see it re-appear on each new page load. Not perfect, but it’s not a big deal and the tradeoff is worth it if the other benefits mentioned earlier work for you.

Aall in all, this type of MacGyvering is great for generating new ways of thinking about your marketing experiences, and how you can guide people to a conversion.

I’ve found that thinking about a microsite from a conversion standpoint is a fantastic mental exercise.

Have fun making a microsite, and never stop experimenting – and MacGyvering!
Cheers
Oli

p.s. Don’t forget to subscribe to the weekly updates for the rest of Product Awareness Month.

From – 

How to Turn a Long Landing Page Into a Microsite – In 6 Easy Steps

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

It’s Day 3 of Product Marketing Month. Today’s post is about discovering new use-cases for your products that can be useful for different functional users in your customer’s company. — Unbounce co-founder Oli Gardner

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

Productizing Our Technology
By taking our core tech, combining the available features, with new jQuery scripts, CSS, and some 3rd-party integrations, it’s possible to create a plethora of new “mini-products” that if embraced by the community, could inform future product direction.

When we created an initial list of product ideas, expanding upon what the base product can already do, I realized that — as we’ve moved from a single product to multiple — we’d not changed our perception of who the functional buyer persona is.

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

PRODUCT
#1 Landing Pages #2 Popups #3 Sticky Bars
Primary Use Case Use standalone landing pages to convert more of paid (AdWords) traffic. Use on website pages to convert more organic traffic. Use on website pages to convert more organic traffic.
Primary Persona Campaign Strategist Website Owner Website Owner
Secondary Persona Designer Campaign Strategist Campaign Strategist
Tertiary Persona Copywriter Web Designer / Developer Web Designer / Developer

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

We didn’t immediately realize that the teams using these products may not even be in the same department (marketing vs. web team vs. software development), for example. Or if they are in the same department (marketing), they might not work together on a daily basis.

This is a huge problem because it assumes that someone who runs paid campaigns is also going to be optimizing the organic traffic to a website, and is no doubt one of the reasons for low adoption of product #2 and #3.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Yes, you can, if you want. But the primary use case for the new products is for your website. We really didn’t see this misconception coming, which shows how important it is to always talk to your customers.

Who uses your products?

If you have more than one product, or if the users of your single product have different job roles, are you targeting and communicating with them in different ways? Or have you assumed that everyone will understand the same messaging?

Web developers are not very likely to be downloading an ebook about marketing, and thus will not be on our mailing list to hear about new products that could, in fact, make their job easier and more productive.

So, today, I’m going to share some of the functional use cases of popups and sticky bars that would be used by the UX and web teams that work on and manage your website. This is a very different market than we normally speak to, but super important as some of our research has indicated after the initial launch.

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

Productizing Unbounce Technology
(Click image for full-size view)

Across the top (in yellow) are the core products, their features (such as targeting, triggers, display frequency), and the different hacks, data sources, and integrations, that can be combined to produce the new products listed in green in the first column.

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

NOW: These products are possible now with our existing feature set.
MVP: These products are possible by adding some simple scripts/CSS to extend the core.
NEW: These products would require a much deeper level of product or website development to make them possible. These are the examples that came from “blue sky” ideation, and are a useful upper anchor for what could be done.

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

# Product Name Product Description Where Used Core Tech Core Features Extras
NOW: Can be built with existing features
1 Microsites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. Landing Pages LP + SB Targeting: URL
Trigger: Entry
N/A
2 EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. Website SB Targeting: Geo
Trigger: Entry
N/A
3 Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. Website, Landing Pages POP Trigger: Click N/A
4 Cart Abandonment Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. Website POP Trigger: Exit N/A
5 Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. Website POP Targeting: Geo
Trigger: Entry
N/A
6 Poll/Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. Website POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A
7 NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. Website, Landing Pages SB Targeting: None, Cookie
Trigger: Exit, Scroll, Delay
N/A
8 Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Website Targeting: URL, Cookie N/A
9 Tooltips Present a popup when someone clicks to show more info/instructions. Website, Landing Pages POP Trigger: Click N/A
10 Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. Website, Landing Pages POP or SB Targeting: URL, Cookie, Geo
Trigger: Entry
N/A
11 Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. Website, Landing Pages POP or SB Targeting: Referrer, URL, Cookie
Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
12 Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). Website, Landing Pages SB Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
13 Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. Website, Landing Pages SB or POP Trigger: Entry, Exit N/A
MVP: Can be built with existing features
14 Sticky Navigation By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. Website, Landing Pages SB Trigger: Entry CSS: Hide close button
Javascript: Smooth scroll
15 Mobile App-Style Navigation By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. Mobile Website, Mobile Landing Pages SB Trigger: Entry CSS: Hide close button + mobile only
Javascript: Smooth scroll
16 Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. Mobile Website SB Trigger: Click jQuery: Slide in/out
17 Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. Website, Microsite, Landing Pages SB Targeting: URL, Cookie jQuery: Set/Read cookies
CSS: Prev/next step visual state
18 “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Marketing Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. Website POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click
19 Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.This product idea enables you to launch a popup when the video is complete, or when it’s paused, or when you’ve watched a series of videos. It’s seriously badass. Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). Website, Landing Pages POP Targeting: Cookie jQuery
20 End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. Website, Landing Pages POP or SB Trigger: Custom script jQuery
21 Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. Blog SB Trigger: Scroll CSS
22 Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. Website, In-app POP Trigger: Click jQuery
NEW: Can be built with existing features
23 Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
24 Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
jQuery
CSS
25 Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
CSS

As you can see, there are a ton of new use cases for the products, which are useful to a completely different set of functional users. Unless we do something to specifically target these new functional users, adoption won’t be our only problem, acquisition will be too.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

One way to start validating these use cases is to create new product pages for them to see if you can attract some organic traffic. In our case, this would allow those searching for this type of product to arrive on our website where we may be able to demo the product as part of the experience.

Approach 2: Cross-Function Advocate Email Marketing

Another approach is to explicitly connect the different team members, through suggestive email copy. For instance, we could email our customers and educate them that our product can help others on their team – getting the conversation started. This has the benefit of communicating through an established brand advocate.

Prioritizing Product Development

One of our goals with POT is to gather insights into which new product ideas are in demand. There will without question be an increase in technical support questions based on the implementation requirements of these ideas, but I consider that a good problem to have. If there’s enough call for full productization, that’s a great way to increase adoption and the stickiness of our products.

How many new products could YOU build?

I’d love to hear in the comments how you can imagine doing this with your own software/products/services. Please jump into the comments and let me know. If you’re worried about your competitors stealing your ideas (I definitely thought about that when I decided on this approach – but I’m erring on the side of our core Transparency value), you could simply mention how many you think you could come up with, which is also very cool.

Now, everybody POT!
Cheers
Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

View original: 

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

The Crazy Egg Guide to Landing Page Optimization

When it comes to increasing conversion rates, few strategies are more effective than the implementation of landing pages. Yet, these crucial linchpins to the optimization process are often rushed or overlooked completely in the grand scheme of marketing. Here at Crazy Egg, we believe it’s past time to give these hard-working pages a little more attention, which is why we’ve created this complete guide to landing page optimization. Even if you consider yourself a landing page pro, you’ll want to read this guide to make sure your pages are on track and converting as well as they should be. Why…

The post The Crazy Egg Guide to Landing Page Optimization appeared first on The Daily Egg.

Link to original: 

The Crazy Egg Guide to Landing Page Optimization

What Are the SEO Benefits of XML & HTML Sitemaps?

seo sitemaps

A sitemap is (usually) an XML document, containing a list of pages on your website that you have chosen to tell Google and other search engines to index. Google often uses the sitemap file as a guide to the pages available on your website — even though it may decide not to index every page you list on your sitemap. The sitemap also carries information about each page, including when it was created and last modified, and its importance relative to other pages on your site. This speeds up the process of indexing pages. A sitemap is one of those…

The post What Are the SEO Benefits of XML & HTML Sitemaps? appeared first on The Daily Egg.

Link to article – 

What Are the SEO Benefits of XML & HTML Sitemaps?

How to Optimize Pay-Per-Click Landing Pages

If you’re running a pay-per-click (PPC) traffic campaign, there’s a big chance that you’re sending that traffic to a landing page. Though when using PPC traffic, you can’t just throw up a landing page and expect everything to work out for the best. Rather, you need to ensure that you’re optimizing your landing page for conversions. If you don’t do this, your landing page will never reach its highest potential. In this post, we’re going to cover how you can optimize a PPC landing page. We’ll take a look at the different elements that you need to focus on and…

The post How to Optimize Pay-Per-Click Landing Pages appeared first on The Daily Egg.

Link to original:  

How to Optimize Pay-Per-Click Landing Pages

ProcessWire CMS – A Beginner’s Guide

Systems for managing content are more often than not rather opinionated. For example, most of them expect a certain rigid content structure for inputting data and then have a specific engraved way of accessing and outputting that data, whether or not it makes sense. Additionally, they rarely offer effective tools to break out of the predefined trails if a case requires it.
ProcessWire is a content management system (CMS) distributed under the Mozilla Public License version 2.

Continue at source: 

ProcessWire CMS – A Beginner’s Guide

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages


In May of 2015, Facebook unveiled its new in-app publishing platform, Instant Articles. A month later, Apple declared that the old Newsstand experience (essentially a fancy folder full of news apps) would be replaced in iOS 9 with a brand-new news aggregation and discovery platform called Apple News.

Turn Your AMP Up To 11: Everything You Need To Know About Google's Accelerated Mobile Pages

Four months later, it was Google’s turn to announce its own, somewhat belated but no less ambitious, plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. In just a few months, we’ve seen the relative tranquility of mobile digital publishing erupt into yet another full-scale platform war as Facebook, Apple and now Google compete for both the loyalty of publishers and the attention of readers.

The post Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages appeared first on Smashing Magazine.

Link: 

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages

Thumbnail

[VIDEO] The Landing Page Sessions: Marketing Campaigns Deconstructed

There are so many things to keep track of when designing a landing page. Is the goal clear? Is the page mobile responsive? Have you optimized the copywriting, testimonials, UX and design? How’s your attention ratio?

With all that responsibility comes a lot on uncertainty. Wouldn’t it be nice to have a sounding board? How about the guy who’s seen more landing pages than anyone else on the planet?

With our new series The Landing Pages Sessions, we made that happen for 12 lucky marketers; we deconstructed their marketing campaigns so you can learn from their mistakes.

landing-page-sessions-blog-iomage-2-650

The Landing Page Sessions are 15-20 minute videos analyzing real-world marketing campaigns from start to finish. In each episode, Unbounce co-founder Oli Gardner dissects a campaign landing page along with the ad or email that drove traffic to it.

He gives his feedback on what he thinks could improve conversions, offers A/B testing inspiration, then actually implements those changes in the Unbounce builder so you can get the full picture of the optimized page.

And because we like you so much, we’re dropping the first three episodes today. (After this week, we’ll be releasing an episode every Friday.)

Episode 1: Five Hot Seconds

Powder White, a booking service for ski holidays, wants to collect leads by sending email traffic to a landing page. Unfortunately, this goal is lost in a mix of competing CTAs, unclear copy and disappearing form fields. Oli tries to right the ship with a five-second test in UsabilityHub and some quick copy edits in Unbounce.

Episode 2: A Moment of Clarity

NRG Edge is a social network for oil and gas professionals…or is it? Oli isn’t sure at first. “Tabloidy” headlines, bloated copy and generic business speak get in the way of clearly communicating the value. Can an “Unbounce style” makeover bring a needed dose of clarity?

Episode 3: Message Match… Where Art Thou?

Photosocial is driving Facebook traffic to a landing page for its 12-month mentorship program. In this episode, Oli discusses message match vs. design match, how “conversion context” varies between inbound channels, and how to make your testimonials believable. Oh yeah, and how soon is too soon to say “welcome”?

Happy learning!

Continued:

[VIDEO] The Landing Page Sessions: Marketing Campaigns Deconstructed

Here’s What a Winning Click-Through Landing Page Looks Like

winning-click-through-landing-page
These pages got all the stock image hand models clickin’. Image source.

Last month we held a contest on the blog, challenging marketers to create a click-through landing page to promote our latest ebook, Attention-Driven Design: 23 Visual Principles for Designing More Persuasive Landing Pages.

It was an experiment to determine which design principles and “best practices” make for a seductive click-through landing page. But instead of getting a panel of judges to wax poetic about which landing pages they thought were great, we thought we’d publish the pages and let visitors decide: which ones would actually get people to click through and then convert?

Before we talk about the winning pages and what made them so darn titillating, a quick review session. Let’s take a look at how click-through landing pages differ from their lead gen landing page cousins — both in form and function.

WTF is a click-through landing page?

Click-through landing pages do exactly what it says on the tin. Unlike lead gen landing pages, they don’t have a form on the page asking people to opt in. Instead, they have a goal of convincing visitors to click through to another page (where the actual conversion happens).

They’re frequently used in ecommerce funnels to describe a product in detail and “warm up” visitors for their purchasing decision. They combat the cognitive dissonance that is created when someone clicks on an ad for a specific product and they wind up on a seemingly irrelevant generic product page.

In Attention-Driven Design ebook author Oli Gardner’s words:

Click-through pages are a great way to create an interstitial experience that confirms the intent of your ad in a simple way, maintaining the attention of your visitor, and then guides them through the purchasing decision before taking them further down the funnel.

Simple enough, yeah? But if you’re gonna use a click-through landing page to “warm up” visitors and reassure them that they’ve made a “good click,” you also wanna be sure you’ve optimized the heck out of it.

Without further ado, let’s look at our winning click-through landing pages — the ones that lead to the most ebook downloads  — and see which Attention-Driven Design principles they employed to get people to convert.

4th place winner: Conversion Lab

Conversion Lab’s landing page does an excellent job of teasing visitors with sneak previews of the ebook above the fold:

conversion-lab-click-through-landing-page

A little lower on the page, for prospects who need a little more information to be persuaded, they include a SlideShare preview of the core concepts from the book.

attention-driven-design-slideshare

Even with all the additional information, the page is really easy on the eyes. Here’s how Oli Gardner put it when we asked him about the page:

The information hierarchy is strong with a nice linear top-to-bottom reading experience and nicely balanced font sizes for easy reading. Overall, a very clean design – which I’ve come to expect from Conversion Lab.

Indeed. Congrats on placing 4th, Conversion Lab!

mean-girls-linsay-lohan

3rd place winner: Tim Ruof

What really stands out about Tim’s page is his generous use of directional cues to guide your eye down the page.

tim-ruof-click-through-landing-page

One minor quibble: Oli pointed out that the model is looking downwards — under the CTA — so there’s no benefit to the angle of her gaze.

Still, this is somewhat counterbalanced by the arrow pointing to the call to action button, along with the other arrows on the page. Oli elaborated:

I like how the continuation arrows are used to guide you through the reading experience. It may not seem like a big deal, but this really helps both the visual and information hierarchy.

Tim also got crafty with his social proof, pulling actual quotes from Twitter as testimonials:

click-through-landing-page-twitter-testimonials

Oli suggested a couple of improvements to test:

I’d remove the links to the tweets though and perhaps cut and paste the actual tweet so it looks exactly like Twitter.

We’ll forgive Tim for upsetting the attention ratio of the page with those external links, because he blew us away by creating Twitter cards to drive traffic to his page:

twitter-card-tim-ruof

Talk about going the extra mile. Awesome job, Tim.

clapping-clap-wonderful

2nd place winner: Winsome Writing

Winsome Writing’s landing page is shorter than most of the other entries we received, but that doesn’t mean it’s not sweet. Like our previous entry, they use screenshots and a SlideShare preview to tease visitors with the juicy content:

winsome-writing-click-through-landing-page

Interestingly, they haven’t really included any social proof, and chose not to lead with a strong hero shot of the ebook itself. Oli suggested that this might be a good thing to test:

This designer chose to keep the model hero shot. It’s interesting as to what impact it would have. As it’s an ebook download page, it could be posited that the model may confuse matters and she does look kinda sad.

Oli also congratulated Winsome Writing for including a bold CTA button which contrasts nicely with the rest of the page.

Overall, a solid effort that secured Winsome Writing second place in the contest. Pat yourselves on the back!

pat-patting

1st place winner: Sherif Makhlouf

Drum roll please…

This landing page scored creator Sherif Makhlouf an all-expenses-paid trip to Vancouver for Call to Action Conference 2016!

sherif-makhlouf-click-through-landing-page

As Oli pointed out, it’s pretty clear that Sherif read the book — he employed several Attention-Driven Design principles. There’s Direction: the way the model’s gaze directs your attention to the CTA, and the Contrast of the big pink button. Finally, the third page section uses Continuation effectively, helping to draw your eye down the page.

But Oli also praised Sherif for employing other classic landing page best practices. For starters, look at how decked out the social proof section of the page is:

click-through-landing-page-social-proof

And then there’s the counter by the CTA button, which displays how many copies have been downloaded:

false-scarcity-click-through-landing-page

But Oli especially appreciated the way Sherif employed a healthy dose of scarcity and urgency:

The use of “only 27 free copies left” is a nice touch, not mentioning price but insinuating that it will become a paid ebook soon.

It’s worth mentioning that this is in fact false scarcity — the ebook will remain free forever, we swear! But that this page is the winning page speaks volumes about the psychological power of these tactics.

Before you run off and employ false scarcity on your own page, step back and remember that, “With great power comes great responsibility.” Because if prospects suspect that you’re trying to trick them, you could lose them forever…

lines-album

Create a winning landing page of your own

Thanks to everyone who submitted landing pages to our Attention-Driven Design contest — you guys never cease to amaze us.

And special congrats to Sherif, you sneaky-but-super-smart marketer! We can’t wait to meet you at Call to Action Conference 2016.
Want to create a landing page that replicates the success of Sherif’s? Check out Oli’s latest ebook by entering your email below…

Source: 

Here’s What a Winning Click-Through Landing Page Looks Like

The Definitive Guide to Optimizing Your Local Landing Pages

Let’s face it. Today, most of us are armed with cell phones. When we’re out and about and performing a search, it’s usually focused on something local. Google recently revealed that more searches are being performed on mobile devices than on desktops. That’s huge. Chances are, like you, they’re looking for phone numbers for local […]

The post The Definitive Guide to Optimizing Your Local Landing Pages appeared first on The Daily Egg.

More here: 

The Definitive Guide to Optimizing Your Local Landing Pages