With so much of your traffic coming from people’s phones, it’s essential that we start to craft exceptional mobile experiences. This means going beyond simple responsive design if you’re going to create a superior mobile UX (user experience) that stands out from your competition.

IMPORTANT: Use your phone to read this post – it’s designed as a mobile experience.

***Click here to show a mobile nav bar***. The concept here is to use a nav bar with icons, to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down the blog post on your phone and you’ll get a sense of how the experience has changed from a regular blog post reading experience.

You can use this technique with landing pages, blog posts, or anywhere you want to create a mobile app experience.

For those reading on desktop, this is what you’ll see at the bottom of your mobile browser.

.single-post .card-system-page.section-lib-post.container .lib-container {max-width: none; width: 100%;}
.single-product-marketing .card-system-page.section-lib-post.container .card-system-sidebar {display: none;}
hr {margin:70px auto 80px auto !important;}
a img {cursor: pointer !important;}
.ub-emb-iframe-wrapper .ub-emb-close {visibility: hidden;}
.exampleTitle {padding:20px 5% 20px 9% !important;margin-top:50px !important;}
pre {font-size:12px !important; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; margin-bottom: 10px; overflow: auto; width: auto; padding: 5px; background-color: #eee; width: 750px!ie7; padding-bottom: 20px!ie7; max-height: 400px;}

Why Do Landing Pages (and Your Blog) Need Good Mobile UX?

When a landing page or blog post is long, there will most likely be a small percentage of visitors who will actually read the whole thing. You can increase engagement, and make a better experience if you guide people to the most important chapters or segments of the content.

***Click here to show the mobile nav bar***.

To achieve this you can use a navigation bar with clearly labeled sections that are not only helpful but and also feels like you’re inside an app native to your phone.

Turning Your Landing Page into an App-Like Mobile Experience with Unbounce Sticky Bars – in 4 Simple Steps

I’ve set it up so there are 4 main sections in the blog post that you can navigate to using the sticky app nav. So go ahead and click the nav icons to jump to each of the four steps you can follow to add this experience to your own landing pages and blog posts.

Step #1 – Create a Sticky Bar With Retina-Grade Icons

I created a sticky bar with four icons. To make them retina I made them with a width of 160px and a height of 130px, and shrank them to 80×65 in the Unbounce builder. To do this, I added 4 boxes and set the background style to be “Image” and “Background to fit container”. Then I added a fully transparent button above each of the images (because boxes don’t have a link action) to link to each of the 4 page sections.

Step #2 – Add Anchor Links and Sections

You can do this by setting the link action of the icons to point to a page element ID. For instance, the horizontal rule (line) that appears above step #2, has an ID of “section2”. In Unbounce this looks like the settings below. Note that the target of the link is set to “Parent Frame” as the Sticky Bar is set in an iframe above the page.

Step #3 – Hide the Close Button with CSS

As with many hacks that I’ve come up with for Product Awareness Month, this one requires that we hide the “Close” button that is part of the Sticky Bar functionality. When your Sticky Bar is used for promotional purposes it’s important that people can close it. But when you’re creating a navigational experience, the bar becomes part of the interface, and we need it to be always present.

To do this, you need to add a line of CSS to the landing page or blog that you want it to appear on. Note: this is not an official Unbounce feature, so your best bet for geeking out with functionality will be in the Unbounce community.

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

Step #4 – Look at Your Phone and Say Hells Yeah!

I can’t state enough how much I think this is a better mobile experience, so please give it a try and join the conversation in the comments (or ping me on Twitter).

Cheers
Oli

Build your free WordPress website with Host2.us free hosting today!