Designing Responsive Emails

Responsive Email Design Is The Edge To Your Newsletter

More than 66% of all email in the USA is read on mobile devices. That means your email is set to reach a variety of screen sizes on phones, tablets and computers. Displaying the email right on every screen is important, and thus responsive email design becomes a necessity.

Achieving a responsive email design is easier said than done. Email display is very much app-specific and email clients often wreck the appearance of the message. Outlook, for example, is notorious for its inability to recognize most CSS features that make responsive email possible.

As the use of media and several other CSS queries remains problematic, using inline CSS in conjunction with a table based layout can solve the display problems. Start by tailoring the design for mobile devices. Your email could have a width of 600 pixels – with the table split into 300 pixel blocks. This will keep the email safe from the vagaries of Outlook and allow most mobile devices to display the email as a single column with the tables stacked vertically.

A simple way to deal with the problem is to go straight for the single column layout. This approach concentrates on length, while keeping the width suitable for mobile devices. The visual results may not be as flattering for desktop clients, but that’s okay if you’re keeping your focus on a mobile audience.

Finally, don’t forget to test your email template and design for every conceivable platform and app and make use of the variety of frameworks and tools available. Ink, Cerberus and MiddleMail are excellent free frameworks to get you started.

Now that you have the basics covered, head on to Email Newsletters and Best Practices section to learn how to fine-tune your newsletter.