Friendly Guidelines and Tips
PLEASE TAKE NOTE OF THE FOLLOWING:
Mail design services are not graphic design programs. It works with source code generated in the background, which a mail client like gmail, yahoo, outlook etc must be able to read to preview the mailer correctly in the inbox. The final design (and code) must be compatible on multiple cross-platforms, which can be restrictive when it comes to design and layout.
Most mail inboxes are checked on a mobile device, so mailer designs must be responsive (mobile friendly). Your main width area for the whole mailer is 600px so it will fit on most mobile devices.
Responsiveness means when 2 elements are next to each other in a row, the mail client must be able to place those to elements below each other if the client's mobile device is smaller.
Thus, 3 elements or more in a row does not work responsively. The mail clients (outlook) will not place the elements correctly but rather scatter all over – a very unprofessional look.
Tip: If you want 3/4 images in a row, rather design it in photoshop and export as image to use in the mailer.
The original aspect ratio size of images used in a mailer should be adhered to at all costs. If the image aspect size is larger than 600px (eg 1020px), the mail clients will show it at its original size - again, very unprofessional and affect the rest of how the mailer displays.
Tip: Use Photoshop to Image (menu) > Resize the image to a width of 596px (full) or 292px (half). The widths are important for responsiveness, not the height. You can decide based on the image how high you want it.
We work with images the size of 596/595px for full width mailer image and 292px for half width mailer images. The reason it is not 600px or halved at 300px, is because certain mail clients still add padding extra to images (even with code instructing them not to). So, to be on the safe side, we take a few pixels off the sizing: 596px and 292px.
Please remember that your published work (mailer) is viewed on multiple devices by multiple mail clients. The end goal is to ensure your mailer views correctly, in all those scenarios 😊
