thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7
Open the Designs Gallery, close the Orbit Theme and also the Website Themes folders so you are at the top level. Click to open the Page Elements and Widgets folder, then the Free Trial Samples sub-folder to see the selection. Click drag the bar called ‘horizontal navbar 2’ from the Gallery onto the existing button bar and select to ‘Match’ the colors and text styles’. This changes the design of the NavBar. I double click on the NavBar to open the NavBar editor so I can convert this bar to a single button version with a drop-down menu. Double click the NavBar to open the NavBar editor To make a single button NavBar delete all except the Home page button (click on the second entry and keep hitting the Delete button below until they are all removed). Change the text on the remaining button from Home to ‘Menu’ and remove the link from the Menu button by clicking the URL field next to the button and choosing ‘Do nothing’ in the Link dialog. Now you can either start adding menu entries to the button manually in the NavBar dialog, or a menu entry can be added automatically for each page in your site. To add the links automatically, simply uncheck Site Navigation Bar option above the Buttons & Menus and then check them again. You will see that the menu becomes populated with a link to each page of the website. Edit the names of each entry in the menu if you don't want them to be the same as the page names. To change the size of the text of the link buttons select ‘Pop-Up menu style’ and change the text to 18px, and increase the item spacing to something like 5px. You can also adjust the colors as you wish. Then select OK on both dialogs to accept the changes.  One last thing to do on the NavBar is to change the text size of the Menu button. Select the Text tool, highlight the word ‘Menu and change the font size to be 16px. The navigation bar is a repeating object so it will appear the same on every page. Editing the Navigation Bar to be a single button with a drop down menu of links with a change of text size To check your menu changes so far, select Page Preview  and make the preview window narrower so that it will display the mobile variant. Remember - text that looks over-large on your desktop appears much smaller on the phone screen. Preview the mobile variant to check the operation of the menu A note about how the content is shared between variants: When an object is set as a ‘shared object’ any change in one of the variants will automatically make the change in the other variants, for example if you change the heading text or a photo. Shared objects have two parallel lines, top right corner. This means if you make a change to it, it will be changed in both variants
3