Notification Template Examples

Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
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.

Comments

  • Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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_MunroDarryl_Munro Customer IT Monkey ✭

    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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭
    edited May 2017

    Here we go..

  • Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    @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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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_HydeTom_Hyde Customer Advanced IT Monkey ✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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_HydeTom_Hyde Customer Advanced IT Monkey ✭✭✭
    @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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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_HydeTom_Hyde Customer Advanced IT Monkey ✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    Great, thanks a lot @Tom_Hyde!
  • Stuart_SneddonStuart_Sneddon Customer IT Monkey ✭
    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_NordqvistPeter_Nordqvist Customer Adept IT Monkey ✭✭
    @Konstantin_Slavin-Bo Relly like your template, could you please share your html code for that?
    Thanks
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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_McKennaBrad_McKenna Customer Advanced IT Monkey ✭✭✭

    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_GoossensGerhard_Goossens Customer Advanced IT Monkey ✭✭✭
    Here is what I did for our POC








  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    @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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    @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_BeasleyJohn_Beasley Customer IT Monkey ✭
    Konstantin_Slavin-Bo I love your template... Is there anyway to get the html for it?
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
Sign In or Register to comment.