Mobile Friendly Website

[Egg Bramhill]

Thanks for the clarification Acorn.

Google SEO doesn't appear to like seperate mobile sites either, so possibly not a good path to go down if the site is in a highly competitive market.

[Miko]

Thank you, Acorn, for the offer.

Thanks, Egg, the site is not in any competitive market so this is not a problem.

[Acorn]

OK, here goes.

I have always disliked Xara's approach to Variants as the size of each page, with assets, has to cover the Main and all the Variants.
I don't believe there is any lazy loading so the download time is larger. I have not checked it all the assets have to be downloaded and, only then, is the mobile page shown, i.e., all the Main page's graphics are an overhead.

Happy for Xara to disprove these guesses.

The example file - JS - Variants on a Shoestring.xar - is the start of my alternative approach.
There are no subfolders in this one but there is nothing to stop a rewrite of the pathname to handle ../mobile/.. & ../tablet/.. & ../ipadmini/.., if you wanted.
The commented-out section on location lists all the available methods location uses.

The downside is keeping track across four design files; this is hard enough with Xara's Variants but probably manageable.

My example file has mashed everything into one file.
The code is in the Website Code (Head) and Website Code (Body).
The code detects the browser with and redirects the current page to the appropriate Main or variant.
Each Variant collection has the same Page filename with the addition of a suffix for small, medium & large.
For any given page, you must have Page filenames; <page>, <page>-s, <page>-m & <page>-l.
Miss one and you get an error. I could code for this but have not do so yet.

Each s/m/l has a declared page width in a variable, pagesize.
You can change this one line for other values. No other changes are needed.

I have checked for a couple of browsers and changed widths at random and all seems benign.
I have even check that links to an anchor are handled across all the Variants.

The one downside is there is a flicker on using a NavBar as i default the NavBar links to the Main so if you are on a mobile page, it will start to load be new Main page and then revert to the correct page for the mobile view.
This alone might be a killer for the approach. If I remove the comments and minify the code, that might improve matters.

If you have a chance to experiment, I would be grateful for comments and bugs.
All pages appears to fully render in one eight of a second.

Flickerly,
Acorn

[Egg Bramhill]

Hi Acorn, had a quick look and can't see any issues at present. Only looking at the index page, it appears to work well apart from the occasional change within the vertical scroll bar, but I can't replicate it 100% of the time and in reality your code is based on supplying the browser a set window size not me reducing the browser size by reducing the browser windows width.

[Acorn]

Hi Acorn, had a quick look and can't see any issues at present. Only looking at the index page, it appears to work well apart from the occasional change within the vertical scroll bar, but I can't replicate it 100% of the time and in reality your code is based on supplying the browser a set window size not me reducing the browser size by reducing the browser windows width.

Thanks Egg.

The problem with the flicker can be resolved by making the NavBar on each Variant specific to that collection of pages.

The simplest work flow is to have four separate files with Page filenames set for Main or Variants; publishing is then done for each design file.
I could see myself creating these initially to get page widths and NavBars sorted then grouping into one master file thereafter.

I will play with coding up the handling of missing Variants and pages.

Acorn

[Acorn]

For those patiently following this Thread, i have removed the flicker at the cost of having to maintain four NavBars; Navbars are cheap overall.

I have added a live check for the Page filename to be there to avoid any dead pages; the sixe change is merely skipped.

i have tidied up the code a little.

Here is the new, updated version: JS - Variants on a Shoestring.xar.

I am interested if anyone else see merit in the approach.

Necessarily, the approach does not satisfy a Supersite, which I consider to be a special case of flash over content anyhow.

Acorn

[Acorn]

Just realised that a local Website Export will not return true for the fileExists() function so it needs a further check to skip the checking when exported locally.

Acorn

[Miko]

Thank you for doing this - it is very much appreciated.

[Acorn]

I have added a check for a local Export.
If your get a Page not Found then your have missed a Variant page.

You should only use this approach for checking your work before publishing fully.

Latest version: JS - Variants on a Shoestring.xar

Acorn

[davidlee21]

Almost 70% of the website traffic is from mobile and smartphones. So it is very important to optimise the website for mobile. I would suggest having the necessary pages on the mobile version.