email for mobile webinar
DESCRIPTION
I held a webinar on 5th September 2012 talking about how to optimize emails for mobiles. Here's the presentation.TRANSCRIPT
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
India Smartphone OutlookIndia Smartphone Outlook
India Smartphone OutlookIndia Smartphone Outlook
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 EmailBlackberry 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
iPhone iPhone OptimizedOptimized
Before After
iPhone iPhone OptimizedOptimized
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
Responsive Design ExamplesResponsive Design Examples
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
