How To Add A Sidebar To A Mailchimp Template

Layout Manipulation

As we mentioned in Responsive Multi-column Layouts, using aligned <table> elements as columns allows for a lot of flexibility in terms of mobile layout. The clearest example of that is an email with a left sidebar and right principal content area:

Layout switching in cases like this is very useful; more often than not, sidebars are for content that's secondary in importance to the principal body of the email. In the desktop view, the fact that the sidebar is to the left of the primary content doesn't really bear on how you might read the email. On a small brandish, however, the sidebar would end upward above the trunk, which doesn't make much semantic sense:

We can use the aligned <table> method to swap the society of the sidebar and trunk section and thus maintain proper semantic order when the email is viewed on a modest display. The HTML is very like to other responsive column layouts. The major differences are in the markup, where the sidebar and body are placed in a semantic gild, and the align attribute directions on each table are contrary of their desktop-view positions:

                <table                edge=                "0"                cellpadding=                "0"                cellspacing=                "0"                width=                "600"                id=                "templateContainer"                >                <tr>                <td                align=                "left"                valign=                "superlative"                >                <table                marshal=                "correct"                border=                "0"                cellpadding=                "x"                cellspacing=                "0"                width=                "400"                id=                "templateBody"                >                <tr>                <td                class=                "bodyContent"                >                <img                src=                "http://placekitten.com/g/480/300"                mode=                "max-width:380px;"                class=                "bodyImage"                />                </td>                </tr>                <tr>                <td                valign=                "meridian"                course=                "bodyContent"                >                <h1>Body</h1>                Lorem ipsum dolor sit amet.                </td>                </tr>                </table>                <tabular array                align=                "left"                edge=                "0"                cellpadding=                "ten"                cellspacing=                "0"                width=                "200"                id=                "templateSidebar"                >                <tr>                <td                valign=                "superlative"                class=                "sidebarContent"                >                <h2>Sidebar</h2>                Lorem ipsum dolor sit down amet.                </td>                </tr>                </table>                </td>                </tr>                </tabular array>

The media query CSS controls the width of each content surface area, forth with the content itself:

                <                way                type                =                "text/css"                >                @media                just                screen                and                (                max-width                :                480px                )                {                #templateSidebar                ,                #templateBody                {                display                :                block                !of import                ;                width                :                100%                !important                ;                }                .sidebarContent                {                font-size                :                16px                !important                ;                line-top                :                125%                !of import                ;                }                .bodyImage                {                peak                :                car                !important                ;                max-width                :                480px                !of import                ;                width                :                100%                !important                ;                }                .bodyContent                {                font-size                :                18px                !important                ;                line-peak                :                125%                !of import                ;                }                }                </                style                >

With the body placed on the left, simply aligned to the correct and the sidebar placed on the right and aligned to the left, the sections snap into identify once the media query triggers:

The Outlook Problem

There's a major problem with using this aligned table method, specifically having to do with Outlook'southward 22 inch height limit on documents. When a document reaches this limit, around 1800 pixels in length, Outlook 2007 & 2010 oh-so-helpfully inserts a page pause to aid with printing. That page pause ends up being inserted between the aligned tables, which causes i to motility under the other:

There's no way to disable this "characteristic"; yous're relegated to finding work-arounds. We stick to two methods: emails with concise, brusk content so that they never hitting that 22"/1800px mark, or provisional styling for Outlook, which can mitigate the event and make information technology far less noticeable.