Thanks to the handy mobile design mode on the Firepush Editor, you can design emails and pages for mobile completely hassle-free. This design mode allows you to create designs without having to switch between the editing screen and the preview.
When you enable mobile design mode, you will be able to:
Switch between desktop and mobile view to edit and preview content
Preview how the email design looks on a mobile device, without the need to leave the editor page
Realise instant results with the mobile optimisation options including do not stack, reverse stack and hide on mobile.
Create mobile-first campaigns without having to design on a desktop first.
How Does Mobile Design Mode Work?
Once you’ve turned mobile design mode on, two new icons will appear in the upper left corner of the Firepush Editor. One will take you to the mobile view, and the other will show you the desktop view.
When you click on the desktop icon, the editor will show you an image that will take advantage of the full width available in your browser window.
Alternatively, choosing the mobile icon will reduce your work area to a width of 320px, just like you’d see on your mobile.
Mobile view will still allow you to access most of the features available in the desktop view, so you can continue to work on your email or page as you wish.
Important to note: When you are in mobile design mode, you are still working on the same template as the desktop mode. This is not separate content, and any changes you made in mobile mode will be reflected in the desktop version too. That is unless you are using a setting-specific feature.
Mobile Optimisation Settings
Within the Firepush Editor, you’ll find specific settings that help you to optimise content for a mobile device. This includes options for both rows, columns and content blocks.
Check out the following options to optimise your email or page:
Hide on mobile/hide on desktop. This setting allows you to hide a specific content block, row or column when the email or page is displayed on a mobile device.
Do not stack on mobile. If you choose to enable this setting for a certain row, it will not be stacked when displayed on a mobile device.
Reverse stacking on mobile. When you turn on reverse stacking for a particular column, you’ll notice that the rows within that column will stack in reverse order when displayed on a mobile device.
When you use these settings while on Mobile Design Mode, you will be able to see the results instantly, without having to leave the editor and go to preview mode.
To ease the process a little more, you’ll find an additional setting for the hide on mobile option. Next to the desktop and mobile icons in the upper left corner, you’ll find a new visibility icon, that looks like an eye.
By default, the visibility setting is on. When it is on, the Firepush Editor will display the following:
Show any content blocks that are currently labelled as ‘hidden’ for that specific setting
These blocks will be slightly blurry to indicate that they are, in fact, hidden for this type of device
You will also find a small icon sitting in the outline of the block when you hover over the image
When you choose to turn the visibility off, the Firepush Editor will display the following:
All of the hidden elements for that view-type will be removed completely
The template of your email or page will appear in mobile view
Here’s a quick demonstration of what you will see when you use the visibility toggle on the Firepush Editor:
When you want to preview your email or page on the Firepush Editor, you will need to be in the mode that you want to view. For example, if you are editing in the mobile view, when you click preview, you will be shown what your email looks like on a mobile device. The same goes for if you are editing in desktop view.
Mobile View Limitations
When you use the Firepush Editor in mobile view, you will be able to access most of the features and settings as normal. Except for the following:
Editing text in a block. When you have a block with a text element that is hidden in the mobile view, you will not be able to change the text. You can only access editing settings in the editor’s sidebar.
Content area width. You can only change the width of the content area in the desktop view.
Resizing columns. While you can add and delete columns and rows in mobile view, you will not be able to resize them.