By now, you should have heard about responsive websites. We discussed this in our last newsletter, and you should consider making your emails responsive also.

Just as more and more people are viewing your website on devices other than a desktop (mobile or tablets, iPhone or iPads, as an example), the same applies to emails. In fact, client email opens on mobile devices rose from 4% to 20% in 2011; and by the end of this year, more people will be reading emails on mobile devices than on desktop computers. Moving forward, if your emails are not mobile friendly, your email newsletter or message could go from great to awful by appearing broken, or too small and become ultimately unusable. The end result could be a diminished rate in responses in your email returns.

So what are responsive emails and how do you build them?
Responsive emails are very similar to responsive websites in how they work, but also very different in how they are built in relation to websites. The similarities lie in that you build one email that “responds” or reformats itself to the viewer’s screen size, but they are very different in the backend details of how they are built. With websites, you can build responsive formats for many different screen sizes including everything from desktop and laptops, to tablets and phones. With responsive emails, there are currently only two available formats, one for desktop and one for smart phones.

And since email clients are very strict in what code will be accepted due to viruses and spam, the code for responsive emails is also very strict in that they are still using “old school” tables in html. If you are familiar with tables, they are basically a box of rows and columns usually using fixed widths to “hold” your copy and images in place. Websites used to be built with tables years ago. HTML5  and CSS3 have since replaced the strict, rigid tables with much greater flexibility.

So the challenge lies in how to use these rigid tables to become fluid and responsive for today’s smart phones and still work well on desktops too. Granted, this task is not for the faint of heart, but it can be done. To put this as simply as possible, you basically build your email the traditional way in tables with the standard 600 pixels wide. Then you add in the media query responsive code that only the devices that are capable of recognizing that code would then implement. In a nutshell, the media query will tell the smart phone that if your screen size is below 480 pixels wide, then view this table not at 600 pixels wide but at 300 pixels wide. Images can be scaled using the same concept. Floats, as an example will not work, but align=”right” in a table, with a thoughtful plan and some ingenuity, will. It will take a good bit of knowledge of what CSS code will work and what code won’t, and plan, plan, plan. Measure twice and cut once, as the carpenter always says.

The time is now!
Even though responsive emails may be challenging, they are also a great opportunity! Don’t wait until you lose your audience before you consider getting on board with presenting your company’s newsletter or email information in a format that your clients will truly appreciate.