Ce diaporama a bien été signalé.

Solving Outlook 120 DPI Scaling Issues with Hybrid Emails

5

Partager

Prochain SlideShare
CSS tutorial chapter 3
CSS tutorial chapter 3
Chargement dans…3
×
1 sur 71
1 sur 71

Plus De Contenu Connexe

Livres associés

Gratuit avec un essai de 14 jours de Scribd

Tout voir

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

×