~ 7 ~

Xara Designer Pro X10 shows each variant in a separate tab, so you can quickly and easily see and switch between the variants.   Because the variants are intimately related, and they are really part of the same document, all the variant tabs colored blue. You can switch between the variants just by selecting the appropriate document tab. If you close one tab of a multi-variant RWD document, it will close the whole document (after a suitable prompt if you have not saved any changes.) If you want to delete one of the variants use the Website variants dialog described above. 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.

Xara Designer Pro X10 release notes