Page 432 - Xara Designer Pro X17

432 Web Graphics and Websites

Variants and Navigation bars
It’s likely that you will want a different Navigation bar design or layout on a narrow
variant. NavBars in each variant are independent, so you can customize them as
required, including changing the design of the bar by importing a NavBar design from the
ONLINE CONTENT CATALOG and dropping it on the existing bar in the variant you want to
change. You might for example want a horizontal bar for wide websites and a vertical
one for narrow devices.

One space-efficient solution for NavBars on a narrow mobile-friendly site variant is to
have just a single button NavBar with a menu of links to the other pages in the site,
instead of a bar with a button for each page. See Single button NavBars (on page 506)
for more detail.

Variants and Fit to Width websites
The FIT TO WIDTH ("UTILITIES" > "WEB EXPORT OPTIONS") option allows your website or
web document to scale to fit the width of the browser or device screen it’s being viewed
on. If the viewing device is wider than the page, the page zooms/scales up so it just fits.
If the viewing device is narrower than the page, the page content zooms/scales down so
it will fit with no need for horizontal scrollbars.
Depending on the design, the FIT TO WIDTH option may make having multiple variants
unnecessary, or at least reduce the number of variants required, because your content
will scale to fit the device it’s being viewed on. But since variants allow the page layout to
be changed too, they are still almost always essential. For example just scaling down
your website / document may make text too small on a small device, if the text doesn’t
occupy the full width of the page.

However the good news is you can use both features, VARIANTS and FIT TO WIDTH,
together. The closest matching variant will be selected automatically, as usual,
depending on the user’s device width. But additionally the content will be scaled to fit the
device width exactly. This gives a smoother transition between one variant and the next.
Fit to Width and Retina Images
(R)
By default, your website will display images at the standard 96DPI resolution, however
this will look blurry when scaled up beyond the normal 100% view. After a certain point
(R)
(by default 1.5x) your website will switch to the higher resolution 192DPI Retina images
that are already exported alongside your normal resolution images. This higher resolution
will improve the image quality when your website is scaled up.
(R)
PNG's under 20Kb will automatically switch to the Retina version when scaling over
1.0x due to their small size and impact on download speed.
See WEB EXPORT OPTIONS for more detail.

Publishing variants

Publishing your site with variants is easy and no different to publishing an ordinary
website. Your website is able to automatically determine the resolution of the viewing
device and then serve the appropriate variant based on its width.