I did consider using <picture> or <img srcset=""> but mobile support isn't great... yet. You would still need a fallback background image for responsive, and both images would still be loaded in unsupported clients. <template> just has better support. <noframes> is even better because it works everywhere, but I've seen it do strange things to webmail.
Started a new discussion: Mobile Optimised Responsive Fluid Retina Images For Email
It's significantly less bloat than using tables to format bullet lists. You would have to define the font styles on every single <td>, or twice per bullet point. You'd have to fiddle with valign or line-height and padding to get the correct spacing. It's more difficult to manipulate tables for responsive layouts as well. It all adds up to being 2-3 times more code. Using <ul> lets you define the font styles once, making it a lot easier to change. When you're optimising for that 102kb truncation limit in Gmail or Yahoo, every byte counts.
A lot has changed in the last two years, for example you don't need to capitalise the letter M anymore for Outlook.com. If you are satisfied with tables then you should just stick with that. You might be able to use classes now instead of inline styles.
Unfortunately padding on the <table> tag works differently in Outlook 07-16 than normal browsers. The padding will be applied to all cells and you can't override them on individual cells. Setting padding on the <td> won't work either because this will be applied to the every <td> in that row row.
Try setting the padding you want on the nested tables instead.
Try this: https://litmus.com/community/discussions/4164-outlook-07-13-visited-link-color-fix
Outlook 2007-2016 adds an empty paragraph after every vml tag. Try adding font-size: 0 to the vml parent container. ie.
<td background="https://domain/path/to/image.jpg" style="font-size: 0;">
<!-- your vml code here -->
</td>
Started a new discussion: Fix for max-height/overflow-y in Yahoo Mail
You need to add some code at the end that will force the line to wrap. This could be achieved with letter spacing or with an inline-block element.
eg.
<span style="letter-spacing:400px"> </span>
<span style="display: inline-block; width: 100%; padding-top: 1px;"></span>
For Outlook 07-16 you need to use the special line break character:
<br style="mso-special-character:line-break">
This will add extra space at the bottom. If you want to get rid of it you could try setting line-height: 0 on the container.
Putting it together something like this might work:
<p style="Margin: 0; text-align: justify; line-height: 0; mso-line-height-alt: 24px;">
<span style="line-height: 24px;">Last Line</span>
<span style="display: inline-block; width: 100%; padding-top: 1px"></span>
<br style="mso-special-character:line-break">
</p>
Haven't tried it myself, but it should work in theory. Make sure you don't use any <br/> tags in your text or it will be left aligned.