I Learned Responsive Email Coding, and So Can You. Here’s How.

Learning Responsive Design for Email Coding

It’s a mobile world out there. Statistics will tell you that at least 54% of email views now occur on mobile devices. They will also tell you that non-responsive emails frequently get trashed on mobile devices if they don’t render correctly. But making the commitment to switch to responsive coding can be daunting.

Don’t be afraid! It takes time and patience, but you can teach yourself!

Getting Started

With so many different email clients out there that follow their own rules, email coding can be frustrating on its best day. When I decided to start teaching myself how to code responsively, I wanted to avoid some of that initial frustration. I spent weeks on Google researching techniques and email best practices. With coding standards and interpretations evolving all the time, research is essential.

But as anybody who has ever learned how to code will attest, the only way you can become a master is to get in there and get your hands dirty.

My recommendation is to start out with a complete, fully tested, fully responsive HTML email template. How do you get one? There are thousands of free ones just a Google search away. But be forewarned: many websites will promise you “bulletproof” templates that are anything but. PostUp has some great ones that are free with an account and are clear and easy for a beginner to understand. (Here’s one you can use even if you’re not a PostUp customer yet.)

Free Responsive Email Template Download

You can also download five free responsive templates at Litmus just by providing your email address. They work great, but because they feature some more advanced techniques of responsive coding, I’d suggest you save them for when you get more familiar with the strategies.

Choose a simple and short template that contains elements similar to emails you’ve done in the past. Before you tinker around too much, find yourself some great testing software (I love to use PostUp’s integrated ReturnPath Render test page) and test your template across as many email platforms as you can to verify that it’s working great. This will give you a solid jumping-off point.

Use emails you’ve coded in the past and gradually try to implement their elements into the responsive templates. Save multiple copies of your code as you go along so that if your template breaks, you can start again from the last version that worked.

What If I Need Help?

Reading up on how other people code and studying the nuts and bolts of CSS (like specificity rules) will definitely make your life easier. But the best way to get good at responsive code is just to get in the sandbox and play with templates. Take it in small steps and test frequently.

As you get more experienced, you’ll notice how long your code is getting. Between media queries, conditional CSS, and endless tables, responsive emails can take three or four times as much code as you used to write for a non-responsive email. With more code comes more opportunity for those pesky typos and basic errors (forgot to close your fifth nested table?) that can break your entire email. Sooner or later you will get stuck with an email that just does not want to play nice.

Don’t give up! There is lots of free help on the Internet. The world is full of fellow coders who have run into the same brick walls and found their way around. I’ve found some invaluable help, tips, and tricks over at FreshInbox and StackOverflow.

It takes a lot of patience and trial and error to get really good at responsive coding. When you’ve finally finished your own template that works across all platforms, celebrate! Then save a hundred copies of it so you never lose it (seriously). Use it as a fresh base for your future emails. Gradually you will build up an arsenal of fully tested, fully compliant templates, and before you know it, you’ll be writing responsive code in your sleep.

Your First Responsive Trick

My favorite trick with media queries in responsive emails is to change the font size of a specific block of text according to the screen size. For instance, you don’t want a 60-point header that was designed for a desktop layout to show up at the same size on a tiny iPhone screen. In some cases, it may even break your email.

Here’s an example of some HTML from a table cell containing a 60-point header:

My Big Headline

Maybe you want to shrink that size 60 font down to 40 when the screen size is smaller than 600 pixels wide. And for an even smaller screen—say, less than 480 pixels wide—you want that font size to drop down to 30.

If you Google this topic, some people may advise you to use percentages instead of specific pixel amounts to scale down your text. I don’t recommend this method because of the potential for percentages to be misinterpreted. Some email clients may make your font size a percentage of the body font size, and that can vary widely. Specifying an exact pixel amount gives you more precise control and ensures you will get what you want.

First, inside your style tags in the head section, create the applicable media queries:

@media only screen and (max-width:479px){
            .shrink {
                        font-size:30px !important;}
            }
@media only screen and (min-width:480px) and (max-width:599px) {
            .shrink {
                        font-size:40px !important;}
            }
@media only screen and (min-width:600px) {
            .shrink {
                        font-size:60px !important;}
            }

I’ve created a class called “shrink” that I will apply later to the headline. The first media query specifies that I want the font size of anything tagged with class “shrink” to be 30 pixels when the screen width is 479 pixels or less. The second media query specifies that at screen widths of 480 pixels up to and including 599 pixels, I want the font size for the shrink class to be 40 pixels instead. The third media query specifies that any screen width of 600 pixels or more will cause the font to display at 60 pixels. According to the rules of CSS specificity, the !important declarations are necessary at the end of each line to ensure that these media queries will override your inline styling in the HTML.

Now, go back and tag that table cell in your HTML with the “shrink” class:

My Big Headline

By using this pattern, you can start playing around with making other elements of your emails change on smaller screens, such as text alignment or visibility.

Final Advice

Learning how to code responsively takes a large initial time investment, but it’s worth the effort. Your subscribers will have a better experience in their inboxes, your company will look more modern and polished, and you will notice the difference in your mobile open rates.

The biggest misconception people have about responsive emails is that designing them is inherently restrictive (images should be small, everything has to be in one column, etc.). Not so! An awesome coder can make just about any email design responsive, no matter how complex or busy or image-heavy. So start practicing with a free responsive newsletter template—and get awesome! Good luck and happy coding!

New Call-to-action

Guest Post

This post was written by a guest author.