Weeknotes 22:36

November 24, 2022

Week of November 13–19

Work Highlights

  • We are building a new site for Principal Media that will launch at the end of the month. The project moved into client QA (quality assurance) this week. I finished up some behind-the-scenes work and then addressed some of the early client feedback at the end of the week.
  • I was able to fix an issue that I was having with the hero video covering the full width and height of the screen across device sizes. Embedding a video in an iframe was not working because an iframe does not support the object-fit property. But the video element in HTML does support object-fit. I decided to use an mp4 file instead of a Vimeo embed for the hero video so that I could achieve the desired outcome.
  • I really enjoyed working on the project on Friday as I had more meeting-free time in the afternoon. I was able to get into “flow” and worked out a hero animation for one of the secondary pages. The animation was four separate words that describe the client’s work that needed to animate in and out in succession. My teammate had suggested using GreenSock’s SplitText plugin. I was able to figure out a simpler solution that did not require adding the extra code of the plugin. I had struggled to figure out the solution the day before. But stepping away from the problem and then having some more time and space helped me be in a better headspace to solve it.
  • I stepped into a time machine and worked on an HTML email template for a couple of days mid-week. I share more about that adventure (or misadventure to be more accurate) below.

HTML Email Hell

“HTML Email Hell” was the status message I posted in Slack mid-week. My teammate, Ryan, noticed and commented with a “LOL” and I got sympathy from one of my other teammates.

I had the task of creating an HTML email template for one of our clients. It is not a task I look forward to because HTML email is difficult.

  • There are several popular email clients (I am looking at you Microsoft Outlook) in which CSS layout is not supported. The only way to make HMTL emails look good across clients is to use a table-based layout. It is like revisiting the 1990s each time I have to code an HTML email.
  • There are many pitfalls and best practices to making HTML emails look good and function across the spectrum of email clients. It is a niche set of knowledge that is hard to keep up with.
  • The demand for HTML email templates is rare in the clients we work with. In the last three years, I have averaged about one template per year. It is difficult to justify spending time keeping up with the best practices with HTML email when the demand is low.  It is difficult enough to keep up with the latest CSS and tools I need to know or would like to know to apply to the projects that I spend the bulk of my time working with.
  • Each new HTML email project takes time to get back up to speed reacquainting myself with the tool I use and the best practices that I have learned over the years.

I discovered MJML several years ago. It really helped to speed up the process as it incorporates best practices into the framework. Creating an HTML email was less of a headache after I found this software.

I was trying to create a template for our client could use with MailChimp. I was utilizing their templating language to create repeatable variant blocks that would give the client flexibility to use different layouts because their content varies from month to month. I referenced a project from three years ago to remember what tags I needed to use and where to use them. I added comments to MJML so that I could add the tags to the exported HTML. It took me a couple of hours to get that worked out after I had to make some other changes to the MJML and reexport the HTML code.

When I pasted my code into MailChimp, the template did not work as expected. I made some adjustments to my MJML code and tried several more times but still could not get it to work. I hit a blocker that I did not know how to remove.

I tried Googling to find some help but found a lack of resources on the subject. MailChimp’s documentation is pretty sparse and did not help me. With most coding problems, I would reach out to my teammates and one of them usually could help or at least point me in the right direction. But because HTML email is such a niche part of our practice, they were not able to help me out in this instance.

In the end, I had to abandon my solution to the problem. I was wanting to offer the client more flexibility than the MailChimp service had to offer. There is also a possibility that the functionality on MailChimp is no longer supported. I believe they have a new editor but I did not see documentation on how to approach my solution for it.

Our team is going to have to try another solution. And I had to turn my attention back to a project that we are launching at the end of the month.

Articles I read

Books I am reading

What I watched

  • Downton Abbey (Prime) – My wife and I started watching it this week. I think we have seen bits and pieces on PBS when flipping around but now we are properly watching it in order. I was somewhat inspired to watch it after visiting the Biltmore Estate in Asheville on our recent team (LGND) retreat.
  • Kim’s Convenience (Netflix)
  • Tales of the Jedi (Disney+) – We watched 4 of the 6 this week and enjoy these shorts.
  • Andor (Disney+) – We watched a couple of episodes to catch up this week.
  • The Great British Baking Show (Netflix)
  • Pati’s Mexican Table (Create/PBS) – It is always a joy to hear Pati talk about her heritage and inspiration for her cooking.
  • Young Sheldon (CBS) – I don’t watch this often. It helped take my mind off a stressful situation that I had little control over.
  • The Great British Baking Show (Netflix) – We enjoyed the finale as a family. We also enjoyed one of the holiday specials over the weekend.

What I played

  • FIFA 23 (Manchester City) – I believe I played a game or two on Saturday.

Comments are closed.