9 Tips for Developing Responsive HTML Emails

Tips for Developing Responsive HTML Emails

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:

  1. Start with a realistic layout; pick the most simplistic layout for your email.  Remember to KISS: Keep It Simple Stupid!
  2. Emails should be a maximum of 600-800 pixels wide; this is the sweet spot for size.
  3. Keep images to a minimum. If you don’t have a good reason for them, don’t add them.
  4. Know what HTML CSS features work on various clients: https://www.campaignmonitor.com/css/ is a good place to start.
  5. 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.
  6. Use comments for zones of code: including headers, mastheads, content, footers, etc.
  7. Use HTML email testing sites such as Litmus or Emails On Acid – testing is crucial for testing multiple email clients at the same time
  8. 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/
  9. 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

The post 9 Tips for Developing Responsive HTML Emails appeared first on DemandGen.

 

About the Author

Tiffanie Lewis

As Director of Marketing, I am responsible for demand generation and customer loyalty programs for DemandGen. My primary goal is to ensure “we practice what we preach” by executing highly effective demand generation programs to educate and support DemandGen’s customer base. My extensive experience in marketing operations, digital marketing, campaign development, project management, event planning and customer engagement proves essential in my demand generation efforts showcasing various marketing cloud technologies.

Follow us on Twitter Follow on Linkedin Visit Website More Content by DemandGen
Previous Article
5 Tips to Refine Your Marketing Automation Production Processes
5 Tips to Refine Your Marketing Automation Production Processes

As a DemandGen Campaign Operations Specialist working with our clients’ marketing automation systems, I see...

Next Article
5 Marketing Automation New Year’s Resolutions – and The Secret to Making Them Happen
5 Marketing Automation New Year’s Resolutions – and The Secret to Making Them Happen

When you think about it, many of the goals we have for ourselves as marketers are remarkably similar to tho...