Page 326 - Xara Web Designer Premium

326 Responsive web design

Responsive ‘Retina’ or HiDPI Resolution Control
Mobile and tablet devices differ from most desktop web browsers in that they support far
higher resolution graphics.Web Designer Premium 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
Web Designer Premium 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 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