Ideas on email templates for core

[atwellpub]

Let's keep ideas here.

Here's something to start with: http://zurb.com/playground/responsive-email-templates

[DavidWells]

https://github.com/seanpowell/Email-Boilerplate https://gist.github.com/paulund/5927921#file-html-email-boilerplate-html http://codepen.io/zavoloklom/pen/qEVqzx http://codepen.io/rickygipson/pen/Aouhi http://codepen.io/raybeezdesign/pen/pHlLG http://codepen.io/konsav/pen/yNVyOG http://codepen.io/mtthlbg/pen/RNOePb http://codepen.io/JKudla/pen/aOXzEN

[daprela]

Thanks, I will start working on these

[atwellpub]

Thank you Giulio. Please use your imagination on which should be priority. Right now we are throwing ideas out there but I don't think we have any concrete passion for which one to start with.

One thing that is probably important is that we will use ACF repeater fields to power content boxes inside emails that can stack on each other. Feel free to ask for more questions on this and David will pick up further explanation.

[daprela]

Hi guys, I've decided to add the hero email from the Zurb website as first template. I think that we need to discuss the interface here but before that I don't quite understand how to push my commits. The inbound mailer doesn't work as a standalone plugin. If you create a new email the edit page comes totally empty because the ACF plugin it's only integrated in inbound pro. Do I need to create and test the templates in inbound pro, and then move them into the inbound mailer, and push the addition in this repository?

response by Hudson

All the work will need to be committed to Inbound Mailer. As a stand alone plugin you'll just need to install and activate ACF Pro. I've sent it over via skype.

You could also make changes in pro and copy them over to the stand alone plugin and then commit.

[daprela]

We need to have a visual reference of the template layout in the edit page. A metabox with an image inside could probably do the job. The hero template is not simple nor complex, just halfway, this is why I've chosen it but there are quite a few fields to fill in the edit page. The user can easily get confused as to where the content he's adding will show up in the email. With templates with sidebars and/or two or three widget areas in the footer the situation will only get worse.

One proposal that I want to make to simplify email editing is to move some general fields to the general settings page. Fields like terms page url, privacy page url, social media (Facebook, Twitter, G+ etc) won't change from email to email. They could be added once into the general settings page, and then showed in the email edit page just as checkboxes to let the user decide whether to add them or not in the email.

Response - H

We do have a visual editor mode. I'm not sure about standardizing social information and pulling from it. I'd have to get David's input. Social links might change a lot from email to email.

[daprela]

Ok, so I have a few things to say. This template has been long to setup because I needed to define a workflow.

I have researched the matter, email templates are not as easy and straightforward as they may seem. The problem is that there are many email clients with many different behaviors, and the same html that works in one could not work in another client. For this reason, simply taking a nice html file and turning it into an email template is generally not a good idea. On Zurb I have found Ink, a boilerplate for emails. The Ink grid is studied to work on most of the email clients, the documentation explains well the pros and cons of each grid. My idea is to use this boilerplate for all the email templates.

Another thing to say: many email clients strip the css out of the html. If you don't want to lose the formatting you must have inline css. There are a few tools called 'inliner' that allow you to add a standard html file with css and turn it into an html file totally inlined. The best working tool that I've found so far is http://templates.mailchimp.com/resources/inline-css/ However, it doesn't work very well with PHP inside html. The tool turns the < and > characters in their html entities. After having inlined the css you must edit the file to restore the correct php tags.

In the template I have left a file called index-non-inlined.php. It's like leaving the non minimized version of a JS file. You can use the non inlined version to modify the template.

Now, I'm going to push the template here. It needs some more testing, but I want to have your feedback

[daprela]

I will work on adding all the templates from zurb.com. I will also modify the current default mailer template to inline all styles so that it will work better. After that I will look at the other links from @DavidWells , and look for more templates around. An idea that has come to my mind is to use some newsletter that I receive as models for the templates.

Please let me know if you have different ideas and suggestions.

[DavidWells]

Yeah I like http://zurb.com/playground/projects/responsive-email-templates/hero.html and http://zurb.com/playground/projects/responsive-email-templates/sidebar.html as template skeletons, we will need to edit them a bit with styles and stuff

Also https://github.com/seanpowell/Email-Boilerplate appears to have cross client issues ironed out.

@daprela do you know how to build the templates using the advanced custom fields setup we have?

[DavidWells]

@daprela Also ignore the codepen links I specified above for now.

We can focus on these open source templates: https://github.com/sendwithus/templates seen here: https://www.sendwithus.com/resources/templates

Start with https://www.sendwithus.com/resources/templates/narrative as generic template, the "upsell" version

[daprela]

@DavidWells Ithink that I got how to build templates using ACF. At least, the hero template works well, give it a look if you have the chance, I've merged the template branch into the main branch now. If you install the mailer plugin you'll see that the email preview works very well.

We could add more styling options to the hero template, like header and footer bg color or even image. Don't want to make it too complex to setup though, we must be careful to balance complexity and flexibility

[daprela]

Added sidebar template. I'm improving my production process, tomorrow I'll go back to the hero template and apply to it the improvements that I've made to the latest one. Then, I'd like to inline the simple responsive email template, so at the end of this week we'll have three working templates. I've improved the interface in the edit page by splitting the options in many tabs.

I think that the sidebar template in future could also have a premium version. We could add to the premium possibility of adding a graphic header instead of a uniform background, icons next to the links in the sidebar and color or pattern bg for the email body.

[daprela]

What are we going to do with the simple responsive template? Media queries work well in the browser but they cannot be inlined, so this template is not compatible with many email clients.

If you all agree I would replace the simple responsive email template with this basic template http://zurb.com/playground/projects/responsive-email-templates/basic.html and call it simple basic. Callout and social box can be made optional by letting the fields empty.

Let me know wht you think

[atwellpub]

I've just began looking at the templates and love the tab segments. Going to look over the others today too.

Hero background color works in mandril test email but it doesn't seem to be working in preview or visual editor mode. Investigating the other issue on the colorpicker.

[atwellpub]

In the meantime I think I might know a way to improve user experience: http://screencast.com/t/NJXVmJia

[DavidWells]

We need to consolidate those options out of the tabbed layout.

How many options does the template currently have?

If the options are in one area with them in a top to bottom order it should be pretty clear to which section they are editing.

I do like the idea of a highlighter like hudson mentions.

Don't send too much time on this right now, We just need some base templates for the launch of pro.

The entire visual editor is being redesigned for a better live building experience, but it's not going to be done for a little bit.

Right now we need to focus on creating some base templates and keep the options streamlined.

Tabbed UI appeals to developers but most users do not like having to hunt through tabbed views to find the hidden option they are looking for

On Fri, Aug 14, 2015 at 4:57 PM, Hudson Atwell notifications@github.com wrote:

In the meantime I think I might know a way to improve user experience: http://screencast.com/t/NJXVmJia

— Reply to this email directly or view it on GitHub https://github.com/inboundnow/inbound-mailer/issues/44#issuecomment-131269389 .

[DavidWells]

Basically only advanced/little used options should be relegated to a tab that is not the main one.

All of the template options need to be exposed like CTA and landing pages are currently

On Fri, Aug 14, 2015 at 5:42 PM, David Wells david@inboundnow.com wrote:

We need to consolidate those options out of the tabbed layout.

How many options does the template currently have?

If the options are in one area with them in a top to bottom order it should be pretty clear to which section they are editing.

I do like the idea of a highlighter like hudson mentions.

Don't send too much time on this right now, We just need some base templates for the launch of pro.

The entire visual editor is being redesigned for a better live building experience, but it's not going to be done for a little bit.

Right now we need to focus on creating some base templates and keep the options streamlined.

Tabbed UI appeals to developers but most users do not like having to hunt through tabbed views to find the hidden option they are looking for

On Fri, Aug 14, 2015 at 4:57 PM, Hudson Atwell notifications@github.com wrote:

In the meantime I think I might know a way to improve user experience: http://screencast.com/t/NJXVmJia

— Reply to this email directly or view it on GitHub https://github.com/inboundnow/inbound-mailer/issues/44#issuecomment-131269389 .

[daprela]

@DavidWells You make a good point about the tabbed options but the sidebar template has about 40 options, I don't think that a user would be happy to have all of theme listed in one long page. If you decide for examle to change the content of one box hunting down for that option can be annoying.

Do you mind if I involve a couple of people in a user test? They aren't computer illiterate but not too tech savvy, and they could represent a good test for this kind of interface

[atwellpub]

Please by all means go ahead. Is the tab layout a custom thing or is it powered by ACF? If it's powered by ACF then it is no sweat to have a tabbed layout or an alternative layout. Maybe we should try both, the way Davis says, keeping the sections but having them in vertical order and then a tabbed version too, where we could toggle between them to see what fits best for the template at hand.

At the moment I'm just not sure what kind of sweat, if any at all, is involved.

[daprela]

The tab interface is ACF powered. Design can be changed in minutes, no problem

On Sat, Aug 15, 2015 at 9:09 AM, Hudson Atwell notifications@github.com wrote:

Please by all means go ahead. Is the tab layout a custom thing or is it powered by ACF? If it's powered by ACF then it is no sweat to have a tabbed layout or an alternative layout. Maybe we should try both, the way Davis says, keeping the sections but having them in verticle order and then a tabbed version too.

At the moment I'm just not sure what kind of sweat, if any at all, is involved.

— Reply to this email directly or view it on GitHub https://github.com/inboundnow/inbound-mailer/issues/44#issuecomment-131280265 .

[DavidWells]

The problem with the large number of options is right here: http://www.screencast.com/t/r4HX1TeInDEl

We need to use ACF repeater fields to represent repeatable rows instead of hardcoding these

I have an example of this and code snippets on how to achieve this setup. @daprela do you want to setup a call this week on skype to walk through the ACF setup to make it as flexible as possible for users?

ACF flexible content areas are super powerful and will give us a truly robust templating system.

Are you free Tuesday to chat? What timezone are you in?

[DavidWells]

@atwellpub @daprela This is what I mean for Flexible Content areas for templates: http://www.screencast.com/t/Gd9gzlDc7Z46

See gist with code: https://gist.github.com/DavidWells/7401cd5dc344e3c872ae

To see this in action for yourself do this:

1. Activate 2015 theme
2. import the .json in that gist to the /wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export custom fields import
3. override page.php in 2015 theme with the page.php in the gist above
4. Create a new page in the install and you can see the flexible content areas.

Note: not everything would fall into a flexible content area but alot of the meat of templates would

[daprela]

I was so concentrated in making some working templates that repeater fields didn't even come to my mind. I've already changed the sidebar template and added the repeater field for the sidebar. Just pushed it.

As for the flexible content, I didn't know that field before, it's really powerful. So, if i get it you would want to change the layouts made so far to have flexible content fields and give users more design freedom. They basically could move up and down callout, image and content areas, and switch social box and sidebar, right? Not sure it's always a good idea, remember the paradox of choice. Give your user some flexibility but not too much. For example, sidebar and social box should probably stay in that order in the sidebar layout.

@DavidWells I think I got how the flexible content field works. Just need to understand what to put in the flexible fields. For example, take the hero template. Should the user be able to move the content before the hero image, or that one must stay on top? And what about the callout? Should that be always below the image, or will the user be able to move it?

[DavidWells]

Like this: http://www.screencast.com/t/lFpAP0BliT

remember the paradox of choice

Agreed, this is why we need to autopopulate the default flexible content areas for each template chosen. This way the user can use the default OR change it around however they want. Without the default flexible content areas showing with dummy values, the user is likely to be lost on what to do to build the template

see: http://www.screencast.com/t/TqBnXf4YAL for description of UX problem with flexible content areas

[DavidWells]

see: http://www.screencast.com/t/TqBnXf4YAL for description of UX problem with flexible content areas

What we will need to figure out is how to autopopulate the default values for templates if they have a flexible content setup.

The way this was solved for the client was that we setup dummy posts with all the flexible content in place and then told the client to clone the existing post with a plugin I built https://wordpress.org/plugins/duplicate-and-merge-posts/

We will want to populate the data upon email (and all inbound template post types) upon creation.

@atwellpub @daprela open to ideas on how to do this. One way might be the default values to populate the template from the master copy at demo.inboundnow.com/template-name

Aka. On post creation -> ping demo.inboundnow.com/template-name?get-data to populate the default values from the master copy of the template into their new post.

Or package default data with templates somehow

[daprela]

@DavidWells so what you want is to 'generate' a default standard post with a default layout when the user creates a new email, is that right? If that's the case most users would use the pre-made template, and only power users would use the flexible content fields to their full power. That isn't necessarily a bad thing, we know that most users want to be told what to do, and power users always constitutes a minority.

Maybe a json file holding the default values added to the template could do the job?

[DavidWells]

Whatever will work to autopopulate the flexible content area. That is the path template "bodies" are heading down.

As shown in the picture, some values are static and will be normal ACF fields

On Sun, Aug 16, 2015 at 8:38 PM, Giulio notifications@github.com wrote:

@DavidWells https://github.com/DavidWells so what you want is to 'generate' a default standard post with a default layout when the user creates a new email, is that right? If that's the case most users would use the pre-made template, and only power users would use the flexible content fields to their full power. That isn't necessarily a bad thing, we know that most users want to be told what to do, and power users always constitutes a minority.

Maybe a json file holding the default values added to the template could do the job?

— Reply to this email directly or view it on GitHub https://github.com/inboundnow/inbound-mailer/issues/44#issuecomment-131671130 .

[daprela]

I've changed the hero template. Now it has a flexible content area. I haven't given any limit on how many of these content areas you can add.

There are still problems with the color pickers. They never show the saved value when you reopen a saved email, even if the email preview comes out with the right colors. However, I still had problems with color pickers values not saved. It seems totally random, I cannot find a pattern to replicate the problem consistently. Please, test it on your end, at this point I'm not sure if it is my machine, tomorrow I'll try to move the code to my remote server to see if anything changes.

[atwellpub]

I'll test as well today. I've had a lot of family issues that kept me from working over the weekend and will interfere with my hours during this week, but today when I get home I'll do an audit on how acf is working with color pickers.

[daprela]

So, I've also changed the sidebar template, that now uses the flexible field. Now the user can combine text, callout and button. I've tried to turn also the sidebar into a flexible field but I had problems with the repeater field. In theory, according to the documentation the repeater field inside the flexible field works. In practice when I try to get the repeater as an array I get the array with the correct keys but the values are all set to false instead of the real content. I've tried all the documented techniques to setup the loop but I always get back false values.

I think that we've nailed down pretty well the kind of structure to setup for the email editor. If you all agree I would now start working on these templates https://github.com/sendwithus/templates suggested by @DavidWells

[DavidWells]

Awesome! Will have a look!

Can you start with https://s3.amazonaws.com/swu-filepicker/O4zRrhyWQuGuysEstSkL_upsell.jpg the https://www.sendwithus.com/resources/templates/oxygen "upsell" template.

Do you have any ideas on how to autopopulate the email templates on creation? Thats going to be an important point if we leverage the flexible fields setup

On Wed, Aug 19, 2015 at 11:03 AM, Giulio notifications@github.com wrote:

So, I've also changed the sidebar template, that now uses the flexible field. Now the user can combine text, callout and button. I've tried to turn also the sidebar into a flexible field but I had problems with the repeater field. In theory, according to the documentation the repeater field inside the flexible field works. In practice when I try to get the repeater as an array I get the array with the correct keys but the values are all set to false instead of the real content. I've tried all the documented techniques to setup the loop but I always get back false values.

I think that we've nailed down pretty well the kind of structure to setup for the email editor. If you all agree I would now start working on these templates https://github.com/sendwithus/templates suggested by @DavidWells https://github.com/DavidWells

— Reply to this email directly or view it on GitHub https://github.com/inboundnow/inbound-mailer/issues/44#issuecomment-132723095 .

[daprela]

I'm studying how the plugin works, I need to learn the plugin, and I don't have much time to do my tests, so this is why it's taking a bit long. I was thinking to trigger the procedure when the email gets created, right after the user clicks the ok button in the confirmation box.. However, I still don't know how to know what template has been required. And then, there's also to consider the case where the user switches template from inside the email.

[DavidWells]

Ok let Hudson dig into that.

Focus on how fancy new email designs :)

On Aug 19, 2015, at 11:26 AM, Giulio notifications@github.com wrote:

I'm studying how the plugin works, I need to learn the plugin, and I don't have much time to do my tests, so this is why it's taking a bit long. I was thinking to trigger the procedure when the email gets created, right after the user clicks the ok button in the confirmation box.. However, I still don't know how to know what template has been required. And then, there's also to consider the case where the user switches template from inside the email.

— Reply to this email directly or view it on GitHub.

[atwellpub]

+1

[daprela]

I'm adding these references for new templates:

Tons of free templates here: http://freemailtemplates.com/ http://slodive.com/freebies/free-html-email-templates/ http://slodive.com/design/136-best-email-templates/

Fore these there isn't the source code but we can take them as models: http://mailchimp.com/features/email-templates/ https://www.campaignmonitor.com/email-templates/b/

[daprela]

Plus, I'm going to use the template code from a few newsletters that I receive. For example, I like this one http://www.webdesignerdepot.com/newsletter/issue-186/

[DavidWells]

Nice resources!

We gotta be careful with some of the non free ones though. I don't think we can use anything from other companies unless they are open source.

[daprela]

Hi guys, to make you happy, I've added a brand new fancy template. :-) To make this, I've taken inspiration from one of my newsletters but mine has been heavily changed, and it's also very flexible.

The newsletter template in my opinion is very powerful. Thanks to the flexible field it allows to alternate news blocks and callouts. The header has the logo centered and it can have an image or color background, or both (like a semi-transparent image over a colored background).

There are still problems with the color pickers, that I'm going to describe in a new issue.

Please test it and let me know what you think

[atwellpub]

I love it.

[daprela]

I'm in the process of learning to use the Ink email framework from the Zurb foundation. I'm creating a 'gallery' template with it right now but it is my intention to use it for all the next email templates. So, I'm slower than expected right now in creating new templates but the process will speed up soon as the framework is very well structured and provides a fantastic grid

[daprela]

Added gallery template. This is the first template made 100% with the Ink frramework from the Zurb foundation. It is a very sophisticated framework and it takes sometime to leanr how to use it to its best but they guarantee maximum compatibility with almost all the email clients. As I learned, the most problematic email client is Outlook, in both versions online and standalone. It doesn't support many css properties, so it's easy to messup email in that one. Unfortunately there isn't much to do. Another thing to know is that many email clients don't support three digits hex colors. I'ts safe to add them all in six digits.

Please test the template and let me know what you think, it's not set in stone and can be adjusted :-)

[daprela]

The gallery template is perfect to showcase products and grahpics from an ecommerce shop. I took inspiration from the newsletter that I receive from Creative Market, a shop of graphic digital goods.

I have changed the display of the fields inside the flexible field box from block to row. The interface looks cleaner, please compare it with the other templates, if you like it I will change also the other templates that use flexible fields.

I'm also adding advice in the description of some of the fields. As I learn the various problems that the emails clients have I will add advice in order to avoid them. Like for the logo, I suggest to avoid png format as it's not supported in Outlook 2000. It seems that this client it is still quite popular.

[atwellpub]

+1

[atwellpub]

Looking good. Should we program in control over image size? & padding maybe in a CSS tab?

[atwellpub]

I'm having issues where get_row_layout does not output the flexible content layout type. I'm not sure why. This integration has been very difficult. For now (if this issue seems to be a problem) instead of using get_row_layout(), use get_sub_field('acf_fc_layout');

Strangely Gallery Template is not experiencing this issue. I'm unable to account why atm.

Newsletter template get_row_layout worked on callout box but not on a news line item.

Changes: https://github.com/inboundnow/inbound-mailer/commit/9713d9c4542626b2734c60410e09cf6a3b095f38

[daprela]

I'm not sure I got what you mean in your previous comment to the template. You would like to be able to change the image size? You want to create a tab named CSS where one can change paddings and image size? That is a very fine grained control over the template, it's easy to mess it up and can become hard to control. For example, if the image is big, the template must change from two images per line to one. The best way to do this would be to create the code for a row with one image per line, and probably also the code for three images per line, and decide which template part to apply depending on the user settings. It's doable, but it will take some time to make it work properly.

re. issues with acf itegration, as soon as I start adding the new template I'll make tests to see if the get_row_layout() works. That is strange indeed, there should be no reason why one works and one doesn't, they all have the same identical code, I copy/paste a skeleton function

[daprela]

If you wonder where do I take my images from to make the templates thumbnails, just in case you are worried to have some copyright issues, I take them all from http://unsplash.com

[atwellpub]

Email templates moved to Splash.