Page 429 - Xara Designer Pro X17

Web Graphics and Websites 429

Responsive ‘Retina’ or HiDPI Resolution Control
Mobile and tablet devices differ from most desktop web browsers in that they support far
higher resolution graphics.Designer Pro supports this completely automatically, and will
produce both normal resolution and Hi-DPI or Retina resolution images for all graphics
and photos. The website then intelligently uses the correct version of the image
depending on the resolution of the browsing device.
Older browsers such as IE8 and earlier do not support RWD, so these will only show the
main variant of your website.

Multiple variants
Traditionally creating RWD sites can involve complex Javascript programming. But since
Designer Pro 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. 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 reposition 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 (on page 50) 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 ONLINE CONTENT CATALOG - 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. Designer Pro 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.