responsive email 101: html + css basics

46
litmus Responsive Email 101: HTML & CSS Basics

Upload: litmus

Post on 16-Jul-2015

4.133 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Responsive Email 101: HTML + CSS Basics

litmus

Responsive Email

101: HTML & CSS Basics

Page 2: Responsive Email 101: HTML + CSS Basics

What is responsive email?

litmus

Page 3: Responsive Email 101: HTML + CSS Basics

Responsive email

Email that responds to the subscriber’s environment

based on screen size and email client.

Page 4: Responsive Email 101: HTML + CSS Basics
Page 5: Responsive Email 101: HTML + CSS Basics

#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

Page 6: Responsive Email 101: HTML + CSS Basics

FluidFull width of a single

viewport/breakpoint

AdaptiveFixed widths at multiple

viewports/breakpoints

ResponsiveFluid widths at multiple

viewports/breakpoints

Page 8: Responsive Email 101: HTML + CSS Basics

Why is responsive email

important?

litmus

Page 9: Responsive Email 101: HTML + CSS Basics

70%

60%

50%

40%

30%

20%

10%

Mobile Desktop Webmail

47%

30%

23%

Environment growth

litmus

Page 10: Responsive Email 101: HTML + CSS Basics

47%

Environment growth

70%

60%

50%

40%

30%

20%

10%

Mobile

litmus

Page 11: Responsive Email 101: HTML + CSS Basics

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

Page 12: Responsive Email 101: HTML + CSS Basics

TAKE A LOOK

EmailClientMarketShare.com

Check out

statistics and

rankings of the

email client

market.

Page 13: Responsive Email 101: HTML + CSS Basics

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.

Page 14: Responsive Email 101: HTML + CSS Basics

MOBILE EMAIL+512%since 2011

Page 15: Responsive Email 101: HTML + CSS Basics

Create a great experience

for your mobile

subscribers.

Page 16: Responsive Email 101: HTML + CSS Basics

+15in unique clicks for

responsive emails

+30 click rate for first link

in responsive emails

READ MORE

Responsive emails drive results…

Page 17: Responsive Email 101: HTML + CSS Basics

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?

Page 18: Responsive Email 101: HTML + CSS Basics

email receiptrequested from

AnATM transaction!

Page 19: Responsive Email 101: HTML + CSS Basics

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.

Page 20: Responsive Email 101: HTML + CSS Basics

Where is responsive

email supported?

litmus

Page 21: Responsive Email 101: HTML + CSS Basics
Page 22: Responsive Email 101: HTML + CSS Basics

Responsive email is not

supported everywhere.

Page 23: Responsive Email 101: HTML + CSS Basics

of email client market share supports responsive email

Page 24: Responsive Email 101: HTML + CSS Basics

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

Page 25: Responsive Email 101: HTML + CSS Basics

Responsive email works on

an app-by-app basis.

Page 26: Responsive Email 101: HTML + CSS Basics
Page 27: Responsive Email 101: HTML + CSS Basics
Page 28: Responsive Email 101: HTML + CSS Basics

Gmail does not support

responsive email.

Page 29: Responsive Email 101: HTML + CSS Basics

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

Page 30: Responsive Email 101: HTML + CSS Basics

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.

Page 31: Responsive Email 101: HTML + CSS Basics

How to code a

responsive email

litmus

Page 32: Responsive Email 101: HTML + CSS Basics

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

Page 33: Responsive Email 101: HTML + CSS Basics

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

Add a class to the HTML element you want to

style for mobile

Page 34: Responsive Email 101: HTML + CSS Basics

@media

In the CSS, add an @media query

Page 35: Responsive Email 101: HTML + CSS Basics

@media screen

Define the @media query type as screen

Page 36: Responsive Email 101: HTML + CSS Basics

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

Define the @media query condition

Page 37: Responsive Email 101: HTML + CSS Basics

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

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

}

Insert all styles within the @media query

Page 38: Responsive Email 101: HTML + CSS Basics

table[class=“responsive-image”] {

width:100% !important;

}

Attribute selectors as a Yahoo workaround

table[class=“responsive-image”] {

width:100% !important;

}

!important overrides inline styles

Page 39: Responsive Email 101: HTML + CSS Basics

<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

Page 41: Responsive Email 101: HTML + CSS Basics

Tools + Resources

litmus

Page 42: Responsive Email 101: HTML + CSS Basics

LEARN MORE

Get more advice on

how to design

responsive emails.

How to Guide to Responsive Email Design

Page 44: Responsive Email 101: HTML + CSS Basics

Read about new

email trends and

tips.

GET INVOLVED

Litmus Community

Page 45: Responsive Email 101: HTML + CSS Basics

Litmus Scope

Check your

emails directly in

various email

clients.

SCOPE IT OUT

Page 46: Responsive Email 101: HTML + CSS Basics

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