Email content / designs

[heymarkreeves]

Hi, @desigonz!

I'm opening this issue as a to-do request for sample content for the branded email layouts.

How will you be sending the emails? Is there an ESP I should target? Or will these originate from your app code? Are there placeholder tags that you'll be using?

Thanks!

Mark

/cc @mailbackwards

[heymarkreeves]

This is under:

Designs for email reminders

The "notifications" section in the settings currently indicates three different types of reminders—weekly emails, reminders the day before an event, and reminders a week before an exhibition closes. Over the next week, we'll revisit these email types and send you sample texts with the kind of content we would like each email to include.

[heymarkreeves]

Hi, @desigonz & @mailbackwards – This is the last item I'm looking for input on to sum up the 1.5 items. Can you share any content & delivery specs you have? Thanks!

[desigonz]

Hi—my apologies on the delay on this! Liam and I have drafted email templates in this Google doc: https://docs.google.com/document/d/1JRN2bHYVaSMc7kOUc1eoT0fStfhLPSjk76EAKK4KfJk/edit?usp=sharing

The first page includes some questions and concerns, which I am pasting in here as well:

• For the top two sections of the weekly email (first template here), we’re thinking there would be three thumbnails in a row, emulating the carousel look on the app. Would we be able to optimize this for viewing on mobile? Possibly have thumbnails with a brief event/exhibition name underneath, like Flavorpill does here with the Fleetwood Mac image
• Liam: “I think we can assume that if the user got to the app from an email, they can be auto-signed in as that user (this shouldn't be too hard to incorporate technically I think). This would give us additional affordances too if we wanted, e.g. allowing users to favorite events direct from email (like how Twitter lets you click "follow" in emails)”
• Another consideration is whether, when we link to Artbot, it will be able to take them to the homescreen app, or if it will always lead them to the browser...unfortunately it's probably the latter.

[heymarkreeves]

Thanks, @desigonz! I'll take a look at the content considerations. We do code responsive emails where media queries are supported.

I highly suspect that we'd be limited to linking to the app in the browser. I don't think the homescreen app is an addressable app. I added a note in #54 about this, too.

Regarding the ESP (Email Service Provider), what are your thoughts? You probably already have an account somewhere that you're using for the DH newsletter.

My preference is Campaign Monitor. They have a great segmentation & personalization language and platform, I'm a big fan of their UI, and I'm most well-versed in their template syntax. They also have an excellent API for app integration.

Essentially the way I see this playing out is:

• You rely on an API to synch subscribers to the ESP: I sign up for Artbot, you add me to an active user list. I change my settings, you remove me, all via API. Personalization data is added as well.
• "Keys" to autologin users would be bounced to the subscriber list, too.
• You have a newsletter template that we've designed and coded. You can log in and send newsletters via that template to your subscriber lists any time, and edit that newsletter through content editor fields.
• You could ultimately automate content integration and email blasts via the API, if there were criteria or updates built in to the Artbot app.

Mark

[desigonz]

Hi Mark—just quickly to address the ESP, we use Mailchimp, although that doesn't mean we're wedded to it for Artbot. Do you have any concerns/reservations about working with Mailchimp?

[heymarkreeves]

Now that I've clicked over to the sample content, and to address your follow-up question :)

What you've outlined are all automated emails from the app rather than manual sends. In that case, we can make up our own personalization syntax in our own templates and you can handle the blast through any delivery network. Amazon has one, I like Mandrill as an SMTP. Mandrill offers a pretty decent volume of free emails each month. Mandrill is also a MailChimp product.

I don't want to make any assumptions about your experience in this realm, but I cannot recommend enough relying on an ESP as an SMTP provider rather than your own server. An ESP is doing their job to keep the network clean and stay in the good graces of ISPs. You should be able to go far with Mandrill for free. Running SMTP on your own server can get it blacklisted.

I can now proceed with an assumption that you'll be packaging up the emails in your app's code to deliver via an SMTP provider like Mandrill. I can work in PHP to get the multipart elements (HTML + plaintext) working and mail-able and come up with a "find & replace" syntax for dynamic elements for you. I'll hand those templates back to you and you can integrate them into your app to swap dynamic content in where I have those placeholder tags.

Let me know how that sounds?

Thanks!

/cc @mailbackwards

[desigonz]

Hi Mark,

Hope the holidays were great! I'm logging the feedback on the new email designs here to keep the feedback on Github.

The designs look great, thanks for getting these to us. Here are my initial thoughts:

• Assuming 2 events for the recommendations sections makes sense, especially the ideas that limiting options for users will lead to more clicks. Looks great.
• When images are stacked—we suggest that the images have some padding/not be 100% wide. For one, each image seems to dominate the screen; on Artbot, 100% width indicates an exhibition/event page when you're only seeing information for one event at a time. Let me know if you have thoughts/suggestions about this.
• The entire email seems text heavy, and we'd like to differentiate between the various sections a bit. Here are my suggestions to that effect (and see sketch below):
  • The "discover more events and exhibitions near you >>" and the "view your favorites >>" links: Move to the bottom of each section of two. (So the "You might like" and "Don't miss these" will be paired with "discover more events and exhibitions near you >>", and "Your upcoming events" and "Your upcoming exhibitions" with "view your favorites >>".)
  • It would be great to make each of these two overarching sections (recommendations vs. favorites) more distinct. Perhaps more spacing between the two?
  • Another idea to make these two sections more distinct is by making the "discover more events and exhibitions near you >>" and the "view your favorites >>" links more graphic or button-like—something along the lines of the "View their profile" button in the Twitter email I've included below.
• A question about the 600 px breakpoint: Is this standard for email? It strikes me that the breakpoint is rather large; I feel like my Gmail is often open at less than 600px wide.
• Images: Instead of providing an API endpoint, we'll be storing images at various sizes, including an "email" size

Liam, let me know if I missed anything.

[heymarkreeves]

Hi, @desigonz!

I'm on board with all of these requests/suggestions.

When I run tests, I'll do a Gmail test and view it on my 11" MBA. If we need to constrain the width further, we can do so, though 600px is pretty standard. If you've got 1280 pixels of width, that leaves more than half for the folders on the left and ads on the right.

Mark

[heymarkreeves]

Let me know how these edits look?

http://email.artx.clearbold.com.s3-website-us-east-1.amazonaws.com

Thanks!

Mark

[desigonz]

Hi Mark,

Thanks for the edits. Just a few thoughts:

• Can you make the titles for the top two sections white (rather than green), consistent with the bottom sections?
• We still feel like the sections could be more differentiated, especially since the section titles are smaller than the event titles. We suggest increasing all section titles to 20px, but we're open to other suggestions (making the text bold, perhaps?)

Otherwise, it looks good, and thank you for your note on the 600px breakpoint. When you do a Gmail test on your computer, would it be possible to send the same email test to the HyperStudio team?

Also, do you have any designs you can send our way so that Liam can get started integrating into the app?

[heymarkreeves]

Hi, @desigonz!

How about this to distinguish the sections?

http://email.artx.clearbold.com.s3-website-us-east-1.amazonaws.com

I'm going to start testing. I'll release code after that, otherwise there will be a lot of shifts in the files you're working with.

Mark

[heymarkreeves]

Hi, @desigonz!

Here's the full suite of tests. At the time of posting this, the Gmail App for Android test is still running, as are some of the webmail clients, so I haven't cleared those yet. However, Gmail's App is pretty broken, and we hope that most of our Gmail mobile users are doing so through the native iOS or Android Mail app. It's an ongoing issue in the email services industry.

Let me know how these look to you:

https://litmus.com/pub/2ab5ef3

Mark

/cc @jamiefolsom @mailbackwards @fendt

[heymarkreeves]

PS Email files & notes can be found in:

https://github.com/clearbold/artx/blob/master/email/notes.md

Note that I have some tweaks left to do, and still need to do the reminder layout.

Mark

[desigonz]

Hi Mark—thanks for this most recent version. We'd prefer not to go with the light gray box to distinguish the sections. Instead, could you make the section titles a bit bigger, and the exhibition titles slightly smaller? Perhaps 20px and 17px, respectively.

[heymarkreeves]

Hi, @desigonz!

Those are easy tweaks and I have no concerns optimizing the design for the email context. I did base all of those styles directly on the app so that there would be a seamless transition from email to the app. I.e., the linked events match the formatting of linked events in the app, The headers match the top heading in the app. You can see that here:

https://www.dropbox.com/s/i3v96gvlitt6etk/artbot-email-font-sizes.png

Want to just confirm those changes before I proceed after taking a look at that?

Thanks!

Mark

[desigonz]

Hi Mark—having consistent styles between the app and email makes sense, but I think changing the text sizes will make the email more legible. Please go ahead with changing the sizes. Thanks!

[heymarkreeves]

Let me know how these look and I can move forward on the reminder email. These are in the GitHub repository, too.

http://email.artx.clearbold.com.s3-website-us-east-1.amazonaws.com/

Thanks!

Mark

[desigonz]

Looks great! Thanks a million.

[heymarkreeves]

Hi, @desigonz!

Here's a starting point for discussion on the event reminder email. I think the subject and preheader play a key role in this. The event in the email is really just something to click on. That, to me, leaves room to also remind the user of other events in their Favorites.

http://email.artx.clearbold.com.s3-website-us-east-1.amazonaws.com/reminder.html

Let me know what you think.

Thanks!

Mark

[desigonz]

Hi Mark,

Thanks for this layout, it looks great! A few notes:

• We'd like to include a two-line teaser of the event description in the email, below the location/date/time. Can you mock that up for us?
• Reminding users of their other favorites is a good idea. We're thinking of just showing 2 "event"-type events on the event reminder emails, and 2 exhibitions on the exhibition reminder emails.
• This is a note both for this layout and the general Artbot weekly email layout: On the bottom, you include text that says "To unsubscribe from these emails, update your Artbot settings." Can you hyperlink to the Settings page on the app?

Thank you, and have a fantastic weekend!

[heymarkreeves]

Hi, @desigonz!

We'd like to include a two-line teaser of the event description in the email, below the location/date/time. Can you mock that up for us?

I've got one in place now.

Reminding users of their other favorites is a good idea. We're thinking of just showing 2 "event"-type events on the event reminder emails, and 2 exhibitions on the exhibition reminder emails.

You'll be able to generate that in your Rails code, swapping "event" and "exhibition" and controlling how many you display. I killed "exhibition" for now.

This is a note both for this layout and the general Artbot weekly email layout: On the bottom, you include text that says "To unsubscribe from these emails, update your Artbot settings." Can you hyperlink to the Settings page on the app?

I have an email service provider "tag" wrapped around that for now so it doesn't yell at me when I use it for testing. (It requires its own unsubscribe link.) That will be in place when I hand these off.

Let me know how the teaser looks and I can test & prep this for delivery.

http://email.artx.clearbold.com.s3-website-us-east-1.amazonaws.com/reminder.html

(Note the server that powers the placeholder images is down at the moment for me. I'm not sure if that will affect you when you take a look.)

Thanks!

Mark

[desigonz]

Hi Mark—this all looks great. Thanks!

[heymarkreeves]

Hi, @desigonz & @mailbackwards!

The final email templates are in our GitHub repository for you. A few notes:

• For the HTML emails, you want to use the _inline.html versions. You can look at the non-inline versions for reference, but the _inline.html versions have all the CSS inlined on the markup to support the full array of email clients.
• Structure should be pretty straightforward & clear where you need to loop items, fill in values, etc, but let me know if you have any questions.
• I've included a plaintext version for each email, that you can populate and include in a multipart package. This is good for users who need a fallback, but also helps you get through spam filters.
• Once you have things hooked up, I can set up a Litmus test and send you the email addresses to send a test to, so that we can verify everything's solid for live use.

Mark

[mailbackwards]

Hi Mark-- thanks for these! I'm starting to fold them in now. For now I'm just wondering if the weekly_inline version looks as you would expect... it seems to have much less markup than reminder_inline, and doesn't look different from the source file to me. So I'm wondering if there was a snafu when rendering the inline. The reminder email looks as I would expect though. Thanks!

[heymarkreeves]

Hi, @mailbackwards! I just pushed an update that should correct those.

Mark