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:
- It allows more pages to be indexed by Google
- You can craft a controlled experience on each page (vs. a section where people can move up and down to other sections)
- You can add a lot more content to a certain page, without making your landing page a giant.
- 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.
- 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.
- Create the microsite pages, by duplicate your landing page 5 times
- Delete the page sections you don’t want on each microsite page
- Create a Sticky Bar and add five navigation buttons
- Set the URL targeting of the Sticky Bar to appear on the microsite pages
- Add the Unbounce global script to your site
- Click “Publish”
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.
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.
- The close button on the Sticky Bar needs to be hidden (I need to bug a developer for some help and will add it back in here).
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 for the rest of Product Awareness Month.