Mobile issues

Hi everyone. This is the latest from my previous thread about the problem I encountered after I publish my work. Site is fine on desktop and tablet but when I view on phone the pages appear very small and and on the left side of the screen. Then they jump back to normal in a split second. It happens with all the pages . I test everything pasteboard, forgotten objects in background e.t.c but all seems fine. Is there something I missed or anyone ever encountered this problem? The link is : test1.skylife.me

I think i found what is the problem. With "scale to fit width" enabled, the page on mobile jump from left to right before it center itself. If i disable scale to fit width everything is fine. But this mean i can't use the option,unless i overlook the page dancing.
Does this make sense to anybody or it just happens to me. If so, what i am doing wrong?

Quote:

---

Originally Posted by Andre7

I think i found what is the problem. With "scale to fit width" enabled, the page on mobile jump from left to right before it center itself. If i disable scale to fit width everything is fine. But this mean i can't use the option,unless i overlook the page dancing.
Does this make sense to anybody or it just happens to me. If so, what i am doing wrong?

---

The best way to get this resolved is for you to create a fully cut-down version that has StFW set and the Variant is still jumping.

I think the payload of your website is quite large and it is still downloading assets before the JavaScript to centre the page has been reached.
You have 16MB of assets overall and 6MB is downloading alone for the first page, taking up to 10 seconds.
You only have to watch the NavBar in Main reposition itself after 2 seconds to guess that is the issue.
Your Hero picture of the frying pan alone is 1.3MB.

Acorn

I think the payload of your website is quite large and it is still downloading assets before the JavaScript to centre the page has been reached.
You have 16MB of assets overall and 6MB is downloading alone for the first page, taking up to 10 seconds.
You only have to watch the NavBar in Main reposition itself after 2 seconds to guess that is the issue.
Your Hero picture of the frying pan alone is 1.3MB.

Thank you so much Acorn for pointing me in the right direction.
I will optimize the site and I'll post back with the outcome.

Quote:

---

Originally Posted by Acorn

The best way to get this resolved is for you to create a fully cut-down version that has StFW set and the Variant is still jumping.

I think the payload of your website is quite large and it is still downloading assets before the JavaScript to centre the page has been reached.
You have 16MB of assets overall and 6MB is downloading alone for the first page, taking up to 10 seconds.
You only have to watch the NavBar in Main reposition itself after 2 seconds to guess that is the issue.
Your Hero picture of the frying pan alone is 1.3MB.

Acorn

---

Thank you so much Acorn for pointing me in the right direction.
I will optimize the site and I'll post back with the outcome

Back again with update. I have rebuilt the home page just for testing. The problem still there. Desktop fine, tablet fine. Mobile though open again as small on the left side of the screen and then jump and center itself. I've spent the last 3 days to find the root of the problem but I can't. The only way I can fix it is if I disable fit to page width on the export menu. But this mean I have to build a tablet variant and I don't really want to do that. My settings are 1440px - 720px and export 1600. Any help it will very much appreciated. It's only one page I tested with, so there is not any conflict with the size of the site.

Quote:

---

Originally Posted by Andre7

Back again with update. I have rebuilt the home page just for testing. The problem still there. Desktop fine, tablet fine. Mobile though open again as small on the left side of the screen and then jump and center itself. I've spent the last 3 days to find the root of the problem but I can't. The only way I can fix it is if I disable fit to page width on the export menu. But this mean I have to build a tablet variant and I don't really want to do that. My settings are 1440px - 720px and export 1600. Any help it will very much appreciated. It's only one page I tested with, so there is not any conflict with the size of the site.

---

Can't really help when your test site is now made with NicePage.

As it is now a smaller one-page sample, can you upload the design file?

Acorn

Quote:

---

Originally Posted by Acorn

Can't really help when your test site is now made with NicePage.

As it is now a smaller one-page sample, can you upload the design file?

Acorn

---

Yes . Silly me. I've been trying different builders to see if I can spot the problem. This is a subdomain I use just for testing. I will post the link ASAP. Thank you Acorn for looking at my problem

Quote:

---

Originally Posted by Andre7

Can't really help when your test site is now made with NicePage.

As it is now a smaller one-page sample, can you upload the design file?

Acorn

---

Hi. Just send the link. It is the same as before. " test1.skylife.me " Thanks in advance

Quote:

---

Originally Posted by Andre7

Hi. Just send the link. It is the same as before. " test1.skylife.me " Thanks in advance

---

Andre, this is still of no use. I need your design file - XAR/WEB.

I have no issues with any of you sizing on a desktop browser. It still seems slow to load.

Acorn

Quote:

---

Originally Posted by Acorn

Andre, this is still of no use. I need your design file - XAR/WEB.

I have no issues with any of you sizing on a desktop browser. It still seems slow to load.

Acorn

---

Can you please guide me how to send the xar file? I am not familiar with the settings on this forum. Thanks again Acorn and sorry for wasting your time.

List Reply then Go Advanced and click the attachment icon.
There is a file size limit.

Acorn

Attachment 133574

I send the link. I hope i got it right.

Andre, thank you for the design file.

I open locally and saw no jumping and far fewer errors.
I emulated in a range of devices with nothing untoward.
I checked in a number of browsers.

I published to Xara Cloud, https://shared.xara.com/2gjCUg8JAD, with the same results.

I have no console errors for my published version.
Rechecking your published test1.skylife.me, I still am finding a shedload of console errors.

I will leave my published one on-line for a time so you can compare responses against yours.

Perhaps if you purge and republish, that mine clear some errors.

The only difference that I can see is you have two IFRAMES, Main & Variant, for xara_iframe (www.foodbooking.com/).
If this is the issue then I would remove both and have a stand alone separate webpage for this.

Acorn

Quote:

---

Originally Posted by Acorn

Andre, thank you for the design file.

I open locally and saw no jumping and far fewer errors.
I emulated in a range of devices with nothing untoward.
I checked in a number of browsers.

I published to Xara Cloud, https://shared.xara.com/2gjCUg8JAD, with the same results.

I have no console errors for my published version.
Rechecking your published test1.skylife.me, I still am finding a shedload of console errors.

I will leave my published one on-line for a time so you can compare responses against yours.

Perhaps if you purge and republish, that mine clear some errors.

The only difference that I can see is you have two IFRAMES, Main & Variant, for xara_iframe (www.foodbooking.com/).
If this is the issue then I would remove both and have a stand alone separate webpage for this.

Acorn

---

What types of errors ? Can you give me advice how to avoid them. I am planning to rebuild the website and i can do with some advice not to repeat the same errors. Thank you so much for your time and all the help Acorn.
I will follow your advice and i remove the i frames

Finally the problem was the scale to fit width. It causes the jumping. When i disable it all it's fine. I am very surprised that no one came across this problem. It happens with all my websites. About seven in total.
I like to hear your thoughts about this. If i am right that means STFW is not doing what it supposed to do. It also means, for best results you need 3 variants and disable STFW which is a shame because i love this option.
I am not an expert but to my knowledge i went through everything. I even rebuild 2 of my websites from scratch in case i missed something. It happens all the time. STFW on, page jump (more notable on mobile) STFW turned off, everything is perfect.

Αny thoughts. Any one???

Andre, I am sorry this has been a battle for you.

I have looked at your design more closely.
I think you have a couple of unnecessary conflicts happening.

When you are using scale to fit width, there is no real need to include Stretch for headers, panels & footers or the hero image.
With them set to Stretch, what seems to be happening is the page is resized but then it notices the stretch shapes need to be readjusted so there is a delay while this all cycles through.
The other problem is you have set the hero image and header & footer to be a different size to the page width - more calculations as each different shape now has its own scaling factor.

Keeping StFT, the only surprise will be Main's Pasteboard colour showing above 1600px; I suggest a middle to dark blue just light of the top bar.

Here is a rework: https://shared.xara.com/Yk0Zqsld7O.
Performance in Lighthouse is now 99%, up from 95% for Main.

I have seen the top bar resizing so what I would do is set the page background to that colour and remove the top bar entirely. Faster and no jump.

The page resize is still there but less than a quarter of what I have seen.

I would try and keep StFW as introducing a total of three designs in a transitional site design is going to slow down and disappoint everyone.

Regardless of any tweaks, I think you have good evidence to challenge Xara about this issue.

The only other solution I can think of is to fade the page in so that by the time it is fully visible, the jumping has stopped:

Code:

---

<style>
html, body {
  animation: fadein 2s;
}
@keyframes fadein {
  0%, 65% { opacity: 0; }
  100%    { opacity: 1; }
}
</style>

---

Acorn

Thanks Acorn for the quick response. I see what you mean. Your example is a lot better and the jump is not very noticeable. Nevertheless I think this is a bug from Xara's part and shouldn't be happening.
I tried the code for the fade in and worked fine but not something I implement at this time as this is a client website

So far no one came up with a solution. So I guess the option "stretch to fit width " is completely useless, unless you compromise with the pages jumping and resizing in variants. I've spent days trying to find a solution but there isn't any, as this is just a bug and I just waste my time.
Acorn give me some advice, which I followed to the letter but nothing worked. I even test it with a blank page with no content and still the same. STFW it does not work as intended. The other thing is baffling me is. How everybody is happy with this and actually highly recommend the "stretch to fit width" feature, when they very well know it doesn't work?

Quote:

---

Originally Posted by Andre7

So far no one came up with a solution. So I guess the option "stretch to fit width " is completely useless, unless you compromise with the pages jumping and resizing in variants. I've spent days trying to find a solution but there isn't any, as this is just a bug and I just waste my time.
Acorn give me some advice, which I followed to the letter but nothing worked. I even test it with a blank page with no content and still the same. STFW it does not work as intended. The other thing is baffling me is. How everybody is happy with this and actually highly recommend the "stretch to fit width" feature, when they very well know it doesn't work?

---

Andre

I have created an almost blank design: Attachment 133595
It has a Main and a Variant.
It used different page colours and a letter (A, B).
I included two types of Full Width shapes.

If I run this and refresh (F5) at various width, I get the most pronounced flicker at the transition between the Main and Variant, which I would expect.

In the above file, I added CSS identical to my prior (#19) but this time the transition delay is set to 16mS, around the lower frame rate of most computer browsers, 62.5Hz. This goes into the Website > Code > Head so the page is not visible immediately for the first 10mS, whereon it fades in over the next 5mS.

With my test file, I have no flicker in Preview, local Export or server-side.
For production purposes, I would double the time repeatedly until I was in a position where I knew all my assets were fully loaded.
I would use the browser Developer Tools > Network > [Ctrl+F5] to determine my load time for Main and Variant.

You have not advised if you are now using a Conventional Website approach.

All what you have experienced has been well-documented back to Xara when it was first featured.

When using Variants with lots of pages and content, I employ a number of methods:

1. The CSS above is a quick win.
2. Using lazy loading is another.
3. Avoiding transition websites with variants, a third.
4. Reducing images, promoting meaningful content.
5. Reducing page complexity.
6. Spreading items over more pages.
7. Re-using image assets by using image filenames.
8. Adopting WebP for images.
9. Using SVG where possible.
10. Losing gimmicks.

Acorn

Quote:

---

Originally Posted by Acorn

Andre

I have created an almost blank design: Attachment 133595
It has a Main and a Variant.
It used different page colours and a letter (A, B).
I included two types of Full Width shapes.

If I run this and refresh (F5) at various width, I get the most pronounced flicker at the transition between the Main and Variant, which I would expect.

In the above file, I added CSS identical to my prior (#19) but this time the transition delay is set to 16mS, around the lower frame rate of most computer browsers, 62.5Hz. This goes into the Website > Code > Head so the page is not visible immediately for the first 10mS, whereon it fades in over the next 5mS.

With my test file, I have no flicker in Preview, local Export or server-side.
For production purposes, I would double the time repeatedly until I was in a position where I knew all my assets were fully loaded.
I would use the browser Developer Tools > Network > [Ctrl+F5] to determine my load time for Main and Variant.

You have not advised if you are now using a Conventional Website approach.

All what you have experienced has been well-documented back to Xara when it was first featured.

When using Variants with lots of pages and content, I employ a number of methods:

1. The CSS above is a quick win.
2. Using lazy loading is another.
3. Avoiding transition websites with variants, a third.
4. Reducing images, promoting meaningful content.
5. Reducing page complexity.
6. Spreading items over more pages.
7. Re-using image assets by using image filenames.
8. Adopting WebP for images.
9. Using SVG where possible.
10. Losing gimmicks.

Acorn

---

Thank you so much for the quick response Acorn. I have tried most of these on your list and I realise, in order to avoid fighting the program instead using it, the only other solution is creating 3 variants. If the purpose of STFW was to help users to create less variants then this feature is completely useless. This is my opinion. I don't think we the users have to battle with CSS and other workarounds just to make a basic feature work. Thanks again Acorn for your efforts to help me and excuse my frustration but I wasted to much time on this.

Quote:

---

Originally Posted by Andre7

Thank you so much for the quick response Acorn. I have tried most of these on your list and I realise, in order to avoid fighting the program instead using it, the only other solution is creating 3 variants. If the purpose of STFW was to help users to create less variants then this feature is completely useless. This is my opinion. I don't think we the users have to battle with CSS and other workarounds just to make a basic feature work. Thanks again Acorn for your efforts to help me and excuse my frustration but I wasted to much time on this.

---

Andre, it may be 3 variants might work for you but you are then placing the scaling of your work on the smartphone/browser and ultimately the viewer as a responsive approach is really only tuned for the widths you chose.
You are not simply a user of the product, you are a designer using a tool. Every tool has its quirks and faults. A sprinkling of CSS should be seen as a Widget and I could have presented it as a black-box without explanation. I don't see challenges for things like ECWID, where it has a genuine Xara/ECWID fail across Variants.

I think my 'widget' works and those who need it are free to use. What pleased me is there are few pure CSS solutions around on the Web, most seem to use JavaScript or jQuery, both with their own issues.
Further, Xara in delivering its new Modular Websites, seems to have gone partway into accommodating the flashing around StFW by setting up Fade Ins for most of its Web Blocks. rather than use my CSS approach, you might try selecting everything on the page (without current Web Animations) and using Reveal > Fad in instead. No CSS, just Xara's in-built JavaScript functions.

Workarounds are a designer's privilege and Xara's technical backlog.

Acorn

I am going to try the fade approach Acorn and see how it goes. I would like to thank you once again for taking the time with me and for your patience. I love Xara and all those little challenges , as frustrating as they are make the program more exciting. Thanks again. I feel a bit wiser after our chat

Quote:

---

Originally Posted by Andre7

I am going to try the fade approach Acorn and see how it goes. I would like to thank you once again for taking the time with me and for your patience. I love Xara and all those little challenges , as frustrating as they are make the program more exciting. Thanks again. I feel a bit wiser after our chat

---

Andre, here is the publish link for my test file: https://shared.xara.com/6KTC5rSem3.

Acorn

Quote:

---

Originally Posted by Acorn

Andre, here is the publish link for my test file: https://shared.xara.com/6KTC5rSem3.

Acorn

---

Thank you Acorn. Any chance you can send me the xar file of this so I can see and recreate the steps you took? Looking good and will be thrilled if I can apply this to my website. Thanks again

Quote:

---

Originally Posted by Andre7

Thank you Acorn. Any chance you can send me the xar file of this so I can see and recreate the steps you took? Looking good and will be thrilled if I can apply this to my website. Thanks again

---

Andre, here you go: Attachment 133604.

Acorn

Quote:

---

Originally Posted by Acorn

Andre, here you go: Attachment 133604.

Acorn

---

This is awesome. I don't know what i do without your help. Thanks a million