Where am I going? Who knows? This is a work in progress!
Date: August 30, 2014
Client: Real Magnet
Goal: Create simple, yet versatile responsive email template designs that allow for easy composition of email messages.
Challenge: To make these responsive email messages unbreakable, I needed to create a solid framework for the responsive code that would allow my users to drag and drop any combination of content elements into their message.
Process: I started by analyzing the structure of the HTML code generated by the message editor. I noticed that the rows, columns, images, and text-boxes developed by the editor were all identified by data-zones with specific IDs. Following the basic table layout pattern, I was able to target these IDs to make columns stack and rows expand to the width of their containers.
Next, I created a design that could accommodate the messaging needs of my users. By identifying common threads between basic message types (newsletters, announcements, promotions etc.), I developed a list of content building blocks. For instance, a newsletter typically features several article blocks; each article block includes a heading, body text, a read more link, and a picture. Once I had brainstormed enough content blocks, I assembled a master template.
After several rounds of internal testing, I presented my design to our company’s stakeholders. I explained my modular approach and demonstrated how the user could quickly create custom messages. After some debate, I was encouraged to simplify and expand my design into five layouts.
These templates were published to the template library in early September 2014. I’ve since made some alterations to the body text to clarify which devices or email clients support responsive email design.
