Responsive Web Design


Responsive web design allows your web pages to vary their layout depending on the screen size of the device being used to view your site. The page content should fit horizontally within a specified view to prevent the need for the site visitor to pan horizontally.

This is achieved in Web Designer by creating separate variants of your website and defining the points at which a particular variant should be displayed. Content, that is the text, the pictures, the graphics and colour schemes, are shared between all the variants. When exporting, each variant of a page is exported to the same HTML. The correct variant will automatically display depending on the screen width of the visiting browser/ device and provide an optimal experience for your site visitor no matter whether they visit your site via their mobile, tablet or desktop.

Web Designer provides you with the freedom to create multiple variants so you could for example create one variant designed for narrow screen mobile devices, perhaps another layout for intermediate small screen tablets, and another variant for traditional wide screen desktop. Web Designer will automatically set the breakpoints at which each variant should be displayed. The exported website will also detect orientation changes. Many tablets report a different screen size when they are viewed in portrait view than when viewed in landscape view. You could for example have your main variant shown when a visitor views your site in landscape mode and show a smaller variant when they view your site in portrait mode.

For each variant you produce you can customize the layout as much as you want. You can resize and reposition elements on the page; the text, the photos, 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.

Variants can be created for conventional websites as well as supersites.

RWD has been implemented from Designer Pro X10 and Web Designer 10 Premium onwards. Please see above for the FAQ on RWD. We also have a demo movie that shows you how to create variants on our Web Designer website here. If you can't find an answer to your question in the FAQs or movie or in the help guide (F1), please drop support a ticket at

Frequently Asked Questions

Please refer to this article on creating variants. There is also a section in the help guide (Help > Web Designer Help) under Responsive Web Design

Firstly, double click (or right-click > Edit) the Navigation bar to bring up the Navigation Bar Properties window.

Then, create 1 button called "Site Menu", or what you would like it called, but don't link it to anything (Double Click the URL and select the "do nothing" option). Delete the other buttons as well.

To add the links automatically, turn on the Site Navigation Bar option in the dialog (or turn it off and then on again if it was already on). You'll see your menu becomes populated with a link to each page of your site. Edit the names of each entry in the menu if you don't want them the same as the page names. If you prefer to add the buttons manually, click the little "+" next to the button you have just created and add each button in there.

There's a selection of different navbar designs in the Designs Gallery under Page Elements & Widgets > Navigation bars. Also each of the themes under Website Themes (General) have their own navbar designs. Change the design of your navbar by dragging a new design from the Designs Gallery and dropping it on your bar.

IMPORTANT: Note that some navbars have first and last button designs that differ from the design of their center buttons. These navbars are unsuitable for single-button use because the centre button design is unlikely to look good on its own, so the Navigation Bar Properties dialog will not allow you to delete the left and right buttons from these bars to leave just a single button. So choose a navbar design where all buttons on the bar look the same.

If you have a mobile site with a 480px wide, and a main site of 920px wide, then between these two sites there is a point that is exactly 50% from each variant called the breakpoint. This breakpoint for this example would be at 700px for these two site sizes, because that is in the middle of these two variants. Your mobile variant will then show up to a screen size of 700px, and your main variant will then show from screen sizes 700px onwards, or until the next breakpoint which again, will be 50% between the main and the next variant (e.g. a widescreen version of your website).

Please see the below question if you would like to change this breakpoint value.

Should you wish to change the percentage value at which your website decides which variant to show (in relation to the above question), please see these instructions. This is for advanced users only. The breakpoint value will not need any alteration for the majority of websites.

Please follow these steps carefully and only make the advised changes. Making other changes to your registry could cause stability issues with your operating system;

  1. Close Xara (Important! The steps below will not work if Xara is open)
  2. Open the registry by pressing the Windows key + R or Start > Run and typing "regedit". Press Enter.
  3. Navigate to the following key in the right-hand tree: HKEY_CURRENT_USER\Software\Xara\HTMLFilter\7.0\MultiWidthBreakpoint
  4. Right-click the key in the folder > Modify and change the value there from 50 to 0 - 100 to change the percentage at which it decides which site to show. Then click OK.
  5. Exit the registry by selecting File > Exit.

When you re-orientate a mobile device, such as a phone or tablet, that changes the width of the browser, and can instantly switch to another variant - this is exactly the intent and benefit of RWD..

So it's possible, using the right width values, to design different versions of your website specifically for upright (portrait) or sideways (landscape) orientation, and different versions again for upright or sideways tablets. But we do not recommend you go overboard by having too many variants - see the 'How many variants can I create' below.

iPhone up to version 4s 320 480
iPhone 5 320 568
Galaxy S3, S4, S5 360 640
Galaxy Note (1,II, 3) 360 640
Nexus 5 360 640
HTC One 360 640
iPad (all models) 768 1024
Nexus 7 600 960
Nexus 10 800 1280
Kindle Fire HD 534 802

There is no limit, however please keep in mind that more variants will use more system resources, especially when exporting.

Creating multiple variants of a website can be a complex process. Do not underestimate the time and care required to create and then maintain RWD websites. This is as true of Web Designer 10, as it is for RWD created by any other method. Typically a web design firm or design contractor will charge 2 to 3 times as much for a RWD site as for a single conventional site, and that's because it can easily take 2 to 3 times as long to develop and maintain.

No. Although you could save a copy and delete the other variant in the document, these would be two separate documents and your website will not resize accord to screen size.

No. If you have split your website between multiple .web/.xar files then unfortunately you will have to manually recreate your mobile variants on each .web/.xar file.

No. Pages within variant documents are currently synced so deleting a page from one of your variants will cause the page to be removed from the other variants.

Repeating objects like navigation bars, Widgets, headers and footers cannot be shared for technical reasons. When you create a variant, Web Designer / Designer Pro will create a copy of these objects on your new variant. Repeating objects will only repeat in the same variant as well. They do not repeat over multiple variants

Every page and page variant is exported with it's own pasteboard rectangle (Exception is a vertical and horizontal supersites). If your background has an image or colour applied to it, this is copied, not shared so you can change it for each variant.

Please see this guide on what the viewport size of your device is from here

No. Xara exports fixed with web pages. This is true Responsive Web Design though, because all the variants of each page are the same single HTML file, using CSS media queries and Javascript to dynamically adjust the page layout depending on the device width.

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; the text, the photos, and these remain shared between the variants. Edit...
CREATING A MOBILE VARIANT: Click on Utilities > Website Variants > Website Variants to bring up the variant dialog box. Click on the "Create" button Enter a name for your variant appropriate for its use, Mobile for example if it is going to be viewed...
LIVESHARING OBJECTS ACCROSS VARIANTS When you create a new variant, most of the content is shared or Liveshared across all variants, but the size and position of that content is local to each variant. When you create a new object - say a text area, ph...
Customers loading their version 9 files in version 10 may encounter problems with their existing widgets. If so then the first thing to try is to re-insert the widget from the version 10 Designs Gallery and delete the widget created in version 9. This is ...
* Supersites * FAQ's * Example sites INTRODUCTION Modern web browsers support many advanced HTML5 and CSS3 effects allowing much more dynamic and visually exciting websites to be created. Xara 'Supersites' are an alternative way of publishing ...
(111 vote(s))
Not helpful