Mobile Friendly Website

[Miko]

I have a 55-page long website and I would like to create a mobile-friendly website but it does not need to have 55 pages. Is it possible to create a smaller separate website with say 5 or six pages and then link the two so that anyone viewing on a mobile will get the mobile version? Hope this makes sense.

[gwpriester]

I can never remember exactly but I think the best plan is to create a mobile variant, only do the pages you need and create a menu that only links to those pages.

I think if you delete a page from the mobile variant it deletes it from the main site as well.

[Miko]

Thanks, Gary but I was rather hoping not to go down that route. I recall a few years ago before WD had the function to create responsive sites, that it was possible to create a 480px site separately and then link by some code. Was that you by any chance?

[gwpriester]

You can create a 480px variant, which is for smart phones and small tablets. The only advantage to this as I can see is the two publish at the same time and share the same URL.

[Egg Bramhill]

Miko, try this.
Create a copy of your sites web/xar file. Rename it 'mobile' or similar.
Delete all the pages you don't want on the mobile version.
Resize the pages to 480px and rescale the content to fit.
Upload this to a sub-directory on your server called 'mobile'

Now return to your main sites xar/web file.
Create a placeholder and place the following into the sites head.

<script type="text/javascript">
<!--
if (screen.width <= 600) {
document.location = "your-domain-name/mobile/index.htm";
}
//-->
</script>

Code Origin


Test this on your desktop & mobile:
My Example

[Acorn]

Egg, the code has to handle dynamic switching of the Viewport size, H to V or browser width changes.

Using jQuery:

<script>
$(document).ready(function(){
  checkVariant();
});

window.onresize = function(event) {
  checkVariant();
}

function checkVariant() {
  vpw = $(window).width();
  if ( vpw<= 600) {
    document.location = "your-domain-name/mobile/index.htm";
    }
  if ( vpw>600) {
    document.location = "your-domain-name/index.htm";
    }

}
</script>

Similarly, each page's address needs to be detected and used to replace "index".

The example code only has a breakpoint at 600px, so Main and one Variant.
It requires more finesse to have multiple variants and a graduated transition spread.

I have not checked or finished the code, just my ideas.

Acorn