ONBOARDING DOC INTRODUCTION
Welcome to the team! As an HTML email developer, you'll be responsible for creating and testing HTML emails for our clients. Here's a guide to get you started:
HTML Email Best Practices HTML emails have some unique considerations that differ from regular web development. Here are some best practices to keep in mind:
Use tables for layout instead of CSS, as many email clients don't support CSS. Use inline styles instead of external stylesheets. Keep the email width to 600-800 pixels to ensure it fits in most email clients. Avoid using images for important content, as some email clients block images by default. Test the email in multiple email clients, as different clients may display the email differently. Tools and Resources Here are some tools and resources that you may find useful:
Litmus or Email on Acid for email testing and previewing. The Ultimate Guide to CSS for Email for a comprehensive guide to CSS in emails. Canva or Adobe Creative Cloud for creating graphics and images. Getting Started To get started on a new email project, follow these steps:
Review the client brief and gather any necessary assets (e.g. logos, images, copy). Create a wireframe or design mockup using a tool like Canva or Adobe Creative Cloud. Code the email using HTML tables and inline styles, referencing the design mockup. Test the email in multiple email clients using Litmus or Email on Acid. Make any necessary revisions based on the testing results. Send the final email to the client for approval. Communication and Collaboration Effective communication and collaboration are essential for success in this role. Here are some tips for communicating with clients and collaborating with team members:
Use clear and concise language in all communications. Keep the client or project manager informed of any delays or roadblocks. Collaborate with designers and copywriters to ensure the email meets the client's needs and requirements. Be open to feedback and suggestions from team members. We're excited to have you on board and look forward to working with you! If you have any questions or concerns, don't hesitate to reach out to your team lead or project manager.
TROUBLESHOOTING EMAIL PROBLEMS
Check for Syntax Errors The first step is to check the code for syntax errors. Even a small error like a missing closing tag can cause the email to break. Use an HTML validator tool to ensure that the code is error-free.
Test in Multiple Email Clients HTML emails can look different in different email clients. Test the email in multiple email clients, such as Gmail, Yahoo, Outlook, and Apple Mail, to see if the problem is specific to one client. Use a tool like Litmus or Email on Acid to test the email in different clients.
Check for Broken Links or Images Broken links or images can cause the email to appear broken or incomplete. Check that all links and images are working correctly and that they are linked to the correct URL.
Check the Email Width Emails should be between 600-800 pixels in width to ensure that they fit in most email clients. Check that the email width is within this range.
Check the Code for Compatibility Issues Some email clients have limited support for certain HTML elements or CSS styles. Check the code for any compatibility issues that might be causing the problem. Use a tool like Can I Email to check the compatibility of HTML and CSS features across different email clients.
Review the Email Design If none of the above steps have solved the problem, review the email design. Are the images and copy aligned correctly? Is the font size and color consistent? Are there any design elements that might be causing the problem?
Seek Help from Peers or Online Resources If you are still unable to solve the problem, seek help from peers or online resources. There are many online forums and communities where email developers share their knowledge and expertise.
Remember, troubleshooting HTML email development problems can take time and patience. Don't be afraid to try different approaches or seek help from others if you get stuck.