EasyEditor markup: supporting mobile optimisation

Summary

EasyEditor enables you to optimise your campaign for mobiles from the Styles > Mobile display area. However, the options available depend on your campaign being built in a compatible way. If some or all options are missing for you, we explain here the changes you can make so you can use them.

Starting from scratch

The simplest way to ensure the mobile options in EasyEditor show 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.' 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 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 wish to remake from scratch, our Managed Service Team team can make it compatible with the mobile options for you. Get in touch at client.services@dotmailer.com, or call 0845 337 9170 for more information.

Have more questions? Submit a request

Comments

  • Avatar

    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?

  • Avatar

    See the blurred images here

  • Avatar

    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

  • Avatar

    Hi there,

    This doesn't sound right - if you contact our support team we'll take a look for you.

  • Avatar

    Hi,

    The email address you've listed in this support article doesn't exist, according to my email program.

  • Avatar

    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.

  • Avatar

    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

  • Avatar

    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.

  • Avatar

    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).

  • Avatar

    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.

  • Avatar

    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

  • Avatar

    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.

Powered by Zendesk