Notification Template Examples

Brett_Moffett

I often get asked when I am on consulting projects what other customers do with their notification templates and what they look like so I thought I'd start a discussion here and ask people to post pictures (and the associated HTML if possible) for their Notification templates so we can all share in what it is that others are doing.

There is some argument for colourful pictures and fancy formatting, but there is equal argument for simplicity and basic text. By sharing all of our solutions we can see what others are doing and the thought process behind them.

Please share away.

Brett_Moffett

Here is the Cireson template to kick things off.
As you can see, lots of colour and graphics in this one. (IT Monkey loves the attention)

Key factors in what we were trying to achieve here was how to get in touch with us if you needed to (Portal and phone support hours etc.) and key links to the places you can get more info (Portal, Community, Twitter, etc.)

Darryl_Munro

I have been working on this over the last few days after being inspired by the Cireson notification I received to a Incident I had raised with them. Basically I am creating multiple word documents as templates and making them look a whole lot better than they do currently. The following is a Change Request creation notification and I have a series of others I am working through which will look similar and just made appropriate for the work item they are supporting.

I have used the solution at from here to help with my notification URLS and that has made life very easy.

Brett_Moffett

Here is another one from a customer.
This one is very simple and gets the message across. Simple for the customer to read and get the core detail they need.


Super simple logo in the top right corner and the branding colour of black and white made this a super simple and clean design.

Adrian_Paech

Here we go..

Brett_Moffett

I like the layout @Adrian_Paech
A great way to show all the basic information needed (On the right) and all the needed details on the left.

Super easy to read and all the information that anyone needs.

Konstantin_Slavin-Bo

Here are some of ours:

Created



Request user input



Resolved (w/ survey)



Order confirmation



PS: It's a huge pain in the butt to make these look good (or just somewhat proper) in Outlook!

Our "internal" notifications for analysts when WIs are assigned to them or their support group is a lot more simple, without any graphics:

Brett_Moffett

@Konstantin_Slavin-Bo
I love the way you have the progress in the little icons at the top of the template.
Gives it a real purpose and feel for where the request or incident is at.
The "How To" style guides at the bottom of the page is also a great way to disseminate information fast to those who need it the most.

Great Example!!

Konstantin_Slavin-Bo

@Brett_Moffett
Thanks! We were through some iterations with the progress display, where this one was a close contestant:


But in that case, the progress-bar is an image, so we opted for the table-styled progress to accommodate responsiveness.

Yeah, the "How To" at the bottom is nice, but it contains a but too much text for my taste. But the information is almost to important to leave out, so it's staying there for now. At least until I can do some A/B testing with and without it.

Our old templates where designed around a "postcard"-design, where the border-color changed based on what kinda mail it was (created: blue, request input: red, resolved: green), e.g.:

Brian_Wiest

We kept ours a little basic.
With a good number of personal using BYOD and IOS mobile devices and the primary email client being Outlook. We wanted a picture-less templates as most of these programs strip the out on reply/forwards. Plus depending on your configurations the exchange connector could bring the pictures back in as attachments on replies.

Brett_Moffett

Thanks @Brian_Wiest. I totally understand the idea of not using a logo as it can be a pain getting the image to work as either Base64 or attach it via a CDN location that is available both in the corporate network and out.

Another customer I have did a similar approach with no logos for the same reason and used colour to signify the different types (Closed and Open)

Here is their template:

Tom_Hyde

Here are some of ours:

Approval Rejected:


Incident Logged:


Approval:



Our analysts use Tier Watcher for when tickets have been logged/assigned and they also receive similar notifications to above when a comment has been added to their assigned WI, likewise do the End Users.

@Konstantin_Slavin-Bo - Really like what you have done with your notification templates!

Konstantin_Slavin-Bo

@Tom_Hyde - Thanks, I really like yours too. I especially like the bootstrap buttons you're using! Are your users using Outlook as their primary mail client? If so, how do you make them look so good in Outlook? If not - well, then you're lucky!

Also, how are you handling review activities? Do you have some js to invoke the Approve and Reject buttons in the portalen, or are you just doing a mailto: link?

Tom_Hyde

@Konstantin_Slavin-Bo Thanks! Yeah all of our users use Outlook 2016 as their primary mail client and to answer your question of how do I make them look so good?... no idea, they just went in okay!

Review activities are just set up as a mailto: link with the tags [approved] [rejected], had a thought about going down the js route but the mailto works well for us so no need!

Konstantin_Slavin-Bo

Okay, so you are not actually using the bootstrap lib, but "just" made them look similar. Would you mind sharing your HTML, at least for the buttons?

Tom_Hyde

Here is the html for the buttons I use @Konstantin_Slavin-Bo

<a href="http://yoursite.com" target="_blank" style="font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #7E95BE; border-top: 12px solid #cb87f2; border-bottom: 12px solid #cb87f2; border-right: 18px solid #cb87f2; border-left: 18px solid #cb87f2; display: inline-block; border-color: #7E95BE;">
   buttontext</a>

Konstantin_Slavin-Bo

Great, thanks a lot @Tom_Hyde!

Stuart_Sneddon

Some very nice examples here 

The templates we have are quite simple, some text and a table with the item details, maybe a portal link or mailto button. They were made some years ago and haven't really changed. I think they could do with some finessing, the table is maybe a little clunky looking, but certainly obvious when it hits your inbox It's also based around the corporate colour palette. All the templates follow this basic layout Text + table of details.

IR Created:



IR Resolved


SR Created:

Peter_Nordqvist

@Konstantin_Slavin-Bo Relly like your template, could you please share your html code for that?
Thanks

Konstantin_Slavin-Bo

@Peter_Nordqvist
Thanks! I've attached the HTML along with the images. The HTML contains some Outlook-specific tweaks, which may or may not mess a bit with the design in a proper HTML viewer. The images are not encoded inside the HTML, as that would add them as attachments to the mail. Rather, we are hosting them on a on-site server, which is added to the Trusted Sites zone, such that Outlook will show them as default.

@Tom_Hyde - I tried out the code you shared, but unfortunately it doesn't look as good in Outlook as in your screenshots. They're from a browser, right? In Outlook it just ends up looking the same as the buttons in my own templates. But thanks a lot for sharing!

Alex_Marsh

Our biggest issue with customer templates has been the switch to using 365 where users now have a combination of Outlook and webmail so the templates need to look similar in both. On top of that, maintaining description formatting in templates have proved to also be a bit of an issue (long urls are the enemy of the pre tag and fixed width in outlook!) and having something which renders across multiple resolutions does make creating notifications challenging but we're broadly pleased with the results we've had.

Brett_Moffett

Thanks for sharing @Alex_Marsh.
I like the format of having the information split with the horizontal lines. Maybe it's just the way my eyes track on a page when reading but it makes it very clear and easy to read.

Can i assume the colour border changes when an Incident is closed or opened?

Brad_McKenna

This thread has given me some great ideas to update/improve our layout and get back into getting re-acclimated with HTML/CSS (following this nifty old walk-through https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 )

Like many, taking bits and pieces from examples here for ideas on what I am creating. Currently I am working with an example similar to what Tom_Hyde provided, once I figure out how to essentially get the Planning Tab of a CR in my Review Activity, I will be set.

Thanks for all for the inspiration and motivation to spend the extra time to get back to this nifty stuff.

Gerhard_Goossens

Here is what I did for our POC

Alex_Marsh

@Brett_Moffett no it doesn't but some form of colour coding based on status is a good idea. It just so happened that the green is colour scheme of the customer in question

Brett_Moffett

@Gerhard_Goossens I like it.
Nice and clean and easy to read. The clean logo all on white makes it crisp and easy on the eyes.

Keep these examples coming.
I think this is a great place for people to get ideas and to refine the quality of communication back and forth to end users.

John_Beasley

Konstantin_Slavin-Bo I love your template... Is there anyway to get the html for it?

Konstantin_Slavin-Bo

@John_Beasley

Sure, here you go.

Darren_OLeary

Is there a method for including a standardised 'header' and 'footer' into the body of an email template?

I want to have a single html file of each that is automatically added to any email template notification so if any details change in either, then I only have to make a single change rather than having to make the same change to multiple templates.

saju

@Tom_Hyde

@Tom_Hyde Really loved your notification template. so elegant. Would you mind sharing the HTML template for the same?

Vik

Any of you great people care to share some of your email templates, please?