thinking outside the box

Making Your Website Mobile Friendly (Responsive Web Design)

XARA TUTORIAL
Text here...
1 2 3 4 5 6 7

News Page:

The original version of the News Page and re-arranged narrower version on the right This page contains quite a complex mouse-over photo slideshow on the left. This is a soft group of multiple parts on various layers (when you mouse- over the different photo the main one changes and text description changes).  I only need to move this slightly so it’s centered on the new page, but no other change.  The column on the right has to be moved to a position below the photo slideshow (and its text).

Gallery Page:

There are various ways to create photo galleries in Web Designer e.g. using Gallery Widgets. But this page is made up of an array of individual photo thumbnails, with the pop-up attribute set (so you get an enlarged version when you click on it), along with caption text that is Soft Grouped with the photo, so the photo and caption stay together when you drag them around. We wouldn’t ever recommend more than 2 columns on a mobile variant so, using the Selector Tool, I will simply drag to re-arrange the images into 2 columns, and at the same time resize each to be a little larger. If you have the ‘Snap To objects’ (magnet) on, then ensuring they are all aligned is really easy. The original Gallery page on the left, and the re-arranged version on the right.

Contact Page:

Adjust the sub-heading and Contact button. Very little needs to be done to this page. I simply moved the position of both the text and the image and made the image larger.

Blog Page:

Adjust the sub-heading and content in a similar way to the Store Page. The original on the left has been re-arranged to be one narrow column with larger, slightly re-positioned images.

About Page:

This page is a bit more complex, and requires the right column (with anchored images) to be moved below the 1st column. The two sections have been re-arranged to be one below the other - I altered the column width, and tweaked the photo positions a bit
6