Solving Outlook 120 DPI Scaling Issues with Hybrid Emails
Signaler
Partager
•5 j'aime•4,587 vues
![<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
#LitmusLive @CourtFantinato](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-20-2048.jpg?cb=1667445475)
![#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>](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-29-2048.jpg?cb=1667445475)
![<!--[if gte mso 9]>
<table ... style="width: 600px;">
<tr valign="top">
<td valign="top" align="center">
<![endif]—>
#LitmusLive @CourtFantinato
Table](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-31-2048.jpg?cb=1667445475)
![#LitmusLive @CourtFantinato
Table Cell
<!--[if gte mso 9]>
<table ... width="100%">
<tr valign="top">
<td ... style="width: 300px;">
<![endif]-->](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-32-2048.jpg?cb=1667445475)
![<!--[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](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-33-2048.jpg?cb=1667445475)
![<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
#LitmusLive @CourtFantinato](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-42-2048.jpg?cb=1667445475)
![#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]-->](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-54-2048.jpg?cb=1667445475)
![#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]-->](https://image.slidesharecdn.com/courtneyfantinato-litmuslivefinal-170803005405/75/solving-outlook-120-dpi-scaling-issues-with-hybrid-emails-55-2048.jpg?cb=1667445475)
Solving Outlook 120 DPI Scaling Issues with Hybrid Emails
•5 j'aime•4,587 vues
Signaler
Partager
Télécharger pour lire hors ligne
Litmus Live 2017 presentation
Contenu connexe
Tendances
Tendances(20)
Similaire à Solving Outlook 120 DPI Scaling Issues with Hybrid Emails
Similaire à Solving Outlook 120 DPI Scaling Issues with Hybrid Emails(20)
Dernier
Dernier(20)
Solving Outlook 120 DPI Scaling Issues with Hybrid Emails
- 1. Solving Outlook 120 DPI Scaling Issues with Hybrid Emails #LitmusLive @CourtFantinato
- 2. Email Marketing Specialist #LitmusLive @CourtFantinato Courtney Fantinato
- 3. What is DPI? #LitmusLive @CourtFantinato
- 4. It’s for accessibility! #LitmusLive @CourtFantinato
- 6. What happens with higher DPI? #LitmusLive @CourtFantinato
- 12. What causes this? #LitmusLive @CourtFantinato
- 13. 1. Width and height attributes in pixels remain as pixels #LitmusLive @CourtFantinato
- 14. 2. Other pixel values turn into points #LitmusLive @CourtFantinato
- 15. So, what can we do? #LitmusLive @CourtFantinato
- 16. There are 3 parts required… #LitmusLive @CourtFantinato
- 17. Part 1: XML Namespace #LitmusLive @CourtFantinato xmlns:o="urn:schemas-microsoft- com:office:office"
- 18. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft- com:office:office"> #LitmusLive @CourtFantinato
- 19. Part 2: Normalize DPI for Images (PPI) #LitmusLive @CourtFantinato
- 20. <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> #LitmusLive @CourtFantinato
- 21. Part 3: CSS #LitmusLive @CourtFantinato
- 23. Option 1: <table ... width="600" style="width: 600px;"> #LitmusLive @CourtFantinato Option 2: <table ... style="width: 600px;">
- 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. If you use cellspacing and/ or cellpadding… #LitmusLive @CourtFantinato
- 26. <table border="0" cellspacing="4" cellpadding="8" style="mso-cellspacing: 4px; mso-padding-alt: 8px 8px 8px 8px;"> #LitmusLive @CourtFantinato
- 27. How does this play into Hybrid Emails? #LitmusLive @CourtFantinato
- 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. #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>
- 31. <!--[if gte mso 9]> <table ... style="width: 600px;"> <tr valign="top"> <td valign="top" align="center"> <![endif]—> #LitmusLive @CourtFantinato Table
- 32. #LitmusLive @CourtFantinato Table Cell <!--[if gte mso 9]> <table ... width="100%"> <tr valign="top"> <td ... style="width: 300px;"> <![endif]-->
- 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
- 36. #LitmusLive @CourtFantinato Without Fix 120 DPI With Fix 120 DPI
- 38. #LitmusLive @CourtFantinato Without Fix 120 DPI With Fix 120 DPI
- 42. <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> #LitmusLive @CourtFantinato
- 44. What about VML? #LitmusLive @CourtFantinato
- 45. VML shapes with pixel values remain as pixels #LitmusLive @CourtFantinato
- 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
- 49. #LitmusLive @CourtFantinato 120 DPI - Before
- 50. #LitmusLive @CourtFantinato 120 DPI - After
- 52. Inline Image: Yes! #LitmusLive @CourtFantinato
- 53. Inline Image: Yes! VML Image: Yes! #LitmusLive @CourtFantinato
- 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. #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. A note on Outlook 2007… #LitmusLive @CourtFantinato
- 57. It does not play as nice :( #LitmusLive @CourtFantinato
- 58. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 96
- 59. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 72 96 DPI (100% Zoom) PPI: 96
- 60. #LitmusLive @CourtFantinato 96 DPI (100% Zoom) PPI: 120 96 DPI (100% Zoom) PPI: 96
- 61. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 120
- 62. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 72 120 DPI (125% Zoom) PPI: 120
- 63. #LitmusLive @CourtFantinato 120 DPI (125% Zoom) PPI: 96 120 DPI (125% Zoom) PPI: 120
- 64. Unfortunately, correcting for one DPI, messes the other #LitmusLive @CourtFantinato
- 66. #LitmusLive @CourtFantinato 1. Add XML namespace(s)
- 67. #LitmusLive @CourtFantinato 1. Add XML namespace(s) 2. Include DPI/PPI image code
- 68. #LitmusLive @CourtFantinato 1. Add XML namespace(s) 2. Include DPI/PPI image code 3. Add CSS for pixel values
- 69. 1. Add XML namespace(s) 2. Include DPI/PPI image code 3. Add CSS for pixel values 4. Use retina images #LitmusLive @CourtFantinato
- 71. Thank You! :) #LitmusLive @CourtFantinato