[openstreetmap/openstreetmap-website] Dressed up notification mails (#1401)

[saintamh]

This is an attempt at dressing up a bit the notification emails that OSM.org sends out. Currently they look rather plain, and while we coder types may be used to that style, others might be surprised by it. My hope is that with more "conventional" or "modern" looking messages we might just improve response rates among casual mappers.

I've put together a basic implementation (see screenshots below). This pull request is still incomplete, but I'm putting it here to open a discussion regarding both design and implementation. I'm not a web designer, and I have only passing familiarity with Rails or with Ruby, so if you see anything that looks wrong, it probably is -- let me know.

Writing portable HTML/CSS for email clients is trickier than for browsers. [This table](https://www.campaignmonitor.com/css/) is a handy reference. The current code is not pretty, but I've tried it in a few clients so far and it renders OK, though there's still GUI kinks to be ironed out. I'm attaching a few screenshots. You can see there's still bugs, e.g. the spacing above the message body is too thin on Yahoo.

### Open questions

**Shared template**: So far I've only implemented `changeset_comment_notification.html.erb`. Since every mail, regardless of whether it's a notification for a message, for a changeset comment, or for a new friend, would have the same header, footer, and overall structure, I'd think it would make sense to have that overall structure in a single file. If we decide to tweak the CSS, we probably want to have to do it in one place only. What's the proper Rails way to reuse the template like that?

**Attaching images**: Currently two images are used: one for the logo and one for the user's avatar. The current code attaches them to the mail and displays them inline. This gets around some clients' protection against remote images (though some still require a click to display them, e.g. Yahoo). Attaching images increases the size of each message significantly, will this have an impact on the load that the servers can handle?

**HTML in I18N strings**: I've added an "*_html" companion to the relevant I18N strings. We need HTML tags within the text, though, and since you can't have <style> CSS blocks in emails, the styling goes right into the locale file, which feels just wrong. Is there a better way?

**New I18N string**: The current design would require one new translation. The English runs "To unsubscribe from updates to this changeset, visit <URL> and click 'Unsubscribe'". Is this a possibility? How long does it take to get new translations done?

### TODO

- All message templates, not just changeset comment notifications.
- Create HTML copies of the relevant I18N strings for all languages.
- Test the rendering of the mails on several more platforms once the design is set.
- Handle users without avatars, or who use Gravatar

### Screenshots

![gmail_chrome_linux--long--avatar](https://cloud.githubusercontent.com/assets/24832766/21583335/8cb6648a-d074-11e6-8418-d8d07d69e80d.png)

- [gmail_chrome_linux--short--avatar](https://cloud.githubusercontent.com/assets/24832766/21583333/8cae2680-d074-11e6-8243-5a9fce2caf64.png)
- [yahoo_firefox_linux--no-images--long--avatar](https://cloud.githubusercontent.com/assets/24832766/21583343/c2b1a0d6-d074-11e6-983d-035cdaa3253a.png)
- [yahoo_firefox_linux--no-images--short--avatar](https://cloud.githubusercontent.com/assets/24832766/21583344/c2b3e1e8-d074-11e6-83ed-0ffa6712e65d.png)
- [yahoo_firefox_linux--with-images--long--avatar](https://cloud.githubusercontent.com/assets/24832766/21583336/8cbdd7a6-d074-11e6-81ce-d565d804b95c.png)
- [yahoo_firefox_linux--with-images--short--avatar](https://cloud.githubusercontent.com/assets/24832766/21583334/8cb1d2b2-d074-11e6-8fe5-eb09d1363d29.png)

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/1401

-- Commit Summary --

  * intial commit, for 'en' locale only, for changeset_comment_notification only, doesn't load images properly yet
  * reverting erroneous deletion in previous commit
  * avatar inline attachment
  * avatar inline attachment; text alignment
  * Cleaned up HTML
  * Tweaked cell padding
  * Better loading of attached images
  * Move localised text to locale file
  * Remove unused import
  * Use parameterised server root URL rather than hardcoded
  * Remove unused variable

-- File Changes --

    A app/assets/images/osm_logo_30.png (0)
    M app/models/notifier.rb (14)
    M app/views/notifier/changeset_comment_notification.html.erb (93)
    M config/locales/en.yml (13)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/1401.patch
https://github.com/openstreetmap/openstreetmap-website/pull/1401.diff

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/1401
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20170101/799f3a81/attachment-0001.html>