Summary
EasyEditor enables you to optimise your campaign for mobiles from the Styles > Display options area.
You can set the visibility of your campaign blocks to:
- show only on mobile devices
- show only on desktop devices
- show on all devices
You also have two further mobile device settings for blocks:
- preserve image size
- do not stack content
However, the options available depend upon your campaign being built in a compatible way. If some, or all, options are missing for you, we explain below the changes you can make so you can use them.
Starting from scratch
The simplest way to ensure these mobile display options show in EasyEditor is to start with one of our free templates.
Whereas all of our free templates are designed to be mobile responsive, we have two types that vary in their level of support - classic templates and 'Mobile email. Rebooted.' templates.
'Mobile email. Rebooted.' templates are our optimised templates, designed to work seamlessly with all modern devices.
Go to Campaigns > New campaign > Free templates to choose a template. To start completely from scratch, you can also pick from one of the blank templates.
The blank templates are optimised templates too, like those under 'Mobile email. Rebooted.'. They feature the latest upgraded EasyEditor markup, and we'd recommend selecting one if you want the very best support for mobile optimisation.
Having us do the hard work
If you already have a template that you don't want to remake from scratch, our Managed Service Team team can make it compatible with the mobile display options for you.
Get in touch at client.services@dotmailer.com, or call 0845 337 9170 for more information.
Hello,
I started from scratch with a blank template and it is not letting me preserve image size for mobile display. When I sent this campaign last week I noticed it turned my images into larger blurry things that looked very poor. Can you help me unlock the "preserve image size" feature?
See the blurred images here
Hi,
I had this problem too. To prevent it, you need to go into your emails html and make the following changes after the image source:
class="ee_editable
to
class="ee_noresize
It's very annoying, especially if you have lots of images!
I hope this helps though.
Joe
Hi there,
This doesn't sound right - if you contact our support team we'll take a look for you.
Hi,
The email address you've listed in this support article doesn't exist, according to my email program.
Hi Chris - very sorry, the email address is client.services@dotmailer.com, not .co.uk. Thanks for letting me know; I've updated the article accordingly.
Hi There - I have created an email template from scratch, however when I view the mobile preview, the images are blurry. The images I am using are large enough (I have tested with different image sizes) but they still appear to be poor quality in mobile display. I do not want to use the "preserve image size" function, as this distorts the layout - is there a way to prevent the images going blurry? Also on a separate note, when I send a test email to myself, I do not get the mobile version on my phone, just the usual template - do I need to put something specific in the HTML to optimise the email for Mobile?
Thanks,
Sarah
Hi Sarah,
Thanks for this. I'm afraid it's difficult to say what the issues might be here without seeing the campaign and its HTML first-hand. The best route to take is to contact our support team by emailing support@dotmailer.com and they'll be happy to investigate further.
When the empty image boxes appear on mobile device (ie before selecting 'upload images' option on a mobile), how do I ensure the empty boxes are as small as possible? I have looked at dotMailer marketing emails and the image boxes are tiny before selecting the 'upload images' option. I am using a mobile responsive template to create my campaign and also choosing to have a couple of our images visible on mobile device (such as our logo).
Hi Cathy,
Thanks for your question. Mobile mail apps do vary depending on device and OS, but you could try placing only the image width and not the height (the height will be determined proportionally to the width).
We also recommend you use subtle background colours to mark out an image area, adding structure in an 'images off' scenario. You can do this easily via EasyEditor - https://support.dotmailer.com/entries/20938988-Changing-background-colours
We have also found that adding HTML links above the fold and hero imagery will aid click through.
If you continue to experience an issue, we'd encourage raising this via support@dotmailer.com and let them know the current mail app you are encountering this on. They'll do their best to assist you further.
I hope this helps.
How do you make text centered on mobile but left or right aligned on desktop? The previous version allowed us to use
[class~=ee_headercenter] img { display: inline !important; }
[class~=ee_headercenter], [class~=ee_headercenter] p { text-align: center !important; }
for centered text on mobile.
Thanks
Amy
Hi Amy. Thanks for this question (which I see you also raised as a support ticket). To confirm, you can add this class to the media queries in our upgraded templates and it should work.
However, please be aware that it won't work on all mobile clients, such as Gmail/Android, as these don't support media queries. This would have been the same in your previous version though.
In case it's useful, you might want to take a look at the 'Responsive HTML' section of https://support.dotmailer.com/hc/en-gb/articles/221596788-Basic-structure-of-a-template, which covers the use of media queries.
Hope this helps.