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

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

PNGs under 20Kb will automatically switch to the Retina version when scaling over 1.0x due to their small size and impact on download speed.