Best practice for variant sites

General Notes for creating variant based websites

For each variant you produce you can customize the layout as much as you want. You can resize and reposition elements on the page - text, photos or whatever - and these remain shared between the variants. Edit the text for the narrow mobile variant and the text is updated for the other variants. Or you can decide that you want different content or graphics on one variant. It's not uncommon that mobile variants have reduced content - all this is possible with Xara Web Designer RWD.

Navigations bars

It may be sensible to redesign your website navigation bar on a mobile variant, as the buttons may be hard to press if the size is small, and the space on your page will be limited for a full size bar.

One way to overcome this is by designing one larger button that drops down other menu items; Have a look at the mobile variant of the "Sculpture Theme" in the Designs Gallery under Website Themes General as an example of this.

Widgets and Videos

Avoid using flash (.swf/.flv files) as most mobile platforms don't support flash. If you are displaying a video, use mp4 with h.264 encoding.

The widgets in the Designs Gallery are all optimized for mobile viewing already, so you don't need to worry about using them. If you are resizing them to fit on a mobile page, please remember to keep the aspect ratio at 100% for best viewing (or basically when resizing, drag the corner handles, not the top or side handles).

Widgets can't be shared between variants so you will need to create a copy. When you update one, you will need to go into the other variants to update the others.

Switching to the mobile variant

We strongly recommend keeping the page width constant in each variant. Changing the page width on one page will cause the mobile variant to display at a different width than expected, as the 50% breakpoint is per page and not a specific value. If you change the width of a page from 770px to 1260px, then the mobile variant will show at 870px instead of 625px, because that is the 50% mark between the two sizes. Keeping a uniform page size is good web design practice as well.

Older browsers

Older browsers such as IE8 and earlier do not support RWD, so these will only show the main variant of your website.


For further information on creating variants watch our movies at (Creating a Mobile Variant Part 1) and (Creating a Mobile Variant Part 2).

(11 vote(s))
Not helpful