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 http://www.support.xara.com
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 ...