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.
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.
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.
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 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.
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.
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.
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.