Responsive Email

Huntsman School of Business

Responsive HTML email that the Huntsman School of Business at Utah State University uses for their monthly email to students and alumni. See issues and sign up for the email at huntsman.usu.edu.

This project was a big one. Before working on this project, I had no background in HTML emails. All I'd ever done was receive many from all the places I'd visited online. So off to Google I went to read up on HTML emails. Campaign Monitor and Mailchimp proved to be great resources as I started building the framework for the email. After about 50 hours of research I finally had a solid proof of concept finished.

The basic building blocks of HTML emails are tables. When in doubt, add a new table. It's really dirty, and completely counterintuitive in our HTML5 and CSS3 world, but it's the only way to "guarantee" that your email will display correctly across all email clients. As far as styling goes: inline is the way to go. You can put a <style> tag, inside the body, but you won't be guaranteed that those styles will take in certain clients. Basically, you're best off just using tables and inline styles for everything.

What complicated this email template for me was not only making the template for the client, but making it responsive based on screen size. The email was supposed to show up with two columns on larger screens, but based on a media query in the style tag drop to just one column on phones and tablets. This would be very simple if all email clients supported the media query tag, or the style tag for that matter, but since they don't this process took a lot more time to get working correctly. In the end, not all clients support enough styles to make the responsiveness work completely. But with enough manipulation I got the template to work in the majority of clients, especially the most popular ones.

Screenshots

Conclusion

This project was a long one. I spent about 50 hours on the proof of concept and another 55 hours on client-specific styling. It was a little tedious at times, but I am glad I got the opportunity to learn a new area of web development. From here on out, if I was asked to make an HTML email, I could do it. It would take a while, but I now have the skills to do so.