Tip: Device Preview for Responsive Design

The ion platform gives you many different ways to preview your creative experiences, so you can ensure everything will display the way you want it to!

Preview While Editing

When working within the page editor, you will see three icons. These icons represent desktop, mobile and tablet views, respectively. You can click any of these icons to view what your page would look like on the corresponding device. You can continue to edit as well, so you can tweak your page to look the way you want on that device.

• • By default, your creative studio will have the desktop icon selected.

• By clicking the portrait mobile icon, you will see what this page would look like on a device that is less than 768 px which would be the most mobile devices.
• If you click the landscape mobile icon, you will see what your page would look like for visitors viewing your page on a device that has a screen size between 768 px and 991 px wide.
• The tablet icon can be clicked to see what the page would look like on a device that is between 992, and 1199 px. 
• Click back to the desktop icon to see your normal page.

Live Preview

You can also review your page in a “live preview.” By clicking the monitor icon in the top right corner of your creative studio, a new tab will open in your browser to show you what the page would look like if live. This preview will function as if it were live and allow you to click links, submit forms and take any action you would normally be able to on a live page.

At the top of your live preview, you will see similar icons that allows you to preview how your page would render on a desktop, mobile or tablet device. 

If you have any questions, please contact us on help@rockcontent.com. 😀