SimpleApp - Email Notifications Templates

Last Modified 2014/01/12 by @ionutoroian - @webtunesTF team

Thank you for purchasing this item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Ionut

Overview — top

There are 3 main color styles, each with an alternative tint — A.

Balanced — 01-Blue and 02-Green
Dark — 03-DarkGray and 04-DarkTeal
Light — 05-LightYellow and 06-LightRed.

As a result, there are small variations from version-to-version to better accommodate their unique style. Focus on the one that best resembles your project’s color scheme — online preview.

Files included — B.

ready-to-use (inline embedded CSS)
platform versions — MailChimp, CampaignMonitor, Shopify, StampReady
source files
Photoshop mockups — *.psd files
Plain-text version available for ready-to-use and platforms versions.

You can choose from a set of visual styles, ranging from Compact, to Full, to Minimal. Round / Square versions available — C.

The round corner versions use a image-based fallback for clients that do not support media queries or CSS3, meaning square corners in Outlook 2000/02/03/07/10, Gmail and Yahoo! Mail. A version without the image-based fallback is also included — D.

Style Sheet — top

An internal style sheet ensures compatibility with Outlook 2000/02/03 and Outlook.com.

Use an external style sheet, while customizing, to get a better view of how changes get applied or to reduce the overall size of the template.

<head>

</head>

A global reset is used to normalized the style.

/* Global Reset */

body {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

body, p, h1, h2, h3, h4, h5, h6, img, table, td, #emailBody {

margin-top: 0;

margin-left: 0;

margin-right: 0;

margin-bottom: 0;

padding-top: 0;

padding-bottom: 0;

padding-left: 0;

padding-right: 0;

}

...

Define the default font type

/* Default Typography */

td, th, p, a, li, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust : none;

font-family: Arial, Helvetica, sans-serif;

}

...or use a custom font

/* Default Typography */

@import url(http://fonts.googleapis.com/css?family=Lato);

td, th, p, a, li, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust : none;

font-family: Lato, Arial, Helvetica, sans-serif;

}

You can read more about web fonts in emails here: https://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

Branding

.eHeaderLogo	image based logo
.eHeaderText	text based logo

Alignment

.alignCenter	align center
.alignLeft	align left
.alignRight	align right

Spacing

.space6	6×6 pixels
.space10	10×10 pixels
.space16	16×16 pixels
.space32	32×16 pixels

Padding

.pdTp0	padding-top = 0px
.pdTp32	padding-top = 32px
.pdBt16	padding-bottom = 32px
.pdRg16	padding-right = 16px
.pdLf16	padding-left = 16px
.pdLf0	padding-left = 0px

Width

.width40	width = 40px
.width54	width = 54px
.width64	width = 64px
.width80	width = 80px
.width84	width = 84px
.width116	width = 116px
.width246	width = 246px
.width248	width = 248px
.width132	width = 132px
.width184	width = 184px
.width312	width = 312px
.width380	width = 380px
.width412	width = 412px
.width448	width = 448px
.width458	width = 458px

Buttons

.optionsButton	header option button
.mainBtn	outstanding action button
.defaultBtn	default button
.lightBtn	light button
.secondaryBtn	secondary button
.subtleBtn	light text button

Invoice

.invoiceHead	table cell for invoice details eg. #####-invoice.html
.invoiceTable	table for invoice details eg. #####-subscription-payment.html
.invoiceTable2	simple invoice style eg. #####-invoice.html
.invoiceTable3	order invoice style eg. #####-order-confirmation.html

Desktop and Mobile Hide

.desktopHide	hides element on screens > 560px
.mobileHide	hides element on screens < 560px

Colors and Backgrounds

The colors are grouped in 3 sections to make editing fast — Text, Background and Borders.

/* Text Colors */

a, a span, .tableBtn a span, .priceColumn td a span {

color: #235daa;

}

...

/* Background Colors */

.topCorners td,

.eHeader,

.btnLfTp,

.btnLfBt,

.btnRgTp,

.btnRgBt,

.defaultBtn td,

.priceColumn.recommend th {

background-color: #235daa;

}

…

/* Borders */

.bottomLine,

.invoiceTable2 th,

.eTotal {

border-bottom: 1px solid #ebebeb;

}

...

There is a border-top property in the responsive part for invoices and order listings.

table[class=invoiceTable2] td[class=width312] {

border-top: 1px solid #ebebeb !important;

padding-top: 16px !important;

}

Some versions might not include comment guides, search for a, a span to find the start of the color section.

Note: The CampaignMonitor version uses a special class for the recommended pricing column (class=”priceColumnRec”).

HTML — top

Source files do not have any inline embedded CSS, and should be used for building layouts. Keep this version clean for easy editing.

Place a short summary of your email in the emailSummary section — some email clients support preview areas (eg. Gmail). The content will not show up in the layout.

The main content areas are eHeader, eBody, highlight, blank and eFooter. Use these as a starting point when editing content-heavy templates.

The Full versions use additional cells to ensure the layout stretches full width.

Related classes

.eHeader	.eBody_stretch
.highlight	.highlight_stretch
.eBody	.eBody_stretch
.blank	.eBody_stretch
.eFooter	.eFooter_stretch

Rounded corners image-based fallback — top

This fallback is used for clients that do not support media queries or CSS3: Outlook 2000/02/03/07/10, Gmail and Yahoo! Mail.

A 3-by-3 cell grid is used to simulate a button. PNG images (with alpha transparency) hide the excess background color.

.btnLfTp

mainBtn_lftp.png

.emptyCell

.btnRgTp

mainBtn_rgtp.png

.emptyCell

.btnMain

.emptyCell

.btnLfBt

mainBtn_lfbt.png

.emptyCell

.btnRgTp

mainBtn_rgbt.png

* also used for message bubbles.

If there is a big color difference between the eBody’s and highlight’s background, use 2 sets of images to match the backgrounds (DarkGray/ DarkTeal use this technique).

Other corners

.topCorners table td

header top corners

.crn_lftp — header_left.png
.crn_rgtp — header_right.png

.bottomCorners table td

body bottom corners

.crn_lfbt — body_lfbt.png
.crn_rgbt — body_rgbt.png

.optionsButton

header responsive button

.btnLfTp — opBtn_lftp.png

.btnRgTp — opBtn_rgtp.png

.btnLfBt — opBtn_lfbt.png

.btnRgTp — opBtn_rgbt.png

.tag

content section label

.btnLfTp — tag_lftp.png

.btnRgTp — tag_rgtp.png

.btnLfBt — tag_lfbt.png
.btnRgTp — tag_rgbt.png

Header — top

...

<tbody>

<tr>

<td class="eHeaderOptions">Options Button</td>

</tr>

</tbody>

</table>

</td>

...

Switch to a text-based logo by changing the class to eHeaderText. If the options link is not required, remove the eHeaderOptions cell.

Highlight — top

...

<h1><span>Heading 1</span></h1>

<p>Single line paragraph.</p>

</td>

...

The pdBt16 class can be used for extra padding when the heading is not followed by a paragraph. (####-solo-title.html)

Images placed inside bannerlink get resized according to content width and style.

...

</div>

...

Content — top

...

...

</td>

...

eBody holds the main content elements. Use alignment and padding classes to customize this section.

Note: Each element in the CampaignMonitor and Mailchimp version is enclosed in a eBody cell for better compatibility with the online editor.

Invoice and Order — top

The blank class has no padding and it is mainly used for the invoice/order table. It can also be use to display a full-width image banner.

...

</div>

</td>

...

Both tables use the same basic structure, with an extra row added for orders — in case product titles are long.

Setting widths to table cells is important to keep compatibility on email clients. The overall width should be 544 pixel.

When updating column titles, mobile labels also need to be replaced — this ensures data structure is maintained on smaller screens.

...

<td class="width84 alignRight"><span class="desktopHide">Quantity: </span>1</td>

...

Subtotal row

...

<span class="desktopHide">Subtotal: </span><span class="amount">$1,400</span>

<br>

<span class="desktopHide">Deposit: </span> <span class="amount">$400</span>

</td>

...

Use the prodImg class for product thumb cells — image is 80×80 pixels.

Pricing — top

The pricing columns are very picky when it comes to widths and heights. Use a width of 544 pixel as a base when setting up columns.

<tbody>

<tr>

<td class="tableOption">Option's table</td>

<td class="priceColumn">Column — 96 pixels</td>

<td class="priceColumn recommend">Column — 96 pixels</td>

</tr>

</tbody>

</table>

Note: The CampaignMonitor version uses a special class for the recommended pricing column (class=”priceColumnRec”).

Option titles should fit on a single line — mobiles labels excluded.

...

<td>

<span class="desktopHide">2.500 subscribers</span>

</td>

...

Moving CSS inline — top

Use Mailchimp’s CSS Inliner Tool to move the style sheet inline. Using a different online tool might generate other results.

Copy/paste the code into the inliner tool and hit Convert.

It is always good to run a quick test before you send anything out. Even if you do not use an online service, use your regular client and check for any issues.

Note: MailChimp and CampaignMonitor versions do not require any conversion.

Shopify: Refund Notification quirk — top

The inliner tool removes bits of code from the conditional statement. Update the code below  to match the one below:

...

</tr>

{% else %}

</p>

</td>

</tr>

{% endif %}

<tr>

...

The snippet for the Full style has an extra eBody_stretch cell. This needs to be replace with the sample generated by the inline tool.

...

</tr>

{% else %}

</p>

</td>

<td class="eBody_stretch"> </td> // replace with sample

</tr>

{% endif %}

<tr>

...

Ready-to-use version — top

The ready-to-use inline version only requires a few updates: images need to be hosted online and paths need to be updated accordingly.

example

Run a quick test once you have finished editing the code.

MailChimp — top

MailChimp version is optimized in 4 file types: Content, Invoice, Order and Pricing.

To upload a template, go to the Templates section of your MailChimp account, click Create Template and then select Import Zip. Enter a template name, select the zip file you want to use and click Upload. The template will show up in the Saved Templates section.

When updating backgrounds on versions that use the image-based fallback, check if any images need to be replaced. For example: after changing the body color, header_left.png, header_right.png, body_lfbt.png, body_rgbt.png need to be updated.

Import a ZIP File to Create a Template
http://kb.mailchimp.com/templates/code/import-a-zip-file-to-create-a-template

Content — top

default	title with tagline
title only	you guessed it :)
default with icon	title with 64×64 pixels icon
title with profile	title with account details, thumb is 64×64 pixels
small banner	title, tagline and image 512×194 pixels
image banner	image 512×194 pixels
summary with button	simple invoice summary with main button
invoice header	invoice summary with download icon 58×48 pixels
small banner	title, tagline, default button and 116×116 pixels thumb
content title	basic content title
content	default paragraph
content center	default paragraph aligned center
content with left image	section label, title and paragraph with the 116×116 pixels thumb aligned left
content with right image	section label, title and paragraph with the 116×116 pixels thumb aligned right
message left	message bubble with sender information on the left
message right	message bubble with sender information on the right
graphic with legend	visual chart, 132×132 pixels thumb
two cols lists	two stats list
quote	special colored text with a 4px border on the left side
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
secondary & main buttons right	secondary & main buttons aligned right
secondary & main buttons left	secondary & main buttons aligned left

Invoice — top

Invoice Head

invoice	two column header; client & payment options
invoice 2	three column header; client, payment options & total
content title	content title
content	default paragraph
content center	default paragraph centered
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
default & main buttons right	default & main buttons aligned right

Invoice Body

row	three column row; summary, quantity & subtotal
row (vat)	three column row; summary, vat & subtotal
subtotal	subtotal row
total	total row
head	table head; summary, quantity & subtotal
head (vat)	table head; summary, vat & subtotal

Invoice Footer

content	default paragraph
content center	default paragraph centered
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
default & main buttons right	default & main buttons aligned right

Order — top

Order Head

invoice	two column header; client & payment options
invoice 2	three column header; client, payment options & total
content title	content title
content	default paragraph
content center	default paragraph centered
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
default & main buttons right	default & main buttons aligned right

Order Body

row	three column row; item, price, qty & subtotal
row (vat)	three column row; item, price, vat & subtotal
row title	one column title
row title (vat)	one column title (for vat version)
subtotal	subtotal row
subtotal (vat)	subtotal row (for vat version)
total	total row
total (vat)	total row (for vat version)
head	table head; item, price, qty & subtotal
head (vat)	table head; item, price, vat & subtotal

Order Footer

content	default paragraph
content center	default paragraph centered
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
default & main buttons right	default & main buttons aligned right

Pricing — top

Pricing Head

default	title with tagline
title only	you guessed it :)
summary with button	simple invoice summary with main button
content	default paragraph
content center	default paragraph aligned center
main button center	main button aligned centered
main button	main button aligned left
default button center	default button aligned centered
default button	default button aligned left
light button center	light button aligned centered
light button	light button aligned left
subtle button center	subtle button aligned centered
subtle button	subtle button aligned left
default & main buttons right	default & main buttons aligned right

Pricing Options

blank	spacing
option	row option title

Pricing Columns

header	column head; name, price & type
option	tick with option title (desktopHide class)
blank	empty row
link	row with weblink
text	row with text

CampaignMonitor — top

CampaignMonitor version is optimized in 4 files types: Content, Invoice, Order and Pricing.

To upload a template, go to the Templates section of your CampaignMonitor account then click the Import tab. Enter a template name, select the html file you want to upload, select the (images) zip file and click Add template. The template will show up in the Saved Templates section.

How do I import my own email template?
http://help.campaignmonitor.com/topic.aspx?t=583

Content — top

Default	title with tagline
Title Only	you guessed it :)
Default with Icon	title with 64×64 pixels icon
Title with Profile	title with account details, thumb is 64×64 pixels
Default with Image	title, tagline and image 512×194 pixels
Image Banner	image 512×194 pixels
Summary with Button	simple invoice summary with main button
Invoice Header	invoice summary with download icon 58×48 pixels
Small Banner	title, tagline, default button and 116×116 pixels thumb
Content Title	basic content title
Content	default paragraph
Content Center	default paragraph aligned center
Content with Left Image	section label, title and paragraph with the 116×116 pixels thumb aligned left
Content with Right Image	section label, title and paragraph with the 116×116 pixels thumb aligned right
Message Left	message bubble with sender information on the left
Message Right	message bubble with sender information on the right
Graphic with Legend	visual chart, 132×132 pixels thumb
Two Cols Lists	two stats list
Quote	special colored text with a 4px border on the left side
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Secondary & Main Buttons Right	secondary & main buttons aligned right
Secondary & Main Buttons Left	secondary & main buttons aligned left

Invoice — top

Invoice Head

Invoice	two column header; client & payment options
Invoice 2	three column header; client, payment options & total
Content Title	basic content title
Content	default paragraph
Content Center	default paragraph aligned center
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Default & Main Buttons Right	default & main buttons aligned right

Invoice Body

Row	three column row; summary, quantity & subtotal
Row (vat)	three column row; summary, vat & subtotal
Subtotal	subtotal row
Total	total row
Head	table head; summary, quantity & subtotal
Head (vat)	table head; summary, vat & subtotal

Invoice Footer

Content	default paragraph
Content Center	default paragraph aligned center
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Default & Main Buttons Right	default & main buttons aligned right

Order — top

Order Head

Invoice	two column header; client & payment options
Invoice 2	three column header; client, payment options & total
Content Title	basic content title
Content	default paragraph
Content Center	default paragraph aligned center
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Default & Main Buttons Right	default & main buttons aligned right

Order Body

Row	three column row; item, price, qty & subtotal
Row (vat)	three column row; item, price, vat & subtotal
Row Title	one column title
Row Title (vat)	one column title (for vat version)
Subtotal	subtotal row
Subtotal (vat)	subtotal row (for vat version)
Total	total row
Total (vat)	total row (for vat version)
Head	table head; item, price, qty & subtotal
Head (vat)	table head; item, price, vat & subtotal

Order Footer

Content	default paragraph
Content Center	default paragraph aligned center
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Default & Main Buttons Right	default & main buttons aligned right

Pricing — top

Pricing Head

Default	title with tagline
Title Only	you guessed it :)
Summary With Button	simple invoice summary with main button
Content	default paragraph
Content Center	default paragraph aligned center
Main Button Center	main button aligned centered
Main Button	main button aligned left
Default Button Center	default button aligned centered
Default Button	default button aligned left
Light Button Center	light button aligned centered
Light Button	light button aligned left
Subtle Button Center	subtle button aligned centered
Subtle Button	subtle button aligned left
Default & Main Buttons Right	default & main buttons aligned right

Pricing Table

Due to the nature of CampaignMonitor’s editor the pricing table does not have any add/remove options. For structural changes the html code needs to be updated.

— related article.

Shopify — top

In the Shopify Admin go to Settings > Notifications. Click the template you want to update, select the HTML email tab, copy/paste the related code and click Save.

More about Shopify notifications

http://docs.shopify.com/manual/settings/notifications

Rounded corners image-based fallback

For versions that use this fallback the images need to be uploaded first.

Go to Admin > Files and click Upload Files. Select the contents of the images folder and click Ok. Once uploaded, open the html files and replace the image paths with the URL provided by the Shopify file manager.

example

StampReady — top

StampReady version is optimized in 4 file types: Content, Invoice, Order and Pricing.

To upload a template, go to Campaigns > New Campaign and click Import then select Zip File.

If you want to learn more about StampReady and importing templates check out http://www.stampready.net/faq/.

Note:

This version does not use a image-based fallback for rounded corners which results in square corners on Outlook 2000/02/03/07/10/13 and Yahoo Mail.
when changing the Content Background, the two images used for the message arrow need to be updated (bubble_left.png, bubble_right.png - Custom Colors for SimpleApp Email Notification Templates )
when changing the Separator color on the Invoice template also update the following CSS code:
table[class=invoiceTable2] td[class=width312] {
border-top: 1px solid #ebebeb !important;
padding-top: 16px !important;
}

Content — top

Header image logo	header section with image-based logo
Header text logo	header section with text-based logo
Footer	footer section
Default	title with tagline
Title only	you guessed it :)
Default with icon	title with 64×64 pixels icon
Title with profile	title with account details, thumb is 64×64 pixels
Small banner	title, tagline and image 512×194 pixels
Image banner	image 512×194 pixels
Summary with button	simple invoice summary with main button
Invoice header	invoice summary with download icon 58×48 pixels
Small banner	title, tagline, default button and 116×116 pixels thumb
Content title	basic content title
Content	default paragraph
Content center	default paragraph aligned center
Content with left image	section label, title and paragraph with the 116×116 pixels thumb aligned left
Content with right image	section label, title and paragraph with the 116×116 pixels thumb aligned right
Message left	message bubble with sender information on the left
Message right	message bubble with sender information on the right
Graphic with legend	visual chart, 132×132 pixels thumb
Two cols lists	two stats list
Quote	special colored text with a 4px border on the left side
Main button center	main button aligned centered
Main button	main button aligned left
Default button center	default button aligned centered
Default button	default button aligned left
Light button center	light button aligned centered
Light button	light button aligned left
Subtle button center	subtle button aligned centered
Subtle button	subtle button aligned left
Secondary & main buttons right	secondary & main buttons aligned right
Secondary & main buttons left	secondary & main buttons aligned left

Invoice — top

Header image logo	header section with image-based logo
Header text logo	header section with text-based logo
Footer	footer section
Invoice	two column header; client & payment options
Invoice 2	three column header; client, payment options & total
Head	table head; summary, quantity & subtotal
Head VAT	table head; summary, vat & subtotal
Row	three column row; summary, quantity & subtotal
Row VAT	three column row; summary, vat & subtotal
Subtotal	subtotal row
Total	total row
Content title	content title
Content	default paragraph
Content center	default paragraph centered
Main button center	main button aligned centered
Main button	main button aligned left
Default button center	default button aligned centered
Default button	default button aligned left
Light button center	light button aligned centered
Light button	light button aligned left
Subtle button center	subtle button aligned centered
Subtle button	subtle button aligned left
Default & main buttons right	default & main buttons aligned right

Order — top

Header image logo	header section with image-based logo
Header text logo	header section with text-based logo
Footer	footer section
Invoice	two column header; client & payment options
Invoice 2	three column header; client, payment options & total
Head	table head; summary, quantity & subtotal
Head VAT	table head; summary, vat & subtotal
Row title	one column title
Row	three column row; item, price, qty & subtotal
Row VAT	three column row; item, price, vat & subtotal
Subtotal	subtotal row
Subtotal VAT	subtotal row (for vat version)
Total	total row
Content title	content title
Content	default paragraph
Content center	default paragraph centered
Main button center	main button aligned centered
Main button	main button aligned left
Default button center	default button aligned centered
Default button	default button aligned left
Light button center	light button aligned centered
Light button	light button aligned left
Subtle button center	subtle button aligned centered
Subtle button	subtle button aligned left
Default & main buttons right	default & main buttons aligned right

Pricing — top

Header image logo	header section with image-based logo
Header text logo	header section with text-based logo
Footer	footer section
Default	title with tagline
Title only	you guessed it :)
Summary with button	simple invoice summary with main button
Content	default paragraph
Content center	default paragraph aligned center
Main button center	main button aligned centered
Main button	main button aligned left
Default button center	default button aligned centered
Default button	default button aligned left
Light button center	light button aligned centered
Light button	light button aligned left
Subtle button center	subtle button aligned centered
Subtle button	subtle button aligned left
Pricing table	pricing table

Photoshop mockups— top

There are 14 mockups in the PSDs folder — files include slices. You can use these to showcase a color scheme or to update existing image assets — slices name accordingly.

Individual elements with alpha transparency can be found in the Assets folder in PSD and PNG format.