This article explains the ActiveCampaign email designing in HTML. With this information, you can use HTML correctly for your templates. It is important to know that designing a website and designing an email with HTML are two different things.
Layout of ActiveCampaign email templates
For the dimensions of an email, it is recommended to keep a width of 650px or less. This will allow the email to be displayed correctly and in its entirety in most email programs. It will also show the configuration properly. Keep the design as simple as possible. A complicated design is nice, but often a lot of work.
You will encounter more problems during the design of an advanced email. You will also have to perform more tests with the message. For the layout, use simple HTML tables. CSS floating and layout techniques are not always shown correctly by every email program.
Be careful about padding tables with code. Programs like Outlook take the padding from each cell in a row and apply it to all cells. This can give you a completely different layout that you don’t want. Avoid using colspans = “” in tables. Some email programs do not fully support those and others have display issues, you have used a colspan.
CSS for your ActiveCampaign Email designing
Don’t use external style sheets, they won’t work in many of the programs, and you would have to include all the CSS for that using inline CSS in the HTML. Also, don’t use CSS classes but make use of inline CSS. Furthermore, CSS classes are not supported by all email programs.
An example of this is shown below:
content instead ofcontent
If you use HTML, do not use CSS shortcuts. CSS normally allows you to set properties in groups. Such as:
- style = “font: 12px, Arial”
Instead, it is recommended to group such attributes together. To do this, you need to set each component separately, as shown below:
- style = “font-size: 12px; font-family: Arial”
Also, avoid using CSS float or position options. Try using tables instead.
Images and video’s
- If you want to include images or video’s in the design, use the link of the image to place it.
- Also, always make use of alt-“Tags”
Most programs disable the display of images by default unless you use these tags.
In the place where the image is normally shown, there is now an alternative text that you placed with the “Tag”. It is not a good idea to embed videos directly or to use Flash for this. Many email programs do not support such code, and many spam and antivirus programs then mark the email as spam. Therefore, please post a screenshot of the video that opens when the recipient clicks on it.
Using moving images such as GIFs is not possible as this is not fully supported. If a larger image is split and placed in the HTML code using table cells or IMG tags, you should first test carefully whether this works. This is because it can happen that extra white space is placed between the split images.
Also, do not use images to align the layout properly with them. Always test the e-mail well before you send it. In doing so, always look at the size of the files you want to send. This allows the emails to be sent quickly.
If you are using HTML to design email templates for marketing, then not all images are supported as background. If you use a background image, then you should be aware that some email programs will not display it. And if you still want to use a background image, use the HTML background options instead of CSS for placing a background image. Save the template in your email template library
Programs like Gmail will not display colors if you have them set as background. It is therefore advisable if you want to use this, to include it in the code of the main text with a tag and using wrapping div so that the background color will still (albeit partially) be shown.
If you do create text in a Microsoft Office program and then copy the text, it will be pasted into the program’s layout. There is then a good chance that this will cause difficulties in the design of the email.