Conditional Visibility for separate experiences?

Design help General
1

Ok, I have a client that wants a very specific experience for mobile only. So different in fact that a fully responsive site isn’t going to do the job because the layouts and functionality are polar opposites. In theory, would I be able to use conditional visibility to virtually make two separate experiences entirely? Making one layout only visible on desktop and tablet, but then turn off visibility for mobile on every element entirely. Then design a complete mobile specific layout, making it only visible on mobile and turning off visibility for every other view?

I think the navigator panel in the designer will be chaos and I’m not sure what effect this would have on SEO. But generally is this possible to do?

Here is my public share link: LINK
(how to access public share link)

2

Anyone? Fingers crossed

1 Like
3

Just Visibility, not conditional visibility. Cond. visibility is for CMS items. Visibility is what you set for each element on the settings tab. You can also use Display for devices.

Technically possible yes. Now, hiding a whole page to show another and vice versa, depending on the device, is counter productive. Things that are hidden are loaded anyway most of the time, duplicated titles can harm your SEO etc.

If there’s a complete new experience for mobile, make a mobile page and use a Javascript code to detect the OS and redirect to the mobile page eventually. I do that for a lot of sites. This can also harm SEO if badly done. The best way is having Google to totally ignore the mobile home and work the SEO on the desktop home only.

4

Fantastic, thank you! Are there any resources for finding pre-made Javascript redirect codes? Or do I need to find someone to code this from scratch. Sorry if this sounds trivial, I know nothing about code.

5

Also, I just visiting your inb4 site. Great work, Priceless resource! I’ll be visiting it much more from here on out.

6

There’s many ways to think the script. One very effective one is to detect the OS and send to another page when a mobile OS is detected.

I’m using a script @bart made for me last year:

<script> if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { window.location.replace("/home-mobile"); //or window.location = "http://m.tesing.com"; } </script>

Edit the part with the mobile home page name /home-mobileand put it at page level on Home and before /body like this:

http://vincent.polenordstudio.fr/snap/txph2.jpg

1 Like
7

Great, thanks very much :slight_smile: That’s wonderful if it’s useful!

8

Thanks so much for this! You’ve been more than helpful!

1 Like
9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.