Page 327 - Xara Web Designer Premium

Responsive web design 327

Mobile variant. Web Designer Premium 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.

Creating RWD Websites from existing sites

To create a variant of an existing website you will need to open the WEBSITE VARIANTS
dialog - any of the following steps will do this:

• Click "UTILITIES" > "WEBSITE VARIANTS" >"WEBSITE VARIANTS".
• Right-click on the document tab and select "WEBSITE VARIANTS" to open the dialog and
also to view your variants.
• Right click anywhere in the document work area and select "WEBSITE VARIANTS" >
"WEBSITE VARIANTS" to view the dialog.

Website variants dialog
Click the CREATE button and choose a design width in pixels. The two variants above
describe webpages of 760 pixels for the larger Main variant, and a Mobile variant which
has default pixel width of 480 pixels. What happens is that a visiting web browser with a
width of 620 pixels or greater will see the Main variant, whilst a browser with a width less
than 620 pixels will see the Mobile variant.

You can view and edit the dimensions of the existing variants by clicking on the
PROPERTIES... button.

When you create a new variant, all the content of the main website appears, mostly
unchanged, but the page size has changed and the page background is adjusted. 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.

You can change the title and the pixel width of a variant at any time by clicking on the
PROPERTIES and then UPDATE buttons in the dialog.

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 620 it will show the narrow one and