Solving Outlook 120 DPI

Scaling Issues with

Hybrid Emails
#LitmusLive @CourtFantinato
Email Marketing Specialist
#LitmusLive @CourtFantinato
Courtney Fantinato
What is DPI?
#LitmusLive @CourtFantinato
It’s for accessibility!
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
What happens with

higher DPI?
#LitmusLive @CourtFantinato
Examples
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
120 DPI
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
120 DPI
What causes this?
#LitmusLive @CourtFantinato
1. Width and height attributes
in pixels remain as pixels
#LitmusLive @CourtFantinato
2. Other pixel values

turn into points
#LitmusLive @CourtFantinato
So, what can we do?
#LitmusLive @CourtFantinato
There are 3 parts required…
#LitmusLive @CourtFantinato
Part 1: XML Namespace
#LitmusLive @CourtFantinato
xmlns:o="urn:schemas-microsoft-
com:office:office"
<html lang="en" 

xmlns="http://www.w3.org/1999/xhtml"

xmlns:o="urn:schemas-microsoft-
com:office:office">
#LitmusLive @Court...
Part 2: Normalize DPI

for Images (PPI)
#LitmusLive @CourtFantinato
<!--[if gte mso 9]><xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocument...
Part 3: CSS
#LitmusLive @CourtFantinato
width="600"

#LitmusLive @CourtFantinato
becomes
style="width: 600px;"
Option 1:

<table ... width="600" style="width: 600px;">
#LitmusLive @CourtFantinato
Option 2:

<table ... style="width: 6...
Option 1:

<td valign="top" align="left" width="300"
style="width: 300px;">
#LitmusLive @CourtFantinato
Option 2:

<td val...
If you use cellspacing and/
or cellpadding…
#LitmusLive @CourtFantinato
<table border="0" 

cellspacing="4" cellpadding="8"

style="mso-cellspacing: 4px; 

mso-padding-alt: 8px 8px 8px 8px;">
#L...
How does this play into
Hybrid Emails?
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
<td valign="top" align="center" style="font-size: 0; padding: 15px 15px 15px 15px;">
<div styl...
#LitmusLive @CourtFantinato
<td valign="top" align="center" style="font-size: 0; padding: 15px 15px 15px 15px;">
<!--[if g...
MSO Conditional

Comments!
#LitmusLive @CourtFantinato
<!--[if gte mso 9]>

<table ... style="width: 600px;">

<tr valign="top">

<td valign="top" align="center">

<![endif]—>
#...
#LitmusLive @CourtFantinato
Table Cell
<!--[if gte mso 9]>

<table ... width="100%">

<tr valign="top">

<td ... style="wi...
<!--[if gte mso 9]>
<table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%">
<tr valign="top">
...
Examples
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
Without Fix

120 DPI
With Fix

120 DPI
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
Without Fix

120 DPI
With Fix

120 DPI
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
120 DPI
xmlns:o="urn:schemas-microsoft-
com:office:office"
#LitmusLive @CourtFantinato
<!--[if gte mso 9]><xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocument...
#LitmusLive @CourtFantinato
120 DPI
What about VML?
#LitmusLive @CourtFantinato
VML shapes with pixel 

values remain as pixels
#LitmusLive @CourtFantinato
xmlns:v="urn:schemas-microsoft-
com:vml"
#LitmusLive @CourtFantinato
<html lang="en" 

xmlns="http://www.w3.org/1999/xhtml" 

xmlns:v="urn:schemas-microsoft-
com:vml" 

xmlns:o="urn:schemas-m...
#LitmusLive @CourtFantinato
96 DPI
#LitmusLive @CourtFantinato
120 DPI - Before
#LitmusLive @CourtFantinato
120 DPI - After
Retina Images?
#LitmusLive @CourtFantinato
Inline Image: Yes!

#LitmusLive @CourtFantinato
Inline Image: Yes!

VML Image: Yes!
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" ...
#LitmusLive @CourtFantinato
<!--[if gte mso 9]>

<v:image style="width: 600px; height: 320px;"
src="image2x.jpg" /> 

<v:r...
A note on Outlook 2007…
#LitmusLive @CourtFantinato
It does not play as nice :(
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
96 DPI (100% Zoom)

PPI: 96
#LitmusLive @CourtFantinato
96 DPI (100% Zoom)

PPI: 72
96 DPI (100% Zoom)

PPI: 96
#LitmusLive @CourtFantinato
96 DPI (100% Zoom)

PPI: 120
96 DPI (100% Zoom)

PPI: 96
#LitmusLive @CourtFantinato
120 DPI (125% Zoom)

PPI: 120
#LitmusLive @CourtFantinato
120 DPI (125% Zoom)

PPI: 72
120 DPI (125% Zoom)

PPI: 120
#LitmusLive @CourtFantinato
120 DPI (125% Zoom)

PPI: 96
120 DPI (125% Zoom)

PPI: 120
Unfortunately,

correcting for one DPI,

messes the other
#LitmusLive @CourtFantinato
To recap…
#LitmusLive @CourtFantinato
#LitmusLive @CourtFantinato
1. Add XML namespace(s)
#LitmusLive @CourtFantinato
1. Add XML namespace(s)

2. Include DPI/PPI image code
#LitmusLive @CourtFantinato
1. Add XML namespace(s)

2. Include DPI/PPI image code

3. Add CSS for pixel values
1. Add XML namespace(s)

2. Include DPI/PPI image code

3. Add CSS for pixel values

4. Use retina images
#LitmusLive @Cou...
#LitmusLive @CourtFantinato
Resources:

http://bit.ly/litmuslive2017-outlookDPI
Thank You! :)
#LitmusLive @CourtFantinato
Prochain SlideShare
Chargement dans…5
×

Solving Outlook 120 DPI Scaling Issues with Hybrid Emails

405 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

×