Redesign: PJ Library New York Newsletter Template

Create a Newsletter, but Make It New York

The redesign for the PJ Library in New York Newsletter was a long time coming. What started as a generic drag and drop Mailchimp template had been hastily thrown into a PJ Library branded design with no distinction for the local community. It was time for the template to look more “New York” and show what the city had to offer. Luckily, PJ Library’s Senior Graphic Designer had created some exciting and fun illustrations!

Design and Code Requirements

We had a few requirements, otherwise I had full control over the design:

  • New York Specific Illustrations
  • Opening Note
  • Events Section
  • Featured Blogs Section
  • Donors Section
  • Responsive
  • Dark Mode Optimized

A Coding Challenge Appears: The Events Section

The events section is set up as two columns, with the date stacking. I needed the date to show on one horizontal line on mobile as everything stacked. This proved challenging since a breaking line gets added in to have the date stack on desktop. How the heck was I going to remove that little snippet on mobile?

Enter: Media queries (of course!)

I added a class to my HTML:

and used this little snippet of code to achieve my layout on mobile:

Dark Mode Optimized

Dark Mode on iPhone 11

This is the first template I've optimized for dark mode. Since the layout is simple enough, and the logos are not black, I didn't have to do much work. I did have to use a media query to swap out a sponsor logo at the bottom of the email.

Launch

We launched this email in February 2020, so it’s only been a few short months since launching the template. I’ve been told anecdotally that the events section is easier to navigate.

Most recently, the template has been featured on ReallyGoodEmails, the leading website that shows “the web’s best, and most attractive” emails.