RESPONSIVE DESIGN TUTORIAL 2015 PRO
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. Microsoft Surface Pro and Apple MacBook devices) support far higher resolution graphics.
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. Soft Groups typically have things on other layers in the group. Soft Groups are a way in which objects, such as photos and captions (see above) stick together. Using the Page & Layer Gallery just unlock those layers, make the required changes, and lock the layer again. 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.
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). Resizing grouped objects, such as headings or footers, using the Selector Tool.You can see the finished website on your computer and mobile device at More Info: An article in our Support Center on creating a mobile variant: An article in our Support Center on making your website mobile friendly for search engines: Video tutorials on, Creating Mobile Variants Pt 1 & 2: To check if your website is mobile friendly, enter your website’s URL into this page: 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: If this is an existing site, then just re-publish and you now have a mobile-friendly, Google-friendly, responsive website. 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.
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. Simply adjust the browser window to be narrower, and you’ll see it automatically switches to the mobile version.
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. 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. This has ‘push’ set so just dragging it down and dropping it below the first column will make the page grow. The second part of the work is to move the right column (with its anchored photos) below.
RESPONSIVE DESIGN TUTORIAL 2015 FULL
For the left column I just made it wider to cover the full width of the mobile page. The first step is to move the right column off the page temporarily, so I can work on the left.