With over 50% of email now being opened on mobile the look of your email on smaller screens is more important than ever. Of course our builder emails are optimized for excellent mobile performance automatically. You may also want some flexibility with how this content is displayed. We would recommend regularly checking on the mobile preview of your email during the build and considering some of the options below to help you to optimize mobile performance.
Controlling Column Stacking
When using multiple columns the default behaviour is for content to the right to stack below content on the left so that it retains a readable size and the reader can scroll through the content on their phone. This is really useful in lots of cases but may not be the behaviour that you always want. In order to control this you can simply click on a row that contains more than one column and use the toggle at the bottom of the right nav menu to make the content not stack on mobile:
Email design best practices suggest a careful use of this display setting, as keeping a user-friendly vertical layout on mobile makes sense in most cases. This setting will give you more control over the use cases where keeping columns horizontal makes sense.
Reverse Column Stacking order
By default a multi-column design will stack with the content on the left being displayed first and the content on the right stacking under it. Sometimes a design may work better with the content stacked the other way (right first & left second)
In that situation select 'Reverse Column order on Mobile' to switch the stacking order
Image size on mobile
Images in your emails can be set to display at full width when viewed on mobile devices. That will often improve the viewing experience on smaller devices.
Hiding Content on Mobile
You can hide any content block (text, button etc) on mobile by selecting it and scrolling to the bottom of content attributes and toggling on the Hide on mobile option. You can do that same thing with entire rows of content.
You can check the result of turning this property on for a specific content block by going into the Preview and selecting the Mobile view. You will see that as you toggle between Desktop and Mobile the content blocks for which "Hide on mobile" has been turned on will not be shown.
One example of where this could be useful is hiding spacer content that is taking up un-needed height on mobile.
With these tools at hand you should be able to have a lot more control over the look of your email on mobile.
Using Duplicate Content
By leveraging the hide on mobile/desktop settings you can have separate viewing experiences for both screen sizes. Let's look at the below email header, it renders well on desktop, however on mobile the left aligned Knak logo doesn't look as good.
The solution - add in a second logo and hide one one mobile and the other on desktop.
That way the mobile view can utilize a center aligned logo for a better viewing experience.
We advise keeping usage on this technique to a minimum as it can add extra wight to your emails.