Broadcast email marketing blog

As more and more email is being read on mobile devices, we strive to find ways to make them look as good as possible in that environment. In web design, there has been a fairly new movement towards what is called “Responsive Design” which allows you to create one website that magically (by “magically” I mean after a ton of thought and work is put into it by designers and developers) reformats itself for optimal viewing on different devices. The same process can be applied to email design but like anything with email what might seem easy on the surface can be steeped with technical challenges.

How Do I Create Responsive Emails?

Let’s start by explaining the basic concept. The way Responsive Design works is by checking the width of the device’s viewport by using a line of code within the head tag called a “media query”. Here is an example:

@media only screen and (max-width: 480px) { … }

What this does is check to see if the screen width is less than 480px wide (which is equal to an iPhone in landscape orientation) and then activates a set of specified styles that would be listed within the curly brackets. If you wanted to target tablet screens you could have another media query that looks for a max-width of 768px. And if you specifically want to target an iPhone in portrait orientation you would use another for 320px.

In addition you’ll need to set the Viewport Meta Tag, which means adding another line of code to the head that will most likely look like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This article on Webdesign.tutsplus.com outlines the different options in this tag and what they do.

What Is The Advantage Of Using Media Queries?

By June of this year, more people will read email on a mobile device than on a desktop computer or webmail client. Wouldn’t you want to make your emails as readable as possible on those small screens? The simplest approach that has become the minimum standard for developing mobile-friendly emails is to use a font size large enough to be readable on both desktop and mobile browsers but it can be difficult to create one design that satisfies such a large range of screen sizes in this way.

If you do nothing else, the biggest advantage of using responsive design in emails is the ability to set different font sizes for different screens. This is most beneficial in text-heavy emails like newsletters. Here is an example from Mass Transmit’s own email newsletter. On the left is a section of the email viewed on an iPhone without the media query in place. On the right is the responsive version where the font size is increased for better legibility.

   

 

Media queries are also useful for optimizing your layout. Again, with our newsletter when you shrink our 640px wide header down to 320px our logo and tagline are barely readable. Now, we just redesigned this logo and really want people to be able to see it. By building the header responsively we can have the tagline drop down to a second line so that neither image needs to be scaled down.

    

 

Other common uses might be: collapsing a two column layout into one column or hiding or repositioning some elements to better prioritize content for the smaller screen.

Why Would You NOT Want To Use Media Queries?

Like I said in the beginning, this isn’t magic. It takes a lot of work and in some cases using responsive design in an email can be more frustrating than with a website. Here are some things that will make you tear your hair out:

Lots of extra planning – Think about your mobile design first. If you have to go back and retrofit media queries into an email that wasn’t designed for it you’re going to find yourself redesigning, rebuilding and rethinking what you’ve already done. But even with proper planning you’re going to find yourself putting in a lot more time in design and development than you normally would for a simple email. But in today’s world of designing for multiple devices this is unavoidable.

You still have to make it the old way too – If you didn’t already know, Gmail strips out any stylesheet information you put in the head tag and that includes media queries. To work around this we’ve always used inline styles (individual styles written directly into the elements they are affecting) but that doesn’t help us here since media queries need to be called from the head. So, to accommodate for Gmail (and other email browsers that don’t support this) we need to cover all our bases and still build the email using inline styles in combination with classes and ids that we can call with the media query. This means that even when you are using media queries you still have to go through the trouble of making sure your email works on mobile screens without them.

Tables and media queries butt heads – We’ve become conditioned to use tables to layout our emails since CSS support is so iffy from email browser to browser. However, the nature of tables contradicts the whole concept of responsive design. It’s hard to reposition or collapse elements when they are set in tables with fixed sizes attached to them. This is not to say it can’t be done and in fact it is probably still easier to use tables than to not use them but you have to be careful about fixing sizes and instead need to control those sizes with inline styles and classes.

Be careful how much you make users download – It’s tempting with both responsive web and email design to use media queries to hide certain graphic elements on mobile or serve up a different graphic created specifically for one screen size or another. The problem with this is that the user will have to download every graphic used in your email whether you’re showing it to them or not. This is an issue if your user does not have a data plan that will support your graphics-heavy emails.

Is Responsive Email Design Right for Me?

In the end, the decision to use the Responsive Design approach for email will depend primarily on three considerations:
Audience: If a large portion of your audience is reading email on a mobile device, responsive design may be a good idea.
Budget: Additional design and development time will be required.
Content: Text-heavy newsletters will benefit from responsive design, while graphic heavy emails it may be easier to design one email that reads well across all devices.

You can leave a response, or trackback from your own site.