thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7
By default Web Designer opens a new document showing just one page. I prefer to view all my pages as one long scrolling document. To do this, right click on the page background and choose ‘Multiple Page View’ or select the menu ‘Window > Multiple Page View’.

Creating the Mobile Variant

To create a mobile variant, right click on the page background and select ‘Website variants > Website variants…’ or right click on the main page tab and select - ‘Website variants…’, and then select the ‘Create’ option. Web Designer has guessed that I am going to create a mobile version and I’m happy with the name and size so click Create, then close the dialog window. Creating the mobile variant website. Note two blue document tabs give you access to the two versions Immediately, you will see that a second document tab has opened with a new variant with a page size of 480 pixels (the two tabs for the document are colored blue so you know they are linked). It’s important to understand that this has just created a narrow page, but it’s up to you to re-arrange the text and items in a way that you want for this narrow page. Tip: We suggest that you regularly check both normal and mobile variants as you go. Each variant (and you're not limited to two) has its own tab, and it takes just one click to swap between the normal and mobile variants to check your changes work in the various devices.

Adjusting The Design For the Mobile Variant

The two variants share content where appropriate but you can edit them separately so you have total control over how they look on different devices. I’ll start by reducing the page header to fit.  Select the header background and drag the center right hand resize handle (the square) onto the web page. Notice that it will lock into place when it reaches the left side of the page – that is because the ‘Snap to objects’ is set to ‘on’ (this option is on the top InfoBar .) Also note that, when the object is selected, it has a small star shaped ‘repeating object’ symbol in the top right corner. It’s quite common and very useful to have some objects set to ‘repeating’ so that they appear the same on every web page. Any change made to the object will then automatically update on the other pages. Scroll down to the next page and you’ll see that the header background has been automatically adjusted. It will be the same on all the other pages. Drag the right edge of the header background to reduce its size so that it fits the new width Now select the sub-heading bar under the page header and do the same thing - drag left to be the correct new width. The sub-heading bar is not set to be repeating as it is likely that you will change the text on each of your web pages. Note that, when selected, it has a parallel lines symbol in the top right – that means that it has been set as a ‘shared object’ across different variants. So any changes made, for example, to the text on the bar, will automatically change on the Main full size website, and on the Mobile variant. Both the header background and the smaller sub-heading rectangle have been resized down to the width of the page Now drag the Welcome button onto the header background. Again, notice that it snaps into position within the blue guidelines that appear as you drag it into place. Also notice that it is set as a ‘shared object’. If I change the button text, that change will happen in both variants. Scroll down to the footer bar on the bottom of the page, select it and do the same, reduce its size to that of the page background. This is set to be a ‘repeating object’ so it will change on all the other pages too.

Navigation Bar (NavBar)

To be mobile friendly and space efficient a common navigation system is to have just a single button with a vertical menu of links to other pages. It is advisable to make the text larger. NavBars in each variant are independent, so you can customize them as required including changing the design of the bar. Assuming you are starting with a multi-button horizontal navigation bar I will show you how to create a single button with a vertical menu of links. On the Orbit template the first button design differs from the design of the other buttons, which makes it unsuitable for a single-button use - the button design is unlikely to look good on its own. So I will replace it with an alternative NavBar design where all the buttons on the bar look the same. The left button of the NavBar does not make a good single ‘Menu’ button, so I will change the design of my NavBar
2