48% of total email opens occurred on a mobile phone or tablet in the second quarter of 2014 (source: Experian Email Benchmark Report). In other words, half of the emails your customers see are opened on a mobile device. If your email template isn’t optimized to look great for desktop, webmail, and mobile users then you may be losing sales.

Responsive templates are designed to adapt themselves to the available screen space. Instead of just shrinking the content down (like often happens with emails created with the Infusionsoft drag and drop builder), a responsive template will allow parts of the email to move around so that your text and images stay at a legible size even on tiny mobile phone screens.

This is an advanced tip. It requires working directly with HTML. If you aren’t comfortable working with HTML, you may need to hire a developer to help you or pay for a template design service.

Get a template

To get started, you need a template. If you are very comfortable working with HTML, you could use the Antwort responsive templates. These templates are highly customizable and work great for most email clients.

If you are a little less comfortable with HTML, you could try using Campaign Monitor’s free template builder. Select a template, customize it, click Preview, then Finish and save. Instead of creating an account, click the Download as HTML & CSS link at the bottom. Enter your email and click Send me the files. You’ll receive a zip file with an HTML file that contains your email.

Another popular option is Ink. This tool also requires some basic HTML knowledge, but is highly customizable and well documented.

Copy your template into Infusionsoft

Next you need to get your template into Infusionsoft. Open your email in Infusionsoft, then click the down arrow for Edit Email Body. Select Use Code Builder. You’ll be given a warning that you’ll no longer be able to use the drag and drop builder for this email. Click OK to continue. You’ll then be taken to a page that shows the HTML of your email.

Select all of the HTML and delete it. Open your HTML email template in a text editor. Copy and paste your new template’s HTML into the code builder box. Click the disk icon to save your progress.

Insert unsubscribe link and CAN-SPAM address

If you don’t insert an Infusionsoft unsubscribe link and your CAN-SPAM address block, then Infusionsoft will kindly put it in for you at the bottom of the email. This will wreck your design, so make sure you put these where you want them!

To insert the unsubscribe link, go to Merge→Links. Select a link from the Update / Opt-Out Links section. Your unsubscribe link will be inserted into your HTML at your cursor’s location.

To insert your CAN-SPAM address block, go to Merge→Merge FIelds. Select Your Company Fields (most common), then HTML Can Spam Address Block. Your address block code will be inserted into your HTML at your cursor’s location.

Test it!

Before blasting this email to all of your contacts, send a few tests to yourself first. View your email on your phone, your tablet, your friend’s phone, your desktop, in webmail, anywhere you can. Make sure it looks good before sending it out to actual contacts.