This past week at Sailthru was all about digging back into the painful process of coding HTML emails.
First the rough spot….one of the key lessons for this week is all about coding from scratch vs. using some kind of pre-baked code or using exported code from a program. The latter can be helpful, but it’s never a panacea in the world of web development. I knew this, but now I know it even better.
Shortcut to a Broken Template – aka “slice fail”
Through some searching and fussing with options for slicing up PSD files for emails, we discovered that the photoshop slice tool actually allows you to export html and images for emails. I knew about the slice tool, but didn’t realize the export tool could spit out a fully coded html page with all the images in their right place. Upon making this discovery, we thought we had just found a huge time-saver for building out image-heavy email templates. My gut suggested it might not be the perfect solution, but I thought it was at least worth the effort to find out if it worked, since it could save a ton of time.
Well, the code that gets exported is far from perfect for delivery to a wide range of email clients. What might look perfect as a basic html page or even as an email on Mac mail, can be a total mess in Gmail, AOL, Outlook, and a number of other popular email clients. I tried re-slicing and re-exporting a number of times just to to see if some alternate layouts or settings might work better. None of the smaller edits did the trick. As a result, after putting in hours on one approach, I was forced to start over on the template. And while it looks like I will be able to reuse some smaller elements and images from the sliced-and-exported version, I basically have to start from scratch.
With all that said, I feel like the experience was valuable as a learning process, mainly for two reasons:
Finally Forced into Photoshop
Despite being in the web world for years — including a lot of marketing roles — I’ve never actually had Photoshop on my machine, and therefore have not really had the opportunity to build more than some basic design skills. However, since HTML email is pretty heavy on images and we have had to code templates from PSD files, I’ve been forced to dig into the program a bit more than I ever have. It has been a bit slow-going, but I know that it is a key skill to develop, so I appreciate finally being pushed to learn it. I still have a lot to learn and plenty to just get used to with the basic interface. But even over the course of a couple days, I already am feeling pretty far beyond where I started.
Starting to Really Understand What Makes HTML Email Template Work
On a similar note, I also am starting to feel more comfortable with the general structure and coding of HTML emails. Despite the trials and tribulations of having to start over a single email template several times, I have been gradually picking up on more and more of what makes HTML emails work, or more importantly, not work. I still have a way to go in feeling completely fluent as well as in increasing my overall speed, but it is definitely starting to click.
And just for fun, here are a few image search results for “slice fail”:
