Creating an independent mobile site from the desktop

I was wondering if I can create an independent mobile site that has nothing to do with variants and place a redirect code in the index of the desktop to detect resolution lower than ........ so it jumps to the mobile site?
How will this help SEO?

So to sum it up, no I do not want to create a mobile variant. I will create a new file in xara and have my mobile site there.

Code like this:

Screen detection


<script type="text/javascript">
<!--
if (screen.width <= 800) {
document.location = "http://designfacet.com/mobilesite";
}
//-->
</script>

Quote:

---

Originally Posted by behzad

I was wondering if I can create an independent mobile site that has nothing to do with variants and place a redirect code in the index of the desktop to detect resolution lower than ........ so it jumps to the mobile site?
How will this help SEO?
So to sum it up, no I do not want to create a mobile variant. I will create a new file in xara and have my mobile site there.

Code like this: Screen detection

<script type="text/javascript">
<!--
if (screen.width <= 800) {
document.location = "http://designfacet.com/mobilesite";
}
//-->
</script>

---

behzad, almost.

The code has to also be aware of any jump back and it needs to jump to the same page otherwise the experience will be confusing and annoying.
It also has to be able to detect viewport changes dynamically: a change of width or zoom.

You will want it to quickly detect on load what the viewport size is.

It gets trickier if the landing pages are different between variants.

Your code is a bit dated.
<script>
if (screen.width <= 800) {
document.location = "http://designfacet.com/mobilesite/";
}
else {
document.location = "http://designfacet.com/";
}
</script>

You would need to parse out the current page URL.
Take this page: 'https://www.talkgraphics.com/showthread.php?85689-Creating-an-independent-mobile-site-from-the-desktop'
I would set up a variable var strUrl = document.location.href.split('/'); to access the various parts into an array: ['https:', '', 'www.talkgraphics.com', 'showthread.php?85689-Creating-an-independent-mobile-site-from-the-desktop'].
From that you could then add in your "/mobilesite/" and rebuild the "location" or if it exists cut it out ==> newUrl = strUrl[0] = '//' + strUrl[2] + '/mobilesite/' + strUrl[3].

The dynamic part requires a further bit of JavaScript coding.
Add this into a Placeholder Body to get a simple demo:

Code:

---

    <div id="height">Height: <span></span></div>
    <div id="width">Width: <span></span></div>

    <script>
        const height = document.querySelector("#height span");
        const width = document.querySelector("#width span");

        // Insert values on load of page
      window.onload = function() {
            height.innerHTML = window.innerHeight;
            width.innerHTML = window.innerWidth;
        };

        // Change values when window is resized
        window.onresize = function() {

            // Setting the current height & width
            // to the elements
            height.innerHTML = window.innerHeight;
            width.innerHTML = window.innerWidth;
        };
    </script>

---

The onload part needs to handle the first jump to the right site.
The onresize handles to toing and froing thereafter.

I don't know if this coding approach will handle Supersite/ Scroll websites.
I think it should.

I did this once for to separate out a Main and three Variants just to see what could be done.
I wanted to have different types of site presentation across all variants.
I have not dusted the code since as I would only do so for a paying client's needs.

Why would it impact SEO?
Separate sites that are independent and faster is what you are getting.
SEO is purely for Hallowe'en - to give people a scare.

Acorn

Thank you Acorn. I think I might stick to xara variant LOL;))

It would be better to Dear Xara asking for Variants to be set to Scrolling when the Main is Conventional and vice versa.

Acorn