SiteSpinner Pro Tutorials banner
< Tutorials Home
Fast Start -- Mobiles

For mobile design, think lean and mean -- this means stripping out useless clutter,  and simplifying. In this tutorial, we will take the simple page we created in the Fast Start tutorial, and modify the layout so that it fits on a mobile layout page. Topics we cover here are:

Open your Mobile Layout tab
Omit non-essentials
Reposition objects in Mobile Layout
Drag and drop
Resize objects
Select All Below
Synchronize
Preview
Our test page



Open your Mobile Layout tab
If your Mobile Layout tab is not already showing towards the top left, click the "Layout Options" button at top right of your workpage and select "Dual ".

SiteSpinner Pro logo
Mobile page
Mobile Layout tab location
Layout Options button
If you don't have any layout tabs showing, use View > Toolbars and check that you have the Workspace Tabs Bar checked as shown below:
View > Toolbars > Workspace Tabs Bar
Guide border button
Reposition objects in Mobile Layout
The aim is to get everything in the mobile layout to appear inside the blue Mobile guide border running down the page. If you don't see a blue guide border, select the "Guide Border" button on the top toolbar.


Omit non-essentials
Omit images or anything else that is not really necessary. Right click the object concerned and from the context menu, select "Exclude from Mobile Layout".

You might have something you want to appear in Mobile Layout, but not in Desktop Layout. If so, use "Exclude from Desktop Layout" -- this will exclude the object from the Desktop Layout, but not from Design Layout.

Excluding objects from layouts
Drag and drop
Drag everything left so that it starts near to the left edge of the mobile layout


Resize objects
Resize objects that spill over the edge of your mobile design width -- the right-hand guide border. Drag-stretch text objects downwards so that all the text displays.


Select All Below
In the process of resizing, you will probably find that you need to shift everything below further down the page. To do this, right-click on the page or on the object and from the context menu, Select > All Below. Having done that, you can then move those objects down with the cursor keys, drag with your mouse, or enter a new y coordinate in the Quick Editor > Object tab.

TM & © 1998 - 2010, Virtual Mechanics, all rights reserved.
Select All Below
Synchronize

In the process of working down the page like this, you may find you need to make changes in Design view. Having done that, you can synchronize the object changed by leaving it selected, right clicking and selecting "Synchronize All Layouts". This will transfer the change into the mobile layout. If you have more extensive changes, use Select > All Below to select a group of objects, or one of the other multiple select options. Then you can synchronize everything in the group across the layouts.

If you change text in mobile or design views, synchronizing is automatic. A mobile text change will be reflected in Design Layout too.


Preview: mobile controls
Synchronize layouts
Preview
There are several ways to preview a mobile page, but here is the easiest:

Click the Preview tab -- this previews the page using the built-in Opera browser.

Select the hand-held button at the top left of the preview bar -- this switches the Opera browser into SSR (Small Screen Rendering mode), so that it gives a good indication of what the page will look like in a real mobile.

Select the size of "mobile screen" you require. The above image shows the screen set for 240 pixels wide x 320 high.


Our test page

Our test page is here:
To see the mobile layout workpage, open the page then select the Mobile Layout tab. Click the Preview tab.

As a more complex demonstration, we have set a mobile layout for this page too.


Next
For more about Mobile design, see these pages:
Mobile Design Introduction
Mobile Development


FastStart4
Tutorials banner