I’ve been spending a bunch of time working on responsive design projects lately and have found one major flaw with how I share that information with users. The HTML emails I send are designed to fit into 600px inboxes, but the text isn’t responsive. Why would someone go to this other resource if the call-to-action isn’t working great on their device.
After reading this article on the Mailchimp’s Blog about text resizing in emails, the little cartoon light above my head lit-up. Bing! By adding a magic little snippet of code, all of my text that isn’t already marked !important or in a span will bump up in size on some smart phones. I haven’t tested this too heavily, but it works great on the iPhone. Since iPhone is the email client used by an huge percentage of my list receipeints I can be happy with the results for now.
Plus, people update their smart phones much faster than their Windows XP desktops, so hopefully this will work on more inboxes in the future.
— The Onion (@TheOnion) April 26, 2012
Here’s a little break down of how this simple media query works.
Note: For those of you who don’t know. HTML emails are still done in table layout. It’s like coding for 2003. TIME TRAVEL!