This website displays a number of contemporary web design features that are introduced with Web Designer 11, including… Animations on ‘reveal’ such as the headings that slide or fade in after the page has loaded.  Scroll down and you’ll see a number of other such animations.  This Web Designer update also introduces easier and more powerful animations - mouse-over the various elements in the document to see some examples.  These are as easy to add to any element on the page as selecting the Web Animation menu and the effect you want to apply. Sticky panels across the top of the screen, the footer and left edge. These float over the content of the page stuck to the edge of the web browser window.  For example the ‘social network’ icons on the left side are a semi-transparent panel that remains in the same place as you scroll the document. Stretchy browser-wide panels including responsive full width photos. These scale to always fill the browser width. The design of this website is as one long, vertically scrolling page, rather than multiple separate pages. With ‘smooth scroll’ navigation. Now this example is somewhat over-the-top in the use of these effects (and is a rather large download as a result), but it’s just an illustration of the type of effects that can be put on your website. As with most Web Designer features, these require no scripting, no HTML, no programming, and can be applied with just a few clicks. Each of these areas is described in more detail below. Some features are included only in Web Designer 11 Premium, as indicated in the headings below.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 2

Sticky (Floating) Items (Premium)

Some websites have items on the page that stick on screen, and float over the page that scrolls below, often navigation controls, or social network icons. These tend to be stuck to the top edge of the browser window, sometimes to the left or right edge, and can’t be scrolled out of the window. The benefit of sticky objects is that they are always visible. So you can, for example, have direct access to page navigation without having to scroll up the page.  WD11 now provides the ability to make any item on the page sticky in this way. This website has a simple white rectangle, with slight drop-shadow, with a logo and simple navigation placed on top. As you scroll down (right example) the top bars sticks. In this case the white background rectangle is set to stretch as well so it always fills the width of the browser. This takes a few seconds to create in Web Designer. Draw the rectangle at the top of the page, place the items on top, select them all and apply ‘Sticky’. That’s it. This is an example of a left edge sticky - in this case a simple semi- transparent group of social network icons. It floats over the page, but remains stuck to the left window edge no matter how wide the browser window is. To make any item sticky, select it and the menu option Utilities > Web Sticky/Stretchy (also on the right click context menu).  This dialog box is shown.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 3
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 4
This one dialog controls Sticky things as well as Stretch options Simply select the Sticky check-box to make that item stick in the browser window

How to determine the position of the sticky

For sticky objects in the top half of your page, the distance between the object and the top of the page determines the distance from the top of the browser window in the published page. So if you place the object 20px from the top of the page, it will be stuck to the browser window always 20px from the top, as the main page content scrolls below it. Which simply means that all the items you draw at the top of the page (which is their initial position when you open the browser) and set to sticky, will remain in the same relative positions to each other, but at the top of the browser window. You can stick items to the bottom edge (e.g. permanent footer panel). If the sticky object is closer to the bottom edge of the page, then it gets stuck to the bottom edge of the browser window instead. So again, placing the sticky object 20px from the bottom of the page will make it stick 20px from the bottom of the browser window. All sticky objects that you place on the page (or even just partially overlapping the page) will remain in the same horizontal position you place them. Left and right edge stickies If instead you want the object to stick to the left edge of the browser window, place the object off the page to the left. Similarly if you want it to stick to the right edge of the window, place it off the page to the right.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 5
This example website has a Navigation panel that sticks to the top of the browser, and a group of social network icons stick to the left edge of the page. This example supersite (a multi-page print document) has a sticky top bar (that changes as you scroll down) and fixed vertical navigation side panel. You’ll notice that the headers also have a fade-in animation (see later). Use Notes: • Sticky items normally float on top of the rest of the page, so would normally be arranged to be at the front of all the page content. If you make items sticky that are behind other items on the page, these will be drawn on top when you export your website. So if you draw a rectangle, place some items on top of it (like the above examples), make the rectangle sticky and not the items, these will be covered by the rectangle on the website. So just make sure all items are make sticky and they will retains their relative stacking order. • However you can also have sticky objects behind your page content if you place them on the Pasteboard Background layer. • You can make stretchy items (see below) sticky as well - so you can have a bar that goes across the whole width of the browser window, that sticks to the top edge of the browser window.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 6

Stretchy Items (Premium)

There is a trend towards having ‘pageless’ designs where there is no obvious page boundary, where page backgrounds or photos cover the entire browser window and stretch to fill the browser width. Combined with Responsive Web Design you can create a website that suits every imaginable browser size. An example website at four different widths; narrow for mobile, medium, wide, and extra wide. The same picture stretches to fill the browser no matter what device or width the browser is. Under the picture is a simple grey rectangle that is also set to stretch so it also fills the browser width. It’s easy to make any rectangle or image stretch to fill the browser window, either horizontally or vertically, using the Stretchy dialog (the same dialog as the Sticky controls), see below.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 7
The lower half of the dialog controls stretch properties of the selected object. Stretchy items are normally intended as page backgrounds and so will appear behind everything else on the page. But if you also make them sticky, then they float on top of the page content, as stickies normally do.

To create Stretchy Objects

Draw a rectangle on the page - typically you would make this as wide or wider than the page, placed behind all other objects.  Select the menu Options > Web Sticky/Stretchy or the equivalent option on the right-click context menu. Select the Full Width option and preview the page. You will see it covers the entire width of the browser window. Scaling Photos When you make an image stretchy to occupy the full width of the browser window its height remains the same as you put it on the page (so it doesn’t grow vertically and thus push everything else down as you make the browser wider).  This means the image is progressively cropped top and/or bottom, as it grows horizontally (the aspect ratio of the photo is never altered as that would look poor). The ‘Scale origin’ controls how the image is cropped as it enlarges. In the above example, because the horizon is in the center, it scales around the center so top and bottom are cropped equally. If the item of focus in the image is nearer the bottom you may prefer that it’s cropped only at the top, as it stretches. The Full Height stretchy works exactly the same way, but for vertical stretched images (a lot less useful). Stretchy objects can be set to either ‘scale’ or ‘tile’, using the option on the dialog. In most cases you will want the stretchy object to scale up and down to fit the browser window, so choose the scale option. This
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 8
works well with photos and solid filled rectangles. If you have a rectangle with a textured fill you will normally want this to tile rather than scale, so the texture looks the same with any browser window size. So select the tile option in such cases. Also if you have a vertical graduated fill, choose the tile option. Resolution note: It needs to be a hi-res image because it’s going to get stretched to fit the browser width - and that could easily be a HD screen size of nearly 2000 pixels across. So using a low or even medium resolution image will result in a blurred image when scaled to max width. Use Notes: • It is intended that you can only stretch rectangles and rectangular images. It won’t work usefully with any other types of objects. • You can also place stretchy objects on the Pasteboard Background layer, so they appear behind the Page Background layer contents.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 9

New Web Animations

Version 11 introduces a much more powerful and easier-to-use set of animation capabilities: • You can right click on any object and set its animation properties. Layers are not required. • Items can be made to animate as you mouse-over them, or on click, or as they appear on screen (reveal) • There is a new wider set of animations styles. On this example website as you scroll down the three circular icons progressively slide in from the left side. This is as easy as setting the animation style to be ‘slide in from left’ to happen on ‘reveal’ To animate any items on the page, right click and select the Web Animation options or the menu Options  > Web Animations to display this dialog. The Animation dialog, showing the tabs for the three ways to trigger animations. There is a drop-down list of animation styles, controls over the speed and, for reveal animations, an optional delay.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 10
An animation can be initiated by three different methods, controlled by the three tabs of this dialog; 1. When you move the mouse over the item in the browser 2. When you click (or tap on touch devices) the item 3. When the item is revealed - that is when it is first shown or scrolled into view. The reveal animation is how items are made to slide or fade in as you scroll down a web page, and can be made to happen each time that part of the page is revealed, or set to only happen the first time. You can set different animation types on each of these triggers. For example the items can fade in when first displayed, can have a wobble animation as you mouse-over it, and a different animation again when you click the item.

Mouse-over animations

Simply select the animation from the drop-down list, and select the speed from the adjacent drop-down list. In order to preview the animation it’s necessary to preview the web page the usual way. The Web Animation dialog is non-modal, which means it can stay on screen while you select different items on the page. Click the Apply button instead of the OK to keep the dialog on screen. You can then select another item to change the its animation without having to re-display the dialog.

Default Mouse-over effect

You can also control the default way in which all mouse-over layers are revealed. This option only affects mouse-over effects based on layers, such as NavBars and buttons. It does not affect these new single item mouse-over animations. In older versions of Web Designer, items that had associated graphics on the ‘MouseOver’ layer would appear instantly the mouse pointer was moved over that item. Now you can produce a much more subtle ‘fade’ effect as well as many others. In fact the default behaviour is now set to Fade, so, for example, mouse-over button and NavBars will now fade the ‘over’ effect in and out. Notes: • Remember that touch devices do not have the concept of mouse-over and so such animations will never be seen on tablets, phones and touch based web browsers.

Animation on Click/Touch

This tab allows you to choose an animation that will play when the object is clicked (or on a touch device, touched). As with the Mouse-Over tab you can choose the animation type and speed and can set up a default click/touch effect that will apply to all your buttons that have a mouse-over graphic. The same object can be given different animations types for mouse-over, click/touch and reveal.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 11

Animation on Reveal (Premium)

If you select the Reveal tab of this dialog, you can make the object animate as it’s shown on the page - either for the first time, or every time. For example you can make items appear to fade in gracefully after the website is opened for the first time, or each time the item is scrolled into view. Select the animation style from the drop-down list, set the time (speed of animation). Select the ‘Once only’ check-box if you do not want this animation to happen every time the item is revealed. Trigger Object Name Normally an object will be revealed as soon as it comes into view. However sometimes you may want to have the object revealed only when some other object (the ‘trigger’ object) comes into view as you scroll down the page. To do this, first apply any name, such as ‘trigger1’, to the trigger object (using the  icon on the Selector tool InfoBar). Then select the object you want to reveal, choose the reveal animation, and select ‘trigger1’ in the trigger object name list. Important Note about Widgets: • A few of the version 10 gallery Widgets are incompatible with the new sticky and animation features, if used on the same page or in the same Supersite, in such cases you will need to replace the Widget with an updated version from the Designs Gallery. Click here for details on the support site.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 12

New Templates

6 new web themes in Web Designer and more than 30 in Web Designer Premium (normally sold in Web Packs for $10 each) with up to 16 page layouts, all including mobile variants. See the Designs Gallery or Content Catalog for the complete collection of old and new templates.

Limited Online Editing with Online Designer (Beta)

Xara Online Designer gives you an ultra-simple way to view, edit and update the text / replace photos in your Xara website using a web browser on any computer or tablet (yes even a Mac or Android tablet!), from anywhere in the world, and to re-publish the website. For commercial designers: • Give controlled editing rights to your clients, namely allow them to edit text and replace images • Brainstorming a new design with your client over the phone?  Now you can update the cloud version in real time so your client can see the changes as you talk. And for everyone: • Update the text (blogs, news, prices for example) or replace images and re-publish your own website from anywhere • Work with colleagues on the same website at the same time. You can find detailed usage notes at:  Xara Online Designer Note this service is still in BETA but we will be continuously updating it. For anyone who signs up now, the Online Designer service will be completely free until the release of Designer 12 in 2016.

Document Sync using Dropbox or Google Drive

                 Designer 11 supports a number of innovate features related to ‘cloud drive’ services from Dropbox and Google Drive*.  These services provide free file storage in the cloud, and a small desktop utility that can be installed on your PC that will automatically sync files saved on your hard disc to the cloud - and if the file is shared with other users, or you have Dropbox on any other computer, then it’s synced to that other computer. Once in one of these cloud drives, you can also edit the text on your sites in Online Designer, using any web browser or mobile device. Changes you make with Online Designer will be saved back to the cloud drive and then in turn synchronised to your other computers.
* Microsoft OneDrive and other cloud drives coming soon
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 13

Multi-location editing

Designer now notices if files have changed, and will automatically reload updated files. This is particularly useful if the file is saved in Dropbox or Google Drive folder on your computer.  It means that you can have the same file open on multiple computers, or in Online Designer, and if you make an edit, save the file, then it will be updated in Designer on the other computers. Further, using cloud drive file sharing, you can share the file with someone else, and whenever they edit the file and save, your version will be updated, and vice versa. This does not solve the problem of edit clashes. So if you edit the file and at the same time someone else edits the same file, then Designer will tell you there has been an edit and give you the choice of opening the updated file in a new document.

Revert to earlier versions

One particularly cool feature that comes as a consequence of this is that Dropbox and Google Drive maintain older versions of your files, and provide ways of viewing and reverting back to earlier versions (in Dropbox you just right click on a file and select 'View previous versions'.) So if you have have a document open in Designer, and then revert that file to an older version from Dropbox, that causes the file on your computer to be replaced by an older version, and Designer will automatically re-open the older version.  This is a safe, easy, and storage-saving way of maintaining multiple versions of files.

Other Improvements

Abbreviation expansion (Premium)

In the spell-checker drop-down on the Text Tool InfoBar there is now a new “Auto-correction options …” entry. This allows you to set up your own shortcuts for terms or abbreviations that you tend to type regularly.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 14
So if you want to be able to type “Rwd” and have that instantly replaced with “Responsive Web Design”, simply press the Add button and enter “rwd” in the replace field and “responsive web design” in the with field. All text in the dialog is forced to lower case, but the replacement tries to be smart about use of case, so:- RWD is replaced with RESPONSIVE WEB DESIGN rwd is replaced with responsive web design Rwd is replaced with Responsive Web Design Commonly used replacements are already set up by default, so for example you can type (C) to get a copyright symbol ©. You can also replace text you type with a symbol from the Font Awesome symbol collection included in Web Designer, to make it easy to enter commonly used symbols into text. Enter the text you want to replace, click in the “With” field and press the “Pick Symbol…” button to bring up the symbol picker dialog. The symbol you choose will appear in the “With” field.

Automatic hyperlinking

Web Designer now recognises most web links when you enter them into text and automatically sets up the hyperlink for you using the same address. So I can just type www.xara.com and it becomes a link in the text without me needing to do anything else.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 15

Automatic resize of embedded objects on insertion

Now if you paste an object into text (to make it inline or embedded) and it’s wider than the text area or text column, the object is automatically resized down to the width of the text column.

Text background color

You can now set the background color on text, which is useful for highlighting. Go into the Text Tool, select the text you want to change, right-click on a color on the color line and choose the text background color option from the menu.

Font replacement & styles

It’s often useful to be able to completely replace one font with another across your entire document or website, especially if you don’t have a particular font installed and want to replace it with a font you do have. In the Text Tool just right click in the text with the font you want to replace and choose the new “Replace font with …” option from the context menu. Choose the font you want to use instead and click Apply. All variants of the font are replaced across your document, each with the matching variant and size of your chosen font. There’s also a new entry in the text styles menu , “Update other style to match”, which will help you to apply text styles to unstyled documents, or update an existing style to look like some unstyled text you’ve imported. For example perhaps you’ve pasted in some text that you like the look of from another document and you want to make all your ‘Normal text’ look like that text. Just select the text and choose this new style option.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 16
Select the style you want to update and click Apply to make that style look like the selected text. The “Apply to all similar text in this document” option is useful if you are applying text styles to a document that doesn’t use styles already, such as an imported PDF. If selected, as well as updating the selected style, the operation will also look for text that is similar to the selected text, right across your document and will apply the style to that text too. ‘Similar text’ is text that has the same font and size and with the same margin settings. The “Apply only to unstyled text” option is useful if you don’t want to change any text that already has a text style applied.

PDF Import Improvements

• Improved text editability (improved text reconstruction, margins, better text link import, better underline import). • Better support for import and editing of PDFs with embedded font subsets, where fonts are not installed locally. • Many other fixes and improvements

Photo Text Panel

New text panel SmartShape with a photo (Insert->Shape->Photo Text Panel).

Secure FTP Publishing

In addition to FTP, Designer now supports publishing using the secure protocols FTPS and SFTP, which are required by some web hosting companies.

Xara Hosting - M hosting included free

Web Designer 11 includes free hosting with Xara Hosting, with 500MB of web storage. Web Designer 11 Premium and Designer Pro X11 include the enhanced ‘M’ hosting, free for one year (worth $1.99 a month). This offers 2GBytes of free web hosting space and one free domain name (e.g. yourname.com or .co.uk or .de, etc).  Plus if you publish with Xara Hosting you can password protect your website.
Release Notes
XARA WEB DESIGNER Version 11 with Online Designer
Page 17
Xara Hosting is now the default publishing option for new websites and documents. Register for free at xara-online.com, but if you bought or registered your product on the Xara website you will already be registered and can start publishing from Designer straight away. You can change the publish host for any document in the Publish settings dialog (Utilities->Web Properties, Publish tab) to use MAGIX Online World instead, or any other web host.

New Slideshow Widget

A brand new slideshow (photo transition) Widget. You can find it in the Designs Gallery or Content Catalog under Page Elements & Widgets > Photo Elements & Widgets > Photo Slideshows & Galleries. Just drag and drop it onto your page. A window appears which will ask you first to sign into Xara. This widget is resizeable on the page and you can adjust its aspect ratio.