Accessibility issues with Xara Web Designer Premium

[pparamo]

You have some serious issues but few are around Accessibility.
Do not make the site a Supersite (scroll website), it does not need it. Page transitions are wasteful, especially for accessibility.

Acorn,

Would you mind explaining this point a little more? I thought that by adding separate pages this wasn't a big supersite. In my mind a scroll website would have been if I had one single page and I just kept adding content at the bottom.

Is there a part in the Xara manual I could check to see what you mean by page transitions and supersites?

Thank you

[Acorn]

Acorn,
Would you mind explaining this point a little more? I thought that by adding separate pages this wasn't a big supersite. In my mind a scroll website would have been if I had one single page and I just kept adding content at the bottom.
Is there a part in the Xara manual I could check to see what you mean by page transitions and supersites?
Thank you

pparamo, glad to.

In recent Xara Desktop Application (XDA) versions, the Supersite tab has been incorporated into the Utilities > Web Properties > Export tab and the functions renames.
Your website has address URL like #xl_xr_page_index-a showing. This is a sign that you are using a "Supersite". You creates a series of design pages: index, index-a, index-b, up to a template page index-t.

• You can and should rename these to reflect the content of the page: Web Properties > Page > page filename, keeping the first as index.
• Do also include a Page title.

In the Export tab, you appear to have selected Transition effect: Crossfade.

• I would change this to Website.
• You then get individual HTM files that are easier to bookmark.
• Only the required HTM page and its assets are called; currently, every page is downloaded for your website overhead (with these large image file) is massive.
• I would also select and set the Scale to Fit Width to that those with smaller viewports do not have the pages cropped and have to use a horizonal scrollbar.

A vertical Scroll website shows every page of your site, one after the other. Ideal for documentation but not what you would care for.
If you keep adding content to a long page, you just have a long page. It is not a "Scroll", which is paged.

So in choosing "Website", you lose any page transitions but deliver a smaller payload in bitesize chunks.

Returning to your large images. When you add a filter or other effect to an image in your XDA, it is a post-processing action that results in a different image.

• I have already advised to optimise them.
• In Web Properties, I would use Image > Image Filename for those that are used across pages, as a minimum. This will only help if each image has the same effects applied.

Don't go monumental, make a controlled change and examine the output adjust and recheck.

Acorn

[bwood]

@pparamo. When you purchased the program you would have a link to a PDF manual. New users to WD often jump right in and use a template with many, many pieces and functions. I won’t say it’s the way to start initially, but a good read of the manual would help you navigate the intricacies of the template you are using or designing.
I started small with nothing fancy, and used the instructional template in your WD catalogue. Good luck and welcome to th3mforum.
-Bill

[Acorn]

@pparamo, here is a demonstrator of what you can do to force image duplication and size down.

I filled the pages with the same image and added a 50% transparency.
Each page has a different page background.

However, I forced the image to be a Placeholder and code that links to the one true image that I hid in the !Church layer in the index page.
There are reasons for the !Church name and the fact the image has a Link to the layer it is in.

The code is:

<img src="index_htm_files/church@2x.jpg" width=100% height=100% style="opacity: 0.5;" />

set opacity to 1 and you only see the solid image. Set it to zero and you only see the page background.

You could have a hundred pages and they will only grow the entire website payload in kBs where you currently have many 10s of MB.

There is a current Xara issue around Image filename that seems to lose the images.
The cleanest workaround is to re-open your XDA and Preview again.

CSS - Church Watermark Backdrop.xar
The design file is large as the church image is a PNG and I have forced my use into it being a JPG.

Acorn

[Egg Bramhill]

As a matter of interest what would be advanagous between your method and one of placing the 'church' image on the page background & overlaying it with a rectangle on the Mouse-Off layer of the same size and different colours and transparencies?

EXAMPLE

[Acorn]

As a matter of interest what would be advanagous between your method and one of placing the 'church' image on the page background & overlaying it with a rectangle on the Mouse-Off layer of the same size and different colours and transparencies?
EXAMPLE

Egg, yous is probably better. What I had done first off was set up the image as a background fill to the page but Xara throws away the Image Filename.
I then chose to make the image transparent and leech through onto the page background.

Yours is more sensible and cleaner as it handles both WebP and Retina automatically.
Mine has more control over the options that I can apply with CSS but it way too complex for this simple need.

Thank you for adding a bit of reality back.
The point @pparamo need to address is the removal of lots of heavyweight images.

Acorn

[Egg Bramhill]

Thanks Acorn. There are many ways to create the desired effect but for non css users like myself I thought this was an easier answer.

What I'm trying to do now is to load the op's Mary image as a placeholder ( + Alpha) and load it once but have the placeholder resize/change alpha without loading individual images for each resize/alpha etc on individual pages.

[Egg Bramhill]

As an example I'm trying this within a placeholder:

<iframe src="https://parkeston.com/xara2021/pparoma/images/mary.jpg" width=100% height=100% scrolling=auto frameborder=0 marginheight=0 marginwidth=0 opacity = 50%> </iframe>

But this doesn't work

[Acorn]

As an example I'm trying this within a placeholder:
But this doesn't work

Egg, you need to include style ='...' for opacity: 0.5; width: 100%; height: 100%;

I would change iframe to img.

Acorn

[pparamo]

@acorn Thank you very much for the detailed post. I will surely go and try what you suggest doing one small change at a time and looking at the output.

I really appreciate all the time you spent educating me.