There’s been a large discussion lately centered on the concept of content choreography and the best options for dealing with implementation. Even though all of the kinks haven’t been sorted out, new CSS layout options (flexbox, grid layouts) and javascript-based solutions (append around) give designers quite a few options to handle the task when it comes to the web. But what about in email, where javascript simply isn’t an option and the necessity of table-based layouts and a lack of common standards means flexbox is only a pipe dream? What can still be accomplished? Let’s take a look at a few common design patterns we’ve used to choreograph content and how they were implemented in an email based environment.

 

Content Stacking

The most common example of content choreography and the one that will most likely be used in almost any responsive design, content stacking is simply decreasing the number of columns used in a layout as the viewport narrows (ex. 4 to 2 to 1).

In a recent responsive welcome series that we launched for Cabela’s, there was a need for strong social calls in the body of the email to drive customer engagement. We utilized content stacking that shifted from four columns to two in order to maintain the strong visual hierarchy of the calls-to-action, no matter what size device the customer uses to view the email.

Content stacking in responsive design

Accomplishing content stacking is fairly straight forward. The markup, as with all of these design patterns (have to support Outlook!), starts with the four column version built out in nested tables. Next, media queries are used to change the display property of the columns from the default ‘table-cell’ to ‘block’, below a certain threshold. The width is also set to its new fluid value of ‘100%’. What you’re left with is a responsive four to two column layout that achieves the desired goal of maintaining visual hierarchy.

Column Switching

A variation on column stacking, column switching also involves stacking columns into rows. The major difference being that column switching requires the stacking to occur opposite of the source order. As you can see in this responsive email that we designed for Lee Jeans, the desired effect is to have the right column stack on top of the left. This can be a beneficial design for any number of reasons, from making sure the calls-to-action stay on screen for clients that don’t support media queries, to simple aesthetics.

Column switching in responsive design

To accomplish this, the two column layout is built using two table cells and then each cells display property is changed when the layout hits a certain breakpoint. This time the ‘table-header-group’ display property is applied to the right aligned column and the ‘table-footer-group’ is applied to the left aligned column. These two properties effectively move each column to the top and bottom of the table and out of source order. A perfect solution for the table-based markup required in email.

Image Shifter

Image shifter is a form of content choreography that shifts a hero image from a column orientation into a position floated just left of a headline. We first used it successfully in a newsletter design for LittelFuse in which it was important to keep the image on screen at lower screen sizes but simply stacking the columns created unnecessary vertical height to each article. The image shifter pattern solved the problem and has since become somewhat of a standard in many of our responsive newsletter designs.

Image Shifter in responsive design

The markup for this pattern starts out with two table cells, one for the image and one for the article content. Within the content cell are two nested divs, one each for the headline and article copy. This structure gives us the desired layout on larger screens. To trigger the pattern at the breakpoint we first set the ‘table’, ‘tr’, and ‘td’ elements to ‘display: block;’ and then it’s a simple matter of floating the ‘.image’ cell and setting the ‘.description’ element to ‘clear: both;’. This example also applies a ‘max-width: 100%’ to the hero image and it scales down to the correct size in both orientations.

Order and Re-order

In some cases it’s necessary to do more than just stack elements or reverse the order of two columns. This is where the order and re-order pattern comes in to play. Utilizing display types of ‘block’, ‘table-caption’, ‘table-header-group’, and ‘table-footer-group’ it becomes possible to completely reorder several rows of content. A common need for this involves navigation. As is true in the below example we designed for Nebraska Furniture Mart, on larger screens there is room to easily fit navigation above content, as the screen size gets smaller however, that same navigation takes up too much vertical space and it becomes necessary to prioritize the main content.

Order and reorder in responsive design

The markup for this pattern starts with stacked tables inside of a wrapper. Each table is placed in the order necessary for the larger screen layout and is given a specific class. Once the screen size drops below a size that can handle top navigation the ‘.wrapper’ is set to ‘display: table’ and each of the nested tables is reordered by applying the correct display type for its new position. In this case, the content is given a display type of ‘table-header-group’ to push it above the navigation. The result is a responsively choreographed template that prioritizes content and avoids the need to hide elements.

Looking Forward

Exploring content choreography and implementing patterns that achieve content parity has become an important part of our design process in an age when responsive design has moved from “maybe to mandatory.” And as the practice matures and technologies advance our patterns will undoubtedly continue to mature and advance with it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments

  • evelyn

    evelyn

    3 years
    Reply
    I tried the stacking code you posted but when i sent it to my iphone, it didn't stack....I tried changing to this: td.col {display:table-cell;} @media only screen and (max-width: 600px) { table, tr, td { display: block !important; width: 100%; } } but still no stacking happening... Which piece of this am i missing?
    • Brian Graves

      Brian Graves

      3 years
      Evelyn, Are you making sure to include a doctype and the proper html, head, & body tags in your testing? You can check out the full markup for this on this codepen I created: http://codepen.io/briangraves/pen/arDJl also there is a litmus test for this pattern here: https://litmus.com/pub/2cc4e2e/screenshots. Hope this helps! Thanks!