thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7
If you don’t want the change copied – for example, if you’re removing some text from a mobile version, just select the Text Tool and select the text you want to delete, then right click on the mouse, go to website variants and select ‘stop sharing with variants’ – now you can delete it in the Mobile version and it won’t be removed from the Main variant. There are exceptions to the sharing. Obviously, if you change the size of a photo or crop it, then that won’t be copied, neither will changes to repeating objects such as NavBars, because these are edits that you’d expect to make only in the mobile variant. Web Designer makes intelligent guesses about what should and shouldn’t be copied, but we would always recommend that you switch between the variants regularly, making sure that you haven’t generated any unexpected changes.  Keep an eye on that as you’re going along, and, of course, also when you preview at the end.

Updating The Text Styles

With the page structure complete it’s now time to work on the content. Firstly, the main body text needs to be at least 16px, perhaps larger for the mobile variant. With the Text Tool select a paragraph of text (the top InfoBar should show ‘Normal text’ Style) change the font size to be 16px, then click the Style drop-down menu and select ‘Update style in this variant’. Notice how all the text will change on all of the pages into the new style. Do the same for the Heading 2 style – select one of the headings on any page, change the style to be 18px or larger, and do the same ‘Update style in this variant’. Now I need to make layout adjustments to each of the pages.

Updating The Page Layouts

I will go through the various page designs in my Orbit website - they consist of a wide variety of page layouts that are great examples of how to adjust just about any layout from wide to narrow. Home Page: Adjust the text column width: In the Text Tool click in the text and drag the right end of the red column marker to the desired width and the text will adjust to that new width. Using the Selector Tool, drag the computer image onto the page – notice that the text flows around it – that is because the image is set to ‘repel text under’. (If you need to adjust the repel margin, right click on the image and choose the ‘Repelling & Anchoring...’ option.) Repelling images must be in front of the text - type Ctrl+F to bring it to the front if necessary. You’ll notice that the page length has automatically increased to accommodate the extra lines of text using the automatic Push system. Now we need to adjust the image of people at the top, there are two choices for this. Select the image and drag the bottom corner handle to reduce the overall size of the image (this would display all five people) or, better in this case, drag the center right handle to narrow the image so that it fits the width of the page. This crops the image. Then use the Fill Tool to adjust the photo within the image container. Tip: when using the Selector Tool to adjust the size of images use only the corner or side handles to resize. That crops the image rather than squashes it. That’s it, the Home Page completed! Using the Fill Tool to adjust the image on the Home Page. Drag the end of the arrows to rotate and resize. Drag on the image to re-position it.

Products Page:

The page starts as three columns - much too wide for the 480px wide page. Adjust the sub-heading to fit into the mobile variant by selecting it and dragging the right side handle until it ‘snaps’ into position. Now move the ‘Products’ heading onto the page.
4