Page 329 - Xara Web Designer Premium

Responsive web design 329

Variants and repeating objects

When repeating objects (on page 127) like navigation bars, headers and footers appear
in variants they cannot be shared across the variants. Instead each variant has its own
separate repeating set of objects.

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 417)
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