Creating a Mobile Variant:
Click on Utilities > Website Variants > Website Variants to bring up the variant dialog box.
Click on the "Create" button
Enter a name for your variant appropriate for its use, Mobile for example if it is going to be viewed mainly on mobile devices, or tablet, widescreen etc. Then enter the page width of your device. 480px is the most common page size for mobile devices. Click "Create" once completed.
You will need to then re-arrange the contents of each page in your new variant. Please keep this in mind:
- Text areas are shared, so deleting portions or amending text will be reflected where it is shared on other variants, however feel free to resize the text. You can un-share it by right-clicking the text > Website Variants > Stop Sharing
- Your NavBar will be copied and repeated on all pages in the variant, but not shared, so feel free to delete and rename buttons as required.
When a variant is created, a new tab is created for it with the name of your file and the name of the variant in brackets. This is to help navigate between your variants, and doesn't mean that they are a separate document.
Editing a variant:
Click on Utilities > Website Variants > Website Variants to bring up the variant dialog box, select a variant from the list and click "Properties". From there you can change the page width of the variant.
The page size in that dialog box is taken from the index page.
Saving your variants:
Remember that all variants in your website all belong to one document. The separate tabs might make you think that there are multiple .web/.xar files, but in fact all the variants of your website belong to one document. If you save the document, it will save changes across all variants.
For further information on creating variants watch our movies at http://www.xara.com/web-designer/tutorials-demos/48758.74303/ (Creating a Mobile Variant Part 1) and http://www.xara.com/web-designer/tutorials-demos/50594.76284 (Creating a Mobile Variant Part 2)