Computers, tablets, mobile devices and oh-so-many more! How can we ever make websites and emails look great and function well on so many devices? Many marketers are turning to something called responsive design. With responsive design, the email or webpage will automatically resize images, text and tables based on a user’s screen or browser width.

Grantham University's email resizes text and drops the right column when a subscriber views on a mobile device.


Responsive design detects a user’s screen size using a CSS media query to determine the width of the screen being used. Then, the website or email code applies specific style rules (CSS) to fit the design elements to the screen size. Of course, it’s much simpler on websites since there are only a handful of different browser types compared to more than 30 different email clients!

If you’ve talked about or used CSS in email design in the past, you may be wondering: Can responsive design work with email marketing since it uses CSS styling? Unfortunately, it’s not a simple yes or no. Responsive design can work with a lot of email clients… but not all.

The first step is to find out how many of your email recipients are opening and reading on mobile devices. If it’s a high percentage for almost every email, you may decide that it’s worth taking the plunge into responsive design. It definitely takes some time to address, so if your readers aren’t using mobile yet, it may not significantly impact your results. If you use emfluence as your email service provider, then reach out to your account rep to request a mobile tracking pixel to add to your next email. The report from that tracking pixel can tell us where your readers are opening: Outlook, iPhone, etc.

Once you’ve deemed the investment in mobile email worth it, it’s time to involve the heavy email geeks on how your email design and code may need to change to be mobile-responsive.

As you get ready to revisit your emails for mobile, here are a few design tips to keep in mind:

  • A single-column layouts work best.
  • Design for touch! Buttons and text links should have a clickable area of at least 44×44 pixels for “thumb-sized” clicks.
  • Body copy should be a minimum of 14px and headlines should be a minimum of 22px (or should adjust to these sizes for mobile users) per Apple guidelines
  • Keep subject lines shorter: the longer the subject line, the lower your email content is pushed on an Android device. Aim for 25 characters if possible.
  • Keep your message and call-to-action concise and position in the upper left corner of the email. This way, even devices that don’t support responsive email design can still show the most important part of the message.

Then test, test, and test again before sending. Check to see how your email renders on the most popular devices and correct any problems prior to sending. Remember to try a few Android devices and iPhone screen sizes to be sure they all render well.

Once you have your responsive email or email template designed, and the design tests well, you can apply the code for making beautiful email design that works great on all devices… well most!

To get started on making your emfluence email templates responsive, contact your account rep. If you want to know more about email marketing with emfluence, contact us!


Let's Get Started