Create delightful and focused HTML / CSS mail templates

[sumeetpareek]

Our new and inhouse mass email service allows for creating and sending rich HTML mails with plain text fallbacks. We next need to create an HTML template where we have a delightful and focused design that has all the common elements of our newsletters going out, but can be reused (by just replacing the content part) to send out fresh newsletters.

Given below is an email template wireframe put together after studying various newsletter forms.

Refer the below wireframe image and the numbered items for details -

1. This is the mail body, the top border of this could be dashed line with saffron / white / green colors in repeat. Sort of how blue / white / red are used here http://sendy.co/. We should let go of such 'border if it a distraction and/or ugly at the top. The background of entire mail is white.
2. The logo (AAP image with broom to the right and Aam Aadmi Party written on bottom -- or -- just AAP image with broom to the right) appears here. There should be 30-40px margin between container in (1) and all the content including this logo. This is the ONLY image in the mail, everything else is just CSS styled content.
3. This is the donate button (an <a> tag with campaign coded donation link) that is sharp edged, flat and soft red colored (matte look) button, with text written in white, and small caps.
4. This is text surrounding the donate button in two lines. The first line goes alongside the donate button and answers 'why should you donate?' by a short phrase such as - 'for corruption free india' or something better. The second line below that should be a link to the donate page on the website where we have complete transparent reports of our donations.
5. This is where the mail body goes.
6. This is again the donate button and message from (3,4) above that goes floating to the right within the mail content. Instead of 'donate' this could be linked to other pages where we would like to draw users attention like - join us, volunteer, etc.
7. This is the footer region. May be a slightly greyer shade than the mail body.
8. The separator between mail body and footer. This could either be just automatic (because of the background color difference. OR we could try the saffron / white / green image border here.
9. This is first of the three areas of the footer. It again has the donate button from (3, 4) above. This should have nothing else.
10. These are other footer regions and they can have social links, office address or other things.
11. This is the post footer. This has a greyed out 'unsubscribe' link (a MUST have in all mails) and the 'view the webversion' link (optional based on whether or not we want to make the web version public).