Tag Archives: desktop

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

6 Reasons Your Mobile Ranking on Google Sucks

drinking straws

2017 will forever be known as the year Google adopted a mobile-first strategy. Some people will think of that way, at least. Probably not too many, actually, but that doesn’t lessen the significance of the shift. Your mobile web strategy is now, simply, your web strategy. Why is this so important? By late 2016, more than half of all Google searches were conducted from mobile devices, and over 77% of web searches are through Google. So when the company announced this year it would prioritize mobile sites over desktop to determine relevance and ranking, it was kind of a big…

The post 6 Reasons Your Mobile Ranking on Google Sucks appeared first on The Daily Egg.

See original: 

6 Reasons Your Mobile Ranking on Google Sucks

Designing The Perfect Accordion

Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea.
Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.

View post: 

Designing The Perfect Accordion

Hibernation Time Is Over! Inspiring Desktop Wallpapers To Fuel Your Creativity (March 2017)

Sometimes all we need is a little inspiration kick to get our creative juices flowing. Maybe your secret is to go for a short walk, have a little chat with a colleague, or scroll through your favorite eye candy resources. Whatever it might be that helps you get new ideas, we, too, have something for you that could work just as good: desktop wallpapers.

Hibernation Time Is Over! Inspiring Desktop Wallpapers To Fuel Your Creativity

To bring you a regular dose of unique and inspiring wallpapers, we embarked on our monthly wallpapers mission eight years ago. Each month, artists and designers from across the globe diligently contribute their works to it. And well, it wasn’t any different this time around. This post features their artwork for March 2017. The wallpapers all come in versions with and without a calendar. Time to freshen up your desktop!

The post Hibernation Time Is Over! Inspiring Desktop Wallpapers To Fuel Your Creativity (March 2017) appeared first on Smashing Magazine.

Continue reading here:

Hibernation Time Is Over! Inspiring Desktop Wallpapers To Fuel Your Creativity (March 2017)

☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year?

With a couple of days left until New Year’s Eve, it’s just about time to set aside 60 minutes to clean up, sort out and back up your digital footprint, to ensure a good smooth start to 2017. So many little details tend to get forgotten or overlooked every single time, only to get fixed hastily later — but doesn’t it just feel right when everything is in the right place, neatly organized, even if you aren’t a compulsory cleaner or an obsessed perfectionist?

Link to article:

☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year?

Desktop Wallpaper Calendars: October 2016

A new month means new wallpapers! This journey has been going on for eight years now, and each time anew artists and designers from across the globe challenge their artistic skills to cater for some fresh inspiration on your desktop. And, well, it wasn’t any different this time around.

Desktop Wallpaper Calendars: October 2016

This post features their designs for October 2016. The collection is a mix of ideas and styles, of wallpapers that are a little more distinctive than the usual crowd. All wallpapers come in versions with and without a calendar and can be downloaded for free — just choose your favorite. A big thank-you to everyone who shared their ideas with us! Happy October!

The post Desktop Wallpaper Calendars: October 2016 appeared first on Smashing Magazine.

Continue reading here:  

Desktop Wallpaper Calendars: October 2016

How “Your Tea” Boosted Revenue by 28% Through Structured Conversion Optimization

An increasing number of companies and agencies are following a structured approach to Conversion Rate Optimization (CRO). Presently, we will be looking at how a tea eCommerce website increased revenue using conversion optimization.

About the Company

Your Tea is an online tea eCommerce site serving health and lifestyle-focused consumers. Tiny Tea Teatox is one of their largest sellers in their diversifying everyday tea product ranges.

Your Tea signed on We Are Visionists (WAV), a digital agency that partners with eCommerce agencies and startups, to help solve their clients’ digital problems ranging from paid advertising to conversion rate optimization.

We got in touch with Joel Hauer, founder at WAV, to know all about their successful optimization exercise that resulted in a 28% improvement in revenue.

Onboarding Your Tea

WAV pitched CRO as part of a raft of complementary services, including SEO and PPC, to improve Your Tea’s online presence.

Joel says, “It made business sense and so it was a straightforward decision for Your Tea. If you can create an uplift in your revenue by improving your product page, why wouldn’t you? We were able to make projections based on anticipated improvements to the site, and those projections were what got us over the line. We are lucky to have such a pragmatic client!

Process of Optimization

What WAV wanted to do was to insulate Your Tea’s revenue stream against any potential declines in traffic and maximize revenues in the periods of high traffic.

While doing so, they decided to follow a formalized approach to CRO, that is, researching their website data and visitors’ behavior intently to create hypothesis and running A/B tests that would impact revenues the most.

The Research Phase

To begin with, they analyzed their website data using Google Analytics (GA) to understand the journey of the visitors. They detected a large number of drop-offs on the product pages of the website, that is, a lot of people were landing on the product pages but not adding anything to the cart. They discovered that the Tiny Tea Teatox product page in particular was attracting the largest amount of traffic, and decided to optimize it first.

On further research on that page, they found that more than 50% of visitors were browsing through mobile. This information compelled WAV to closely analyze the mobile version of Tiny Tea Teatox. They found multiple optimization opportunities. For instance, the CTA was not prominent, there was no detailed description of the products, and more.

Here’s how the original page looked:

A/B test Control

Hypothesis Creation

Since a majority of traffic was coming from mobile in particular, WAV decided to optimize both the desktop and mobile versions of the Your Tea website. They hypothesized that adding a more prominent CTA, along with a detailed description of the product and user reviews would increase add-to-cart from the product page.

Using Visitor Behavior Analysis, they were able to develop their hypotheses further. For instance, by looking into heatmap analysis, they realized that visitors mostly browsed the product description and its benefits.

A large number of visitors also visited the reviews section, thereby making it clear that they were looking for trust elements. WAV decided to add more product information and benefits, along with credible “before and after” images and testimonials to the page. WAV also conducted website surveys and user testing sessions, which confirmed their hypothesis of adding more “credibility proofs” to the page.

The Test

WAV concluded that a full redesign of the product pages could yield better results than a series of incremental improvements from smaller tests. Such a massive redesign required heavy technical work, and WAV used VWO’s Ideact service to create a variation. Below is the screenshot of the control and variation:

Your Tea Control Variation Here’s how the Before And After section in the variation looked like:

Here’s the Why Buy From Us section in the variation that aimed to improve the website’s credibility :

Credibility Proof in the VariationResults

With the tests, they tracked two goals, that is, the add to cart conversion rate and the revenue.

The improvement in add-to-cart actions led to an impressive 28% increase in the revenue. In terms of add-to-cart conversions, control of the test was yielding a conversion rate of 11.3% in contrast to the variation which emerged to be the winner with a conversion rate of 14.5%.

Road Ahead

To capitalize on these higher conversions, an optimized checkout experience is required.

The agency could identify that the checkout pages were receiving multiple views from the same visitors. Users were getting stuck in loops around the checkout page. After they identified what to look for, the data from analytics supported it. Currently, they are testing to optimize the mobile experience on parameters such as anxiety and trust signals.

When asked about his biggest learning of the test, Joel responded: “One thing that came out of this test was learning more about the checkout experience—particularly on mobile.”

Experience Using VWO

Joel remarks, “The work of VWO’s Ideact team in setting up the tests on the technical front to help us record users through the checkout experience was invaluable.”

“We loved working with Rauhan and Harinder from VWO. The willingness to go the extra mile and help us get the maximum insight from our tests was fantastic. Having spoken about the features in the pipeline, we’re excited to see what’s to come.”

What Do You Think?

Do you have any similar experiments to share? Tell us in the comments below.

cta

The post How “Your Tea” Boosted Revenue by 28% Through Structured Conversion Optimization appeared first on VWO Blog.

Read original article:

How “Your Tea” Boosted Revenue by 28% Through Structured Conversion Optimization

Desktop Wallpaper Calendars: September 2016

We all love a good wallpaper to polish up our desktops. So to provide you with fresh artwork on a regular basis, we embarked on our desktop wallpapers mission eight years ago. Each month we challenge you, the design community, to get your creative juices flowing and produce some inspirational and unique desktop wallpapers.
And, well, also this time designers and artists from across the globe challenged their artistic abilities and contributed their designs for September.

Link to article: 

Desktop Wallpaper Calendars: September 2016

13 Sporty Soccer ⚽ Football Icons [Freebie]

Some folks love it, some hate it. Today’s icon set, designed by Manuela Langella, is dedicated to both lovers and haters of… football! That’s right, the 2016 UEFA European Championship starts tomorrow. Here’s the schedule so you don’t miss a match, or know when not to disturb those who’re planning to watch. Clink! Clink! Let the games begin!
You may modify the size, color or shape of the icons.

Read this article: 

13 Sporty Soccer ⚽ Football Icons [Freebie]

How to NOT Distract, Destroy and Decimate Your Google Shopping Traffic

Google Shopping is taking off like a rocket ship. Consumers love the visually based Product Listing Ads, especially on mobile. Retailers are also taking note, spent big on the channel in 2015. That spending paid off: Research showed that Google Shopping Product Listing Ads (PLAs) drove 15% of retailers’ sitewide revenue during Holiday 2015, up from 9.6% in 2014. It’s safe to say that competition in Google Shopping is sure to continue heating up — especially now that Google Shopping ads dominate the right-hand side of the desktop SERP (pictured): So the time is now for Google Shopping users to…

The post How to NOT Distract, Destroy and Decimate Your Google Shopping Traffic appeared first on The Daily Egg.

Read original article: 

How to NOT Distract, Destroy and Decimate Your Google Shopping Traffic