# Sending HTML Emails in Trac Notification

**URL:** <https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520>\
**Category:** Website\
**Created:** [June 27, 2024, 3:15pm UTC](https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520 "2024-06-27T15:15:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![VaarunSinha](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/vaarunsinha/32/19357_2.png) [@VaarunSinha](https://forum.djangoproject.com/u/VaarunSinha)\
**Post date:** [June 27, 2024, 3:15pm UTC](https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520/1 "2024-06-27T15:15:28Z")

</div>

I have already opened up a issue and had some discussion over it here : [Enhance Update Email Layout · Issue #199 · django/code.djangoproject.com · GitHub](https://github.com/django/code.djangoproject.com/issues/199)

I have come up with 2 designs for the emails:

Design 1 : [Django Trac | Postdrop](https://app.postdrop.io/share/K11L2Qs6bukI2b87uAHW2vnp-YWUr9wzdn7O) (uses 4 column approach)

Looks amazing on Desktop, but on mobile it overflows gracefully.

Design 2 : [Django Trac More mobile Friendly | Postdrop](https://app.postdrop.io/share/XYIwZZVMoPdOiNZN1VTX-H2IYndtsBjqXwXg) (uses 2 column approach)

Looks good on Desktop and better on mobile as nothing overflows. But makes the Desktop mail longer due to only 2 columns being there.

I could have used media queries but they aren’t that widely supported on all mail clients yet.

Looking for feedback!

Regards,  
Vaarun Sinha

---

<div class="post-metadata">

**Author:** ![RosanaRufer](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/rosanarufer/32/22103_2.png) [@RosanaRufer](https://forum.djangoproject.com/u/RosanaRufer)\
**Post date:** [July 7, 2024, 2:26pm UTC](https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520/2 "2024-07-07T14:26:38Z")

</div>

I think those designs look much better already as long as they don’t break, it looks like the good design once you get to solve the other issues being discussed in the docs 👍

---

<div class="post-metadata">

**Author:** ![tom](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/tom/32/6818_2.png) [@tom](https://forum.djangoproject.com/u/tom)\
**Post date:** [July 7, 2024, 4:09pm UTC](https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520/3 "2024-07-07T16:09:15Z")

</div>

I actually find the repeating columns in the first design very confusing, the second one looks better to me and easier to follow. I think in most cases the number of attributes changing is quite low (usually one or two) so I don’t think it’s worth optimising for vertical space.

---

<div class="post-metadata">

**Author:** ![medmunds](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/medmunds/32/22140_2.png) [@medmunds](https://forum.djangoproject.com/u/medmunds)\
**Post date:** [July 10, 2024, 3:08am UTC](https://forum.djangoproject.com/t/sending-html-emails-in-trac-notification/32520/4 "2024-07-10T03:08:08Z")

</div>

I also find Design 2 easier to read, even on a desktop size client. Design 1 seems like it needs an additional blank column in the middle, to visually separate the two sets of fields. (But either design is a _huge_ improvement over the current plaintext layout that only works with a monotype font. Thanks!)

Would it be possible to move the “Changes (by \<name\>):” bullet list above the table in the template? That might address the concern about the table length on mobile, by moving the “what’s new” information to the top. (Am I correct that the table always includes all of the ticket’s fields, not just the fields that have been modified?)
