Website variants help you optimize your website for smartphone and tablet displays. They make your website responsive. This means that, depending on the width of the user's browser, a different version of your website is opened which is best suited for being displayed at those dimensions.
Most of the templates in the Designs Gallery already come with responsive website variants.
There are a few things you should know about editing individual variants of a website:
Sharing/unsharing objects across variants
When you change the size or position of an object, these changes are automatically carried over to all other variants in your project if you have the option "Share with all variants" enabled in the object's context menu.
This also applies to text. If, for example, you edit the mobile version of a text object, your changes will be applied to the text in all other variants as well.
Mobile variants often contain less content than larger variants. If you only want to make changes to a single variant in your project, you have to ungroup the elements you want to edit first. To do this, right-click the object or text and select "Website variants" > "Stop sharing with variants".
Sometimes it makes sense to redesign the navigation bar for your mobile variant.
The buttons on the NavBar could be difficult to use if you don't make appropriate adjustments to account for the lack of space available on smaller screens.
One way to handle this issue is to create a large, expandable burger menu that contains all the items in your normal NavBar.
Widgets and videos
It's best to avoid using Flash (.swf/.flv files) on mobile variants, since most mobile platforms do not support it.
If you want to embed a video in your website, use MP4 with h.264 encoding instead.
All the widgets in the Designs Gallery are already optimized for mobile displays, so feel free to use them without worrying about needing to make any changes.
Widgets cannot be shared across variants, which means you'll need to create a copy of the widget for each variant.
If you update a widget, you must also update the widgets in your other variants separately.
Responsive design on older browsers
Older browsers such as Internet Explorer 8 do not support responsive design and will therefore only display the main variant of your website.