In order to properly prepare the graphics that will be used to develop the HTML code for mailing, use the following:
Optimum width of graphics
Graphics should have an optimal width of 600-700 pixels.
Graphic formats
Graphics should be saved in .jpg, .png or .gif format. Make sure that the extensions are in lowercase letters.
Personalization of graphic fragments
If part of the graphic is to be personalized, it is recommended to use a solid background in the personalization area.
Font size and type
The font size should be no smaller than 10 pixels, and the font type should be one of the popular groups used on the Internet, such as Arial, Verdana, Tahoma or Times New Roman.
Graphics in the background of the text
It is not recommended to put graphics in the background of the text, because not all email programs support this feature. In this case, the text will be visible, but the graphics will not be displayed.
Graphics in mailings on mobile devices
On mobile devices, graphics with text can be diminished and difficult to read. To ensure that the text is always visible, regardless of the image download, place it on a solid background that can be saved as a color in the HTML code.
Adjusting graphics to dark mode – dark mode
To make the graphics suitable for dark mode, it is recommended to use a transparent or dark background. With a transparent background, keep in mind that in dark mode the background color will be inverted, which may affect the readability of elements. If this is the case, it is worth checking that all details remain visible. If any of the elements become less legible, you can add a border of 1 px thick in the background color to maintain adequate contrast.
Placing text in the mailing design
Make sure that the text placed in the mailing design fits into rectangles with a solid background. If there are curved lines in the design, the text box should be above or below the curve, not going into its area. Otherwise, the text will have to remain a graphic and will not be editable.
CTA buttons
If the buttons are to have editable text, do not use shadows or rounded corners. Otherwise, the buttons will be displayed as graphics, and editing the content will not be possible.
Area for personalized text
The space provided for personalized text should be large enough to accommodate the longest allowable value of the feature. For example, if you are using the variable “City”, you should provide space to enter the value “Elk” or “Nowy Dwor Mazowiecki”.
Weight and resolution of graphics
The maximum weight of graphics should not exceed 100-150 kB. The graphics resolution parameter should be saved with a value of no more than 72 dpi.
Size of graphics in the newsletter
Graphics to be included in the newsletter should be of native size. For example, if you want an image to display at 100 by 100 pixels, it should be exactly that size on the server. Placing a file with smaller or larger dimensions will result in a loss of graphic quality.
Image file names
Graphic file names should not contain spaces, dashes or special characters. The length of the graphic file name must not exceed 35 characters.
Aligning messages with WCAG 2.2 digital accessibility standards
The new version of the WCAG 2.2 standard expands the requirements for digital accessibility, particularly for people with visual and mobility impairments and cognitive difficulties. Aligning email communications with these guidelines is key to ensuring broad access to content. Learn more from this article: Adapting mailings in SARE to the WCAG 2.2 standard