Mobile Email Design: Fluid, Adaptive & Responsive

From my talk at Silverpop Amplify 2013 conference in London - a quick look at the different options and opportunities for mobile email design, from some easy wins to completely re-thinking how we approach design.

Transcript

1. Mobile  Email  Design     Fluid,  Adaptive  &   Responsive  Design   Presented  at  
2. Elliot  Ross   Director,     Ac+on  Rocket   @iamelliot   @ac+onrocket  
3. 1.     State  of  the  Union   2.     Easy  Mobile  Wins       3.     Way  of  the  Future  
4. 1.     State  of  the  Union   2.     Easy  Mobile  Wins       3.     Way  of  the  Future  
5. Mobile:  42%   iPhone/iPad:  32%   Android:  9%   Desktop:  34%   Outlook:  20%   Apple  Mail:  8%   Webmail:  24%   Outlook.com/Hotmail:  9%   Gmail:  5%   Yahoo!  Mail:  4%   Source:     http://emailclientmarketshare.com/   April  2013  
7. Users  move  around  
8. •  Intermittent   connection   •  Busy  inbox     •  Small  Screen   •  Touch  Screen   •  Sunlight     •  Touch  Screen   •  Wifi  Only    
9. (a  few)  factors  affecting  users   Attention   Location   Sunlight   Internet   Connection   Device  &  App   capabilities   Amount  of   email  
10. Open  /  Click  rates  are  not     a  measurement  of  User  Experience  
11. Understand  Message   Inspire/Excite   Surprise     &  Delight   What  do  users  need  from  an  email  campaign?  
12. Emails  don’t  have  to  look  the    same  across  different  platforms  
13. Easy  design  wins   (aka  designing  mobile  first)   5  
15. Source:     http://www.emaildesignreview.com  
17. Source:     http://www.emaildesignreview.com  
21. Source:     http://www.emaildesignreview.com  
22. Plus  the  usual  stuff:   Alt  Text     Pre-­‐headers     Not  all  images  
23. Understand  Message   Inspire/Excite   Surprise     &  Delight   What  do  users  need  from  an  email  campaign?  
24. Fluid   Responsive   Adaptive  
25. Fluid   Responsive   Adaptive  
26. 100%  wide  email  
27. Fluid:   Pros   •  Simpler  code   •  Less  learning  curve     Cons   •  Restricts  design   •  Very  narrow  or  very  wide  can  get   awkward  and  difficult  to  read     Good  for   Simple  layouts,  Automated  emails,  Mostly  text    
28. Fluid   Responsive   Adaptive  
29. Re cha hid c 640px   320px   320px   100%   100%   100%   Responsive   •  Resize  content:   make  images  fit,   make  text  larger   •  Hide  content  on   mobile   •  Stack  columns   Desktop   Mobile  (eg.  iPhone:  320px)  
30. If  screen  size  <  640px   then  {apply  this  css}  
31. @media  only  screen     and  (max-­‐width:  640px)     {*[class=emailwidth]  {width:100%;}}  
36. “ Our  May  campaign  had  a  50%  increase  in  clicks.     With  just  under  50%  of  our  opens  coming  from   iPhones/Android  devices,  I  have  to  imagine  that   the  responsive  design  played  a  huge  role  in  that.     US  based  tech  client  
37. Don’t  forget  the  journey…  
39. Support  for  responsive  design  
40. Android  Outlook  Exchange   Android  Gmail  App   Yahoo  Mail  App   Windows  Phone  6/7   Windows  Phone  8  (tbc)   Blackberry  OS  5   iPhone,  iPad,  iPod   Android  Native  email   Windows  Phone  7.5   Blackberry  OS  7   Blackberry  10   Palm  Web   Kindle  Fire  (+HD)   Android  Outlook  Exchange   Android  Gmail  App   Yahoo  Mail  App   Windows  Phone  6/7   Windows  Phone  8  (tbc)   Blackberry  OS  5   iPhone,  iPad,  iPod   Android  Native  email   Windows  Phone  7.5   Blackberry  OS  7   Blackberry  10   Palm  Web   Kindle  Fire  (+HD)  
42. Responsive:   Pros   •  Optimum  experience   for  all  users   •  Better  results*   Cons   •  Code  learning  curve   •  Increase  in  production   &  QA  time     Good  for   Mid-­‐high  mobile  audiences,  travel  alerts,  app/tech  companies     *not  a  legal  guarantee.  
43. Fluid   Responsive   Adaptive  
44. @media  only  screen     and  (max-­‐width:  640px)     {*[class=emailwidth]  {width:320px}}  
46. Adaptive:   Pros   •  Same  as  responsive,  but   images  are  slightly  easier   to  produce     Cons   •  Same  as  responsive,  but   restricts  experience  for   different  screen  size  phones    
47. Understand  Message   Inspire/Excite   Surprise     &  Delight   What  do  users  need  from  an  email  campaign?  
48. Live  Content  
50. Live  images:  
51. Video  in  email  
53. Improve  the  journey  
55. Questions:     @actionrocket   actionrocket.co   Credits   Icons:  Noun  Project