Home > Blog > Tips for creating responsive emails
courriels adaptatifs

Tips for creating responsive emails

By:Publipage

Why should you create a responsive email?

Your goal when sending out an email to your mailing list is to generate as much interest as possible. The only way to generate interest is to make sure your email is easily accessible by your users. Would you be surprised to learn that 47% of emails are opened on mobile? Now if you consider the fact that when an email doesn’t display properly the user will likely ignore it or delete it. It’s also important to note that responsive designs don’t display properly in older email clients because these email clients don’t support the newer HTML/CSS elements such as <div> tags and media queries. So a responsive email is a fusion of old and new HTML practices.

 

General Email HTML tips

Before attempting to create a responsive email, we should cover the basics of email HTML. Some email clients are very limited in their support of HTML. Media queries, background images and external stylesheets are not supported in some email clients. So here are a few tips:

–          Structure your email message inside a <table> tag because the <div> tag isn’t supported as a structural element

–          Use Media queries to cater to the more sophisticated client clients found in mobile devices

–          Don’t use background images

–          Don’t use external stylesheets, use inline CSS for the more restrictive email clients. Use inline stylesheet for the more advanced email clients

–          Javascript isn’t supported in emails

responsive emails

Responsive Email HTML tips

First thing you need to do is find a responsive email template. What should a responsive email template do?

  1. It should have a maximum width of 600 pixels, that’s a width that will look good on mobile devices when media queries aren’t support. It’s also wide enough to be considered a desktop email message.
  2. It should automatically adjust itself to appear correctly on mobile devices. This will be done with carefully placed Media queries within the email template.
  3. The best way to know if a responsive email template works properly is to send a test email and see for yourself.

Basically, a responsive email template is a collection of rows that have different types of sub-divisions within them. If you have a row with 3 columns of text on your desktop email client, that same row will appear as 3 separate rows (sub-divisions of the main row) in a mobile device.

Each main row will be contained in a table tag. That table will have sub-divisions contained in tables. Media queries contained in the responsive email template will take care of the responsiveness of your email. There are several types of rows available: 1 column, 2 columns or 3 columns.  The best way to separate your email is to keep elements that belong together in the same row. There can be several sub-rows contained within a main row.

 

Responsive Image Tips

Your responsive email will contain images, there’s no way to get around this. The only thing you can do is make sure your images display properly. Here are a few tricks to help you achieve the results you desire:

–          Adding the following style will prevent certain email clients from adding unwanted spaces between the image and the content surrounding it:

<img style=”display:block;” src=”” />

–          The “alt” attribute in the <img> tag must always be set; this is in the case the user chooses not to display the images.

<img alt=”Image description” src=”” />

–          If you decide to add a link to your image, you must set the “border” attribute to 0; by default, a border is added to any image which is a link.

<img border=”0” src=”” />

–          To add some responsiveness to your images, adding a few media queries to your styles will result in the desired effect:

<style type=”text/css”>
@media only screen and (max-width: 640px) {
img{
width: 440px!important;
height:220px!important;
}
}

@media only screen and (max-width: 480px) {
img {
width: 280px!important;
height:140px!important;
}
}
</style>
<img width=”600″ border=”0″ height=”300″ src=”img/banner.png”>

 

Media Query

This is a difficult concept to learn but it’s a valuable tool for the modern web developer. A media query is used in CSS to target a specific category of devices. Most commonly, the media query will refer to the device width. You will have general CSS rules, after that you will apply CSS rules that apply only to a specific type of device with the help of a media query.

.half-width {
width:50%;
}

@media screen and (max-width: 480px) {
.half-width {
width:100%;
}
}

As seen above, the media query will change the width of the element to 100% if the width of the device is only 480px.

 

Mobile Device Adjustments

Once you have the structure responding properly to the device type, you’ll want to use your media queries to change several other CSS properties to give your mobile users the best experience possible. These are merely suggestions.

–          Make the fonts bigger

–          Change the font color

–          Add padding

–          Hide content

 

Conclusion

In conclusion, almost 50% of emails sent today are opened on mobile devices. It is therefore vital to consider the format of the email you are sending to ensure it adapts itself properly to mobile platforms, and your message is far less likely to be ignored or deleted. Your email must be responsive, combining old and new HTML practices and with carefully placed media queries. To do so, all you need is a responsive email template that will adjust itself to different mobile device formats. These templates are easily found on the Internet and then easily adapted to your message.

Share this post

Related Posts

Success Keys

Email marketing: 3 key elements for best campaigns

How many emails do you receive per day? 100? 200? 1000? And among those, how many do you open? How many do you read? Much less than half to one-third? Do not worry: capturing and maintaining the attention of the reader is not an impossible mission. You simply have to apply good […]

checklist prior to mailing

Checklist prior to mailing

Marketing automation has transformed how we deal with data relating to our lists of potential clients (leads). Although relationship marketing is based on an idea diametrically opposed to that of cold solicitation, the endorsement of your recipients does not necessarily mean a response rate or […]

optimiserinfolettre

How to optimize your Newsletter

The newsletter is one of the most commonly used email initiatives by companies to get in touch with their customers. Despite this, a lot of them present some weaknesses. This is a guide that will help you evaluate your own newsletter and bring the necessary […]

Publitrac
Up