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

[Egg Bramhill]

Hi Acorn

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

Probably a better method but as I understand the code I used it's not the browser size but screen size that determines which page to serve to the browser. So viewing the site on my desktop & reducing the browser width doesn't serve up the mobile version.

I agree re individual pages requiring individual links to individual mobile pages.

[Acorn]

Hi Egg, screen.width is for the resolution of the screen you are using. It is fine for mobiles where the application fits the screen, until you change orientation. On desktops, you clearly can have multiple monitors and application window sizes.
So overall the viewport is a better choice as it allows dynamic representation; Xara's Variant approach using this but shows and hides differnt sections of the same page. Mine, if developed, would present the appropriate variant if you have created separated sites.

The other necessary trick is to check the size before loading the full page to ensure a lot of download time is not wasted in getting the wrong view. Xara's approach probably fails here but I have never checked.

Acorn

[Miko]

Thanks, Guys. I found this going some way back - any thoughts? http://www.talkgraphics.com/showthre...t=mobile+sites

[Acorn]

Thanks, Guys. I found this going some way back - any thoughts? http://www.talkgraphics.com/showthre...t=mobile+sites

It asks the question, is the browser you are using a mobile one?

It does not acknowledge the screen resolution and is a one-off for any one web page.

I may be able to put sometime working in a day or two.

Acorn