We all have received, at one point, an email that supposedly includes one giant image, maybe a promotional banner for an upcoming event. Yet all we see in that email is one giant, empty box, like this one:
This may be because of poor Internet connection.
Most of the time, it’s because most email services (like Gmail, Yahoo! Mail, or Microsoft Outlook) do not automatically open images in an email. You’ll be asked to click the Display images below link, or view the email from a web browser.
This is troublesome for many recipients, especially for those who check their emails on a smart phone.
One way to make things easier is to “convert” your poster/banner into HTML text and graphics. We’ll show you how we turned this promotional poster into this email:
This way, your recipients won’t have to wait or click anything else to see your entire email. It takes some effort, but your email recipients will be grateful that you emailed it like this.
STEP 1. Create a table (we recommend you also center-align your text), and adjust Table Properties. Use 1 column, at least 4 rows, and zero border size (0). You can always edit this part later on.
STEP 2. You can insert any logo images. In our first row, we put two small logos and adjusted the Image Properties (size, alignment) by right-clicking on the image.
Tip: It’s best if you keep PNG transparent files of your logos, so that you wouldn’t need to worry about clashing different background colors.
STEP 3. Always provide an alternative text for each image. Right-click the image, choose Image Properties, and you’ll find a bar for the alternative text. So if the logo is the Tapulanga Foundation logo, the alternative text is Tapulanga Logo.
This is helpful during cases when even a small image as this fails to load properly. Because of the alternative text, the recipient wouldn’t have to wonder what the empty box is.
STEP 4. Create a new row (just right-click the Table) and compose your text.
This is the fun part — the trick is to simply play around with the text colors, font styles, text background colors, boldness and italics, underscores or dashes as lines, etc.
Here, we followed the text on the original poster.
The font used in our poster is not included in the list of typefaces, so we make do by using another font instead, like Trebuchet MS. Since the original poster has BASIC COURSE in a yellow backdrop, we simply selected BASIC COURSE and set its text background color to yellow.
Sometimes we use dashes ( —- ) or underscores ( _____ ) to separate chunks of text.
Add more rows as you add more text if you want.
Tip: Stick to only 2-3 font styles and colors. This gives a sense of uniformity and avoids distraction or confusion. In this case, we used three colors: black, grey, and warm yellow; three fonts: Trebuchet MS, Arial, and Georgia italic.
STEP 5. Preview your email. Make adjustments if necessary, and send away!
A more detailed version of this page can be found here.