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.

Managing successful HTML email builds
Lisa Freeman: Course Tutor

Course Tutor

Lisa Freeman

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.

Worked for

Course Episodes:

Episode 1. Width

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.

Duration: 1mins

Episode 2. Images and fonts

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.

Duration: 1mins

Episode 3. Borders and Dropshadow

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

Duration: 1mins

Episode 4. Templates

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.

Duration: 1mins

Episode 5. Two different versions

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.

Duration: 1mins

Episode 6. A fluid layout

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.

Duration: 1mins

Episode 7. Different hero images

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

Duration: 1mins

Episode 8. Dark mode

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

Duration: 1mins

Episode 9. Designing for mobile

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.

Duration: 1mins

Episode 10. AMP for emails

Duration: 1mins

Start this free course

Click the button below to start this course now for free.

Start course »