Email Strategy and Design
for a MultiscreenWorld
Alex Williams
Creative Director
Trendline Interactive
@alexcwilliams
Justine Jordan
Research & Education
Litmus
@meladorri
We’re GonnaTalk. A Lot.
The lay of the land
Multiscreen design approaches
Implications…
Workflow and process
Key best prac...
Got screens?
A look
back at
#spop11
Today, at
#spop13
OF OPENS ARE ON A MOBILE DEVICE
5-50% on individual campaigns
60%+ for niche audiences
Email Opens: April 2013
Mobile:
Smartphones (iPhone,Android) and
tablets
Desktop:
Installed email programs (Outlook, Apple...
0%
10%
20%
30%
40%
50%
60%
70%
Opens in Each Environment
Webmail Desktop Mobile
The last 28 months
42%
33%
10%
The Most Important Audience…
YOURS.
How mobile are your customers?
Brand/Industry A: 55% Brand/Industry B: 18%
Plan on data, not your gut
+366%since #spop11
+366%since #spop11
Small Medium Large
Screensize-apalooza
iPhone
2.3” wide
Galaxy Note II
3.2” wide
Nexus 7
7.3” wide
BB Bold
2.6” wide
iPad ...
14
The unifying characteristic?
TOUCH.
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
15% two handed
49% one handed
36%...
Approaches
As with most
things with
email, there’s
not a one-size-
fits-all
approach
(sorry to disappoint you)
Mobile First
Considers the
mobile user as
a priority
|-------------------460px -------------------| |---------------------...
Mobile First / Friendly
• One layout for all screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Gene...
Pros
• Prioritizes important
data, content, actions
• Easier execution
• No reliance on media query support
• Good renderi...
Fluid
Email width
changes to
fit within the
window
|--------------------------------------------------------1166px--------...
Fluid layout
• Percentage-based
widths
• Adapts to fill the
screen it’s viewed
on; text wraps
automatically
Fluid layout
BEST FOR:
Simple layouts, automated emails, mostly text/few images
Pros
• Simple execution
• No learning curv...
Responsive
Design
Uses media
queries to detect
screen size and
alter content
accordingly
|-----------320px ------------||-...
Responsive Design
• More than a “line of code”
• Set of conditional statement that enables
specific styles
– If the screen...
Pros
• Restyle, resize or reorder elements
• Ability to hide/show desktop or mobile
specific images/content
• Customized c...
Email is an *application*
Email is an *application*
Device ≠ email client
IMPLICATIONS!!
iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native yes
Android 4.x native y...
Inconsistent
rendering
across devices
and operating
systems
iPhone: 23% of opens
• Automatically scales
messages to fit the screen
• Excellent support for
CSS3 and media queries
• Im...
Android: 8% of opens
• Blocks images by default;
supportsALT text
• Two apps with opposing
support for media queries
• Pri...
BlackBerry Z10 < 1%
• Media query support
• Blocks images; supports
styledALT text
• Does not scale/auto-zoom
• No separat...
Windows Phone < 1%
• Mixed media query
support
• Does weird things to fonts
• Blocks images; no ALT text
• No one has them
What about tablets?
• Desktop version
usually works just fine
• Plan for tap targets
and plenty of white
space
• Mobile fi...
Ch-Ch-Ch-Ch-Choices
• First, we must choose our design approach
• Next, every module and piece of content has
to have a pl...
Mobile Success =Tough Choices
• Analyze each section of the template
• Look at historical performance, remove
feelings fro...
Workflow and process
First Steps of Design Planning
• Identify top email clients on Desktop,Tablet and
Smartphone. Focus on top 3-5 in each.
• ...
A Responsive Design Process
1. Grid
2. Wireframe
3. ResponsiveWireframe HTML Prototype
4. Visual Design (varies depending ...
Key best practices
But first…
In
Memorium
The
Fold
Small
Grey
Fonts
Glossy Image
Buttons
The“Mobile Version”
Link Clusters
Busy Images
Magazine Ad
Emails
Claustrophobic
Pre-headers
Key best practices
Bigger buttons & fonts
• Increase all font sizes
25%, especially headlines
– Body copy: 16px+
– Headlines: 22px+
– Buttons...
Consider the experience
• Landing pages are part of
that experience
• Driving people to stuff that
doesn’t work on mobile ...
Fsdlkjfsldjf
Flash Interstitials / pop-ups Painfully long forms
Prioritize and focus
• Identify the top 3-5 activities and use those
– Purchase?
– Download?
– Registration?
– Social?
Device targeting can
display app/OS specific
content
Dial up the contrast
Bright screens
kill batteries
Say no to link clusters and yes to white space
Retina Optimizing Images
400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”…
@media only screen and ...
THANKS!
@alexcwilliams
alex@trendlineinteractive.com
@meladorri
justine@litmus.com
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
Upcoming SlideShare
Loading in...5
×

Email Strategy and Design for a Multiscreen World

293

Published on

Join some of the smartest thinkers in the mobile/multiscreen email marketing design arena. Together they will tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Among the specific topics will include the following:

- Learning the implications of each major screen size and device
- Determining what devices your subscriber base is using and how and where they are converting
- Discussing the different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
- Creating a consistent user experience across email and Web/landing pages
- Examples and key best practices
- Communicating with your designer and programmer
- Testing, learning, optimization and measurement/analysis
- Future trends and predictions

This presentation was given at Silverpop Amplify 2013 on May 16, 2013 by Alex Williams, Trendline Interactive & Justine Jordan, Litmus.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
293
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Over 9 quarters, we’ve seen some crazy s^&amp;% happen…
  • now it’s REALLY easy. No excuses!!!
  • now it’s REALLY easy. No excuses!!!
  • One-handed use seems to be highly correlated with users’ simultaneously performing other tasks. Many of those using one hand to hold their phone were carrying out other tasks such as carrying bags, steadying themselves when in transit, climbing stairs, opening doors, holding babies, and so on.Left handedness in the general population: 10%
  • “Mobile forces you to focus. Mobile devices require … teams to focus on only the most important data and actions. … There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed websites. That’s good user experience and good for business.”
  • Fairly easy to implementFew rendering issuesVery small and very large screens can be hard to read
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • Transcript of "Email Strategy and Design for a Multiscreen World"

    1. 1. Email Strategy and Design for a MultiscreenWorld
    2. 2. Alex Williams Creative Director Trendline Interactive @alexcwilliams Justine Jordan Research & Education Litmus @meladorri
    3. 3. We’re GonnaTalk. A Lot. The lay of the land Multiscreen design approaches Implications… Workflow and process Key best practices
    4. 4. Got screens?
    5. 5. A look back at #spop11
    6. 6. Today, at #spop13 OF OPENS ARE ON A MOBILE DEVICE 5-50% on individual campaigns 60%+ for niche audiences
    7. 7. Email Opens: April 2013 Mobile: Smartphones (iPhone,Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail, Hotmail,Yahoo!) Desktop 34% Webmail 24% Mobile 42% Source: Litmus Email Analytics
    8. 8. 0% 10% 20% 30% 40% 50% 60% 70% Opens in Each Environment Webmail Desktop Mobile The last 28 months 42% 33% 10%
    9. 9. The Most Important Audience… YOURS.
    10. 10. How mobile are your customers? Brand/Industry A: 55% Brand/Industry B: 18% Plan on data, not your gut
    11. 11. +366%since #spop11
    12. 12. +366%since #spop11
    13. 13. Small Medium Large Screensize-apalooza iPhone 2.3” wide Galaxy Note II 3.2” wide Nexus 7 7.3” wide BB Bold 2.6” wide iPad Mini 5.3” wide Excite 13 8.5” wide
    14. 14. 14 The unifying characteristic? TOUCH.
    15. 15. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php 15% two handed 49% one handed 36% cradled 67% used right thumb on the screen 33% used left thumb on the screen
    16. 16. Approaches
    17. 17. As with most things with email, there’s not a one-size- fits-all approach (sorry to disappoint you)
    18. 18. Mobile First Considers the mobile user as a priority |-------------------460px -------------------| |---------------------600px ---------------------|
    19. 19. Mobile First / Friendly • One layout for all screen sizes • Single column design – 320-500px • Large text & buttons • Generous white space • Clear calls to action • Short, concise body copy Agnostic / Aware / Scalable
    20. 20. Pros • Prioritizes important data, content, actions • Easier execution • No reliance on media query support • Good rendering in apps and native clients Cons • Desktop can suffer • Less real estate • Can get long • Fixed width can be less than ideal for Android Mobile First / Friendly BEST FOR: Ready for change, testing the waters, or resource strapped
    21. 21. Fluid Email width changes to fit within the window |--------------------------------------------------------1166px---------------------------------------------------| |-----------------------------525px --------------------------|
    22. 22. Fluid layout • Percentage-based widths • Adapts to fill the screen it’s viewed on; text wraps automatically
    23. 23. Fluid layout BEST FOR: Simple layouts, automated emails, mostly text/few images Pros • Simple execution • No learning curve or reliance on media queries Cons • Fewer design choices • Very narrow or very wide emails can get awkward and hard to read
    24. 24. Responsive Design Uses media queries to detect screen size and alter content accordingly |-----------320px ------------||--------------------------------------------700px------------------------------------------ |
    25. 25. Responsive Design • 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% • Detects screen size, not device type
    26. 26. Pros • Restyle, resize or reorder elements • Ability to hide/show desktop or mobile specific images/content • Customized calls to action • Seamless experience across a range of screen sizes Cons • Coding learning curve • Forces tough choices • Increased production and QA time Responsive Design BEST FOR: Growing mobile audiences, travel alerts, tech companies
    27. 27. Email is an *application*
    28. 28. Email is an *application* Device ≠ email client
    29. 29. IMPLICATIONS!!
    30. 30. iPhone native yes iPad native yes Android 2.1 native no Android 2.2 native yes Android 2.3 native yes Android 4.x native yes Gmail mobile apps no Mailbox iOS app yes @media support http://stylecampaign.com/blog/2012/10/responsive-email-support/ Yahoo! mobile apps no Windows Mobile 7 no Windows Mobile 7.5 yes Windows Mobile 8 no BlackBerry OS 6 yes BlackBerry OS 7 yes BlackBerry Z10 yes Kindle Fire native yes
    31. 31. Inconsistent rendering across devices and operating systems
    32. 32. iPhone: 23% of opens • Automatically scales messages to fit the screen • Excellent support for CSS3 and media queries • Images on by default • Resizes fonts under 13px
    33. 33. Android: 8% of opens • Blocks images by default; supportsALT text • Two apps with opposing support for media queries • Primary content focus on left- hand side • Various screen sizes and no automatic scaling Image source: stylecampaign.com
    34. 34. BlackBerry Z10 < 1% • Media query support • Blocks images; supports styledALT text • Does not scale/auto-zoom • No separate app; email joins social, SMS and voice in the “hub”
    35. 35. Windows Phone < 1% • Mixed media query support • Does weird things to fonts • Blocks images; no ALT text • No one has them
    36. 36. What about tablets? • Desktop version usually works just fine • Plan for tap targets and plenty of white space • Mobile first/friendly rules apply
    37. 37. Ch-Ch-Ch-Ch-Choices • First, we must choose our design approach • Next, every module and piece of content has to have a plan • Lastly, we need a plan B in case we run into trouble in execution.
    38. 38. Mobile Success =Tough Choices • Analyze each section of the template • Look at historical performance, remove feelings from the process • Trace required-content back to the source to understand rationale.
    39. 39. Workflow and process
    40. 40. First Steps of Design Planning • Identify top email clients on Desktop,Tablet and Smartphone. Focus on top 3-5 in each. • Prioritize - in order - 3 desired actions from each email. • Audit assets. Are we working with raw assets or pre-designed assets from different channel?
    41. 41. A Responsive Design Process 1. Grid 2. Wireframe 3. ResponsiveWireframe HTML Prototype 4. Visual Design (varies depending on stakeholders) 5. Code Final HTML
    42. 42. Key best practices But first…
    43. 43. In Memorium
    44. 44. The Fold
    45. 45. Small Grey Fonts
    46. 46. Glossy Image Buttons
    47. 47. The“Mobile Version”
    48. 48. Link Clusters
    49. 49. Busy Images
    50. 50. Magazine Ad Emails
    51. 51. Claustrophobic Pre-headers
    52. 52. Key best practices
    53. 53. Bigger buttons & fonts • Increase all font sizes 25%, especially headlines – Body copy: 16px+ – Headlines: 22px+ – Buttons: 44px by 44px – White space: 15px • If you don’t make them bigger, Apple will!
    54. 54. Consider the experience • Landing pages are part of that experience • Driving people to stuff that doesn’t work on mobile is stupid ???? Page/Site Tap Preview/Open Preheader Subject Line From Name
    55. 55. Fsdlkjfsldjf Flash Interstitials / pop-ups Painfully long forms
    56. 56. Prioritize and focus • Identify the top 3-5 activities and use those – Purchase? – Download? – Registration? – Social?
    57. 57. Device targeting can display app/OS specific content
    58. 58. Dial up the contrast Bright screens kill batteries
    59. 59. Say no to link clusters and yes to white space
    60. 60. Retina Optimizing Images 400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”… @media only screen and (max-width: 599px) img[class=”Loren"] { width: 100%; height: auto !important; }
    61. 61. THANKS! @alexcwilliams alex@trendlineinteractive.com @meladorri justine@litmus.com

    ×