New Feature: Mobile Templates

  • Announcement
  • Updated 10 months ago
You can see some of our new mobile templates here: (check em out on your phone!)
http://templates.unbounce.com/mobile-...
http://templates.unbounce.com/mobile-...
http://templates.unbounce.com/mobile-...
http://templates.unbounce.com/mobile-...

Enabling the templates
To get the templates to show up in your template chooser, access the Unbounce dashboard and click [Account] > [Unbounce Labs] to go to the Labs section of your Account where you can enable the feature. You'll then see them appear at the end of the list of templates when you create a new landing page.

Want to automatically send mobile visitors to your mobile page?
We have a script that you can add to your page to redirect mobile visitors to the mobile version of your landing page: New mobile redirection script

As always, let us know your thoughts and if you have any ideas for other mobile templates you'd like to see, in the comments.
Photo of Oli Gardner

Oli Gardner, Official Rep

  • 2,768 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Steven Maroulis

Steven Maroulis

  • 60 Points
this doesn't work as an FYI and your support doesn't know about this feature let alone support it.... which is pretty frustrating...

assume this scenario:

- I have 1 project with 3 pages
- Champion with 50% traffic and mobile redirect script
- Variant with 50% traffic
- Mobile Page with no traffic

I use custom subdomains to in my example my site looks like this http://subdomain.domain.com

2 issues
1) why would you need to give traffic % ot the mobile page and if you do what % makes sense? The way I see if if Champion has 50% of traffic and contains the mobile redirect script it should trigger the mobile page every time a mobile client is dected
2) the URL of the mobile page when you use subdomains doesn't work i.e. http://subdomain.domain.com/mobile and obviously in your example code you show m.domain.com so which is the correct structure?

thanks
SM
Photo of Ryan Engley

Ryan Engley, Director of Customer Success

  • 4,544 Points 4k badge 2x thumb
Hi Steve - I'm sorry for the confusion

The explanation here requires some understanding of how our infrastructure works in regards to pages and variants. You can direct traffic to a page (which can contain one or more variants) but you cannot direct traffic to a specific variant within a page. The selection of variants is random.

In your case, I understand why you'd want your mobile variant to be part of the same page and but unfortunately this isn't possible with our current set up. But there is a workaround.

Keep your original page but limit your variants to:
- The Champion (and mobile redirect script) at 50% and
- Challenger variants at 50%.

Then, create and publish a second, mobile specific landing page. This page will have its own URL.

You can then configure your redirect script to forward visitors on mobile devices to the mobile specific page.

I know this isn't ideal and it doesn't keep your stats in one place but it will help you get the data you need.

We'll keep use cases like this in mind when we begin our mobile initiative and would appreciate any other feedback you might have.
Photo of Dev Tools

Dev Tools

  • 60 Points
Is this answer still relevant? Where are the instructions about the redirect script?
Photo of Gary Allen

Gary Allen, Academy Lead

  • 204 Points 100 badge 2x thumb
Just to followup for everyone here on the Community, with the launch of our Mobile Responsive Beta you can easily create a mobile version of your landing page without the need for any special script.

To be added to the beta just shoot an email to support@unbounce.com and our friendly support team will be happy to add it to your account.
Photo of William Swezey

William Swezey

  • 70 Points
We are looking to enable this as well. We are beginning our first campaign shortly. Is this something we should stay away from? Please advise. We go live in a few days. Thanks!
Photo of Ryan Engley

Ryan Engley, Director of Customer Success

  • 4,544 Points 4k badge 2x thumb
Hello William - you can enable to templates and they should work well. They're still in beta as we iron out some display issues with certain mobile devices. Nonetheless, it might be prudent to test your page on multiple devices to be sure it displays as you like and if not, make tweaks as necessary.

Hope that helps to clarify things
Photo of William Swezey

William Swezey

  • 70 Points
Actually this seems to be working for us. We set up a NEW landing page that was the mobile page. Added the code to the standard pages and it redirects just fine from iPad and BB. The only problem we are having now is that we can't get any of our submissions from ANY pages to post to LoopFuse our marketing automation system. *SIGH*
Photo of YirehBiz

YirehBiz

  • 62 Points
Sooo....have the above-mentioned issues been resolved yet? We really don't have the programming resources to spend hours debugging issues like that - but want to appeal to our community with mobile-friendly landing pages...
Photo of Oli Gardner

Oli Gardner, Official Rep

  • 2,768 Points 2k badge 2x thumb
Not yet Michelle. We are planning a mobile initiative in the future which will include addressing this. In the time being - what you can do is adjust the script mentioned at the top of the page and remove any devices accept the iPhone - that way at least some people will get a good mobile experience (as it works well on iPhones) - and the others will get your regular full size page.

Hopefully that's a somewhat useful workaround.
Photo of Simon Powell

Simon Powell

  • 60 Points
How's the mobile site setup working? I'd love to use your system but mobile variants will be critical for me as I expect the bulk of my traffic to be via mobile devices. Ideally it would be 1 page that gracefully regrades, rather than two separate pages, but I'll cope with either.
Photo of Martin Pietrzak

Martin Pietrzak

  • 70 Points
I created the following page using the mobile template but it doesn't render it properly on my samsung? It assumes it is a full screen version. Is there a setting I need to change within the edit form?
http://promos.coolkidsadventures.com/...
Photo of Slan Dizier

Slan Dizier, Employee

  • 240 Points 100 badge 2x thumb
Hi Martin,

I took a quick look and it seems that you are missing the following line.

In your scripts insert the above snippet and republish. That should do the trick.

Let me know if after doing so you are still having problems.

Slan.
Photo of Slan Dizier

Slan Dizier, Employee

  • 240 Points 100 badge 2x thumb
Oops, the code snippet didn't add. Here it is.


<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Photo of Martin Pietrzak

Martin Pietrzak

  • 70 Points
Great, it works!
Photo of Mark Giannandrea

Mark Giannandrea

  • 60 Points
I'm baffled why the IPAD is included in the script. While I agree the IPAD is mobile, the templates provided for mobile devices are designed for small screens. The IPAD handles full size webpages very well, so why would I want to look at the very narrow sliver of content.

As well, would it not be better in future to start designing responsive website templates that adjust to the different devices. I support that might mean creating a whole new WYSIWYG interface, but I think we've headed in that direction.

Cheers,
M
Photo of Ryan Engley

Ryan Engley, Director of Customer Success

  • 4,544 Points 4k badge 2x thumb
Hi Mark - good observation on iPad. The redirect script can be modified so that iPad users aren't redirected .

I'm a big fan of responsive sites and completely understand why you'd want your pages to be responsive but for now, it's not something we've got in the works. I can let you know that we'll soon be addressing mobile in other ways so keep your eyes peeled.
Photo of Carter Gilchrist

Carter Gilchrist, Co-founder, Chief Product Officer

  • 13,636 Points 10k badge 2x thumb
For the record, I've just now edited the original script in Oli's post to exclude 'ipad' from the list. Thanks Mark!
Photo of Mike

Mike

  • 248 Points 100 badge 2x thumb
We are trying to use this code to redirect to a mobile friendly version, but it just keeps reloading... never rendering the page. Any thoughts?
Photo of Ryan Engley

Ryan Engley, Director of Customer Success

  • 4,544 Points 4k badge 2x thumb
Hi Mike - it sounds like the redirect script might be redirecting to the original page (and therefore getting stuck in a loop). Could you send the URL for the page in question to support@unbounce.com so we can have a look?
Photo of Amelie Mills

Amelie Mills

  • 60 Points
Is anyone else having troubles with form confirmation boxes? Ours are popping up at the incorrect size, despite our page being set up for mobile.
Photo of Carter Gilchrist

Carter Gilchrist, Co-founder, Chief Product Officer

  • 13,636 Points 10k badge 2x thumb
Just a note for anyone using the javascript redirect that Oli mentions in the original post: I've updated it so that it will carry forward any URL params that were tacked on the original URL.

Also, just so everyone is aware, we will be tackling any remaining issues with confirmation boxes and other widgets very soon so that we can move our mobile pages out of beta. We will have more mobile templates to add when that happens.
Photo of David Stiebel

David Stiebel

  • 80 Points 75 badge 2x thumb
What is the most updated code to use? Thanks!
Photo of Florian Kiel

Florian Kiel

  • 72 Points
Hey,

i am using the "userAgent".match to redirect the mobile users to my mobile site.


<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/Blackberry/i)) ||
(navigator.userAgent.match(/Windows Phone/i)) ||
(navigator.userAgent.match(/Android/i)))
{
if (document.cookie.indexOf("iphone_redirect=false") == -1)
window.location = "http://YOURMOBILEPAGE.COM";
}

//-->
</script>


Best,
Florian
Photo of David Stiebel

David Stiebel

  • 80 Points 75 badge 2x thumb
Is this snippet effective for all devices?
Photo of Slan Dizier

Slan Dizier, Employee

  • 240 Points 100 badge 2x thumb
One possible workaround for keeping track of stats for mobile pages vs desktop pages is to create a "middle" Unbounce page where all traffic is directed to. Then, using a similar redirect script on the middle page you would drive the the traffic to either the mobile version or the desktop version that way you are able to keep individual stats for each version.

I hope that made sense :)

Slan
Photo of aran hamilton

aran hamilton

  • 60 Points
I've tried to set this up (following the settings and scripts above) but mobile traffic does not appear to be redirecting to the separate mobile landing page. I only have one (champion) landing page at present, and the weighting is at 100% is this the reason it's not redirecting?
many thanks for any advice...
cheers, Aran
Photo of Lou Sturm

Lou Sturm, Manager of Customer Engagement

  • 2,688 Points 2k badge 2x thumb
Hi Aran!

Sorry to hear you're having some difficulty setting this up!

Would you be able to send your login details and the name of the page(s) to support@unbounce.com? Once we have your details, we'll dig in and troubleshoot this.

Thanks in advance Aran!
Photo of David Stiebel

David Stiebel

  • 80 Points 75 badge 2x thumb
Hi Oli,
Is the mobile re-direct snippet included in the original post above still the most up-to-date code to use?

Thanks for this feature!
David
Photo of Clint Rowden

Clint Rowden

  • 60 Points
I don't think it is. Chrome for iOS isn't accounted for.
Photo of Anders Haugeto

Anders Haugeto

  • 60 Points
Redericting works on iphones but not on androids :/ (tried both codes)

And the images looks blur and awful on mobile while look needle sharp on browser. What can be the reason? And the solution?
Photo of Brad Parnell

Brad Parnell

  • 70 Points
Could a possible solution be when starting a new landing page, you choose the desktop version and the mobile version so a re-direct script happens automatically, and even better if some of the copy gets duplicated from desktop to mobile?

I got the original solution to work, but it would be nice to look 1 set of analytics for a campaign and see the mobile vs desktop views and have everything in one place.

Mobile is obviously a must, and responsive templates make the most sense, but the above solution would help from having to create 2 separate pages with 2 different sets of conversions for the sam campaigns.

Thoughts?
Photo of Carter Gilchrist

Carter Gilchrist, Director of Product & User Experience

  • 13,626 Points 10k badge 2x thumb
Hey Brad, that's a good idea — we are in the process of working on a responsive solution though, so we've decided to stay focused on that instead of building temporary solutions. Thanks for the feedback!
Photo of Brad Parnell

Brad Parnell

  • 70 Points
Awesome, can't wait to see it!
Photo of Sam

Sam

  • 382 Points 250 badge 2x thumb
Is Unbounce looking at working more like ioninteractive.com? (also with the multi dynamic landing pages).

Also I'm sure everyone will be interested to hear when Unbounce expects to release the responsive version or at least the beta version as other solutions already have this feature and like myself have been tempted to switch.
Photo of richardawest

richardawest

  • 60 Points
Any update on the responsive solution?
Photo of Carter Gilchrist

Carter Gilchrist, Director of Product & User Experience

  • 13,626 Points 10k badge 2x thumb
Hey richard — you can see my updates from a couple weeks ago over here.
Photo of Sam

Sam

  • 382 Points 250 badge 2x thumb
Another solution....

Why not join forces with webflow.com?? Seems like a perfect match. They do responsive design really nicely and to the high standard the Unbounce team & users would love. Unbounce on the other hand would cover all of Webflow's weaknesses eg. testing, reporting and the clean UI with multi-client options & integrations.

Could be faster to implement and together you would make the ultimate landing page solution.

(Be sure to check out some of their other cool functions such as their HiDPI checkbox on each image for retina displays as well as their image slider & map widget).
Photo of Markus Stefanko

Markus Stefanko

  • 90 Points 75 badge 2x thumb
Hey guys, we wrote a small write-up on the Javascript solution and how to use it with Unbounce. You can read more about it on http://blog.stefanxo.com/2014/02/chec...

It's using a bit more extensive mobile detection algorithm from detectmobilebrowsers.com.

Also updated the article in the bottom part, with the proper code for an empty Unbounce page, which would redirect users on to a mobile or desktop version, to not skew with any metrics.

Enjoy!
Photo of Tom

Tom

  • 62 Points
Awesome article Markus! Your code works perfectly for me! Thanks much!
Photo of Benjamin Gill

Benjamin Gill

  • 80 Points 75 badge 2x thumb
I was going to use Markus Stefanko's solution above, but it first directs customers to a blank page - and then redirect to either desktop or mobile version. This is a good solution as there is no doubled counting of traffic and the stats won't be skewed. But the problem is that the first redirect from the blank page causes a drop off in customers due to slow loading times.

I am now using the original version where I direct customers to the desktop lander and it redirects to the mobile version if needed. This at least means desktop viewers will have a fast loading page (mobile people will still see a redirect happen and will be slower).

But the problem now is my stats are skewed because mobile viewers get counted on the Desktop page, and then again when they are redirected to the Mobile page. How do I account for this double counting of mobile viewing? Will it effect which variants gets chosen as a winner?
Photo of Carter Gilchrist

Carter Gilchrist, Director of Product & User Experience

  • 13,626 Points 10k badge 2x thumb
Hey Benjamin — quick question for you: would you still be using this technique of maintaining separate pages for desktop and mobile when we fully support Responsive?
Photo of Benjamin Gill

Benjamin Gill

  • 80 Points 75 badge 2x thumb
No, I would rather have it all combined into one landing page (and its various variants). I don't want separate mobile and desktop versions as its too messy and creates problems as described above. Can you tell me how to account for the double counting as described above?
Photo of Carter Gilchrist

Carter Gilchrist, Director of Product & User Experience

  • 13,626 Points 10k badge 2x thumb
Ok good to hear. You might be already aware, but we are making good progress on supporting responsive design. You can check out a video demo if you like over here.

As for the double-counting issue that you're experiencing right now, the only way I know of to avoid that is with the first solution you already tried. It's unfortunate that the slow redirect was causing drop-offs though, I wish I had a better interim solution for you. We're building responsive as fast as we can!
Photo of Markus Stefanko

Markus Stefanko

  • 90 Points 75 badge 2x thumb
Ben; we haven't noticed a drop-off rate on our side ( and have at the moment heavily visited marketing sites ). If you leave the initial page empty, it should do the redirect instantly within page load. As no external resources are loaded it should happen instantly.

A hint on this : Make the redirect URLs more meaningful. E.g. with your main page being www.mydomain.com, redirect the desktop version to www.mydomain.com/en/ - that way the customer is not confused by the redirect. The mobile redirect itself doesn't matter, as customers on mobiles don't really keep track of the URL bar.

Until responsive pages are available, you have those 2 options -
a) initial page that redirects to appropriate version ( proper stats )
b) desktop page that redirects mobile users to mobile version ( skewed stats )

And then once responsive pages are there, your issues should be resolved.
Nice to see that responsive design is being worked on. :)
Photo of Wilhelm Fumy

Wilhelm Fumy

  • 160 Points 100 badge 2x thumb
Hello,
i use now the script from stefanxo ... the problem is, whith the forward i loose the url parameters which i get with the links from the adverts ...
It should be like this http://unbouncepages.com/asstel/?mkwi... - after the forward to the mobil page the parameter mkwid is gone!

Does anybody have a solution for this??

regards
Wilhelm
Photo of Wilhelm Fumy

Wilhelm Fumy

  • 160 Points 100 badge 2x thumb
i didn ́t see your first post! I very much apologize!

ok - you mean i should do a second js at this redirect page (which includes just your script for mobil dection)?
In this script i put just this:
$(document).ready(function() {
var params = window.location.search.replace(/\+/g,'%20');
var button = $('a[href]').each( function(i) {
this.href = this.href + params;
});
});

If - yes, than it would be phantastic.
I try now!
Photo of Wilhelm Fumy

Wilhelm Fumy

  • 160 Points 100 badge 2x thumb
hmmm - no, it doesn ́t work ...
Photo of Wilhelm Fumy

Wilhelm Fumy

  • 160 Points 100 badge 2x thumb
Now i have 2 Problems!
a) I loose traffic - on the redirect page i have double of visitors ... where do they go between the redirected pages. Are they leaving because loading time?

b) still the problem with the parameters which dissapear after redirect.

Does anybody know a solution?
Photo of Mark Wainwright

Mark Wainwright, Software Developer

  • 1,868 Points 1k badge 2x thumb
Hello everyone – I just wanted to chime in and hopefully clarify some points here.

Markus' script is really awesome because it has more thorough browser detection, but it doesn't send along the URL parameters, which explains the issue you've been experiencing, Wilhelm.

By the way, the script that Gil posted is super useful if you'd like to append URL parameters to all the text and button links on the page, but it won't help with redirects.

I've whipped up a script that adds URL parameter support to Markus' script (all credit to him for the original!) Here it is: https://gist.github.com/markwainwrigh...
Photo of Markus Stefanko

Markus Stefanko

  • 90 Points 75 badge 2x thumb
Hey Mark, thanks for the GIST, it however doesn't forward users to the desktop version.

I have updated the original article to include url parameters in the forward automatically : http://blog.stefanxo.com/2014/02/chec...
Photo of Shlomi Nir

Shlomi Nir

  • 60 Points
Hello,

We have tried to review the information you provided in this post but got so confused :S

If i have used one of the templates of Unbounce, and want it to be mobile friendly - i have clicked the "include viewport meta tag for mobile"

But the page is still not suite for mobile at 100% .

So from what i understand (and please correct me if i am wrong)
For every page we create we need to launch a NEW page with different URL with a mobile friendly template and post the script Oli has posted?

We really need the help :)

Thank you.
Photo of Johnny Opao

Johnny Opao, Developer

  • 7,920 Points 5k badge 2x thumb
Hello Shiomi!

Your correct. This workaround requires a mobile version of your page on a separate URL. The 'include viewport meta tag for mobile' should only be checked for your 'mobile' page. On your regular 'desktop' page leave this un-checked. The page by default will zoom out to the full page width.

When optimizing your mobile page we recommend setting the mobile page width to 320px.

We're currently working on responsive design so in the future you won't need to jump through these hoops. If you haven't already check out our inside unbounce post on our responsive progress:

http://inside.unbounce.com/product-de...
Photo of Adam Chopko

Adam Chopko

  • 114 Points 100 badge 2x thumb
Markus and others.
Thank you for the work around! (though looks like responsive is coming...soon...).

When I implement this Javascript workaround, are there considerations for SEO and AdWords which I should be sure to consider?

As context, I am trying to sell a single product, so I am using a single long-form site as both a homepage and a landing page. I want to make sure that for specific keywords (such as my company name), I appear high on Google, However, if I use the redirect method, wouldn't my root page just be blank (except for the javascript redirect). Would this then impact my Google search ranking? Would google hesitant to list www.mydomain.com/desktop as the #1 choice? (vs. if I kept all the content on www.mydomain.com for instance)

Thanks for any help here!