It'd be fair to say that > 70% of my life involves email. I write 3 different weekly newsletters, and I approach them all with a mobile-first mindset. Why? Because it's 2015.

And while there are a lot of tools that can help you design, test, and send a great looking email, they won't help you get opens -- and opens beget clicks!

If you ask me, the single most important thing you can do to ensure opens is nailing the subject line & preheader text preview in notifications & mobile inboxes. If you screw that up, you're getting swiped into the trash.

I've written a few tools to check for spammy language and optimize the length of your subject lines, so I thought, why not create a tool for mobile inbox previews? It'd let me iterate on subject lines / preheaders faster than sending myself tests & checking them on my phone.

How it works

I recreated the Android Gmail app's inbox in HTML, (big ups to Marvel for the Nexus 5 template), and added some JavaScript so that you can edit the sender name, subject lines, and preheader text. There's some JS in there that truncates & adds ellipses to text that extends beyond the ~40 char limit that Gmail displays.

Challenges I ran into

CSS & positioning & floats & setting widths are horrible. My least favorite part of front-end projects. And, perhaps because it was 4am, I couldn't get the text to auto-truncate & apply ellipses with CSS. I feel like that's possible.

Accomplishments that I'm proud of

I was able to reuse a lot of the JS I wrote for my headline / spammyness checker projects. Yay for reusability! I'm also proud of the borderless text boxes with mouseovers. I think they make the experience a lot better.

What I learned

Can't say I've 'learned' much — I just modified some tutorials — but this was my first time using the Flexbox model. It's pretty powerful, but I felt weird also using floats. It's a kludge to be sure and I need to do more reading on it.

What's next / todos

I need to clean up the CSS, add GA tracking, and some other stuff -- but the biggest thing I want to do is create a version for the iOS mail app. Anybody want to help me with that?

Built With

+ 5 more
Share this project: