thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7
The first step is to move the right column off the page temporarily, so I can work on the left. For the left column I just made it wider to cover the full width of the mobile page. The second part of the work is to move the right column (with its anchored photos) below. This has ‘push’ set so just dragging it down and dropping it below the first column will make the page grow. You might want to adjust the column width again, and to move the set of tiny anchored images to be in a more suitable place. And that’s it, the mobile variant is done! Tip to remember - don’t be afraid to delete non-essential things in your mobile versions, often they need to be simpler!

Preview

While you’re working through your website it is advisable to check the two variants and preview the website regularly, to check everything is working as you intend. Simply adjust the browser window to be narrower, and you’ll see it automatically switches to the mobile version.

Publish

When you’re done, just re-publish your website - select the Publish document as a web page icon on the top Tool Bar or select File>Publish and enter the details of your web space in the normal way. If you have a MAGIX Online world account you just have to enter your account details, otherwise publish to your normal host - you will need your FTP host address, your username and password. If this is an existing site, then just re-publish and you now have a mobile-friendly, Google-friendly, responsive website. You can see the finished website on your computer and mobile device at http://www.nfisher.magix.net/rwdsite/

More Info:

An article in our Support Center on creating a mobile variant: http://support.xara.com/index.php?/Knowledgebase/Article/View/819/0/how-do-i-create-additional-variants-for-my-website An article in our Support Center on making your website mobile friendly for search engines: http://support.xara.com/index.php?/Knowledgebase/Article/View/842/0/how-do-i-make-my-website-mobile-friendly-for-search-engines Video tutorials on xara.com, Creating Mobile Variants Pt 1 & 2: http://www.xara.com/web-designer/tutorials-demos/ To check if your website is mobile friendly, enter your website’s URL into this page: https://www.google.co.uk/webmasters/tools/mobile-friendly/

Advanced Users:

Some of Xara’s templates might have other complications, and maybe your website too! Some of the things to watch out for include:  Resizing grouped objects, such as headings or footers, using the Selector Tool. If you use the right side handle to resize the group it tries to be smart and retain the relative proportions and positions of the objects, and not squash the contents (as older versions of Xara did).  But sometimes you will have no option but to un-group, re-position or edit each of the component elements as required, then group it again. Objects on locked layers e.g. the background layer. Using the Page & Layer Gallery just unlock those layers, make the required changes, and lock the layer again. Soft Grouped objects. Soft Groups are a way in which objects, such as photos and captions (see above) stick together.  Soft Groups typically have things on other layers in the group. So take care when adjusting these. You may have to remove the Soft Group to make adjustments, but one tip is that holding Ctrl when you do a click will select an item ‘inside a group’ (this applies generally), which is a quick way to make changes to items in groups without having to un-group. Normal groups (as opposed to Soft Groups) can’t be used the same way, partly because you cannot group items on different layers, and secondly because normal groups are converted into a single graphic when you save your web page HTML. Push: We highly recommend using the automatic Push feature so that as you extend the text, everything else on the page is pushed around, and the page grows, as required.  Right click on any object and use the ‘Position on page’ menu to adjust the push. See the Help for more info on this topic. Responsive 'Retina' or HiDPI Resolution Control. Mobile and tablet devices, and some modern laptops (e.g. Microsoft Surface Pro and Apple MacBook devices) support far higher resolution graphics. Web Designer Premium and Designer Pro cater for this completely automatically, and will produce both normal resolution and Hi-DPI or Retina resolution images for all graphics and photos. The website then intelligently uses the correct version of the image depending on the resolution of the browsing device.
7