thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7
You can adjust the content layout in many ways. We wouldn’t ever recommend more than 2 columns on a mobile variant so I shall fit the two products alongside each other on the page, and then fit the third product so that the image is alongside the text. (An alternative would be to have all of the products under each other and increase the text paragraphs to the full width of the page, or to have all the product images with the text alongside.) The magnetic snap makes it easy to align everything on the page. Select and drag on the corner handle to resize the first two images so that they fit neatly on the page alongside each other. Select the divider line and move it to align centrally with the space between the two images. This has been set to stretch with the page which is not needed in the mobile variant so, with it selected, right click and select ‘Position on page’ and uncheck ‘Stretch with page’. Select one of the paragraphs and align it with the left of the image, then with the Text Tool selected reduce the red line that sets the width of the text. Do the same for the other paragraph. You will notice that there is very little room on the page for the 3rd product to fit under the first two products. There are two ways the page can resize. Some items on the page (usually the text) have a ‘Push’ attribute set (Right click menu ‘Position on page’) which causes the page to be pushed down as more text is added.  Alternatively you can manually drag the bottom edge of the page - at the bottom of the page you will see a bracket in the two corners and there is a feint blue dashed line that runs horizontally through those corner brackets. Drag the pale blue horizontal line down to increase your page size. For the third product, the image is not set to push, but the text is. So I will drag the text into the column under the second product, which will ‘push’ the page ,and then I drag the image under the first product. If you wish to have a horizontal line between the top two products and the third product then copy the divider on this page, change the angle by 90 degrees (option in the top InfoBar) and then move it into position and resize as required. (A simple alternative is to copy and paste a horizontal divider from another page.)  The Products Page re-arranged to be 2 columns with a third product below

Store Page:

As you can see the text is just too wide, so this is pretty simple change. The original on the left has been re-arranged to be one narrow column with larger photos. Adjust the sub-heading and Store label as before. Now using the Text Tool, resize the column to be more narrow, the usual way. Notice how the other objects on the page automatically move down to accommodate the longer text. Select the red divider lines and drag the side handle to make them smaller to fit the page. For this page, I have also increased the size of the photos to make them more clearly seen on a mobile.
5