Skip to main content
Mobile Optimisation Options

How to optimise your content for mobile devices using Firepush email builder

Emily avatar
Written by Emily
Updated over 3 years ago

You’ll probably design your email on your laptop or computer. However, nowadays, most customers read their emails on their phones. This means that you need to take extra care to make sure that your emails are optimized for mobile use.

Emails are usually divided into multiple columns. As you can imagine, these columns become very narrow on a mobile device and almost impossible for a user to read.

The Firepush solution to this problem? Vertical stacking.

By generating an HTML code that prioritizes stacking, content is reorganized so it is easy to read and scroll through for the mobile user.

Using the Firepush editor, you can make changes to the way your message is viewed on a mobile device.

Desktop vs Mobile Preview

Most systems including IOS and Android will support mobile stacking, allowing customers to view your messages as you intended them to.

In some cases, a system may not support vertical stacking and will show the desktop version of your message instead. This tends to happen when software doesn’t support standard CSS.

Vertical stacking isn’t always the answer

Depending on your message, you may find that vertical stacking isn’t the best option.

For example, you may find vertical stacking creates too much excess space, awkwardly placed icons, or highlights the wrong elements in your message.

In this case, you may choose to opt-out of vertical stacking.

You can do this by changing your row’s settings. By using the ‘do not stack on mobile’ option in the settings, you can use the Firepush editor to override the default setting for vertical stacking.

You’ll find this option in the setting tab, which appears as a panel on the right-hand side.

If you do opt to go ahead without the vertical stacking, it’s important to make sure you check the mobile preview to make sure it’s user friendly.

Reverse stack on mobile

Another option is to choose to stack your columns in reverse order.

To show you the difference between these settings, here’s a quick video of what your user would see on their device.

Hiding content on desktop or mobile

You can choose which content to display on desktops and which to display on mobile devices using a simple setting change.

Firstly, you’ll need to navigate your way to a content block’s settings which can be found in the property panel.

Here, you’ll find the ‘hide on’ settings, allowing you to choose when this particular block will show up.

Once you’ve changed your settings, you can preview your message by selecting the ‘preview’ options and selecting ‘mobile view’.

These handy features allow you to optimize your email message for both the computer and mobile user, making an overall better user experience.

Important information for Firepush Plugin users: Before you can enjoy these settings, you’ll need to enable the feature in the server-side configurations for your plugin. These can be found within the Firepush Plugin admin panel within your Firepush application.

Did this answer your question?