Better designed emails when sharing links and calendar etc

[enoch85]

Today we use standard templates that contains mostly text. It works, but isn't that pretty. What I suggest is to improve the design so that it looks more professinal. I've seen some great work by @Espina2 the past weeks, and I'd really like to see some suggestions regarding an improvment of the mails that are sent to users.

As an external user of Nextcloud (someone that uses Nextcloud sends a link to someone that doesn't) the first impression is the mail they get with either a calendar invitavion or a shared link. To attract more users to use Nextcloud and make a switch from Google or some other provider I belive it's crucial that our soulution looks better.

Google Calendar invitation:

Google Drive shared link:

Please fill this issue with more examples.

@jancborchardt What do you think?
@georgehrke Is this something that you control in the calendar app?

[Espina2]

Can you post the actual email?

[enoch85]

@Espina2 The sharing email looks like this:

My header is black in the Theme settings.

Hello there,

just wanted to inform you that Daniel Hansson shared links TURN.txt with you.
Show it!

The share will expire November 17, 2016.

Have a great day!

I'm having issues generating the Calendar share email.

[enoch85]

Ok, just found out that when sharing an event in the Calendar to a Gmail address, the email looks as it came from Google - same as in the picture.

Haven't tried with other mail suppliers or Mirosoft Exchange.

[Espina2]

I will take a look and see what I can make as soon as I can. :)

[georgehrke]

The invitation mails are handled in the day app, the email that includes the sharing link for public calendars is generated in the calendar app.

[MorrisJobke]

Related to #1326

https://mjml.io/

[eppfel]

I created some simple Drafts to start a discussion. I did not consider calendar invites, yet, but first things, first.
I opted for the colorful header, instead of just the logo (proposed by @jancborchardt in #1446 ) as a stronger brand indicator, because we use it in the web application, on nextcloud.com, on Android...
We definitely should use call-to-action buttons in every Mail.
And of course thumbnails would be nice. How realistic is this? At least filetype icons should be possible, right?

@MorrisJobke mjml looks really nice. But how would you integrate it in the development process? Or should we use it only to create responsible templates?

New User Template:

Theming:

[enoch85]

@eppfel Very nice! I like number 2 and 3 best. What do you think @jancborchardt?

[Espina2]

I prefer with round buttons, you should increase the margins on open on Nextcloud, and maybe switch to open in the browser, since nextcloud is a brand and if configure but another brand it doesnt make to much sense.

[eppfel]

Thx, for the feedback. The rounded buttons are definitively more distinctive. I'll incorporate your feedback and create drafts for different devices/screes-sizes based on 2 and 3. When we decided on the look, we can create designs for the various other templates, to see, if it works well, in all cases.

Just, realized: We didn't ping @nextcloud/designers, yet.

[enoch85]

This would be great to have in 11, if not too late?

[georgehrke]

The first beta is already out, so we are way beyond feature freeze.

[enoch85]

Well then, lett's try to make it into 11.0.1 :)

[eppfel]

@enoch85 http://semver.org/ 😉 That's not how it works and we are already at 11.0.5.
A complete redesign takes time, but as it's mostly decoupled of other functionality, so maybe a 11.5.0 😁 But that's not for me to decide.

[phsc84]

How can we be at 11.0.5 if 11.0.0 is not even released?
But I agree, according to semver.org, this would make it into 11.1.0 at the earliest.

[LukasReschke]

For the record: We don't use semver on the server. Since this is a new feature this will have to be in 12 => Early next year.

[enoch85]

Aaanyway, better late then never. :)

[MorrisJobke]

@MorrisJobke mjml looks really nice. But how would you integrate it in the development process? Or should we use it only to create responsible templates?

Only use it as inspiration or try to integrate it (see bower.json ;))

[enoch85]

Any news here? :)

[Espina2]

So this is I came for. I don't make illustrations or any other decorative stuff because they will depend on the brand that sends the email. So is very basic and straight forward.

After the feedback, I can code this.

@enoch85

[enoch85]

@Espina2 Very cool! And when the user changes the header color and logo + footer text with the Theme app it will change as well?

[Espina2]

Is the idea, but is not me who are going to make that. That kind of thing is do in the template engine. :)

[enoch85]

Aah ok. Well then, good to go from me. Thank you @Espina2 for taking care of this before 12 is released.

[MorrisJobke]

@nextcloud/designers Please feedback :)

[eppfel]

Like it a lot. Primary button better on the right?
And @Espina2 maybe try another use case like sharing to see how your design works.

Sadly the templates are scattered and not in a central place. I touched most templates in the following PR, which gives a good list: https://github.com/nextcloud/server/pull/1446/files

[enoch85]

Primary button better on the right?

I vote no on this one. We read from left to right, not right to left.

[Espina2]

@enoch85

Source code here (made with foundation emails) : https://cloud.paulomoura.com.pt/nextcloud-emails/

Live compiled version here: https://cloud.paulomoura.com.pt/nextcloud-emails/dist/new-member.html

I will make the other versions after @eppfel. But like how it's made it is very versatile, what is going to change is only the white part.

@eppfel I don't see any particular reason for the button be on the right. If is another type of button like for example "next" it should be on the right in any other case I don't see any problem in the principal button stay on the left, like enoch said we read from left to right. :)

Hope this helps and anyone can integrate this.

[enoch85]

@Espina2 Very nice Paulo!

[jancborchardt]

Good stuff Paulo! :) What do you think about making the background white too, so it’s just all white? The grey background with white box makes it feel like it’s a bit much content on the page while it’s just a simple 1-info mail.

[enoch85]

@Espina2 Could you make this a PR so we can get it into Nextcloud 12 before release?

[Espina2]

@enoch85
Like I said any of the other people here have to do that. I don't know the changes need in the core.

It must be another person.

[jancborchardt]

@LukasReschke and me can check it out :)

[enoch85]

@jancborchardt @LukasReschke Thank you!!

[Espina2]

@jancborchardt I prefer to have the grey and the white. It doesn't change anything if you remove the grey, but I think is more boring...

When you check it out, you can do whatever you want. :)

[enoch85]

I prefer to have the grey and the white.

Me too, it makes the box stand out.

[enoch85]

I heard Hackweek is going on. Would be great if this made it into 12 before release! please :)

[enoch85]

@LukasReschke and me can check it out :)

@jancborchardt Will this make it into 12?

[MorrisJobke]

PR for the welcome email: #4244

[enoch85]

Great work @MorrisJobke @Espina2! 🥇 What about the calendar invitation and sharing emails? :)

[Espina2]

The template should be the same, just some tweaks are needed it. (design)

[MorrisJobke]

Great work @MorrisJobke @Espina2! 🥇 What about the calendar invitation and sharing emails? :)

Keep calm. We all have limited time.

[enoch85]

@MorrisJobke Sorry, was just hoping to see this in 12.

[MorrisJobke]

Sharing emails: #4307

[enoch85]

First of all, I just tested master on localhost and I'm very happy with the result. Thank you @MorrisJobke @Espina2 and others!

One thing is still missing though, calendar invites. It currently looks like this in Thunderbird:

It would be great if that also was merged before 12 is release so that we can close this issue.

Thank you! :)

Btw, maybe should cc @georgehrke on this one?

[MorrisJobke]

One thing is still missing though, calendar invites. It currently looks like this in Thunderbird:

Yep - they need to be updated. Could you open an issue in the calendar repo? Because all emails of the server are updated. Activity is also updated. Only the calendar is missing.