Mobile issues

[Andre7]

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.

[Andre7]

Αny thoughts. Any one???

[Acorn]

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:

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

Acorn

[Andre7]

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

[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?

[Acorn]

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

[Andre7]

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.