|
|
From: Pottery Barn Kids Subject Line: Trick or treat! Costumes starting at $29 + treat bags ship free Date: Thursday, August 19, 2010 From: Nature Made Subject Line: Men's Health: The Benefits of Fish Oil for Men Date: Friday, June 18, 2010 |
|
A few tips for designing with HTML text: Use HTML-safe fonts. Using fonts such as Arial, Georgia, Verdana and Times will allow the copy to be coded as HTML text instead of as an image, thus allowing the copy to be viewable with images disabled. If you find system text utterly boring or off-brand, we suggest using your special font for the headline only -- just make sure to include an alt tag on that image when coding. 
Use solid colors behind HTML text. Outlook does not display background-images (images that appear behind HTML text). So keep that area free of gradients, patterns or images. Outlook does, however, show background-colors -- so the color behind your HTML text doesn't have to be white. In this example, notice that the image behind the system text does not show up in Outlook. Instead, you see a solid color (that you can choose). It's particularly important to apply a background color behind your images if your system text is white. 
Keep copy away from rounded corners. When designing with rounded corners, keep in mind that the portion of the box that includes the corners will need to be cut as an image. So keep your copy outside of that image in order to code that copy as HTML text. 
Know that HTML text will expand differently (horizontally and vertically) in different browsers. Therefore: 1) make sure to leave adequate room at the end of your paragraphs in case a word needs to jump to the next line, 2) don't cut your paragraph too close to images, 3) make sure your line height is at least equal to the font size and 4) leave some extra space below your copy block. 
| ||
