Readme

BlauMail
Responsive Newsletter
-
http://oroian.ro/responsive-newsletter/

Released 2015/11/11 by
@ionutoroian
BlauMail is a responsive email template for building responsive newsletters.
● Social icons -
dustn.tv
● Photos -
Olu Eletu
,
Jeff Sheldon
,
Nicola Perantoni
,
Octavio Fossatti
,
Negative Space
,
Glen Noble
,
Andrew Illarionov
Contents
Contents
Features
Compatibility
Support
Get Started
Web-font
MailChimp Version
CampaignMonitor Version
StampReady Version
Resources
Features
—
top
● 7 pre-built transactional templates

● 5 base colours to build upon (each with 3 flavors)
● designed with graceful degradation in mind
● compatible with 20+ desktop, mobile and web email clients
● includes MailChimp version
● includes StampReady version
● includes CampaignMinitor version
Compatibility
—
top
Desktop:
Apple Mail 7 OS X 10.9, Apple Mail 8 OS X 10.10, Outlook 2000/02/03/07/10/13
Windows 7, Outlook 2011/16 OS X 10.10, Thunderbird 38 Windows 7.
Mobile
: Android 4.4, Gmail App Android, iPhone 5s iOS 7 / iOS 8, iPhone 6 iOS 8, iPhone 6
Plus iOS 8, iPhone 6s iOS 9, iPhone 6s Plus iOS 9, iPad Retina - iOS 9, iPad Mini iOS 9.
Web:
AOL Mail, Gmail, Google Apps, Office 365, Outlook.com, Yahoo! Mail (tested on Explorer,
Firefox and Chrome).
Background image not supported in Outlook 2007/10/2013 (Windows 7) and Gmail App
(Android); Round corners not support in Outlook 2000/02/03/07/10/13; Limited web-font
support.
Support
—
top
If you have any questions feel free to email me via my user page contact form
here
(response
time can be up to 2 business days).
Get Started
—
top
If you plan to use BlauMail right out of the box, use the files from the
3-HTML
folder. These
files are already prepared for delivery, with all the styles nitely placed inline.
Just upload the image assets to your server and link them up in the templates.
<a href="#"><img src="

http://yourdomain/images/email_logo.png
" width="164"
height="20" alt=""/></a>
Use the
email_summary
section at the start of each file to write a short summary of your
email. This doesn’t show up in the template, but it’s a good feature for clients that support
preview areas (e.g. Gmail).
<div class="
email_summary
">This is to confirm your recent order.</div>
For custom work start with the files from the

2-Source
folder. Use the external linked
style.css
file to quickly preview updates across templates.
Once done, remove the external link and embed the stylesheet internally (copy/paste).
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"
type="text/css">
<style type="text/css">
</style>
</head>
Run the code through the

Mailchimp’s CSS Inliner Tool
to get the styles inline. Your template is
now ready to be sent out! :)
Web-font
—
top
Web-fonts are embedded with an external link to Google Fonts,
<link href="http://fonts.googleapis.com/css?family=
Droid+Serif:400,700
" rel="stylesheet"
type="text/css">
and defined in the

Responsive
section.
/* Responsive */
@media screen {
h1, h2, h3, h4, h5, h6, p, a, .tagline_cell {
font-family: "
Droid Sans
", Helvetica, Arial, sans-serif !important; /* web font */
}
MailChimp Version
—
top
You can find the

ZIP
file in the
4-MailChimp
folder.
To upload a template, go to your MailChimp Admin, then click

Templates
and
Create
Template.
Select
Code Your Own
and
Import zip
. Enter a template name, select
blaumail_layout.zip
and click
Upload
.
Use the
Edit design
section to update the colors and the jumbotron image (you can only
update the colors at this point, to add section create a campaign with this template). Click
Save and Exit
, the template will show up in the
Saved Templates
section.
More about importing zip files to MailChimp

http://kb.mailchimp.com/templates/code/import-a-zip-file-to-create-a-template
Content Block Name Description
jumbotron Jumbotron with background + content
jumbotron_native Jumbotron with primary color background + content
jumbotron_small two column jumbotron
jumbotron_native_small two column jumbotron with primary color background
jumbotron_button jumbotron with button
jumbotron_button_native native jumbotron with button
content content block
content_article left aligned image + content
content_article_alt right aligned image + content

two_columns two content block ( image + content )
two_columns_products two product items
two_columns_pricing two pricing packages
content_image responsive image
content_image_two_columns two responsive image blocks
order_row left aligned product image + content
order_total order subtotal + order total
CampaignMonitor Version
—
top
You can find the images

ZIP
and
.html
file in the
5-CampaignMonitor
folder.
To upload a template, go to the

Templates
section of your CampaignMonitor account then
click the
Import
tab. Enter a template name, select
blaumail_layout.html
as the html file,
images.zip
for the assets 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

StampReady Version
—
top
You can find the

ZIP
file in the
6-StampReady
folder.
To upload a template, go to the

Campaigns > New Campaign,
click on
Import Template
and
select
ZIP File
. Upload
BlauMail.zip
.
StampReady FAQs
http://www.stampready.net/faq/
header logo + subtitle
footer social links + company information

Resources
The Ultimate Guide to CSS

https://www.campaignmonitor.com/css/
Coding your Emails

https://www.campaignmonitor.com/guides/coding/
Email Client Market Share

http://emailclientmarketshare.com/

Readme

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Readme

Uploaded by

Copyright:

Available Formats

BlauMail

BlauMail is a responsive email template for building responsive newsletters.

● 7 pre-built transactional templates

<a href="#"><img src="​

For custom work start with the files from the ​

Run the code through the ​

Web-fonts are embedded with an external link to Google Fonts,

and defined in the ​

h1, h2, h3, h4, h5, h6, p, a, .tagline_cell {

You can find the ​

To upload a template, go to your MailChimp Admin, then click ​

More about importing zip files to MailChimp

Content Block Name Description

jumbotron Jumbotron with background + content

jumbotron_native Jumbotron with primary color background + content

jumbotron_small two column jumbotron

jumbotron_native_small two column jumbotron with primary color background

jumbotron_button jumbotron with button

jumbotron_button_native native jumbotron with button

content content block

content_article left aligned image + content

content_article_alt right aligned image + content

two_columns_products two product items

two_columns_pricing two pricing packages

content_image responsive image

content_image_two_columns two responsive image blocks

order_row left aligned product image + content

order_total order subtotal + order total

You can find the images ​

To upload a template, go to the ​

The template will show up in the ​

How do I import my own email template?

Content Block Name Description

jumbotron Jumbotron with background + content

jumbotron_native Jumbotron with primary color background + content

jumbotron_small two column jumbotron

jumbotron_button jumbotron with button

jumbotron_button_native native jumbotron with button

content content block

content_article left aligned image + content

content_article_alt right aligned image + content

two_columns two content block ( image + content )

two_columns_products two product items

two_columns_pricing two pricing packages

content_image responsive image

content_image_two_columns two responsive image blocks

order_row left aligned product image + content

order_total order subtotal + order total

You can find the ​

To upload a template, go to the ​

header logo + subtitle

jumbotron Jumbotron with background + content

jumbotron_native Jumbotron with primary color background + content

jumbotron_small two column jumbotron

jumbotron_native_small two column jumbotron with primary color background

jumbotron_button jumbotron with button

jumbotron_button_native native jumbotron with button

content content block

content_article left aligned image + content

content_article_alt right aligned image + content

two_columns two content block ( image + content )

two_columns_products two product items

two_columns_pricing two pricing packages

content_image responsive image

<a href="#"><img src="

For custom work start with the files from the

Run the code through the

and defined in the

You can find the

To upload a template, go to your MailChimp Admin, then click

You can find the images

To upload a template, go to the

The template will show up in the

You can find the

To upload a template, go to the