Page 328 - Xara Web Designer Premium

328 Responsive web design

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.

Sharing across variants

When you create a new variant, most of the content is shared or Liveshared across all
variants, but the size and position of that content is local to each variant.

• If you edit the text it will be changed in all variants.
• If you change the size of objects the change will apply to one variant only (it’s likely
that you will want objects to have different positions and sizes on the different
variants).
• If you drag and drop a photo onto an existing photo, it will be replaced in all variants.
• 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.

Click on an object to see if it's Liveshared or not.

This photo has a double line marker,
top right, which indicates it’s
‘Liveshared’ on one or more variants.

You can resize, crop and adjust the
fill as required, and that will stay local
to each variant. but if you swap the
picture, say by dragging a new one
on top, then all variants will change.

When you create a new object - say a text area, photo or graphic, it's not initially shared
between variants. If you want to share it use the "UTILITIES" > "WEBSITE VARIANTS" menu
or just right click on it, and select "WEBSITE VARIANTS" > "SHARE WITH ALL VARIANTS".
Select "STOP SHARING WITH VARIANTS" if you don't want an object to be shared across
variants. This menu also gives you the option of deleting the object from all variants.

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 does not 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 in the mobile or desktop version) will always downloaded as fast as it can,
but that if you do change your browser width or orientation, it will instantly switch to the
other version.