VVTools for Email Development
Hey all,
During The Email Design Conference, I learned about new and interesting tools that I can use to enhance my email campaigns. I listed some of the tools below but I've probably missed a bunch of them. Could you guys help me completing this list?
Coding
http://emmet.io/
http://www.codecademy.com/
http://infohound.net/tidy/
http://www.cupcakeipsum.com/
http://www.sublimetext.com/
Responsive Emails
https://github.com/briangraves/ResponsiveEmailPatterns
http://zurb.com/ink/
http://tedgoas.github.io/Cerberus/
http://internations.github.io/antwort/
What others are doing?
https://dribbble.com/
https://stamplia.com/
http://reallygoodemails.com/
http://www.corihemmah.com/
Send
https://www.senderscore.org/
https://www.sendforensics.com/email-deliverability-test/
http://www.w3.org/2002/01/spellchecker
Images
http://jpeg-optimizer.com/
http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/
Typography
Google Fonts
Google Palette of Colors
Metrics and Analytics
https://www.geckoboard.com/try-geckoboard/
http://awesomescreenshot.com/
Data Smart by John Foreman
http://www.crazyegg.com
Quality
Lean
Six Sigma
Asana
Data
http://www.tableausoftware.com
Insightera
Real Time Monitoring
https://hootsuite.com/
http://www.salesforcemarketingcloud.com/
https://www.viralheat.com/
Viewport Resizer, for quick responsive testing in-browser.
Typography
http://www.ffffallback.com
Detergent.io for preparing the text for pasting into HTML - special entity encoding, invisible character removal, typography improvements
You listed some really good ones. I especially like Crazyegg.com, senderscore.org, Tableau and Viralheat.com to name my favorites. I'll check out the others too. Thanks for the helpful list.
Thanks for posting this list... for those who couldn't attend.
Coding
What others are doing?
Images
Love, love, love your idea! Here are some that I wrote down:
Typography
http://typecast.com
http://www.webtype.com/news/2014-06
Templates
http://templates.mailchimp.com
Responsive
http://responsiveemailresources.com
Hello, I am trying to find out if the files used in the advance email workshop at the recent conference might be available from someone. I missed the workshop but attended the conference in Boston. Thanks
Hi Debbie! Hope you enjoyed the conference and your time in Boston. We'll be sending out an email in the next few days with links to all the presentations and files.
Thanks Justine. Yes, I did.
This is awesome, and thanks Team Litmus for an excellent conference. Having learned of your relative infancy (and I mean that respectfully) it's incredible the standard you've set in the industry and the incredible 2 years of conferences that I've personally attended.
I'm particularly keen on learning more about the countdown timer hack that was cited, in addition to any resources on how B&Q achieved that amazing hover menu effect I believe is called a 'content carousel'. Do we have any resources, blogs, guides or breakdowns on the preceding?
And Paul Airy, I see your name in this topic, just wanted to drop a line to say that was an incredible segment you presented at the conference. I'll be taking your advice to our V2.1 template that will be in WW circulation.
Thanks All,
Nathan, NVIDIA (EMEAI)
Glad you enjoyed the conference! Alex Ilhan actually did a great writeup of the countdown timer hack that you can read here.
As for the B&Q email, I have yet to see a blog post about it, but I can give you a fairly high-level overview of how it works.
Starting with a solid foundation that works across email clients, the email uses four main things to achieve the carousel effect: absolute positioning, z-index, overflow-hidden, and CSS3 animations to make things work at a mechanical level.
So, the designer takes the fallback email (which is beautiful on its own) and uses media queries to target email clients that will support all of the above, which in this case is basically Webkit-based clients.
For those clients, the content sections are absolutely positioned outside that main slider area, which uses the overflow property to hide content outside of its visible container. Z-index is used to stack the slides in their appropriate order, and then when someone hovers or taps on the slider controls, CSS transitions and the left property are used to slide the correct slide into the visible carousel container.
It's an amazing email and a great example of using email client targeting to progressively enhance an already awesome email for clients that support more advanced CSS. I may be glancing over a few details, but I think that's the main concept. Would love to hear other people's thoughts on the B&Q email or if anyone else is doing anything similar.
Hi Jason,
Just to report my findings in regards to the countdown timer.
In short, it's a really bad solution. We calculated it could require up to 5.2M frames per day, per use to generate the animated GIF. We were going ot apply this to an email that goes out to quite literally millions (I can't disclose on here), and with the largest of servers that's just not possible.
In addition, we suspect Google Mail may cache images, which could affect all Gmail users, meaning the timers could all be out.
I think this solution is too ahead of its time, but we're investigating other ways that exploit the .gif/php... hack.
I'll report back on my finding when we have that. :)
Cheers,
Nathan
This is excellent, thank you Jason!
I'd better let the boss know that I'm going on an email vacation on the other side of the office for a week. Finally, a use for those vanity bean bags! :)
I'll report back when I have a working solution. Same shout out to anyone reading too, please share your solutions.
Thank you, Nathan! I really appreciate that. Let me know how you get on. I’d be interested to see what you come up with.
Yes, Sir! Such a difference a year makes in the industry - This time last year it was an after-taste of maybe's and possibilities, now we're looking at certainties and solutions.