I plan to add a meta tag to redirect non-javascript browsers to another non-JS version of the LP.
But how do I build a non-JS version of my LP that will work fine on browsers like Opera mini or even desktop visitors who have disabled javascript?
Hi Sidney,
What particular functionality is it that doesn’t work on those browsers? We would need to isolate those areas and try to figure a non JS way of accomplishing that for you.
Cheers
S.
Stuart,
Thanks for the quick reply. The primary issues appear to be (a) the alignment of page elements for mobile and (b) form submission for desktop doesn’t work.
See attached mobile screenshots. I know hardly anyone uses Opera but the salient point is that the same issues would likely exist on any browser without JS enabled. And who’s to say how many visitors don’t have JS enabled? I wouldn’t want to lose even 5% of potential conversions.
If you want to test it, please use only this URL to avoid skewing my meagre stats. 🙂
https://refinance.certysfinancial.com/a.html and please don’t submit the form on the next page that loads.
- On desktop chrome with JS disabled - Text styles are off but otherwise the page looks ok. But a big problem is the form doesn’t submit.
2) Opera mobile on my smartphone with JS enabled - this looks fine, works fine.
3) Opera Mini Emulator - looks bad but form seems to work
4) Opera Mobile emulator (I’m assuming JS is disabled) - looks bad and form submission doesn’t load the next page, it asks you to download an “fsg” file - I don’t know what that is but it’s probably something related to the zip code api script I have running on that page.
Hi Sidney,
I’m afraid to say that some of the functionality you have in your main LP is going to be difficult to recreate without JS. Nothing is impossible but I mean very difficult and very time consuming (think not commercially viable and not worth the effort for the tiny numbers). For the small amount of people that use a non JS compatible browser you’re approach should be to send them to a form that is really basic. I don’t just mean in terms of fields, images or content I mean in terms of functionality. No Zip code lookup and just a basic form asking for their contact details, maybe even be upfront and explain they are using an old browser or have switched some features off so why not leave their name and contact details and you’ll call them to help personally (brownie points straight away!), you’re not going to be able to offer the bells and whistles experience to people who are switching that kind of functionality off.
In terms of page layout, I don’t really trust emulators to render things the same as real devices would, so for the Opera Mini, if it works, that’s ideal, if you really want to follow up with making sure it looks better (again really worth the time for the small number of people?) then I would try to get a device with that browser on and give it a real test.
People switching JS off is a real issue and it fluctuates somewhat up and down depending on new releases of browsers, operating systems and various platforms. For the people that turn it off, you have to work with them, not around them, they’ve done it for their own reasons so just create a no JS basic form and work your offline processes around that.
I hope that helps a little, might not be the answer you were hoping for but it’s more realistic.
Cheers
S.
Stuart,
That is exactly what I intend to do. I want to create a basic page that renders with page elements aligned properly and where the forms work without JS. That brings me back to my question - how do I do that in Unbounce? Everything seems to be JS dependent by default.
Also - it’s estimated that Opera Mini has a 5% market share. That’s a potential loss of 5% of conversions. Cannot ignore that!
EDIT: Those emulators are pretty accurate. See attached screenshot from the actual Opera mini browser on my smartphone.
EDIT 2: There’s no reason why a user should have to scroll horizontally. The content can easily fit in 300 px wide. I need to fix this somehow.
Ok so we need to break this down into the individual problems. First up let’s tackle the no javascript enabled problem as that’s probably the easiest.
You’ll need to use a
tag in the body of your LP, this can be added in a custom html block and anything between the and tags will be run ONLY if the user has no JS enabled.
Read here about the tag - http://www.w3schools.com/tags/tag_noscript.asp
You could use this to provide a link to another landing page with no JS in it, or perhaps display a standard HTML form that doesn’t use JS for the submit function. It’s common practice for it to inform the customer that they have a browser that either doesn’t support JS or that they have it turned off. Common practice is to also give them advice on how to turn it on or explain the best experience from the LP comes with JS enabled. Whatever you decide to put between those tags is up to you but as long as you stick to HTML you should be fine.
In terms of Opera layout, have you designed the mobile responsive version of your landing page to fit a 300px wide viewport? If not then that would be the best way forward, if that’s not possible because you’ve already based your mobile responsive design on a different size then we would need to think about giving the user an option to redirect to another LP based on a 300px wide design, either automatically (if JS is enabled) or manually by again providing a link in a tag.
It’s going to take some planning and tweaking to make sure anyone with no JS doesn’t see a load of junk but something that still looks professional inside the tags but it is common practice.
Hope that helps a little, I’m sure there will be more to do coming off the back of this but I would definitely start with that.
Cheers
S.
Stuart - Yes to all of the above, unfortunately. I know how to add a noscript meta tag to redirect as mentioned in my original question. My page is already mobile responsive and the mobile version has the form set at 300 px width.
No offense - but you’re giving me suggestions I’ve already addressed above or am already aware of. 🙂
And why doesn’t the form submission work without JS enabled?
Something’s broken with the way Unbounce delivers pages to non-JS browsers - it’s messing up the page width/alignment and the form submission.
So the question remains - - how do I create a 100% non-JS page in Unbounce? Everything seems to be JS dependent by default.
No problem, gotta cover all the options.
I wasn’t referring to adding a redirect meta tag in the head of the html, I was meaning adding a
tag to the main body of your LP that displays a form or message when JS isn’t enabled.
/fsg is the url it calls using the page id with a post request to submit the form, as far as I can see it should post without JS enabled although any form validation looks to be made with JS so that could be a factor.
I’d suggest trying to create a brand new lp with no extra scripting added and see if it submits as a test. Sorry I can’t be more help than that but I’ve not experienced the specific issues you’re having so need to run through the motions of logic.
At this point I’d say pop an email over to support or Justin and ask their advice on this as it depends on the inner workings of Unbounce which I don’t have details about.
Cheers
S.
Thanks for trying to help, Stuart. Even if I create a new LP without adding any scripts and I manually disable jQuery, etc. Unbounce will still use some scripting by default for form validations and submissions. (EDIT: And the page alignment/width issue is just weird.)
I’ll go ahead and create a support ticket to get help on this.
No probs, if you wouldn’t mind I’d love to know the answer if you find a solution, never know when I may be up against the same blocks or someone else might need help.
Fingers crossed for you I’m sure the support team will be able to help 🙂
Reply
Log in to the Unbounce Community
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.