Dressed up notification mails #1401

Merged
merged 42 commits into from Feb 5, 2017

Projects

None yet

8 participants

@saintamh
saintamh commented Jan 1, 2017 edited

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 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? EDIT 2017-01-12 - now implemented, as a partial layout

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? EDIT - 2017-01-12 - now removed, existing I18N strings now left untouched

New I18N string: The current design would require one new translation. The English runs "To unsubscribe from updates to this changeset, visit 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. EDIT 2017-01-12 - No longer necessary
  • 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

Herve Saint-... added some commits Dec 29, 2016
Herve Saint-Amand intial commit, for 'en' locale only, for changeset_comment_notificati…
…on only, doesn't load images properly yet
e6d1958
Herve Saint-Amand reverting erroneous deletion in previous commit 45e90cf
Herve Saint-Amand avatar inline attachment 689769c
Herve Saint-Amand avatar inline attachment; text alignment 1f0f7ba
Herve Saint-Amand Cleaned up HTML
Removed some cargo-cult HTML attributes and CSS. Styling HTML for email clients is trickier than for browsers, I'm trying to keep the code as succinct but also as compatible as possible.
94062a1
Herve Saint-Amand Tweaked cell padding
Tweaked cell padding to align the top of the avatar and of the message text a bit better.
5f663b7
Herve Saint-Amand Better loading of attached images
Got rid of that big ugly base64 blob which was only a temporary crutch anyway. Added a png file instead. Use File.read rather than File.open for a 66% reduction in verbosity.
b5ef2be
Herve Saint-Amand Move localised text to locale file
Moved a string of English text that will require translation from the HTML template to the locale I18N file.
20bd72d
Herve Saint-Amand Remove unused import 1d86379
Herve Saint-Amand Use parameterised server root URL rather than hardcoded b5fd9f5
Herve Saint-Amand Remove unused variable
20a74fc
@pnorman
Contributor
pnorman commented Jan 1, 2017

I've put together a basic implementation (see screenshots below)

How do these look in different email clients, not just webmail?

@pnorman
Contributor
pnorman commented Jan 1, 2017

The main travis errors are from rubocop and are about the type of quotes

Herve Saint-Amand Fixed quotes
Replaced single quotes with double quotes, to comply with rubocop rules.
7a4e13e
@saintamh
saintamh commented Jan 1, 2017

So far the only non-webmail client I've tried is Thunderbird, and it looked good. I've enlisted family members to try it out in Outlook on Windows (a few versions) and Mail.app on MacOS and iOS. I'm waiting for the design to stabilize a bit (assuming there will be changes) before sending them requests for screenshots.

I'm also planning tests in Hotmail, Yandex, Mail.ru, and IMP Horde, which are all web-based. Any suggestions for further platforms to test are much welcome.

I think I've fixed the single-quote vs double-quote issue.

app/models/notifier.rb
@@ -168,12 +170,24 @@ def changeset_comment_notification(comment, recipient)
I18n.t("notifier.changeset_comment_notification.commented.subject_other", :commenter => @commenter)
end
+ attachments.inline["logo.png"] = File.read(Rails.root.join("app", "assets", "images", "osm_logo_30.png"))
@tomhughes
tomhughes Jan 2, 2017 Member

Shouldn't thin use image_path or something? Explicitly building a path to an asset like that seems wrong.

@saintamh
saintamh Jan 2, 2017

I've changed it to File.read("#{Rails.root}/app/assets/images/osm_logo_30.png"), as discussed below.

app/models/notifier.rb
+ return Rails.root.join("app", "assets", "images", "users", "images", "small.png")
+ end
+ end
+
@tomhughes
tomhughes Jan 2, 2017 edited Member

I haven't got time to look it up right now, but this all looks horribly wrong to me. I'm sure the first branch of the if must have a better solution than that if you read up on paperclip and the second ought to be done with image_path or something.

...so having now looked it up image.path(:small) is the correct way to do the first one and image_path("users/images/small.png") for the second - both should give a root relative path to the file which you can just join to Rails.root.

@saintamh
saintamh Jan 2, 2017

image.path(:small) works, thanks.

However image_path("users/images/small.png") returns "/assets/users/images/small-19cb2e87cebaee3dbe77d1b540f68136dae6f8e63ec055907d19f639773101e2.png", which is the path part of a public URL. But I want something that I can File.read.

Would you find the above code less objectionable if I just concatenated it all into one string using slashes, e.g. "#{Rails.root}/app/assets/images/users/images/small.png" ? That seems more in line with what other parts of the code already do (for config files, though, not for asset files).

@tomhughes
tomhughes Jan 2, 2017 Member

Well in production you can just concat that with Rails.public_path and it should read fine though I'll grant you that might not work in development...

@tomhughes
tomhughes Jan 2, 2017 Member

I suspect your single string version is probably the best option. It shouldn't matter that we're avoiding the asset pipeline give it's all happening server side...

config/locales/en.yml
@@ -1315,10 +1315,23 @@ en:
subject_own: "[OpenStreetMap] %{commenter} has commented on one of your changesets"
subject_other: "[OpenStreetMap] %{commenter} has commented on a changeset you are interested in"
your_changeset: "%{commenter} has left a comment on one of your changesets created at %{time}"
+ your_changeset_html: '<a href="%{commenter_url}" target="_blank" style="text-decoration: none; color: #222"><strong>%{commenter}</strong></a>
+ has left a comment on one of your changesets
+ created at %{time}'
@tomhughes
tomhughes Jan 2, 2017 Member

This is a translation nightmare - aside from the fact that it duplicates the plain text version there's all sorts of stuff here that is technical detail that we don't really want to expose translators to if we can avoid it as they'll just manage to break it. Do we really need the strong tag? Without that we can just reuse the text version and put the HTML in the template. If we do want it can't we add it as part of the commenter expansion and achieve the same result?

Obviously the same applies to other translations.

@saintamh
saintamh Jan 3, 2017

I've now moved the HTML markup to the template. The *_html duplicated strings are no longer necessary and have been removed.

+ </tr>
+ </table>
+ </body>
+</html>
@tomhughes
tomhughes Jan 2, 2017 Member

There's a lot of boiler plate here that makes this very hard to read, and if you're planning to expand this to other emails then I then think you need to look for a way to separate it out so that it's not duplicated all over the shop.

Is there something clever we can do here with a layout?

@tomhughes
Member

@pnorman web mail clients are oddly generally far more tricky than actual mail clients because they are generally very picky about what HTML they will render...

@erictheise
Contributor
erictheise commented Jan 2, 2017 edited

Litmus is a commercial service that renders emails as they would appear in many desktop, mobile, & web clients. I do not at present have access to the service but perhaps someone who does would be sympathetic to partnering up with @saintamh to test these emails on their organization's dime.

@saintamh
saintamh commented Jan 2, 2017

@pnorman thanks for the valuable feedback!

Shouldn't thin use image_path or something? Explicitly building a path to an asset like that seems wrong.

I'll look into image_path.

can't we add it as part of the commenter expansion and achieve the same result?

Yes, that sounds like it would make sense. As I wrote above, I too am not comfortable with having HTML/CSS in the locale files. I'll move the HTML bits to Rubyland, which feels.. less wrong?

I'd rather keep the <strong> emphasis on the user name, though, I think it makes sense for that information to stand out. Unless others disagree?

Is there something clever we can do here with a layout?

Aha, I think "layouts" might be the Rails keyword I was missing for the template-template I was trying to describe above -- I'll look that up.

I'll try to implement the above in the coming days.

@saintamh
saintamh commented Jan 2, 2017

@erictheise Litmus looks like a very valuable tool. Perhaps we could start with more informal testing, and once we've got something we think is right, use a tool like Litmus to thoroughly check rendering.

Unless someone has an account, it looks like the cheapest we can get away with would be to buy one month of access, at $99.

Herve Saint-... added some commits Jan 2, 2017
Herve Saint-Amand Proper way to get path to small avatar
Rather than performing perilous string substitution on paths, just use the built-in way to select the small version of the avatar image file.
ab9aaf7
Herve Saint-Amand More compact image paths
Make the file paths to image assets more compact. I investigated using `image_path` but could only get it to return the path for a public URL, which is different and also includes the asset pipeline digest.
beaa85e
Herve Saint-Amand Remove HTML markup from locale file
Rather than including HTML markup in the locale file (which also has the inconvenience of requiring both a plain-text and an HTML duplicate of the same string), move the markup to the template. Also added a helper to reduce clutter in the template slightly.
ac08130
app/helpers/notifier_helper.rb
+ :target => "_blank",
+ :style => "text-decoration: none; color: #222; font-weight: bold"
+ )
+ end
end
@saintamh
saintamh Jan 3, 2017

I added the link_to_user helper to declutter the template a bit, but then it means this Ruby file now contains some CSS instructions. What's the proper Rails way to do this?

@tomhughes
tomhughes Jan 3, 2017 Member

Is there something wrong with what you've done? I mean we would normally avoid inline CSS completely but for email that's not possible so I don't see what other option there is?

@saintamh
saintamh Jan 3, 2017

I suppose the alternative would be not to create a helper, and copy-paste its contents in the templates instead of the call to the helper. Inline the helper function, basically. But if you're happy enough with this, I'm happy too.

Herve Saint-... added some commits Jan 6, 2017
Herve Saint-Amand First steps towards using layouts
Since all HTML mails will presumably share the same overall layout, and the markup is fairly dense, it makes sense to use Rails layouts to share the structure across mail templates. This commit moves the core structure of the HTML mail to a layout. It will need to be further refined so that notifications that involve a text message sent by another user can share the avatar-and-message-text structure.
479a4bd
Herve Saint-Amand Moved message table HTMl to a partial template
Several notifications are about a message having been sent from one user to another via OSM. I've moved the code for the HTML table that holds the actual user message, with the avatar and the body text, to its own partial template, so that it can be reused. I've updated a second notifier message to the new template, diary_comment_notification.
417176f
Herve Saint-Amand Dressed up a few more messages.
email_confirm, message_notification and signup_confirm now use the new templates. This fixes some, but not all, of the currently broken tests.
3aa69ff
Herve Saint-Amand Removed unbalanced tag HTML tag 31778fd
Herve Saint-Amand Modify tests to search only text parts
The tests assumed that every part in the multipart emails that we send were either plain text or HTML. Now we have image attachments, against whose contents the tests were still trying to match regexes. The tests have been modified to only run regexes on the text parts of the mails.
0449024
Herve Saint-Amand Rubocop finds 'return' statements redundant
e59d6c5
Herve Saint-Amand Added a greeting to the changeset comment message
The greeting includes the recipient's user name (as for the message notification mail), which should increase the recipient's trust that the message isn't spam. Greetings were reused from each language's respective locale flie.
39c3fa4
Herve Saint-Amand Dressed up friend_notification mail 22f7c1f
Herve Saint-Amand Dressed up gpx notification mails 6d1c10a
Herve Saint-Amand Dressed up lost password mail 235e77f
Herve Saint-Amand Dressed up note comment messages
7ef57b2
Herve Saint-Amand Logo was being attached twice on changeset comment notifications 75f96fc
Herve Saint-Amand Simplified the partial layout
Rather than wrap the body in a :body block, just make it the default, unnamed block, which keeps the markup more lightweight.
c942138
Herve Saint-Amand Remove that ugly style="margin: 0"
It's really only needed for rendering in Yahoo. Let's try to do without having to copy-paste that into every html template.
433b7c5
@saintamh

This is ready for another wave of reviewing, I think. It uses a layout and a partial now. Please do give feedback on the particulars of the implementation.

I've added "Hi, %{user}" at the top of the changeset comment notification mail. That particular mail is probably crucial for increasing new user engagement, and it didn't have a greeting line at all. I copied the line from the message notification locale strings, in every language. Is that OK, for me to create a new localized string like this, or is this going to confuse the translation pipeline (if there is one)?

As I mentioned above, there's also a wholly new string to be localized, it goes "To unsubscribe from updates to this changeset, visit ...".

We should probably discuss the visual appearance of the messages, too. I'm thinking of writing a diary entry to bring more community feedback into this.

@tomhughes
Member

I'll try and have a look in detail over the weekend, but to answer your question about the translations, no I'm afraid that's not ok - you should only alter the en translation as it complicates things with the translation system if you add strings to other files.

Herve Saint-Amand Revert "Added a greeting to the changeset comment message"
This reverts commit 39c3fa4.
a0627ec
@saintamh

I've reverted the commit that added the greeting to the changeset comment file. I left the new string in en.yml, though, in the hope that we can get it added to every language through the proper process. The string already appears exactly elsewhere in the file, so hopefully we don't need a native speaker of every language to confirm that "hello" is still "hello"?

But maybe this should be a separate PR than this one, which is really about the presentation, not the content of the mails.

@tomhughes

Mostly looks fine but I've left a few comments and questions inline - mostly minor nits though.

app/models/notifier.rb
@@ -76,6 +77,9 @@ def message_notification(message)
@replyurl = url_for(:host => SERVER_URL,
:controller => "message", :action => "reply",
:message_id => message.id)
+ @user_message_author = @from_user
@tomhughes
tomhughes Jan 15, 2017 Member

I don't think this variable really needs such a long name. I'd suggest something like @author would be fine and more concise.

app/models/notifier.rb
mail :to => recipient.email, :subject => subject
end
end
private
+ def set_shared_template_vars
+ @root_url = root_url(:host => SERVER_URL)
+ attach_project_logo
@tomhughes
tomhughes Jan 15, 2017 Member

This isn't really setting a shared variable so I don't think it really belongs here. I'd suggest just adding it as a separate before_action filter.

@saintamh
saintamh Jan 16, 2017

Good point, I've made attach_project_logo a before_action filter. set_shared_template_vars is still there and still sets @root_url

@@ -0,0 +1,18 @@
+<table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
@tomhughes
tomhughes Jan 15, 2017 Member

I don't really like the name of this file, especially the encoding of an implementation detail (the fact that it's a table) in the name. Can we just use _message_body.html.erb instead maybe?

@saintamh
saintamh Jan 16, 2017 edited

What I was trying to convey was that this partial template is for messages (within the email message) that are written by another user. So it's for direct messages, changeset comments, diary comments and note comments. It's the box with the avatar and the user's message that you can see in the screenshot above. Not all notification messages have it -- the password reset email doesn't for instance.

But words like "message" and "body" quickly get confusing I agree because we're talking about a message body (the user's message) within another message body (the email itself).

I've renamed it to _message_body.

-==
-<%= @comment.to_html %>
-==
+<%= render "notifier/user_message_table", :captured => capture { %>
@tomhughes
tomhughes Jan 15, 2017 Member

You don't need to specify the controller if it's the same, and we normally explicitly specify that it's a partial so use render :partial => "message_body" here I think.

Also can we rename :captured to :body or something that better specifies what it is, and always use do/end for multiline blocks and not {/} please.

@saintamh
saintamh Jan 16, 2017

I've added a helper function, message_body, that takes a block and calls render. Now you can insert the message box like this:

<%= message_body do %>
    Message body goes here haha
<% end %>

This could be neat or this could be overkill, my Rails-foo is not strong enough to tell.

-<p><%= raw t 'notifier.changeset_comment_notification.details', :url => link_to(@changeset_url, @changeset_url) %></p>
+<% content_for :footer do %>
+ <p>
+ <%= raw t 'notifier.changeset_comment_notification.unsubscribe', :url => content_tag("nobr", link_to(@changeset_url, @changeset_url, :style => "color: #222")) %>
@tomhughes
tomhughes Jan 15, 2017 Member

The <nobr> tag is non-standard so we should use CSS instead unless there's a very good reason.

@saintamh
saintamh Jan 16, 2017

Ah yes, well spotted. Also some email clients strip <nobr>, the white-space CSS attribute fares better. Fixed now.

assert_match confirm_regex, part.body.to_s
end
- confirm_string = register_email.parts[0].body.match(confirm_regex)[1]
+ confirm_string = email_text_parts(register_email)[0].body.match(confirm_regex)[1]
@tomhughes
tomhughes Jan 15, 2017 Member

What was the reason for changing all these to only check the text parts? The consequence is that we're no longer validating that the HTML part includes the required links which I'd like to avoid if possible.

@saintamh
saintamh Jan 16, 2017 edited

email_text_parts returns those parts that have a content-type matching text/*, i.e. it includes both text and HTML parts. Really it's just there to avoid trying to match a regex against image data. We need that now that we attach images. Some of those parts are images, and some are content-less "multipart" parts, we need to skip those for the regex tests.

Perhaps the name is confusing. text_and_html_parts ??

Herve Saint-... added some commits Jan 16, 2017
Herve Saint-Amand Renamed @user_message_author to @author as suggested 1e19e80
Herve Saint-Amand Move attach_project_logo to be its own before_action filter, as sugge…
…sted
e5152c3
Herve Saint-Amand Refactored the code to invoke the message body partial layout, as sug…
…gested in the PR
e3e5ad4
Herve Saint-Amand Convert those <nobr> tags to CSS
1285c9f
Herve Saint-Amand Rubocop says to use "hash rockets"
Rubocop will have its way.
774e583
Herve Saint-Amand Put the user avatar in a <p> block
This improves rendering on those clients that set the margin to 0 on <p> blocks.
25d8078
Herve Saint-Amand Apply inline styling to all <p> tags
Solved the problem of <p> tags being given different padding or color by different clients, without having to copy-paste a string of CSS into every <p> tag in the templates.
cf11913
Herve Saint-Amand Left-align logo
1def88b
@tomhughes
Member

@saintamh is this ready for me to look at it again?

@saintamh

@tomhughes yes, please do. Let me know in particular whether the apply_inline_css helper function I added in cf11913, which runs a regex substitution over a string of HTML, is an acceptable way of doing things.

Meanwhile I wrote a little web-based tool that will let testers send themselves a copy of the new mails, ahead of this being merged. I'm thinking of setting up a wiki page where people can upload screenshots of what the new mails look like in their client. And I'll write a diary entry asking for volunteers. That might give us the breadth of testing that we need, what do you reckon?

Herve Saint-Amand Set border=0 on that img
IE9 shows a big nasty blue border on linked images if you don't specify border=0
f83b719
@tomhughes

A few more review comments. There's also a live version running at http://tomh.apis.dev.openstreetmap.org/ if people want to test things.

app/helpers/notifier_helper.rb
+ )
+ end
+
+ def apply_inline_css(html)
@tomhughes
tomhughes Jan 28, 2017 Member

I think apply_inline_css is a bit too vague for the name - something like style_message would make it clearer what it does.

@saintamh
saintamh Jan 28, 2017

Makes sense -- done.

test/test_helper.rb
+
+ def email_text_parts(message)
+ text_parts = []
+ message.parts.each do |part|
@tomhughes
tomhughes Jan 28, 2017 Member

You could avoid initialising the array and then returning it by using each_with_object here. So something like:

message.parts.each_with_object([]) do |part,text_parts|

and then get rid of the first and last lines of the method.

-<p><%= raw t 'notifier.changeset_comment_notification.details', :url => link_to(@changeset_url, @changeset_url) %></p>
+<% content_for :footer do %>
+ <p>
+ <%= raw t 'notifier.changeset_comment_notification.unsubscribe', :url => link_to(@changeset_url, @changeset_url, :style => "color: #222; white-space: nowrap") %>
@tomhughes
tomhughes Jan 28, 2017 Member

If you're going to add completely new information to the message then it should really be added to the text version as well.

@saintamh
saintamh Jan 28, 2017

Facepalm. Done.

Herve Saint-... added some commits Jan 28, 2017
Herve Saint-Amand Renamed `apply_inline_css` to `style_message` as suggested a371aad
Herve Saint-Amand Use each_with_object and make the code pithier 74e28f8
Herve Saint-Amand That new message in the HTML version of the mail should also be added…
… to the plain text version of the mail

Duh.
223a12c
@saintamh

Thanks, @tomhughes, I've implemented those changes. Thanks also for deploying to your test instance. I'll point volunteer testers to it, if that's OK?

@tomhughes
Member

@saintamh Sure - that's what it's there for

@tomhughes tomhughes merged commit 223a12c into openstreetmap:master Feb 5, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
coverage/coveralls Coverage increased (+0.05%) to 79.757%
Details
@saintamh
saintamh commented Feb 5, 2017

Thanks for merging @tomhughes ! There's a couple minor display bugs that have cropped up in Mirosoft mail clients (see https://wiki.openstreetmap.org/wiki/Dressed-up_Notification_Mails) and I'm working on a fix. Should I continue pushing to the same branch, or should I open a new PR for those?

Also I never tested what happens for users who use Gravatar. Best case scenario is the avatar won't display, but worst case is the mailer code will error out and the message won't be sent. I'll check that next.

@tomhughes
Member

Open a new PR please @saintamh.

@HolgerJeromin
Contributor

Should I wait with testing more clients?

@tomhughes
Member

Don't see why - feel free to do whatever testing you think is good!

@trigpoint

I am finding the messages very difficult to read in my phones native email client. When viewed overall the test is way to small. One zoomed in making the text readable only a small part of the message is viewable meaning a lot of screen dragging is needed.

@saintamh
saintamh commented Feb 7, 2017

@trigpoint that sounds worrying. Do other HTML mails usually work well?

What phone are you using, what version?

@trigpoint

I am using a Jolla, running Sailfish OS.
2.0.5.6 Haapajoki

It does not normally have a problem with html e-mail. The problem here is that the content has been forced into a small area, that uses only a small proportion of the screen rendering fonts too small to be read on a 4.5 inch screen.

On my desktop the same e-mails appear as a box in the centre of the window, It looks weid to say the least.

@Zverik
Contributor
Zverik commented Feb 8, 2017

Reopened note sends a notification with an empty box. Is it expected?

2017-02-08 19 58 59

@saintamh
saintamh commented Feb 8, 2017

Definitely not expected, I'll look into that. Thanks a lot for reporting it.

@saintamh

@trigpoint I've made tweaks to the HTML/CSS code that should help when viewing on narrow screens. They're not live yet, but if you'd like, you can send yourself a copy of the latest code using the tool at http://52.56.34.44:8080/ and see whether the situation has improved on your mobile.

@trigpoint

@saintamh Those look a lot better. They are readable on my phone without zoom. I like it, thank you.
screenshot-17-02-11-01-33-00
screenshot-17-02-11-01-34-26

@HolgerJeromin
Contributor

I added Android K9 mail program and SquirrelMail webmailer with desktop chrome. All working nice

@neiljp
neiljp commented Feb 12, 2017

I'm not sure at first glance how to take a screenshot on my android phone, but chrome+gmail on it has the note text going off beyond the right side and needs to be scrolled; is there any way to just have it fit the width? It shows ok when the phone is tilted, but that orientation isn't guaranteed, and it's a little frustrating to need to scroll/twist when it was working fine before!

@saintamh

Hi Neil,

Could you try sending yourself a mail using the tool at http://52.56.34.44:8080/ and tell me whether the problem persists? I've got a few fixes that are just about to be published, and they should address overflowing on narrow screens -- though I've not tested it on Android. Could you let me know whether it works?

Thanks!

@neiljp
neiljp commented Feb 12, 2017

Hi @saintamh,

I've just used the tool and that seems better overall, but the link does stretch the page wide slightly, and looking at the layout I wonder whether it would be good to have the text flow not just to the right, but also below the 'person' image, if possible?

@HolgerJeromin
Contributor

On my phone pushing the power and volume down button takes a Screenshot

@saintamh

@neiljp That's a good idea. It's true there's a lot of wasted space under the avatar. I'll look into that, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment