responsive email 101: html + css basics

litmus

Responsive Email

101: HTML & CSS Basics

What is responsive email?

litmus

Responsive email

Email that responds to the subscriber’s environment

based on screen size and email client.

#Respons

‣ Resize content: make images

fit, make text larger

‣ Hide content on mobile

‣ Stack columns

‣ Move a two-column design

to a one-column design

Responsive

FluidFull width of a single

viewport/breakpoint

AdaptiveFixed widths at multiple

viewports/breakpoints

ResponsiveFluid widths at multiple

viewports/breakpoints

DOWNLOAD FREE

Go responsive with our free,

pre-tested templates!

Why is responsive email

important?

litmus

70%

60%

50%

40%

30%

20%

10%

Mobile Desktop Webmail

47%

30%

23%

Environment growth

litmus

47%

Environment growth

70%

60%

50%

40%

30%

20%

10%

Mobile

litmus

Mobile:

Smartphones (iPhone, Android) and tablets

Desktop:

Installed email programs (Outlook, Apple Mail)

Webmail:

Email accessed through a web browser (Gmail,

Outlook.com, Yahoo!)

25%

22%53%

Mobile Desktop Webmail

Source: Litmus Email Analytics

Adjusted environment market share

litmus

TAKE A LOOK

EmailClientMarketShare.com

Check out

statistics and

rankings of the

email client

market.

Email environment trends are

constantly changing.

LEARN MORE

In four years alone, smartphones

and tablet open rates have increase

by 500%. Learn more and stay

ahead of the game.

MOBILE EMAIL+512%since 2011

Create a great experience

for your mobile

subscribers.

+15in unique clicks for

responsive emails

+30 click rate for first link

in responsive emails

READ MORE

Responsive emails drive results…

Delete it

Unsubscribe

View on computer

Don't know

Read anyway

0 25 50 75 100

80.3%

30.2%

13.5%

3.8%

6.3%

If you get a mobile email that doesn’t look

good, what do you do?

email receiptrequested from

AnATM transaction!

Mobile emails don’t always

render consistently across

devices.

RUN A QUICK TEST

Preview your emails across various

devices before every send to

ensure they look great in every

inbox.

Where is responsive

email supported?

litmus

Responsive email is not

supported everywhere.

of email client market share supports responsive email

You can’t say “responsive

email works on an iPhone.”

It depends.

For example, responsive

email is supported on the

native iOS Mail app, but

not Inbox by Gmail iOS

app.

Device ≠ App

Responsive email works on

an app-by-app basis.

Gmail does not support

responsive email.

http://stylecampaign.com/blog/2012/10/responsive-email-support/

Media query support in mobile email apps

iPhone / iPad: Email app yes

Android 2.1: Email app no

Android 2.2: Email app yes

Android 2.3: Email app yes

Android 4.0, 4.1, 4.2: Email app yes

Android 4.3, 4.4: Email app sometimes

Kindle Fire yes

Yahoo! (iOS + Android) no

Mailbox (iOS) no

Gmail (iOS + Android) no

Inbox by Gmail (iOS + Android) no

BlackBerry Z10 yes

Windows Phone 7 no

Windows Phone 7.5 yes

Windows Phone 8 sometimes

Be confident your HTML + CSS

are supported across inboxes.

START TESTINGEmail clients often drop support for

HTML and CSS without notice.

Guarantee your emails look great—

everywhere, every time.

How to code a

responsive email

litmus

Uses media queries to detect screen size and alter

content + layout

‣ More than a “line of code”

‣ Set of conditional statement that enables specific styles

‣ If the screen size is x, then display y

‣ If the screen size is x, then increase headline size to y

‣ If screen size is x, then show image at 100%

‣ Media queries aren’t supported everywhere

Responsive email design

<table width=“600” class=“responsive-table”>

Add a class to the HTML element you want to

style for mobile

@media

In the CSS, add an @media query

@media screen

Define the @media query type as screen

@media screen and (max-width: 600px) { */Insert styles here*/ }

Define the @media query condition

@media screen and (max-width: 600px) {

width: 100% !important; }table[class=“responsive-table”] {

}

Insert all styles within the @media query

table[class=“responsive-image”] {

width:100% !important;

}

Attribute selectors as a Yahoo workaround

table[class=“responsive-image”] {

width:100% !important;

}

!important overrides inline styles

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta> tag for responsive email

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta> tag for Windows Phone

GET RESULTS

See how your responsive

emails look in various inboxes.

Tools + Resources

litmus

LEARN MORE

Get more advice on

how to design

responsive emails.

How to Guide to Responsive Email Design

Build and

compare

immediately.

TRY BUILDER

Litmus Builder

Read about new

email trends and

tips.

GET INVOLVED

Litmus Community

Litmus Scope

Check your

emails directly in

various email

clients.

SCOPE IT OUT

Other great resources…

For sending campaigns...

For email templates…

For more responsive design

resources…

To learn about CSS support…

StampReady.com

Mail Chimp

Responsive Email

Design

Campaign Monitor