Pages not scaled on mobile

[paulm]

I am new to xara after many years with WebPlus (like others I suspect) but it's not been a good start.

I am trying to make responsive pages using page variants. Sound like a good idea.

The help states this:

"Also note because most mobile devices always try to fit the browser content into the screen, it doesn't matter that your page is wider than their screen pixels - it will be scaled down to fit by the browser."

Except it doesnt. My new xara test pages are not. I even tried publishing a whole website template unaltered but still no scaling and especially mess up when rotating the screen.
My WebPlus pages are scaled to fit a tablet and phone and I dont recall doing anything special.

What am I missing here? Note I am working with just one page called test.htm because have I have existing pages including index.htm on the server. But each page should stand alone shouldn't it?

[Egg Bramhill]

Hi Paul & welcome to TG.

"Also note because most mobile devices always try to fit the browser content into the screen, it doesn't matter that your page is wider than their screen pixels - it will be scaled down to fit by the browser."

That statement is generally true. Most mobile devices will shrink a desktop website down tho fit a mobile screen. And pretty useless it is too. You'll end up pinching and zooming to view the screen in anything like readable content.

That's why Xara can create variants. It creates one index.htm file and dependant on the viewing platform serves up either a desktop version or a mobile version (or several others inbetween versions if required but I've never found this necesary).

So what you do is create a desktop site (one page, index.htm, for now) say 960px wide.

Then go Utilities / Website Variant / Website Variant / Create / and by default it offers to create a variant named mobile @ 480px wide. Hit create & close.

You now have two tabs with the same name but one is called Main the other Mobile. At this point they look exactly the same. You need to go into the mobile version and resize all text boxes and images to fit within the mobiles 480px width.

Then preview. You should now be able to see both variants by reducing & enlarging you browser window.

When you happy, publish.

[Egg Bramhill]

I attach a simple sample xar file. Open it and preview, altering the browser window. Look at the difference between the Main & Mobile layout.