Learning how to design and code emails and troubleshoot broken HTML can be daunting for anyone new to email marketing, so we decided to compile some of the resources that we turned to (and still do!) for help making sure our email campaigns are solid.
HTML Coding for Email
While there are many WYSIWYG (what you see is what you get) and drag-and-drop email editors available today, understanding the underlying HTML code is incredibly valuable for email marketers at any level. We’re not saying everyone needs to be able to code an email from a blank page, but we do recommend that all email marketers acquire at least a basic ability to read and edit simple HTML.
For graphic artists, understanding HTML will help you create designs that can be coded efficiently and will display well across platforms. For those who execute email campaigns using any platform, you can learn to edit code and troubleshoot issues that might be causing a rendering problem without waiting for a developer to help you. For managers, knowing a bit of HTML will help you understand what your designers and production staff are talking about!
Many of today’s email developers learned how to code years ago on web platforms like MySpace or LiveJournal. HTML code was a lot simpler then — you could view the page source of most websites and see some pretty straightforward code and learn from that. When email marketing hit the scene, those developers were ready to transition their skills from web to email.
HTML code now is far more complex with cascading style sheets (CSS), JavaScript (for web), smarty tags and many other coding languages. And yet, the limitations of email rendering require coders to take a step (way) back in time to employ many simpler HMTL techniques as well.
It’s important to note that email development is different from web development even though they share the same coding language. Due to the countless combinations of browsers, operating systems, and email clients and devices — and all the ways they interpret HTML code — email coding requires knowledge of a number of email-specific limitations and hacks.
Here are some recommended resources for learning to code both general HTML and HTML for email specifically. If learning to code is something you’re interested in, check them out and start coding something for fun!
• Free Code Camp
• Code Academy
• W3Schools
• HTML Email Development, v2 by Jason Rodriguez
• The Better Email on Design, by Jason Rodriguez
• Local community college classes
Email Rendering Tools
Every email provider, application and device reads email code a bit differently, and that can cause differences in how your email looks to different subscribers. An email that looks great on an iPhone might look terrible on an Android or on one of Outlook’s desktop versions, so it’s important to check rendering across as many devices and platforms as possible. Because not everyone has access to multiple laptops and mobile devices, there are testing solutions that generate previews of what emails will look like on different mobile, web and desktop platforms.
The two most common tools for such email rendering checks are Email on Acid and Litmus. Both companies also provide excellent resources for learning about email rendering, email coding and the email industry overall. Be sure to check out the blogs and resource pages for both.
While email rendering solutions can be useful, we still recommend testing on as many live devices as possible, as you may catch errors that don’t show up in the previews. We have test email accounts on Gmail, AOL, Yahoo and Outlook.com, plus our team members have access to both Mac and PC computers and iPhones and Androids for live testing purposes.
Making Emails Accessible
Email is a visual platform, but not everyone can (or wants to) access it as a purely visual experience. People with visual impairments or reading disorders may be unable to read your email if you’re not considering accessibility when coding the email. That also applies to people who access their email through devices like Google Home or Amazon Echo.
Accessibility requires special attention to things like colors, font sizes, text alignment and use of alt tags for screen readers. Here are some resources to get you started:
• Introduction to Web Accessibility, part of WC3’s Web Accessibility Initiative
• Web Content Accessibility Guidelines from WC3
• WAVE Web Accessibility Evaluation Tool (includes a Chrome extension that checks for key factors for accessibility in your code)
Learning HTML, email rendering and email accessibility might seem like a daunting task when you first get started, but it’s worth the time investment for anyone whose role touches email marketing to have at least a basic understanding of these things. Whether you access online learning opportunities or find an in-person class through a local college or community education program, expanding your knowledge in these areas will help you and your team send better emails.
If you are struggling to learn how to code (or just fix) your emails, turn to the experts at Katey Charles Communications for help at .