2022 is already here, and many things have changed except the dominance of email marketing across online channels. While it is a time-tested digital marketing channel with a proven track record of delivering skyrocketing results for brands of all sizes, it has started to evolve rapidly in the past few years.
This has made it necessary for email developers to adhere to email coding best practices in order to ensure deliverability and proper rendering. Even in the case of PSD to HTML email conversion, this needs to be kept in mind. In this article, we will try to go through a number of best practices that will help you create stellar email templates that look and function just like you planned. Let's get started:
Input ALT Text For All Rich Multimedia
It is a well-known reality that many email clients turn off the images by default, making it tough for visual-based messages to convey their point. In fact, many email subscribers, too, turn off the images due to various reasons, including spamming. This makes it necessary for the email coder to embed Alt text for all the rich multimedia used within the template. It appears in the template body where the rich multimedia is supposed to render and it describes the blocked multimedia in limited words. Generally, keeping the description within a 125 character count (including spaces) is preferable to keep it crisp and relevant. I also prefer adding a layer of background color and fonts to make the section homogeneous with the rest of the template body.
Use <br> Hardline Breaks
Any seasoned email developer will tell you that you need to keep MS Outlook at the core of your dos and don'ts because it is one of the toughest email clients to work with when you are designing email templates. You need to use hardline breaks instead of CSS properties like 'Float' and 'Clear' because they would make rendering quite imbalanced at times. Including the <br> tag as a part of your standard design practice will reduce your optimization and QA efforts by a significant margin.
Use Table Tags Instead Of Div Tags And Inline CSS Over CSS Styling Sheets
It is well known that <div> tags are used widely by web designers, and they can be included in email design too, but it wouldn't be a wise thing to do. This leads to formatting errors, and hence, you should go for table tags instead. A <table> tag makes the design more accessible on smartphone screens (since we don't click on them, we 'tap') and delivers better results for renderability in responsive email templates.
Another web design property that you cannot use in emails despite it being technically possible to do so is CSS styling sheets. Inbox providers like MS Outlook add spacing and borders to all the table properties by default, making the rendered email appear skewed. This makes it necessary for email coders to use Inline CSS as a standard approach to email coding to avoid such errors. This may consume more time in the development phase, but it surely saves you from the optimization hassle.
Don’t Use JavaScript In Your Email Code
It is tempting to use JavaScript in your email code since many email clients have started incorporating functionalities like interactivity. But it is in your best interests to avoid JS codes in your email templates since their interoperability will surface as a matter of concern. Even if you manage to include a safe JS code, you will lose a lot of time in the optimization and testing process. More than half of the brands take over a week to create an email template, and stretching this process further doesn't make sense when there are a lot of activities to be taken care of alongside the development process.
Use Pixels For Dimensions And Limit Email Template Width To 600 Pixels
Many email developers end up using percentage while developing their templates, but it results in skewing at the time of rendering. This can be avoided by using pixels to define the dimensions of your email template. Also, make sure to keep your templates up to 600 pixels since this is the ideal width for most email clients.
Summing Up
Towards the end, I would like to tell our fellow readers to adhere to the best practices, such as using web-safe fonts and creating the template using content blocks. Such measures are time-consuming and limit your creativity to an extent when you initially start with them but including them as a part of your standard operating procedure and brand language will prove to be one of your safest bets against coding anomalies in email. I hope this article helps you with PSD to HTML email conversion and even if you are starting from scratch.
Author: Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.
No comments:
Post a Comment