Responsive Captioned Images

The captioned image design pattern is ubiquitous in email, so building responsive versions of this pattern is a must. The way these responsive blocks work is mechanically similar to responsive column layouts, with some extra bits mixed in.

Top Caption Image

For images with a top or bottom caption, the code is straightforward. These two patterns are built using one two-row table. For styling flexibility, the caption text is contained within a nested table:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td align="center" valign="top" style="padding-right:20px; padding-bottom:20px; padding-left:20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-top:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="padding-top:20px;">
                        <img src="..." width="520" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Bottom Caption Image

The bottom caption image uses the same code, with the row order swapped:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td align="center" valign="top" style="padding-top:20px; padding-right:20px; padding-left:20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td valign="top" style="padding-bottom:20px;">
                        <img src="..." width="520" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-bottom:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Responsive Top & Bottom Caption Image

A responsive version of the top and bottom caption image block is driven primarily by the media query style attached to the image, which needs to be made fluid or adaptive to multiple display sizes.

The code for the block remains the same, save for class=“flexibleImage”, which gets added to the image…

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td align="center" valign="top" style="padding-top:20px; padding-right:20px; padding-left:20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td valign="top" style="padding-bottom:20px;">
                        <img src="..." width="520" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-bottom:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

…and is referenced in the media query styles that resize the image according to display size. Just two styles are needed; the image’s original full width of 520px is set as its max-width, and its width is set to 100%, making it fluid:

<style type="text/css">
    @media only screen and (max-width: 480px){
        .flexibleImage{
            max-width:520px !important;
            width 100% !important;
        }
    }
</style>

Right Caption Image

Right and left caption image blocks are slightly more complex in the way they’re constructed. Essentially, there are two methods to building this pattern. Here, we’ll concentrate on the ‘aligned table’ method, since it’s the most flexible. The block is built using two aligned tables, nested within a containing table. One aligned table holds the image, the other holds the text:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td valign="top" style="padding-top:20px; padding-right:20px; padding-left:20px;">
            <table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
                <tr>
                    <td align="center" valign="top" style="padding-bottom:20px;">
                        <img src="..." width="200" />
                    </td>
                </tr>
            </table>
            <table align="right" border="0" cellpadding="0" cellspacing="0" width="300">
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-bottom:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Left Caption Image

For an image block with a caption on the left side, the only change that needs to be made is to the values in each tables align attribute. Simply swap the alignment direction, and you get the desired layout change:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td valign="top" style="padding-top:20px; padding-right:20px; padding-left:20px;">
            <table align="right" border="0" cellpadding="0" cellspacing="0" width="200">
                <tr>
                    <td align="center" valign="top" style="padding-bottom:20px;">
                        <img src="..." width="200" />
                    </td>
                </tr>
            </table>
            <table align="left" border="0" cellpadding="0" cellspacing="0" width="300">
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-bottom:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here, the reason we only change the value of the align attribute is so that we follow the semantic standard laid out for layout manipulation. On small displays, when the media query kicks in and the responsive version of the block is rendered, our content maintains an order that makes sense.

Responsive Right & Left Caption Image

A responsive version of the right & left caption image blocks requires a slightly more complex media query ruleset. Not only does the image have to be made fluid, the side-by-side layout must be swapped to a vertical stack as well:

Like with the top & bottom caption image blocks, class=“flexibleImage” is added to the image element. In addition, class=“flexibleContainer” is added to each of the aligned tables:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#E5E5E5; border:1px solid #CCCCCC;">
    <tr>
        <td valign="top" style="padding-top:20px; padding-right:20px; padding-left:20px;">
            <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="flexibleContainer">
                <tr>
                    <td align="center" valign="top" class="imageContent">
                        <img src="..." width="200" class="flexibleImage" />
                    </td>
                </tr>
            </table>
            <table align="right" border="0" cellpadding="0" cellspacing="0" width="300" class="flexibleContainer">
                <tr>
                    <td valign="top" style="color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:left; padding-bottom:20px;">
                        <h3>Kitten</h3>
                        <br />
                        A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

We can then manipulate the tables using media query styles:

<style type="text/css">
    @media only screen and (max-width: 480px){
        .flexibleImage{
            max-width:520px !important;
            width 100% !important;
        }

        .flexibleContainer{
            display:block !important;
            width:100% !important;
        }
    }
</style>