How to make responsive email isn’t as hard as you think. In fact, you can start by using a mobile email template that is already responsive. You can also get help from online resources or professionals who know how to code emails correctly. However, there are some common problems that occur when creating responsive email. In this blog post, I will discuss how to fix each of these problems so your email looks great, and performs better, no matter how it is displayed!
Begin With a Responsive Mobile Email Template
To start determining how to make responsive email, it is usually better to start with a template for your responsive email. This is because templates are already created to be mobile-friendly. You can find templates that will work for any type of business, and they are easy to customize. This save you save time, and provides an editable responsive email quickly, to adapt to the needs of your subscribers.
Some Places to Get Responsive Email Templates
When sorting out how to make responsive email, below is a small list of websites where you can purchase responsive email templates:
Getting Help: Online Email Resources & SaaS Email
If you need help creating your responsive email, there are online resources that can assist you. Additionally, many email SaaS (software as a service) companies offer services to help businesses with their email marketing. If you are having trouble with how to make responsive email, or troubleshooting a responsive design issue, these are some great places to start.
SaaS Email Companies that Can Help:
- Constant Contact
- iContact
- Mailchimp
- AWeber
- …and many more
Professional Email Coders
If you don’t have the time to find out how to make responsive email, you may want to hire someone to help you with your responsive email design. You can find many professionals who know how to code emails on sites like Fiverr, Upwork, Guru, and others.
Common Issues With Responsive Email & Solutions
There are a several common problems that occur when making responsive email, that you should consider before figuring out how to make responsive email. Some of the more common (past and present) are outlined below.
Font Size Percentage vs Pixel
One common issue with responsive email is making sure the font size is set correctly. Many resources suggest using percentage values for your font size, rather than pixels. Based upon my experience, that’s not necessarily, always best.
A case in point: Some email applications instead, make the percentage of font size based upon the size of the body font, sometimes resulting in unexpected sizes.
Specifying exact pixels gives you more control – Be sure to leverage media queries, so you can serve the different sizes based upon which device is reading the email.
Each media query can call a different CSS (for font sizing). Your code could look something like this:
@media only screen and (max-width:479px){
.efont {font-size:20px !important;}
}
@media only screen and (min-width:480px) and (max-width:599px) {
.efont {font-size:30px !important;}
}
@media only screen and (min-width:600px) {
.efont {font-size:50px !important;}
}Seeing a “Click to see complete message” (or Similar)
Some email providers truncate messages that are too long. To avoid this, keep your message size at 102KB or less. To help, remove comments from HTML code. Also strip out unused CSS attributes and other tags.
Styling Is Messed Up on Forwarded Email
Another common issue is that styling can be messed up when an email is forwarded. To avoid this, you can inline your CSS (because some applications remove the <style> tags). In-lining your CSS means that the CSS code is placed within the HTML code, rather than in a separate file.
Links Are Rendered in Blue, Underlined Text
When creating links in your email, be sure to use proper link syntax. This will ensure that your links are rendered correctly, no matter what email provider your subscribers are using.
Having said that, the fix (in this case) would be to add styling specific to those URLs. The syntax would look something like this:
<a href="https://www.destination-url.com" style=”text-decoration:none;color:#000000;border:none;”>Link text</a>Emails are Expanded (in Size) and Images Look Terrible
When an email is expanded, it can look terrible. To fix this, we could normally use media queries to control how your email looks when it’s expanded.
However, some email applications will scale images for higher DPI (dots per inch) displays. This can happen for people who have their screens (desktop screens) set at 1900 x 1080 and higher. In this case, the email application expands the email to display at a much larger size. Often they can convert pixel values to point values (px vs. pt), and related coding size issues.
On way to ensure email looks good is to also test on higher resolution devices. Granted, this issue is not specific to mobile phones, nevertheless it deserves mentioning here, I think. The fix?
For VML (vector markup language – Arguably it’s obsolete) scaling, add the following code tag to your email header code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">What the above does is enable the scaling. Be sure to also include the following between the opening and closing <head> tag:
<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->The above header code helps the images to scale better.
Times Roman Font Displays Instead of the Desired Font
Some email applications will default to the Times Romanfont, when additional fonts are defined. This means you’ll need to “force” the display of your primary font. You can use the following code example to do this:
<!–[if mso]>
<style type="text/css">body, table, td {font-family: Primary Font, Fallback web-safe font, fallback system font; !important;}</style>Gaps Display Between Image Slices
When you slice images into smaller parts, for faster downloading (and display), some email applications will display a gap between them. This is commonly a result of the email application adding padding to the images (which causes the gap).
One way to fix this is to adjust your coding to use display:block to your header tag, like this example:
div{display:block !important}The above means the element is displayed as a block. A block has some whitespace above and below it but uses no HTML elements next to it (which knocks out that padding), except when ordered otherwise.
Bulleted Lists Don’t Display Properly
Sometimes when you have bullet lists in your email, they might appear with large spaces between each item (and that does not look good). Typically this can be caused by email applications that don’t (or cannot) use the related code (ul, or li tags) in your code.
The fix is to manually code the bullets using CSS directives. An example is below:
li {text-align:-webkit-match-parent; display:list-item;}or is Outlook is the issue, then try this:
<!– [if gte mso 9]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}</style>
<![endif]–>This is by no means a full list of issues to address when considering how to make responsive email – But I hope for many, it at least leads you in the right direction.
Conclusion
In this article, we looked at how to make responsive email. We started by looking at how to start with a responsive email template. Then we explored how to get help and some common issues that can occur when trying to create responsive email. Finally, we looked at how to address some of these issues. All in all, creating responsive email can be a challenge, but with the right tools and knowledge, it can be overcome.
You can learn much more about email responsive design, by visiting our Small Business Email Marketing posts. As well as find out more about responsive mobile email.