The following are the major new features of this release; • Supersites: o How to create a Supersite o Page transitions o Transition direction o Scale to fit screen o Swipe gestures & hotkeys o Preview window o Supersite Web Analytics • Responsive Web Design o Multiple variants o Retina or HiDPI screens o How to create a variant o What’s shared across variants o How to add an object to all variants o NavBars, Repeating Objects & Menus o Multi-column behaviour o Screen orientation o Common screen widths o How to change the text size in one variant o The costs of creating RWD websites • Example Websites • Presentations: • SmartShapes • Content Catalog • Other changes • Xara Web Designer - design philosophy

Web Designer 10 release notes

Supersites (Premium only)

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 your website, so that 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.

How to create a Supersite

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 to make each page transition different

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. The bottom section of the dialog allows you to set the individual transition property for this page.

Transition direction

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 play 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.

Scale to fit 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 always fit. 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.

Preview your Supersite

To see what your Supersite looks like just preview the website using the normal Preview control on the top bar: Be sure to preview the whole website, not just the current page.

Swipe gestures and Hot Keys

If you have the ‘fit to screen’ option checked, then on mobile devices you can use swipe gestures to navigate to the next or previous page in your website. For Supersites that use page transitions you can use page Up / Page Down keys to navigate back and forth on the website.

Browser performance - animation smoothness

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.

Web Analytics, Supersites and RWD

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 whether they visit the page.

Responsive Web Design (Premium only)

A main new feature of this release is support for Responsive Web Design (RWD). With the increasing use of mobile devices for internet access (some surveys suggest that more users access websites via mobile than any other type of device) there has been increasing demand for website design tailored to mobile screen form factors. Although modern mobile devices such as phones have excellent web browsers able to view any website, a mobile-optimized website should not require zooming to view the text. So typically this means the main content would be a single column, in a larger point size, to be readable at a glance on a phone. Mobile websites often have reduced content, and are navigable with single finger operation to scroll and navigate (one hand - thumb scrolling and single taps). While you could create two separate websites, one designed for narrow screen mobile, another for traditional wider desktop screens, replicating the content across two separate websites would be tedious and time consuming, especially if you had to do this every time you updated the text or images. So RWD is a relatively new technique that means your website responds dynamically to the screen size. Instead of having two separate websites, that is two separate HTML pages, you instead have one HTML file that can vary its layout (respond) depending on screen size (and resolution) of the device being used to view the website. The same web page shown at different widths. The first is how it looks on a wide screen display, the second is for narrow screens such as mobile devices. The text column is narrower, a larger point size is used, better suited to mobile screens, the header re-positioned and NavBar replaced by a single button drop-down menu.

Multiple Variants

Traditionally creating RWD sites has involved a lot of pretty complex JavaScript programming. But since Xara Web Designer is a ‘zero programming’ designer focussed tool, we’ve developed a way to create

How to have different text in each variant

Typically you want to share the same content in all your variants, just presented in an optimized fashion for the different widths. So normally text is shared, and that includes not just the words, but the style, color, font size etc.  See below to find out how to vary the text size in each variant. If you want to have different content in any variant, that is not shared, then you can either just create a new text item on one variant - by default this is not shared. Or you can stop sharing an item, including text, by right clicking and selecting Website variants  Stop sharing with variants.  You can’t have parts of the same text item not shared, say just a few words. Either the whole text item is shared (so when you update one, it updates other variants), or the whole text item is not shared (in which case edits appear only in that variant).

LiveShare - how to tell which objects are shared

When you select an object, those that are shared across the other variants have double parallel lines shown in the top right of the selection.   This photo has a double line marker, top right, which indicates it’s ‘live shared’ on one or more variants. You can resize, crop and adjust the fill as required,and that will stay local to each variant. but if you swap the picture, say by dragging a new one on top, then all variants will change.

NavBars. Repeating Objects

It’s likely that you will want a different NavBar design or layout on any narrow variants. NavBars on each variant are independent, so you can customize them as required. You might want a horizontal one for wide websites and a vertical one for narrow devices. When Repeating Objects are shared across variants they are not ‘live shared’ (which means they are independent of the other variants). This is necessary for most repeating objects, such as headers and footers, because you’ll want different ones on the variants. But this means when you select Variants  Share across variants on a NavBar, you’ll be prompted that this will be turned into a simple copy. You will then need to edit the NavBar as you please on the new variant (say change its design, or orientation), and then ‘Repeat on all pages’ again to copy across all the pages of that variant.  Remember if you select the ‘Site navigation bar’ option in the  NavBar dialog (just double click the NavBar) then you can create a NavBar that automatically contains links to all your pages.

Mobile websites are better with menus, not NavBars

Because of the narrow width of mobile screens, it’s common to replace a NavBar or row of buttons with just a single navigation button that shows a pop-up menu. Web Designer supports dynamic pop-up (or pop-down) menus, and if your website has an automatic ‘site navigation bar’ (where the buttons automatically reflect the pages), then there’s a hidden short-cut way to convert a NavBar design into a single button menu. Double click the NavBar to bring up the NavBar editor. Delete each button in the main list, so there’s only one remaining button (typically called Home). Make sure this has no link on it. Now un-check and then re-check the ‘Site Navigation Bar’ option. This will re-build a Menu on the single button, with an entry to each page of your website. You can of course edit the name of the button and the menu entries as required.  (The key here is that when you make a button that has no link into a ‘site navigation bar’, it will put a menu on it. If the button had a link, then it would replicate that button into a NavBar.) This method only applies to websites that have  the automatic ‘Site Navigation Bar’ option chosen.  If you have a customized NavBar, then you will need to build a menu manually, using this dialog. To customize the appearance of the menu, click the ‘Pop-up menu style’ button, bottom right.  Remember to preview your working menu it’s necessary to preview the web page.

Variants have the same pages

When you add or delete a page in one variant, it automatically creates or removes the page in the other variant. So your website always has the same page arrangement in all variants.

Multi-column behaviour

Most websites use columns of text, no text boxes or frames. Each text column or frame is treated as a separate shared item. So this means if you have text in two separate areas (either two separate or text boxes) then you can’t copy the text from one into the other, as that edit will just be shared back to the other variants. So in order to re-arrange your two columns into one column, just move them to be one above the other. If you have ‘Push’ attribute set (Right click Position on page...) then editing one will push the text down as you need.

The cost of creating RWD websites

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. The process of taking an existing website and converting it to a RWD site will be time consuming and can be a complex process. You are in effect creating multiple websites, and just about every part of your page layout will have to be re-arranged for two or more variants.  The more variants you tailor your content for, the longer it will take to create and maintain. New RWD templates in the Designs Gallery

Example Responsive & Supersites

Restaurant Menu. This is an example Supersite and Responsive Website designed for tablets and above. It uses Supersite transitions (a different one for each page), but also responds to browser width or tablet orientation, showing landscape for landscape orientation and portrait version for portrait orientation (this does not have a mobile version). It also has ‘fit to screen’ on so it scales to fit any browser size. You can use arrow key as a navigation shortcut or a swipe gesture on touch devices. http://xaragroup.magix.net/menu2/ Here’s a version of the same document demonstrating the ‘vertical scrolling’ Supersite option. http://xaragroup.magix.net/menu3/ Print Style Documents: This document is typical of a print or ‘desktop publishing’ style document, consisting of fixed pages, which can work well as a Supersite.  Here it’s published in various ways; WD10 Release Notes - vertical scrolling Supersite - page transition Supersite - conventional website Web Presentation: This is an example Web Presentation, based on the Wave presentation template. This has page transition and ‘fit to screen’ set. http://xaragroup.magix.net/presentation1/ Islands photo slide-show: This is an example of a simple responsive photo slide-show website, using fit-to-screen, swipe gestures, automatic Retina resolution imagery, and device orientation. This contains large very high resolution photos, so is best viewed on a fast internet connection. http://xaragroup.magix.net/islands1 One of the RWD templates: This is one of the free themes included with Xara Web Designer, that includes variants for three classes of device, normal ‘desktop’ wide web-browsers, medium sized browsers such as tablets, and narrow mobile screens. http://xaragroup.magix.net/vue2/ You can view the variants on a desktop browser by reducing the browser width. The mobile variant has a larger text size that is better suited to a very small screen, and uses a single tap pop-up navigation button in place of a classic NavBar. Combination Responsive Supersite: This is a modern website design using a combination of responsive layouts (narrow the browser to see other variants) e.g. the Designer page has a 3 column layout for wide displays, 2 column for medium and 1 column for narrow mobile displays. It also includes Supersite scrolling animation effects, photo slideshow widgets (the fading photo on the first page) with horizontal and vertical scrolling page designs. http://www.webdesigner-v10-demosite.com/

Slideshow Presentations (Premium only)

Web Designer 10 Premium can produce a special type of Supersite called a Web Presentation. These are very like Microsoft PowerPoint slideshow presentations, except they are websites that anyone can view - no special software plug-ins or players needed to view. Version 10 has simplified the process of creating such Presentations: • Simpler ways of creating and viewing the steps on each slide • Presentations automatically scale to fit to any browser window size • Two aspect ratio ‘empty’ templates, 16x10 wide-screen and 4:3 traditional (old) screen aspect ratio. (16x10 is a better compromise for some wide-screen monitors and tablets that are not exactly 16:9, and it’s not so squashed. But you can create any aspect ratio you require of course.) • New smooth ‘Supersite’ page transitions This is the Presentation control bar that appears when you create a new Presentation document. (Incidentally, these call-outs are SmartShapes - see below) Each slide of the Presentation is a new page, and you can have any number of layers (Presentation steps) that animate onto each slide.  Although presentation steps use layers, you do not have to use the Page & Layer Gallery to create or edit your presentation. The above Presentation controls appear top right when you create a Presentation document (File > New > Presentation) Presentation websites are Supersites, so they provide fast and slick page animation, ‘fit-to-screen’ and can be driven using the keyboard arrows keys, page up and down keys, and swipe actions on touch devices. Here’s an example Presentation (using one of a range of presentation templates included free), that demonstrates some of the possible page transitions:  http://xaragroup.magix.net/presentation1/ Use the arrow keys to step through the steps on each slide. Try adjusting the size of your browser window, or rapidly flicking through the pages using the Page Up /Down keys. Note: A small change in the behaviour of Presentations is that when returning to a page (slide) you’ve previously been to, it returns to the exact state it was left - i.e. with the same step position. Older versions always returned to the first step of each slide.

SmartShapes

Drawing something as apparently simple as this arrow is really not that simple. Okay, it is pretty simple to draw a crude a straight arrow, using the Line tool (but even then you need to know and understand how to use the Straight Line tool and arrowhead controls).  But to draw an aesthetically attractive arrow, like a graphic designer would, is difficult. In this case it has a tapering curved tail, a graduated fill color, a subtle bend to the arrow head shape.  To draw this requires expertise, not just in the vector drawing tools, but in graphic design as well. And this is just a ‘simple’ arrow! Xara SmartShapes are an innovative new way to create a variety of such shapes, and more complex objects such as the speech bubble shown here. In all cases you can customize the main characteristics of the shape without using any different tools - you just drag on a few control handles to customize the shape, such as the curve of the fill arrow, or to re-position or adjust the curve of the ‘pointy part’ of the speech bubble. Another benefit is that the library of SmartShapes is internet delivered. Initially the selection is quite limited, but over time we will add to the range of shapes and objects in the catalog. So SmartShapes are an easy way anyone can add and customize a variety of vector shapes, and more complex objects such as text panels, without having to know anything about the vector shape editing tools.

How to add a SmartShape

Select the main menu Insert    Shape  ... The most common shapes are available directly from this menu (Rectangle, ellipse, text box etc). Additional collections of shapes, such as arrows and text panels are available from the same menu but will open a new Content Catalog section.

How to edit a SmartShape

Either go into the QuickShape Tool , or just double click it, and you will see a selection of control handles on the shape. Just drag them to adjust all the key characteristics of the shape. Experiment by dragging the various handles to discover how the shape can be customized. Here are the control handles of the Speech Bubble SmartShape:

Push / Pull behaviour

Most templates have automatic page resizing and object ‘pushing’ as you move items around the page or edit text to enlarge or reduce text columns, text panels etc.  You can control this using the right-click context menu ‘Position on Page’. Items with Push on will push other items with Push on, and increase the page size.  We’ve changed the behaviour slightly so that if you move at item up the screen that is touching another Push object it will now pull any touching objects up the screen as well. And if the last item is touching the bottom of the page, it will pull the page bottom edge up as well. Deleting an item with Push on, does not move things around - in this case you need to manually re- arrange items on the page and if necessary reduce the page size (simply drag the bottom edge of the page up).

Password protected websites

If you publish your website via MAGIX Online World (free space provided) you can now easily password protect that website. Includes full facilities to manage your authorization list.

Improved Word and PDF import

Web Designer 10 has improved Microsoft Word (.doc and .docx) import and PDF file import.

Xara Web Designer design philosophy

Or ‘Why doesn’t Web Designer support fluid RWD?’ In a nutshell Xara Web Designer is a WYSIWYG design tool. For the designer this means what you see and design on the Xara page is exactly what your website viewers will see, down to the pixel and the exact line wrap points. And this applies just as much to RWD pages as to normal non-responsive websites.  Xara Web Designer is the only web design tool that provides this unique benefit - you can design precise page layouts with precise object and text positions, with complete design freedom (anything anywhere), text repelling around irregular shapes and photos, and myriad other design features, and yet be sure of the exact text position, wrapping points and everything else on the page. You can be sure that your design is exactly what your viewers see. One of the consequences of this approach is that fluid text (text that re-flows as you change the browser width) is not supported, and is not compatible with this WYSIWYG design philosophy.  With dynamic, fluid text you cannot be sure where things will be on the page - because it varies continuously. Line wraps, and thus column lengths even vary between different browsers. For designers this lack of certainty and variability is a nightmare of testing. You can’t flow text around irregular shapes. You can’t, for example, have an arrow pointing at a particular word on the page, because with traditional web design, you can’t be sure of where words and paragraphs wrap, or be sure of lengths of text on the page.  So fluid text means you could not get the precise ‘guaranteed right’ WYSIWYG layout accuracy that is the benefit and main intent of the Xara Web Designer software. This is the reason that around 90% of professionally designed websites are not fluid. Designers want design certainty, and this is what Xara Web Designer provides. In this respect Xara Web Designer is much more like a traditional ‘desktop publishing’ design tool (where obviously 100% exact WYSIWYG is required) than it is a traditional HTML web design tool - and yet Xara Web Designer produces efficient, standards compliant, cross browser compatible HTML5 websites, with automatic Retina compatible photos and graphics.  And with Web Designer 10 all this remains true for multi-variant responsive website design, while still being a totally ‘programmer-free’ solution. Finally, step back, consider why RWD was invented in the first place?  It was to enable single HTML designs to respond (instantly and without reloading any HTML) to narrower screen widths of phones and later, tablets.  Mobile devices do not support fluid, variable width browsers. So the ‘fluid’ RWD provides no benefits to the very devices RWD was designed for! In summary ‘fluid web design’ goes against the ‘exactly placed’ and ‘design certainty’ principle of Web Designer and, secondly, mobile devices do not support fluid design anyway. (To be clear they do support dynamic switching to different widths when you re-orientate and this RWD is fully supported by Web Designer 10).