Ilma from MailerLite

Ilma4 min read Tips & Resources April 20, 2017

5 simple steps to make your email design responsive

5 simple steps to make your email design responsive

Email newsletters created with MailerLite are optimized for mobile devices automatically. In order to achieve the responsive look we’ve made a few changes to the email styles:

  • Font size for headlines – 24 px
  • Font size for text – 16px
  • All images are shown in one column and over the entire length
  • All buttons are shown in one column and over the entire length

While most of the work is done for you, there are extra things you can do to make your emails look even better on a mobile device!

#1. Short subject line + preheader

5 simple steps to make your email design responsive

The preheader is the first bit of text that shows up in many email clients immediately after the subject line.

Those snippets appear in most mobile devices and in some desktop clients, such as Gmail and Outlook.

iPhone cuts off subject lines after 35 characters in portrait view, but displays about 140 characters of preheader or two full lines (that’s a lot!).

Don’t use preheader to say… Can’t see images? Click here to view this email in your browser.

It makes way more sense to write short subject line and then expand your message with preheader.

For example, instead of subject line “Summer is finally here: 50% off all dresses”, write “Summer is finally here” as a subject line and then “50% off all dresses” in preheader.

More info about preheaders

#2. CTA designed for fingers, not a mouse

5 simple steps to make your email design responsive

Your call-to-action is the most important part of your email.

If you include several links in the text, make sure there’s enough space between them and can’t tap the wrong link.

The way we code the buttons in MailerLite the whole area is clickable, not just the text in the middle. This way it’s even more user-friendly on smaller devices.

#3. Short paragraphs

Keep paragraphs short, so it’s easy for readers to skim the message and understand what they are supposed to do next.

Also, a longer paragraph will mean more vertical scrolling on a mobile device, so the rule “less is more” applies very well here.

#4. Power of images

5 simple steps to make your email design responsive

An image is a powerful tool to convince your customers to act. Let’s say you are selling plane tickets to Nice in France. What will you include in your newsletter? Price. Date. And… Photo of sunset in Nice. That will greatly help your customers to imagine what they can get if they purchase the ticket. It’s much easier to sell sunsets than flight tickets, right?

Use images (photos, videos or infographics) that convey or support your message and get strategic about where you place those images, as they’re key to drawing the eye (and moving the scroll bar) down the screen.

Here are 10 awesome examples of our customer using images.

#5. Mobile friendly landing pages

5 simple steps to make your email design responsive

Now you have an email that looks incredible on any mobile device. A reader clicks on your call-to-action and finds a mess of a landing page. That’s it.

Your reader closes the window, eats breakfast and forgets you exist. What a shame! It’s so important to have landing pages optimized for mobile devices.

We have several landing page templates that are ready out-of-the-box, fully responsive and just waiting for you to add your texts and media.

You can find the whole overview of them following this link.

Editor’s note: This post was originally published in July, 2014 but has been updated for accuracy and comprehensiveness.