Creating Graphic Emails in Outlook to be Viewed by Web-based Email Clients

  • Text Boxes Cannot touch any Graphic Box, all Objects must be Clear of any and all Overlaps or text will be distorted as it tries to render the text on top of the image, according to conditions of multiple objects present in the same space in the rendering engines of major web-based email clients
  • Text Boxes will contain transparent Background, and the only color present behind a text box should be the background color of the entire email
  • Tables Can be Filled and have Colored text, but text needs to be specified, auto text color to contrast fill will not be seen, be sure to enforce all colors manually
  • Titles & Related Body Text are best done with 2-row Tables, each row separately formatted
  • Background Colors are best done simply by adding a stationery or background fill or background fill effect
  • When Positioning Graphics, Use “Absolute Position” when Placing and Formatting AutoShapes
  • PNG graphics are most suitable
  • Photoshop can be used to create & export the PNG Elements needed
  • To add text on top of graphics:
    • Crop the Image section where text will be placed to clear that space of any graphic
    • Use a table with a fill of the same color as the Graphic, and place it near the graphic but be sure the border of the table is not touching the border of the graphic at all, and then add the text
    • if they arent close enough, try adjusting the background color or fade,
    • You can also try to create a duplicate table to be placed behind the table containing text, and also behind the graphic, which fills any blank space between the graphic and the table containing text
    • Remove all borders from tables
    • **its possible a blank table overlapping may be moved into the wrong place during rendering in some web services
  • Another option to work around the overlap rendering poorly, and the lack of free-moving positioning in Tables, is to do the following:
    • First, Create a Text Box from the ‘Insert’ menu, and place it over the graphic you want to have text on
    • Put your cursor into the Text box, and create a Single Row, Single Column table, also from the ‘Insert’ menu
    • Put your cursor into the table, hit enter a few times to make it larger if needed
    • Add Shading / Fill color from the “Design” tab, to match your graphic (having no background color will not work at all, and will render exactly as if there was no table present and only a text box)
    • Add and format your text within the colored Table
    • Format both the TextBox and the table with no border
    • Position the text box where you want it
    • This seems to have the following effects in the Web-Mails I’ve tested it with:
      • Renders as a colored table, rather than as a graphic
      • The Color Table has rendering priority and is rendered with text in original format and appearance over the graphic
      • No Text Distortion
  • Use as few elements as possible, more elements increases risk of something going wrong or rendering improperly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s