Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Solving Outlook 120 DPI Scaling Issues with Hybrid Emails

971 vues

Publié le

Litmus Live 2017 presentation

Publié dans : Marketing
  • Soyez le premier à commenter

Solving Outlook 120 DPI Scaling Issues with Hybrid Emails

  1. 1. Solving Outlook 120 DPI Scaling Issues with Hybrid Emails #LitmusLive @CourtFantinato
  2. 2. Email Marketing Specialist #LitmusLive @CourtFantinato Courtney Fantinato
  3. 3. What is DPI? #LitmusLive @CourtFantinato
  4. 4. It’s for accessibility! #LitmusLive @CourtFantinato
  5. 5. #LitmusLive @CourtFantinato
  6. 6. What happens with higher DPI? #LitmusLive @CourtFantinato
  7. 7. Examples #LitmusLive @CourtFantinato
  8. 8. #LitmusLive @CourtFantinato 96 DPI
  9. 9. #LitmusLive @CourtFantinato 120 DPI
  10. 10. #LitmusLive @CourtFantinato 96 DPI
  11. 11. #LitmusLive @CourtFantinato 120 DPI
  12. 12. What causes this? #LitmusLive @CourtFantinato
  13. 13. 1. Width and height attributes in pixels remain as pixels #LitmusLive @CourtFantinato
  14. 14. 2. Other pixel values turn into points #LitmusLive @CourtFantinato
  15. 15. So, what can we do? #LitmusLive @CourtFantinato
  16. 16. There are 3 parts required… #LitmusLive @CourtFantinato
  17. 17. Part 1: XML Namespace #LitmusLive @CourtFantinato xmlns:o="urn:schemas-microsoft- com:office:office"
  18. 18. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft- com:office:office"> #LitmusLive @CourtFantinato
  19. 19. Part 2: Normalize DPI for Images (PPI) #LitmusLive @CourtFantinato
  20. 20. <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> #LitmusLive @CourtFantinato
  21. 21. Part 3: CSS #LitmusLive @CourtFantinato
  22. 22. width="600" #LitmusLive @CourtFantinato becomes style="width: 600px;"
  23. 23. Option 1: <table ... width="600" style="width: 600px;"> #LitmusLive @CourtFantinato Option 2: <table ... style="width: 600px;">
  24. 24. Option 1: <td valign="top" align="left" width="300" style="width: 300px;"> #LitmusLive @CourtFantinato Option 2: <td valign="top" align="left" style="width: 300px;">
  25. 25. If you use cellspacing and/ or cellpadding… #LitmusLive @CourtFantinato
  26. 26. <table border="0" cellspacing="4" cellpadding="8" style="mso-cellspacing: 4px; mso-padding-alt: 8px 8px 8px 8px;"> #LitmusLive @CourtFantinato
  27. 27. How does this play into Hybrid Emails? #LitmusLive @CourtFantinato
  28. 28. #LitmusLive @CourtFantinato <td valign="top" align="center" style="font-size: 0; padding: 15px 15px 15px 15px;"> <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: middle;"> <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%"> <!-- Left Column --> </table> </div> <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: middle;"> <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%"> <!-- Right Column --> </table> </div> </td>
  29. 29. #LitmusLive @CourtFantinato <td valign="top" align="center" style="font-size: 0; padding: 15px 15px 15px 15px;"> <!--[if gte mso 9]> <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%"> <tr valign="top"> <td valign="middle" align="left" width="300"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: middle;"> <!-- Left Column --> </div> <!--[if gte mso 9]> </td><td valign="middle" align="left" width="300"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: middle;"> <!-- Right Column --> </div> <!--[if gte mso 9]> </td></tr></table> <![endif]--> </td>
  30. 30. MSO Conditional Comments! #LitmusLive @CourtFantinato
  31. 31. <!--[if gte mso 9]> <table ... style="width: 600px;"> <tr valign="top"> <td valign="top" align="center"> <![endif]—> #LitmusLive @CourtFantinato Table
  32. 32. #LitmusLive @CourtFantinato Table Cell <!--[if gte mso 9]> <table ... width="100%"> <tr valign="top"> <td ... style="width: 300px;"> <![endif]-->
  33. 33. <!--[if gte mso 9]> <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%"> <tr valign="top"> <td valign="middle" align="left" style="width: 300px;"> <![endif]--> ... Left Column … <!--[if gte mso 9]> </td><td valign=“middle" align="left" style="width: 300px;"> <![endif]--> … Right Column … <!--[if gte mso 9]> </td></tr></table><![endif]--> #LitmusLive @CourtFantinato
  34. 34. Examples #LitmusLive @CourtFantinato
  35. 35. #LitmusLive @CourtFantinato 96 DPI
  36. 36. #LitmusLive @CourtFantinato Without Fix 120 DPI With Fix 120 DPI
  37. 37. #LitmusLive @CourtFantinato 96 DPI
  38. 38. #LitmusLive @CourtFantinato Without Fix 120 DPI With Fix 120 DPI
  39. 39. #LitmusLive @CourtFantinato 96 DPI
  40. 40. #LitmusLive @CourtFantinato 120 DPI
  41. 41. xmlns:o="urn:schemas-microsoft- com:office:office" #LitmusLive @CourtFantinato
  42. 42. <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> #LitmusLive @CourtFantinato
  43. 43. #LitmusLive @CourtFantinato 120 DPI
  44. 44. What about VML? #LitmusLive @CourtFantinato
  45. 45. VML shapes with pixel values remain as pixels #LitmusLive @CourtFantinato
  46. 46. xmlns:v="urn:schemas-microsoft- com:vml" #LitmusLive @CourtFantinato
  47. 47. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft- com:vml" xmlns:o="urn:schemas-microsoft- com:office:office"> #LitmusLive @CourtFantinato
  48. 48. #LitmusLive @CourtFantinato 96 DPI
  49. 49. #LitmusLive @CourtFantinato 120 DPI - Before
  50. 50. #LitmusLive @CourtFantinato 120 DPI - After
  51. 51. Retina Images? #LitmusLive @CourtFantinato
  52. 52. Inline Image: Yes! #LitmusLive @CourtFantinato
  53. 53. Inline Image: Yes! VML Image: Yes! #LitmusLive @CourtFantinato
  54. 54. #LitmusLive @CourtFantinato <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=“width:600px; height: 318px;"> <v:fill type="frame" src="image2x.jpg" color="#fef8da" /> <v:textbox inset="0,0,0,0"> <![endif]-->
  55. 55. #LitmusLive @CourtFantinato <!--[if gte mso 9]> <v:image style="width: 600px; height: 320px;" src="image2x.jpg" /> <v:rect fill="true" stroke="false" style="position: absolute; top: 0; left: 0; width: 600px; height: 320px;"> <v:fill opacity="0%" /> <div> <![endif]-->
  56. 56. A note on Outlook 2007… #LitmusLive @CourtFantinato
  57. 57. It does not play as nice :( #LitmusLive @CourtFantinato
  58. 58. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 96
  59. 59. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 72 96 DPI (100% Zoom) PPI: 96
  60. 60. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 120 96 DPI (100% Zoom) PPI: 96
  61. 61. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 120
  62. 62. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 72 120 DPI (125% Zoom) PPI: 120
  63. 63. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 96 120 DPI (125% Zoom) PPI: 120
  64. 64. Unfortunately, correcting for one DPI, messes the other #LitmusLive @CourtFantinato
  65. 65. To recap… #LitmusLive @CourtFantinato
  66. 66. #LitmusLive @CourtFantinato 1. Add XML namespace(s)
  67. 67. #LitmusLive @CourtFantinato 1. Add XML namespace(s) 2. Include DPI/PPI image code
  68. 68. #LitmusLive @CourtFantinato 1. Add XML namespace(s) 2. Include DPI/PPI image code 3. Add CSS for pixel values
  69. 69. 1. Add XML namespace(s) 2. Include DPI/PPI image code 3. Add CSS for pixel values 4. Use retina images #LitmusLive @CourtFantinato
  70. 70. #LitmusLive @CourtFantinato Resources: http://bit.ly/litmuslive2017-outlookDPI
  71. 71. Thank You! :) #LitmusLive @CourtFantinato

×