Variants, “Auto-fit” and “Scale to Fit Width” explained.

Variants.

Variants are different versions of the same website design. Each version is designed for the screen of a group of devices, e.g. smartphones, tablets, laptops, etc. They allow you to display properly page depending on the device. In the simplest version, there are two variants: mobile and main.

The main advantages of creating variants are obvious:

• Narrow pages that do not require horizontal scrolling
• Larger text that is more visible
• Navigation ideally with one finger.

From the program’s help:

“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. “

The page from the project containing variants is exported to one HTML file! Is that good? In my opinion no. When all versions of the page are stored in one file, this affects the loading speed. This can be particularly seen on mobile devices. Unfortunately, we can’t do anything about it. You have to focus on optimization in other places. I will write about it next time.

A quick reminder on how to create a variant. To create a variant open the Website variants dialog – There are 3 ways to do that:

• 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.

More info:

• Creating a Mobile Variant in Xara Web Designer Premium or Designer Pro – Part 1.
• How to create Mobile Variants using Xara Web Designer Premium and Xara Designer Pro: Part 2.
• How To delete an object from all variants.

Auto-fit.

‘Auto-fit’ capability that enables you to create flexible documents that adapt to almost any size change you or your customer might want. (http://releasenotes.xara.hosting/auto-fit/)

The feature is controlled by the Auto-Fit to Page dialog which you can access by right-clicking on any item on the page and selecting Auto-Fit to page … You can also find it in “Utilities”> “Auto-fit to page …”.

The Auto-fit all objects checkbox controls the automatic behavior of all items in the document. The dialog defaults to Automatic for all items in your document, but you can control the behavior of individual objects using the settings in the lower panel.

“Width & Height” is for print, social media, and presentation documents. For websites choose the “Width” only option.

If you design from scratch and you have one main variant only, don’t use auto-fit yet. Modifying the mobile variant will be more difficult. Watch the following two examples.

Example 1. Creating a mobile variant with the “Auto-fit” option enabled will “squish” the content.

Example 2. Creating a mobile variant with the “Auto-fit” option disabled.

If you already have the mobile and main variant, you can enable Auto-fit. Select the “Width” only option. This means things will be repositioned when you change the page width, but not when the page height. Test this setting by changing the page width and looking at how objects behave. In most cases, the automatic mode works fine. However, if the object does not adjust properly, turn off the automatic option, and set the appropriate behavior. You can find out more about exactly what the options mean in the program’s Help (Press F1 when the dialog is open).

The most important thing to remember is that “Auto-fit” works inside the project, not in the exported version of the page. Auto-fit saves you time when redesigning the site, creating more variants. In order for the page to scale automatically to the page width in the browser, we must use a different option.

“Scale to Fit Width”.

From version 16 of Xara Web Designer, the “Scale to Fit Width” setting is available in the export options.

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. If the screen is wider than the page, the page scales up so it just fits. If the viewing device is narrower than the page content 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 essential. You can use both features: “Variants” and “Fit To Width”, together. The closest matching variant will be selected automatically, 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.

In summary, my recommendation is to use two variants (main and mobile) + “Scale to Fit Width”. If you plan to use more variants than Auto-fit will be a good option too.