Email for mobile webinar slideshare

Email for MobileEmail for MobileGeetanjali Dighe

Talk about this Webinar #juvlon

AgendaAgenda

Some statistics Is it right for you? Design tips for mobile email Examples of mobile optimized emails Is this enough? Q&A

India Smartphone OutlookIndia Smartphone Outlook

20 MillionSmartphone Sales



Why Email For Mobile?Why Email For Mobile?

In 2012, 11 out 100 mobiles sold in India will be smartphones (In 2011, it was 6)[1]

81% Indian smartphone owner access email on the go [2]

Mobile opens world-wide will surpass desktop opens this year: ReturnPath [3]

Is It For You?Is It For You?

Check Email Analytics Device/email client stats Check website

mobile visitors What % of users are

on mobile? How is this changing?

Doing Nothing Is FineDoing Nothing Is Fine Not optimizing may be a valid strategy

Does it make sense for your audience,

brand or business?

Focus on other ways to engage audience If mobile audience is small If you have limited resources

Know Your AudienceKnow Your Audience

People scan emails, more so on mobiles < 3% open on both mobile and desktop People check email everywhere

In bed In the bathroom While waiting, to kill time At their in-laws

Designing Emails For MobileDesigning Emails For Mobile

Subject line: 30-35 characters

Pre-header (preview text) very important

Typical Screen SizesTypical Screen Sizes Iphone:

– 320px X 480px - portrait

– 480px X 320px - landscape Android:

– 350px X 480px - portrait

– 480 X 350 - landscape iPad:

– 768 x 1024 - portrait

– 1024 x 768 - landscape

Designing Emails for MobileDesigning Emails for Mobile

KISS – Keep it Simple & Straightforward Large font in email body– 14px text, 22px headings

Large call-to-actions, buttons– 45 x 45px finger tap

Minimum images, smaller and lower

Designing Emails for MobileDesigning Emails for Mobile

Encourage scrolling Try vertical menus Image Alt tags Use percentage instead of fixed width Single column Go on a “word diet”

Design Case Study: Mobile Design Case Study: Mobile Optimized EmailOptimized Email

Took an existing desktop email– Viewed it on Blackberry, Andriod, iPhone

Optimized to create a mobile email– Viewed optimized version in Blackberry,

Android and iPhone

Desktop Email

Desktop Email

Blackberry Email

Desktop Email Android Email

Desktop Email

Iphone Email

After

Blackberry Blackberry OptimizedOptimized

Before

After

Android Android OptimizedOptimized

Before

After

Android Android OptimizedOptimized

Before

Next Screen

Before After

iPhone iPhone OptimizedOptimized

Before After


Before After


Next Screen

Responsive Email DesignResponsive Email Design Use CSS3 @media queries– Detect screen size

– Display specific content on different devices

Needs CSS skills

How Email Code LooksHow Email Code Looks

<html>

<head>

<title>Email subject can be used here</title>

<style type=”text/css”>CSS3 Content Goes Here</style>

</head>

<body>HTML email code goes here</body>

</html>

How CSS LooksHow CSS Looks

@media screen and (max-width: 400px) { .holmes { margin-right: some value; width: another value; }.watson { margin-right: some value; width: another value; }

Responsive Design ExamplesResponsive Design Examples



Is This Enough?Is This Enough?

The big picture is still RoI Look beyond optimizing emails Optimize – Landing pages

– Forms Check website analytics– Do you need a mobile website?

– Do you need an App?

ChallengesChallenges

Is mobile email right for you? List Segmentation Design Optimizing web pages Justifying RoI

ResourcesResources

Mobile Statistics

– Convergence Catalyst

Design– Emailology.org

– A List Apart

– Email on Acid

Thank youThank you

Questions

Geetanjali Dighe

[email protected]

www.juvlon.com

Technology

Email for mobile webinar slideshare