With so much of your traffic coming from mobile, it’s essential that you craft great mobile experiences. This means going beyond simple responsive design if you’re going to use a superior mobile UX (user experience) to stand out from your competition.
IMPORTANT: This is a mobile experience. Use your phone to read this post.
***Click here to show a mobile nav bar*** that I’ve designed to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down on your phone and you can get a sense of how the experience has changed.
You can do this 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.
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.
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.
Step #4 – Look at Your Phone and Say Hells Yeah!
Make Your blog Posts More Navigable
This idea is not just for landing pages. You can also use it on a blog post, like for example, THIS ONE!
Click here to show an app-style nav bar to move you around the sections of this post. This is awesome because it lets you create chapter highlights that can guide people through your content AND you can have a CTA on the sticky bar.
TO ALLOW MLUTIPLE SBs
Use ?demo1 ?demo2 URLs to push people to for each variant.
[ Use a GIF of a phone showing it as a demo – and link out ]