9
www.dotMailer.co.uk to mobile responsive design 1 2 3 4 5 STEPS Your complete plan for mobile-optimized email marketing http://bit.ly/11JnbPX

5 Steps To Responsive Email Campaigns

Embed Size (px)

DESCRIPTION

Do you want to ensure your email campaigns are delivered pixel perfect no matter what device they're viewed on?

Citation preview

Page 1: 5 Steps To Responsive Email Campaigns

www.dotMailer.co.uk

to mobile responsive design

1

2 3 4

5 STEPS

Your complete plan for mobile-optimized email marketing

http://bit.ly/11JnbPX

Page 2: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 2

Mobile is more important than ever.

2bn

go online via smartphones every day

per year is spent via mobile devices

smartphone users check emails6x/day

Page 3: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 3

Mobile responsive design is the best way to deliver optimized mobile

experiences.

Here’s how to go about it

Page 4: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 4

It’s best to optimize for the most popular devices amongst your

audience.

1STEP Plan

Page 5: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 5

Verify how your target audience uses mobile to buy from you.

2STEP Review analytics

Page 6: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 6

To begin designing your campaign, you need to wireframe which layouts you want to use for

each device, and where the different elements of your campaign should sit within each.

3STEP Design your layouts

Page 7: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 7

Media queries allow you to design specific style sheets for portrait/landscape screens as well as

specific mobile devices.

4STEP Use media queries

<!DOCTYPE html> <style type=”text/css”> /*Place CSS to control for mobile here*/</style>

@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5), only screen and (max-device-width: 480px) { /*Place CSS to control for mobile here*/}

Page 8: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 8

Testing is still crucial with responsive design. A good email service provider will show you

an inbox preview of your campaign across the most-used mobile browsers.

5STEP Test

Page 9: 5 Steps To Responsive Email Campaigns

@dotMailer dotMailer.co.uk 9

Download our full guide to optimizing your emails for mobile

http://bit.ly/11JnbPX