Tips and Cheats for Mobile and Desktop Email Design

Did you know that over 68% of emails are read on a mobile device? If you are using a smartphone, you probably noticed that more and more emails look differently on your phone versus your desktop. This is called responsive design.

Emails can now be set to reformat based on screen size and flow nicely on a mobile device without making the reader pinch and zoom in/out to read the content. For a while, a large percentage of these responsive emails were hand coded but now, with our mobile- and desktop-friendly options, your emails can look exactly the way you want it to, both on mobile and desktop!

Here are some tips and examples:

DESIGN/LAYOUT:

First off, start with designing a draft of how you want the email to look on mobile vs desktop. Start with a simple design with image/text combinations. (All our FREE templates in OM3 are mobile-friendly!) You don’t necessarily need content right away. An estimate of how much content (i.e. 1 paragraph vs 5 paragraphs, large banner image vs supporting image, Call-to-action button, etc.) would be best.

SET DISPLAY FOR MOBILE AND DESKTOP:

Now, the tricky part is that code is always read left to right, so whatever content you normally put on the left column, will usually show up on top of the content on the right (like the example on the right) and this may not be how you want it to look. In some cases, you may want the right content (i.e. image) to be on top.

You can of course add custom code to flip this… but for those of us who can’t code, OM3’s Drag & Drop Editor has some simple ways to help combat this. Simply navigate to the “Styles” > “Display options” Menu and select the visibility drop down.

You can set the visibility of your campaign blocks to:

  • show on mobile devices only
  • show on desktop devices only
  • show on all devices

By default, all blocks will be set to “show on all devices”. However, the best way to maximize the use is to two versions of each block – one for mobile, and one for desktop.

For example, create the block how you want it to look on desktop. Then make a duplicate of this block and swap the content on the left and right and set the first block to “Show only on desktop” and the second block to “Show only on mobile”. You should end up with something that looks like this:

CONTENT:

  • You can also hide some longer content. For example, a 4-paragraph article may be okay to read on a desktop but on mobile, you may only want to show the first opening paragraph and a read more button and hide the rest. Simply put the first paragraph in a separate block and then for the other 3 paragraphs, set them to “Show only on desktop”.
  • Keep CTAs front and center. Make sure to put your CTA buttons near the top on mobile. When creating emails for busy, on-the-go readers, you want to get to the point quickly and tell them what you want them to do right up front. Remember, some mobile users may only use one hand so putting the button on the full width/center instead of align left or right is best so it’s easily clickable.
  • Make sure to put a phone number on the top first section of the mobile version of the email for easy access to call for more information.

TESTING:

  • Make sure to send yourself a test and navigate the email on your own mobile device.
  • Send the email to a few friends with iPhones/Androids to test
    • Is the text too small?
    • Are there areas where you need to zoom in?
    • Is there a clear and apparent Call-to-Action?
    • Are links/buttons too small?
    • Are images too small/big?
    • Is there too much content?
    • Would you read through the whole email on mobile?
Please Share:

Leave a Reply

Your email address will not be published. Required fields are marked *