Mobile Site Not Displaying Correctly

[roundsound]

I've published the site but the Mobile is jittery and when scrolling it bounces between pages. I used webpagetest.org who said Layout shifts exist and may be caused by images missing aspect ratio. Site is domesnatureretreat.com.

The CLS score is 0.009. 78 layout-critical images are lacking an aspect ratio, meaning the browser has no way of knowing how tall or wide an image is until it loads. This can cause content to shift as the image loads.
When I go to those images in the Web Designer GUI, an aspect ratio is stated.
Thanks for the help!

[Acorn]

I've published the site but the Mobile is jittery and when scrolling it bounces between pages. I used webpagetest.org who said Layout shifts exist and may be caused by images missing aspect ratio. Site is domesnatureretreat.com.
The CLS score is 0.009. 78 layout-critical images are lacking an aspect ratio, meaning the browser has no way of knowing how tall or wide an image is until it loads. This can cause content to shift as the image loads.
When I go to those images in the Web Designer GUI, an aspect ratio is stated.
Thanks for the help!

rs, Xara provides full image sizing so this may be what is being flagged as off but as I encountered almost 10,000 browser errors just navigating your site, I think your problems are deeper.

See https://www.talkgraphics.com/showthr...-Mobile-issues.
What you have is a Main and two Variants and have the site set as a Transition Website.

For mobile, you are shoving everything across in one go and the poor browser is choking with a smaller bandwidth and probably a low performance browser engine.
You have some 469 image files for quite a small site as well as a slew of videos. Every call to these adds a delay that is building up into the 10s of seconds.
It is possible that vimeo/YT are offering back static images without dimensions.
YT alone is downloading six instances of base.js (each 633kB). Vimeo is similar (3x120kB + 6x111kB). All for things people may ever watch.

Your view of the site may be shifting as so little of the site is being rendered quick enough for people not to notice.

You do not need a transitional website. This alone would cut the downloads into page-size chunks.; the worst will be the videos. I am sure there has to be a delayed embed to defer these downloads.
You probably do not need two variants.
You do not need a NavBar of images. You should be using text.

People on metered accounts will not visit twice.

Acorn

[roundsound]

Thanks Acorn.

[Acorn]

Thanks Acorn.

rs, I am sorry to sucker punch you with a major redesign but I think that you will have to.

It would be nice if someone else had an easier alternative to share with us.

Acorn

[roundsound]

I've started to optimize the site and it's helping but there is one problem left in the Mobile.
When I get to the bottom of a page and try to swipe down it takes me to the next page. Then when I get to the top of a page and swipe up it takes me to the previous page.

[Acorn]

Switch to a Scroll website?

Acorn

[roundsound]

How do I switch to a scroll website? So is this a feature of the template that I started with?

[Acorn]

[QUOTE=roundsound;654489]How do I switch to a scroll website? So is this a feature of the template that I started with?/QUOTE]rs, no, you have full control to pick how you want your site to behave. This, https://helpandsupport.xara.com/xara...xport_tab.html or similar shows where the setting options are.

In your case, I would go with a conventional Website with a sticky NavBar.

Acorn

[roundsound]

Beautiful....Thanks!! I hope those Magix folks are paying you a lot of money! You deserve.

[Acorn]

Beautiful....Thanks!! I hope those Magix folks are paying you a lot of money! You deserve.

I'll ask Xara to suggest it.

Acorn