Multiple variants

Traditionally creating Responsive Web Design (RWD) sites can involve complex Javascript programming. But since Xara is a 'zero programming' designer focused tool, the user still has all the power of freeform layout, 'anything anywhere' web design - and can also create multiple variants of the same website. For example you can create one variant designed for narrow screen mobile devices, perhaps another layout for intermediate small screen tablets, and another variant for a traditional wide screen desktop.

The important thing is that the content - that is the text, the pictures, the graphics and color schemes - are shared between all the variants. The second important point is that the multiple layout variants for each page are not separate HTML files, but are all part of one HTML file, that can dynamically and instantly change from one layout to another depending on the browser width.

For each variant you produce you can customize the layout as much as you want. You can resize and re-position elements on the page and these remain shared between the variants. Edit the text for the narrow mobile variant and the text is updated for the other variants. You can also choose to update the Text Style of a variant and have the changes apply to that variant only. Or you can decide that you want different content or graphics on one variant - mobile variants usually have reduced content.

When you add or delete a page in one variant, it automatically creates or removes the page in the other variants. So your website always has the same page arrangement in all variants.

Web pages have to be named in order to be shared across variants, if the page is not named then one will be automatically applied.

Creating RWD Websites from templates

By far the easiest way to start using variants is to use one of the website template designs from the - Just import the website template to open it and begin editing.

When you open a template you will see two document tabs, one will be the main website document, referred to as the Main variant, and the other, narrower template will be the Mobile variant. Xara shows each variant in a separate tab, so you can quickly and easily switch between the variants. You might find it helpful to organize your web documents using the "Window" > "Arrange Views" menu option to line up your variants next to one another.