Responsive Design In Email Marketing

“Responsive design” and “responsive development” are huge buzzwords — still. Really, these should not be buzzwords anymore; they should be a standard. With the introduction of the iPhone in 2007, the entire Web sphere has radically changed, and along with it so have users’ habits. When was the last time you checked your phone? Yeah, exactly.

For those new to the terms, responsive design and responsive development mean that a website is coded to detect the device from which a user is viewing. The design and layout respond to maximize that device’s screen space. Sometimes this means elements are stacked, other times elements disappear.

Most websites are now responsive, as it’s become the new Web standard. Then why are many companies still sending emails that are not responsive? There are many reasons, but at the top of the list is the difficulty to code with tables (required for emails) — and somehow make those tables responsive. The extreme limitations developers have for coding emails require a high level of expertise and creativity to push those emails to also be responsive. A lot of the heavy lifting, however, can and should be done during the design phase. It cannot be emphasized enough how important it is to have your emails designed by a designer who understands both responsive development and email development. In doing so, your designer will be able to foresee the development phase and prevent a lot of potential issues during the design phase. Here are a few tips to help you transition your emails to a responsive format (if you haven’t already!):

1. Don’t embed text in images. This has always been best practice, but now more so than ever. When an image scales down, so does the text. Suddenly, very readable 12-point type becomes 6-point type that is impossible to read! If you place all text as HTML, the text size will not become microscopic on a mobile device. That is, it will adapt and keep its native size on mobile.
2. Vertical real estate is even more important. If your headline and call to action are far down on your desktop version, this will be a million times worse on mobile. Keep the most important elements at the top — and make them stand out.
3. Keep your content concise. The shorter the better, especially when you lose horizontal screen space on mobile — thus pushing your content even longer vertically (requiring more scrolling).
4. Keep your layout to one column. If you really want a two- or three-column layout, be sure that it will stack for mobile in a manner that will be cohesive with your messaging.
5. Be ruthless about unnecessary elements. If something isn’t necessary in directing your reader to your conversion, remove it from the mobile version. For example, many email campaigns have a navigation bar at the top serving as helpful links to a website. On mobile, remove this bar and leave only your specific call-to-action buttons for that campaign.

With the prevalence of smartphones, the email marketing industry has seen a huge increase in relevance and response. Now that most people have smartphones, we are constantly “tuned in” to our inbox — at every red light and every long line at Starbucks. As a result, email campaigns are flourishing now more than ever. Don’t lose potential leads because your email campaign is not optimized for mobile devices. Take time and make the investment to put the experts to work transitioning your email campaign into a responsive email campaign. You’ll be glad you did — and so will your readers!