Succeed on the web with easy to follow courses and guides
Managing successful HTML email builds
Building HTML emails that look good to everyone who receives them can be a bit of a technical challenge.
If a design is too complicated or not designed with email in mind, then developers can spend days pushing pixels around, wracking up costs and end up with a buggy email that's broken for half the recipients.
However if you follow a few golden rules when planning and designing your email campaigns, much of this pain can be avoided.
We've been building HTML emails for years, here are our tips to make everyone's life easier.
Lisa has been earning a living on the web for almost 20 years and has been giving training to businesses and agencies for over a decade.
Having worked as a designer, developer, project manager, agency CEO and a client she can explain everything in a clear and easy to follow way, leaving you all set to achieve more online.
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.
Start this free course
Click the button below to start this course now for free.Start course »