Supersites
Owners of Designer Pro+ / Web Designer+, or Designer Pro X/ Web Designer Premium v19 or later: these website options with transitions (formerly called Supersites) are now controlled via a new Export Tab.
The following is relevant to older versions:
Introduction to Supersites
Modern web browsers support many advanced HTML5 and CSS3 effects allowing you to create much more dynamic and visually exciting websites.
Xara 'Supersites' are an alternative way of publishing your website. Instead of just being a separate set of web pages, with the typical 'click-wait-load' way to navigate your website, a Xara 'Supersite' provides instant navigation between pages, along with slick animated page transitions - all designed to make your website stand-out from the crowd.
Or you can choose to have the whole website, all pages, presented as a single scrolling list of pages, one below the other, or arranged horizontally, one beside the other. Or you can choose to have your website 'fit to screen' so that it smoothly and automatically resizes to fit any browser window along with swipe actions (on touch devices) to navigate from page to page.
Xara Supersites are compatible with all modern web browsers and mobile devices.
Supersites are not appropriate for all websites (the very large or complex ones), but for smaller websites, or any place where you want to present your content in a more interactive, more slick way. Anywhere you might consider providing a PDF document, or a download of a PowerPoint presentation, or want a slick interactive slide show of content - Xara Supersites are a great new way to do this. Your content can be presented directly on the web, requiring no downloads, no plug-ins or special apps to view.
Frequently Asked Questions
How do I create a Supersite (v18 and earlier)?
Any website can be turned into a Supersite by selecting the menu Utilities > Web Export Options which brings up this dialog:
The top options select whether this is a conventional (paged) website or a Supersite. If you select Supersite, then the next option provides three basic page arrangements; all pages arranged vertically, so this is much like a multi-page PDF document in Adobe Reader, or arranged horizontally so you scroll sideways to see pages, or finally the last option to provide animated page transitions.
If you select the Page Transition option, then the next two controls become enabled providing a drop-down list of page transitions and a slider control of the transition time (speed).
How do I apply a different transition per page ?
The above Page Transitions option sets the default transition for all pages in your site. But you can set different transition effects on individual pages. To do this use the Page & Layer Gallery, right click on the page, and select the Web page properties option. Select the Page tab. The bottom section of the dialog allows you to set the individual transition property for this page.
What direction does the page transitions happen?
The transition effect you choose for an individual page sets the transition going to the page in question. Each transition has two versions or directions of animation. When you go to a page from an earlier page the animations plays in one direction. If you go to the page from a later page then it plays in the reverse direction. In other words going forward through your website will play the animation as described, going back will play it in reverse. For example if you select 'slide in from the right' it will do this when going from one page to the next, but if you go back, it does the opposite and slides out to the right.
How do I scale my website to fit to the screen?
The 'Scale to fit screen' option creates pages that are smoothly scaled to fit any browser window size. If you resize your browser window it will re-size the page content to fit always. This does not mean that any of your page is 'fluid width' as such, the whole page is simply, as what it says, scaled to fit to the screen you are viewing. This option is only available on the 'Page Transitions' option
Note: It only makes sense if relatively small website pages are set to 'fit to screen'. If you make a very tall page fit to screen, then everything is reduced so much it's not readable.
My site is not animating smoothly between pages!
Supersite animations are hardware accelerated, which is supported by almost all modern browsers, including those on phones and tablets, to ensure a fast and smooth animation.
The exception is the built-in browser preview window, which for some unfathomable reason is not the same as normal Internet Explorer. But if you open the preview in the full browser, by clicking any of the browser icons at the top of the preview window, you should get full performance animations.
Are Supersites SEO friendly?
A Supersite consists of one HTML file for the whole site so keywords, description and and title and meta tags are taken from the first page of the site. Search Engines still work exactly as normal with Supersites, and will index all your content, but that they might jump to the home page of the Supersite when following a search engine link.
How does Google Analytics work with Supersites?
Supersites are one HTML file for the entire website, so there is a single Head and Body section for the whole website. if you place scripts on each of the pages (using the Web Properties dialog) these are concatenated into the one section for the whole website.
Similarly with RWD sites, all the variants of any page are exported as one HTML page, so there can only be one analytics code snippet for each page as usual. You can't, in other words, track which variant they visit, only that they visit the page.
Can I apply page transitions to some pages?
If you want to apply page transitions to some pages but not all, instead of selecting a supersite in the web export options dialog, simply use the Web Properties > Page > Page Transition option.
Please have a look at these examples of Supersites: