~ 8 ~

When you create a new variant,  all the content of the main website appears, mostly unchanged, but on a narrow page width.  It’s now up to you to re-arrange the layout as you wish for this new variant. You can move items around the page freely, reduce the width of text columns, resize and re-position images, and you have to do this for all the pages of your variant website. Note: When you first create a variant, the page size is changed, the page background is adjusted, but nothing else is moved. Since the design and layout of the variant is entirely up to the designer, it’s not possible to automatically create a variant layout.  Some of bundled themes, available from the Designs Gallery or the new Content Catalog, have multiple variants already designed. Those templates that have variants have ‘(R)’ appended to their name. Note: The ‘breakpoint’ between two variants is half way between the widths of the two. So in the above case for browser widths less than 720 it will show the narrow one and widths above that it will show the wider one. 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.

What’s shared across variants, and what’s not?

When you create a new variant, the content is shared across all variants, but the size and position of items on the page is local to each variant. If you edit the text it will be changed in both variants. If you change the size of objects, that will apply to one variant only (because it’s likely you will want objects to be different positions and sizes on the different variants). If you drag ‘n’ drop a photo onto an existing photo, it will be replaced in all variants. On the other hand if you edited the shape of the photo or cropped it, or changed the fill (image size, rotation or position inside the picture frame) then these are local to each variant.  This is useful because it means you can not only change the size and position of photos on the variants, but change their aspect ratio and image crop. Once you’ve created a variant then new items are local to that variant, but you can easily arrange that they are shared (called LiveShared) by right clicking and selecting Website variants  Share with all variants.

How to add a new object to appear on all variants

If you create a new object, say a text column, a graphic or photo, this is initially not shared across the variants. But if you want to share it use the Utilities  Website variants menu or just right click on it, and select Variants  Share with all variants. If you do not want an item on the page to be shared across all variants just un-select this same option.  Technical note: If you have different variants of photos, say a different size, crop or fill position, then Xara has to create multiple versions of the photo for the published website. However this doesn’t have a significant performance overhead (it doesn’t slow down your website), as the web browser loads the correct version initially, and then, in the background, downloads the other variant images. So this means the initial version you’re looking at (be it mobile or desktop) will always download as fast as it can, but if you change your browser width or orientation, it will instantly switch to the other version.

Xara Web Designer 10 release notes