Open Menu Menu

MvcMailer: Styling emails using the Razor View Engine

Comments 4 Post views 7006 Tags MVC Razor MvcMailer Edited 20/05/2011

I recently read and used Scott Hanselman's blog post about MvcMailer, a useful NuGet package that allows you to produce email using the Razor view engine and Mvc. While Scott's post was great for explaining how to install and use the package it didn't go into any detail about how to produce an email using views, and since email styling is notorious for being awkward I thought I'd have a go at filling in the gap.

Firstly, if your unfamiliar with NuGet or the Packet manager then head over to the NuGet home page.
I'm relatively new to NuGet myself since its quite a new concept but I'll try to explain it to you in lamens terms.
Essentially NuGet is a Scaffold for installing packages into your projects in the same way you would install a reference to a library, and in this case Scott Hanselman's blog post about MvcMailer is as good an example as any on how to use NuGet to install packages.
So at this point I'm going to assume that you've read Scott's post about installing and using MvcMailer and I'm going to talk about styling.
Styling emails can be notoriosly hard as different email clients display emails in different ways, much like different browsers displaying webpages, however emails are worse since there are so many different email clients both application based and web based.
The most common way to get around this is to build your email using tables and inline styles, both of which will make most web developers skin crawl.
MvcMailer goes some way to solving this problem by allowing you to create Razor Views for your emails the same way you would for your pages. The Razor view can be written in almost the same way as a normal webpage with a few minor adjustments.
Below is an example of the _layout.cshtml that I use for my emails.
<body>
    <div class="page">
        <div id="header" style="width:100%;-moz-border-radius: 15px;border-radius: 15px;background-color: white;">
            <img src="http://TheDevGame.com/Content/skyHead.png" alt="TheDevGame" style="width:100%;-moz-border-radius: 15px;border-radius: 15px;background-color: white;" />
        </div>
        <div id="main" style="padding:-1px;height:250px;width:100%;border: 1px solid #0EB6CE;-moz-border-radius: 15px;border-radius: 15px;background-color: AliceBlue;">
            <div style="margin-top:10px;margin-bottom:20px;text-align:center;">@DateTime.Now.ToString("dddd,MMMM dd, yyyy")div>
            <div style="margin-left: 20px">
                @RenderBody()
            </div>          
        </div>
        <div id="footer" style="width:100%;">
           <p>You recieved this email because this email address has been used to subscribed to The Dev Game, you can 
<a href="http://TheDevGame.com/Home/unsubscribe">Unsubscribe</a> at any time.</p>
        </div>
    </div>
</body>
As you can see it's pretty much just standard html, the major difference being the inclusion of inline styles. I have chosen not to use tables to maintain the layout of my email and so far in the email clients I've used I have no issues. 

By all mean though if you receive one of my emails and it looks awful, and by awful I mean out of alignment or overlapping this isn't an excuse to criticize my style choices, then take a screen shot, stick it in an email to me and let me know which client your using.

Comments

Gravatar Morgeh 17/05/2011 09:07:38
Apologies for the poor code block, my syntax highlighter is a work in progress.
Gravatar Matt 17/05/2011 10:38:41
Sick bled
Gravatar Rich 17/05/2011 10:42:12
Phat
Gravatar TehMasta 23/05/2011 09:55:03
Is nice
Your email address will be used to show your Gravatar icon
image/svg+xml =

Categories