The grid, the bad and the ugly: Mastering responsive design

Mobile opens are on the rise, and there’s no indication of the trend slowing down. A recent study showed that 50 percent of all email opens in the second quarter of 2013 were opened on a mobile device, while desktop-only and webmail-only each received 23 percent. Mobile-only also received the highest percentage of unique clicks, achieving a 40 percent share. With that kind of trajectory, what’s the best way to ensure that emails are as visually appealing and user-friendly as possible? It’s all about design — responsive design.

The basic principles of responsive design have been around for quite some time; for years there has been a desire for a unified platform to exist for desktop and mobile, one that would adapt to whatever device is used to open the email. While there are limitations, great strides have been made in eliminating many of the edits needed to modify an email from one format to another. Here are a handful of tricks you can apply to maximize a design’s responsive capabilities.

Getting to know the grid

In setting up a responsive email, there are two components: the layout (the front end) and the coding (the back end). For the layout, the basic structure — the framework, if you will — is the grid. Grids are found everywhere, from natural hexagonal honeycombs to architectural city planning to the layout of a newspaper. The same rule is applied here, to the digital landscape.


Although a grid can seem from the onset as being too constrained, the featured section is pretty flexible; it can usually be customized to look however you want. But remember, this design of many parts is really one complete unit, so when it gets reduced down to mobile you want to make sure the ratios make sense. You don’t want to lose emphasis on certain parts of your design (for example, a main image should remain the focal center, even when viewed on a mobile device).

If you have secondary content, it can easily be worked into the design in a “stacked” approach.


There are still some who feel that making a design adhere to a template or grid is cause for creative compromise. It also takes longer to code, so extra development time must be anticipated. The truth is, if you compare a well-designed responsive version to a mobile friendly version, the responsive design should maintain artistic integrity while making interaction more appealing to the viewer.

Responsive design works on all iOS and Android devices, as long as the message is opened on the device’s native email app. Problems arise when using web-based apps (such as Gmail and Yahoo). These apps don’t always recognize the additional CSS coding that is needed in order for these emails to be responsive, and will instead open the desktop version. Gmail is starting to show some compatibility, but rendering issues persist. As mobile opens rise in popularity, we may see an increase in responsive recognition.

Mind your subject lines

A best practice for traditional desktop email is that subject lines should always be short, but in the mobile universe, brevity is vital. To ensure the line appears in full, adhere to a 35 character limit with key words at the beginning. For example, “SALE! 35% off designer footwear” is a safer bet than “Your favorite footwear now 35% off!”

Next, create a pre-header that builds off the subject line, since it appears right below the subject line on the screen. For example, “SALE! 35% off designer footwear” would be effectively followed by “Gucci, Prada and Jimmy Choo are waiting for you.” Something such as, “SALE! 35% off designer footwear” followed by “Looking for handbags? Shop this season’s hot styles” would not work as smoothly and may be confusing, even if the retailer sells shoes and handbags. Connect the narrative for optimal messaging.

Pre-headers can be longer than subject lines, but remember the short and sweet rule for them as well. A pre-header that’s too long in the actual layout — even if it cuts off nicely in the desktop inbox — will break into numerous lines on mobile and push down the creative on the screen. You want your viewer to be greeted by powerful visuals, not copy.

Fonts and buttons: The bigger the better

Font size and button size are especially important considerations in responsive design. Keep this in mind when setting up the template. You want the font to be legible, and you want the buttons to be large enough for easy clickability. Also, if buttons are adjacent to each other, a template ensures they are spread apart far enough from each other to also aid in clickability.

Another benefit is to create buttons from what would traditionally be links in an email. A link is fine on a desktop, but in the mobile world tapping on one is more challenging. When turned into buttons (that only have to appear on mobile), they’re more attractive to the eye and significantly more user friendly.

It’s alive! Email animations

Animations have come a long way, and we’re seeing more and more video included in emails. I’m often asked, “What’s the ideal file size?” but there’s no one universal answer. Animations are built of three components: the number of frames, color and actual overall size of the animation (the size it will appear onscreen). The key is to keep it as small as possible; you don’t want it to take up the entire width of the layout. Smaller is always better, so when considering an animation, keep those file sizes down. Just as important is to make sure the animation complements your email; don’t use the animation as an “add on” or gimmick. It really needs to be a part of the message; customers on the go want relevant information.

Too confined for your design?

In the end, don’t give up on designing for the “small screen” — embrace it. Keep visual proportions and word counts in mind, and remember that there’s plenty of freedom to create what you want even within the confines of a grid. However, if a grid seems too creatively constricting, there is also the option of mobile friendly design. A little extra design consideration and coding time will pay dividends in happier customers interacting with your messaging.