Wrapping Text Around Images - Higher Logic

Adding images to your email messages is a great way to:

• add visual appeal,
• help with reading comprehension for more complex ideas,
• break up big blocks of text.

In print design, it's common to see layouts that have text wrapped around imagery, but this effect can be hard to achieve in HTML emails. If you insert an image directly into a text block from the WYSIWYG editor, you might end up with a big gap and text that appears too close to the image, like you see below.

An easy way to prevent this and ensure that your layout looks uniform in all email clients is to wrap a table around the image that is just slightly larger than the image you want to include in your text. In the example above, the image is 150px, so we can insert a table that's 1 column by 1 row and 160px wide.

It’s important to change the settings for cell spacing, cell padding, and border size, as well as choosing an alignment setting for the table (a left-aligned table will sit to the left of your text).

Next, add an image to the table that you just placed in the text box. Change the alignment of the image to match the alignment of the table to provide a bit of padding between image and text.

Now you have achieved the layout effect with text-wrap around the image.

If you're comfortable with code and want to take this effect to the next level, you might want to add padding to the left or right side and the bottom of the image to ensure that image and text flow seamlessly.

Responsive considerations

If you're attempting to use this technique in a responsive message, you may want to consider what the text-wrap will look like on a mobile device.

If the image you're using is wider than 40% of your viewer's screen the space, that doesn't leave very much room for the text and will make it difficult to read, or worse, it could overlap on top of the image. With the plethora of mobile devices and screen sizes, designing for specific screen sizes is almost impossible. You may want to save yourself a complicated coding headache and use a simple two column layout so that your text and image will stack nicely on a mobile screen.