If you are new to developing responsive HTML emails, let me welcome you and say you are either going to love or hate it. There is no middle ground when it comes to developing HTML email. When your handy bag of HTML CSS tricks doesn’t work, you have no way of debugging the code, and you realize you have to use Word as a rendering engine, it’s easy to get frustrated and hate email. The goal as a developer is to get to the point where the work doesn’t frustrate you but inspires you to find new ways to accomplish the holy grail of a template that works well on all email clients.
Here are a few keys to developing HTML emails that will keep you on the right path to success:
- Start with a realistic layout; pick the most simplistic layout for your email. Remember to KISS: Keep It Simple Stupid!
- Emails should be a maximum of 600-800 pixels wide; this is the sweet spot for size.
- Keep images to a minimum. If you don’t have a good reason for them, don’t add them.
- Know what HTML CSS features work on various clients: https://www.campaignmonitor.com/css/ is a good place to start.
- Start with a proven HTML email template; there is no reason to start from scratch, especially when you are just starting to learn the basics.
- Use comments for zones of code: including headers, mastheads, content, footers, etc.
- Use HTML email testing sites such as Litmus or Emails On Acid – testing is crucial for testing multiple email clients at the same time
- Keep an eye on future technologies: new templates and tools are being developed all the time. The key is to fully test them before putting them into production. A good site to monitor is http://responsiveemailresources.com/
- Stuck on an issue? Google, ask colleagues, participate in industry forums, or call on a knowledgeable vendor like DemandGen. A wealth of knowledge is out there if you just look for it.
I can’t stress enough how important the first tip is: start with a realistic (and simple) layout. Like building a house, you need the proper foundation to start. A successful responsive HTML email needs a correct layout for success. Good luck, and happy responsive email coding!
Rich Deacon is a Campaign Specialist who works with several client accounts. His goal is to provide clean, scalable, feature rich solutions that enable clients to reach their marketing goals. Rich has an extensive coding and systems administration background. Apache, DNS, Linux, Mysql, PHP and jQuery are just some of the areas of his expertise. His favorite quote sums up is personality and work ethic: “It’s kind of fun to do the impossible..” Walt Disney