Managing successful HTML email builds

Lets start with one of the basics - what's the ideal width for a designer to design an HTML email? The ideal width of your email depends on who your recipient is and what email client they're using.

Wherever possible, we want to use text and colour rather than have to rely on images. This is because when a recipient first opens an email, their email client will typically show it without images. Therefore, any key messaging should be done as text.

HTML emails can’t support CSS3 effects such as dropshadow, which means we have to do dropshadow as an image.

Sometimes a client wants an email designed that will act as a repeating newsletter so they need to be able to update it themselves in a piece of software such as Mailchimp.

When the mobile version of an email has to be quite different to the desktop version, or it’s a complex design we code up two different versions of the email and put in rules so that different devices show the appropriate version, if the sending service allows.

The best way to make a responsive email is to build it to be flexible/fluid. 

A fluid layout, also known as a liquid layout, is where the width of an email is defined in percentage terms, rather than fixed pixel values. This allows the email to adjust its width based on the width of the viewport in which it is being viewed.

If an email design has a hero image at the top, the developer will generally need two versions of that hero image.

When designing your emails you need to consider those in your audience who may be using dark mode. We don’t have complete control over how dark mode changes designs, but there are some tips for best results

When placing CTA buttons in emails, you might want to consider that people tend to use their thumb on a phone or two thumbs on a wider tablet as shown below.