Creating a mobile experience

PageCloud simplifies the process of creating mobile friendly pages.   A well-proportioned web page design will look good on all large screen devices such as desktops, laptops and tablets with no special changes, however mobile phones are an exception.  If you don't want your viewers pinching and zooming to view your page on their phones, you can use Pagecloud’s mobile mode to create a special layout for a mobile version of your site.   

How mobile mode works

Your site is composed of a single set of content objects such as text, graphics and embedded elements such as Youtube videos.  Your site also has two layout views or modes to display this content, one for desktop and one for mobile.   You can switch between these two views using the controls at the bottom of the PageCloud editor screen shown in the following screenshot.  


Click on DESKTOP to edit the desktop view of your website and MOBILE to edit the mobile site.    Note there is also a checkbox beside MOBILE  that is used to turn your mobile site on and off.   By default your mobile site is turned off and once you've decided that it is complete and ready to publish, simply check the box beside MOBILE to make it live.   In the unchecked default OFF state, your desktop view will automatically show as your mobile view.     Note that turning your mobile site on and off has no effect on the content, it simply determines whether to display your mobile view or desktop view to mobile devices.

We recommend starting in desktop mode and building your full site first, and then moving to mobile mode to make layout adjustments in order to get the best viewing experience for mobile devices.  In general, you can switch back and forth between desktop mode and mobile mode at any time.  Note that changes you make to the style and position of objects in either mode, generally only apply to that mode.

Editing Mobile Mode

If you are starting from a fully built desktop view, creating a mobile view will involve moving text, images and other objects into the narrower format of the mobile template.   This can be done by simply dragging objects and placing them where they look best.   Here are a couple of techniques that are useful:

  • The Squeegee tool.   As you move objects into the narrower format of mobile mode, your site will need to become longer to accomodate all the content.   A very useful technique is to use the Squeegee tool to move all the content down in order to create space so you can drag nearby objects into the mobile view.  Simply use the squeegee to keep creating more space as you need it.   In this way, you can move from top to bottom and systematically build your mobile layout.   Note that you can also use the Squeegee tool to move all your content upward in order to close a gap in your layout in situations where you've deleted or hidden content.    Here is a demonstration of using the squeegee tool to create layout space to insert new content:

  1. The Group function.   If you have a group of objects you would like to efficiently move or align, you can group them and then move or align them as a single block.   For example if you would like to center a group of objects in your mobile site, you can group them, press AC to align center, and when the objects are located properly, simply ungroup to continue working. 


Use HIDE rather than Delete    

If you delete an object in either desktop mode or mobile mode, it will be removed from both desktop and mobile mode.  If you want an object t to appear in one mode but not the other, you must to use the Hide feature located at the bottom of the ARRANGE tab.   This will cause the selected object to not display in the mode where the Hide operation is used.   To hide an object, select it and type Cmd-Option-H.   The object will continue to appear in the PageCloud editor but will not be visible on the published version of the page.   To restore visibility of the object, select it and type Shift-Cmd-Option-H.  

Here is a demonstration of the Hide feature:


Resetting Mobile Mode

In unusual situations, one or more objects in your mobile view can become out of sync with the desktop view.  You can always reset the mobile view under the PAGE tab by clicking the Reset mobile mode button.   This has the effect of removing all mobile mode formatting and you can then reapply the formatting you want.

Please keep in mind, this will reset mobile styling for all objects on the page if nothing is selected. If you would like to reset the mobile styling of only select objects, please select those objects first, and then click the Reset Mobile Styles button in the PAGE tab.


Resetting Text formats 

Occasionally text formatting in mobile mode can become unstable.   You can reset the formatting of a specific text block by editing the text box, selecting all the text in it and clicking the Text reset button labelled as “Tx” in the text editing palette.

Here is a demonstration:

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!