templates.mailchimp.com Open in urlscan Pro
2406:da18:b3d:e200::64  Public Scan

Form analysis
1 forms found in the DOM

GET /search

<form action="/search" class="form-inline form-friendly search-form align-left" id="site-search-form" method="get"><input class="form-input" id="site-search-field" name="q" placeholder="Search Email Design Reference" type="text"><button
    class="form-button ghost icon-search"><span class="hide">Search</span></button><button class="hide form-button ghost icon-close-large search-clear" id="site-search-clear" type="reset"><span class="hide">Clear</span></button></form>

Text Content

Home Getting Started Concepts Design Development Resources

Mailchimp

Email Design Reference

Search
SearchClear




DEVELOPMENT


CSS


CLIENT-SPECIFIC CSS STYLES



Some email clients require an extra push in order to get them to behave the way
we need. For the most part, overriding those pesky default style rules is a
simple proposition, requiring extra style declarations and a !important or two.
There are instances where client styles can’t be overridden at all, or only with
hacky work-arounds. We’ll detail here, client by client, the things you’ll need
to be aware of.


OUTLOOK.COM / HOTMAIL


.EXTERNALCLASS CLASS OVERRIDE

When an email is pulled into Outlook.com / Hotmail, any style rules present in
the email are appended with .ExternalClass. Normalizing a few of these can help
create a baseline for you to work from.

.ExternalClass{
    width:100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
    line-height: 100%;
}


expand


<HX> COLOR OVERRIDE

Outlook.com / Hotmail sets its own (gross green) color on heading elements lower
in level than an <h1> element. This means you need to account for headings <h2>
through <h6>. Fortunately, it’s as easy as applying a !important declaration to
the heading’s color property:

h2{
    color:#0066CC !important;
}


expand


OUTLOOK 2007 / 2010 / 2013


“READ IN BROWSER” LINK

It’s possible, in Outlook, to trigger the appearance of a fairly prominent “View
this email in your browser” bar within the application, allowing you to drive
people to view your email in a browser which will render it in a much better way
than Outlook ever can.

#outlook a{
    padding:0;
}


expand


<TABLE> ELEMENT SPACING

Outlook can sometimes add a bit of spacing on the left and right side of a
<table> element that can cause some layout-related headaches. By using the
vendor-specific mso-table-lspace and mso-table-rspace CSS properties, you can be
rid of those spaces and continue on to tackle the million other problems caused
by Outlook.

table{
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
}


expand


IMAGE RESIZING

Using width or height tags to resize images in your markup can create a problem
in Internet Explorer browsers. If your reader is viewing an email in-browser,
and that email happens to have fluid images in it, they’ll look pretty ugly as
they resize. Using -ms-interpolation-mode:bicubic; ensures that your images look
a little better.

    img{
        -ms-interpolation-mode:bicubic;
    }


expand


OSX / IOS


WEBKIT TEXT SIZE ADJUSTMENT

WebKit looks for any text that happens to be sized smaller than 13px and
increases it to that number, which can sometimes cause design issues in places
intended for small text. Setting -webkit-text-size-adjust to none will prevent
iOS platforms from resizing the text, but this method also prevents OSX
applications like Safari from bumping the text size up - something that can
cause issues for people who need the text size to be large. Setting
-webkit-text-size-adjust to 100% seems to be the best of both worlds.

body{
    -webkit-text-size-adjust:100%;
}


expand


PHONE NUMBER, ADDRESS, & DATE LINK COLORS

When iOS detects a phone number, address, or calendar date, it oh-so-helpfully
sets those items as links to make it easier to immediately call, map, or add an
appointment within other apps. The trouble is the that link colors are the
standard ‘internet blue’, or #0000FF. This color can be difficult to read on
dark backgrounds, to say nothing of it not matching the style of your email’s
design. Thankfully, there’s a workaround.

First, for the phone number. In the <head> of your email, add this iOS-specific
<meta> tag:

<meta name="format-detection" content="telephone=no">


expand

Using that, iOS will no longer auto-detect and style phone numbers (Apple also
lists its other tags here). You should, however, provide your own way to call
from an email. You can do that by wrapping a phone number in a line and setting
the href attribute with a tel value:

<a href="tel:1-800-555-5555">1-808-555-5555</a>


expand

You can now style the link as you see fit. Addresses and dates work a little
differently, and the solution is a little hacky, but that’s okay; it’s par for
the course in HTML email. In order to override the blue link color, you wrap the
links in an inline element like an <a>, then you apply your own color:

Visit EmailCo. at <a href="#" style="color:#000000; text-decoration:none;">123 Atlantic Ave. &bull; Atlanta, GA 30318 USA</a>


expand

Be aware that, regardless of the fact that you changed the link colors, the iOS
functionality isn’t disabled on any of these items. An errant tap of a date or
address will still open up calendar and map applications, so it’s a good idea to
make these links a little different than your other standard links, so folks
avoid confusion or frustration.


WINDOWS MOBILE


WINDOWS MOBILE TEXT SIZE ADJUSTMENT

Much like in OSX and iOS, small text is also resized on Windows Mobile. The same
vendor-prefix-based CSS property is used here, just with the ms vendor prefix
instead of the webkit one.

body{
    -ms-text-size-adjust:100%;
}


expand


READ ON:

 * Outlook Conditional CSS
 * Reset Styles

Back to top

©2001-2023 All Rights Reserved. Mailchimp® is a registered trademark of The
Rocket Science Group.

Mailchimp uses cookies for our website to function properly; some are optional
and help deliver a personalized and enhanced experience. By clicking “Dismiss”,
you consent to store cookies on your device in accordance with our cookie
statement. We may collect anonymized data from your browser independent of your
cookie preferences. Preferences can be updated at any time.Cookie Statement.
Dismiss
Customize settings



 * HOW MAILCHIMP USES COOKIES


 * ESSENTIAL WEBSITE COOKIES


 * PERFORMANCE AND FUNCTIONALITY COOKIES


 * ANALYTICS AND CUSTOMIZATION COOKIES


 * ADVERTISING (TARGETING) COOKIES

HOW MAILCHIMP USES COOKIES

Mailchimp Sites may request cookies to be set on your device. We use cookies to
let us know when you visit our Mailchimp Sites, to understand how you interact
with us, to enrich and personalize your user experience, to enable social media
functionality and to customize your relationship with Mailchimp, including
providing you with more relevant advertising. Click on the different category
headings to find out more. You can also change your cookie preferences at any
time. Note that blocking some types of cookies may impact your experience on our
Mailchimp Sites and the services we are able to offer.
More information

ESSENTIAL WEBSITE COOKIES

Always Active

These cookies are strictly necessary to provide you with the services and
features available through our site. Because these cookies are strictly
necessary to deliver the site, you cannot refuse them without impacting how the
site functions.

View Cookies‎

PERFORMANCE AND FUNCTIONALITY COOKIES

Performance and Functionality Cookies


These cookies are used to enhance the functionality and performance of the site.
They help us to customize the site and application for you in order to enhance
your experience. While these cookies are not needed for a basic website
experience, certain functionalities such as personalization and video would
become unavailable.

View Cookies‎

ANALYTICS AND CUSTOMIZATION COOKIES

Analytics and Customization Cookies


These cookies collect information to help us understand how the site is being
used or how effective our marketing campaigns are. They help us to know which
pages are the most and least popular and to see how visitors move around the
site. These cookies may be set by us or by third-party providers whose services
we have added to our pages.

View Cookies‎

ADVERTISING (TARGETING) COOKIES

Advertising (Targeting) Cookies


These cookies are used to make advertising messages more relevant to you and
your interests. They also perform functions like preventing the same ad from
continuously reappearing, ensuring that ads are properly displayed, and in some
cases selecting advertisements that are based on your interests.

View Cookies‎
Back Button


VENDORS LIST

Filter Button
Consent Leg.Interest
checkbox label label
checkbox label label
checkbox label label

Clear
checkbox label label
Apply Cancel
Confirm My Choices
Allow All