The Better Email - On Design - A practical introduction to HTML email design and development

Sep 11, 2026

Practical guidance for building HTML-based email designs that work across inconsistent email clients. Covers core fundamentals—basic email structure, development tools, reusable building blocks, and typography—then extends to layout strategies, images, and mobile considerations. Explores responsive email design and multiple implementation workflows, including animation, effects, and interactivity. Includes troubleshooting approaches, best-practice critique, and resource guidance to help designers iterate effectively.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages225

Reading Time1 h 19 min

AccessFree to download

A Note on Sanity

A Note on Resources

Why email?

Basic Email

Development Tools

The Building Blocks of Email

Typography in Email

Taking People Places

Images in Email

Understanding Mobile

Responsive Email Design

Different Layout Approaches

Animation, Effects, and Interactivity

Different Development Workflows

Troubleshooting Emails

Questioning Best Practices

About the Author

The Better Email: On Design A practical introduction to HTML email design and development. Copyright © 2022 Jason Rodriguez. All rights reserved. No part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the author. For licensing information for teams or organizations, please contact the author at [jason@thebetter.email](jason@thebetter.email). To learn more about email marketing, visit [thebetter.email](thebetter.email) online. Table of Contents A Note on Sanity ................................................................................1 A Note on Resources .........................................................................2 Why email?..........................................................................................3 Basic Email .........................................................................................7 Development Tools ............................................................................7 The Building Blocks of Email ..........................................................13 Typography in Email ........................................................................49 Taking People Places .......................................................................75 Images in Email ................................................................................92 Understanding Mobile ..................................................................113 Responsive Email Design ............................................................. 120 Different Layout Approaches ....................................................... 135 Animation, Effects, and Interactivity ............................................150 Different Development Workﬂows ..............................................181 Troubleshooting Emails ................................................................198 Questioning Best Practices...........................................................218 About the Author...........................................................................221 Not sure why this broke Basic Email Development Tools into two lines here. Tried everything to fix it but ¯\_ (ツ)_/¯ A Note on Sanity If you’ve spent any time around web designers, you know they’re largely a crazy bunch. Dealing with browser inconsistencies and keeping abreast of new developments in technology will do that to people. Email designers are no different. If anything, they’re likely crazier. Blame it on Outlook and Lotus Notes. This is just a note to say it’s OK to feel frustrated and crazy when designing email. It’s a hard racket—accompanied by little praise from others in the web industry (let alone most stakeholders and upper management) . Don’t let it get to you. Email design can be amazingly powerful and you should feel proud to be part of a vibrant and growing community. On a related note, you shouldn’t get down when things break. And you shouldn’t strive for pixel perfection in every email client. It’s a ghost. It simply doesn’t exist. The beauty of email lies in the fact that most people forget about a campaign immediately after hitting delete. That sucks for posterity, but is fantastic since you can always send another email and ﬁx whatever went wrong in the last campaign. It’s a beautifully iterative medium. A Note on Resources I’ve tried to make the code examples in this book as easy to understand as possible. Unfortunately, email code can sometimes still get unwieldy. For more complex examples or longer bits of code, I’ve included links to examples on CodePen, which will allow you to explore, update, and experiment with the code in real-time in your browser. If you notice anything wrong in the examples, please don’t hesitate to email me at [jason.rodriguez@thebetter.email](jason.rodriguez@thebetter.email). I also maintain a r

FAQs

What does the book focus on?

It focuses on practical HTML email design and development, emphasizing techniques that remain reliable across real-world email clients.

Why is email considered challenging compared with other web development?

Email code can be hard to implement due to inconsistent client rendering, limited standard support for HTML/CSS, and many different email clients.

How does the book handle responsive and mobile email?

It explains understanding mobile behavior and responsive email design approaches, along with alternative layout strategies and development workflows.

Sep 11, 2026

Uploaded by Maya Linwood