Posted 8 months ago
MOBILE EMAILS: RESPONSIVE IS NOT ALWAYS THE ANSWER
Email and html is that one place where old school html table tags still rule. Yet, as we see more and more responsive website and web apps, clients are looking to make one fit all solutions for everything including their email. However you can’t always have it “your way right away”. If you have a template that has been working for you, you need to first consider can it be redesigned and still be as email client compatible as possible. Is it working Gmail, Yahoo, Apple, and most dominant of all Outlook?
Some things we just can’t do. See http://www.campaignmonitor.com/css/ for a list of the current css compatibility.
Take the two html files here the AppUpEmail template from Intel has 16 nested tables some within each other others sitting in neighboring cells. I attempted to decipher and make this responsive and began suspecting brain surgery might be easier to figure out. After burning far too many hours (5) on it the best solution was not to change the template. The client still liked the current layout and it was serving their purposes.
Instead I opted to go the pre-header route. Take a look at lines 6-18 of the AppUppEmail. By adding this to the email I was able to create a pre-header which shows up in the email preview of the inbox on both the mobile and desktop client. It has the added bonus of including key words to encourage the user to open the message. I was also included a href to a mobile friendly version that would appear when the user opened the email on their mobile device.
The mobile version as you can see contains no tables but is a simple set of divs stacked on top of each other to resemble rows and make for easy portrait viewing of the email. It is responsive though adjusting from landscape and portrait orientation based on the screen width. It took me far less time than attempting to decipher the template (1hr). Thus the client could potentially keep their existing template while also delivering a optimal mobile experience to the reader.
