First link in post footer - very distracting

UX
21

I was curious about how the Discourse emails are displaying on various email clients. In order to find out, I signed up for Litmus - an email testing service. Litmus gives you a testing email address. I created a user on my forum with that address and then created a post.

With a free account it is only giving me the results for Outlook 2013, the iPhone 6s email client, and the Gmail web client. Here are screenshots from each of those:

Screenshot 2016-01-12 10.51.15.png1369×795 41.8 KB

Screenshot 2016-01-12 10.51.38.png480×900 97.9 KB

Screenshot 2016-01-12 10.52.02.png1353×808 56.1 KB

It looks as though both Outlook and iPhone are having problems with the ‘visit the topic’ button. On Outlook the button has no padding, on the iPhone the button is split if it goes past the edge of it’s containing block. There are ways to work around both of these issues.

It’s also worth noting that in both Outlook and Gmail there is no maximum width set on the email’s content. On iPhone with the iOS mail app, there is no padding between the content and the edge of the screen.

3 Likes
22

I don’t think that simulated iPhone screenshot is accurate, though. I’ll have to check (I mostly use Inbox app by Google).

Also the “button” text was moved flush left, words to the right.

1 Like
23

I hope the image is accurate - they charge $80/month for their basic service!

The button is no longer split in half with the changes you made.

1 Like
24

I definitely want the padding thing fixed for outlook, and even more importantly that ENOURMOUS spacing between avatar and description.

25

It’s definately correct for the iPhone and it’s too big there.

26

The problem there is because the avatar/username is in a table row in the same table as the post-content. The avatar/username row has two table cells but the post-content row only has one cell. On Outlook, the avatar cell in the top row is given the full width of the post-content cell from the row underneath it.

The solution is to use a nested table for the avatar/username:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td class="user-avatar"></td>
          <td class="username"></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="body"><!-- post content --></td>
  </tr>
</table>
4 Likes
27

cool, a PR to fix this would be super awesome, it looks terrible in outlook now.

2 Likes