Email is easy!

Anyone who has ever had to create an email template knows what a pain it can be to get consistent rendering across different e-mail clients. Luckily many have come before me and a few have created bulletproof frameworks to get you started and save you a lot of headache. thankyouverymuch. 

Foundation for Emails is one I am familiar with and they have created some Node packages so we can incorporate it right in our own workflow. Now all you need to know is the inky markup foundation for email uses and your taskrunner will create your email templates for you.  Because tables and padding and Microsoft office in general is a pain in the ass.

Our own .NET environment though, has email template parts scattered across different views in different features. By introducing .inky.cshtml files to the features and creating some dedicated gulp tasks,  I was able to catch all files associated/used by mail renderings and stuff them in my email tasks.

Assuming you have:

.NET environment
NPM
Gulp

This is what you’ll need:

NPM packages:

npm -i --save-dev fs lazypipe inky gulp-load-plugins siphon-media-query yargs foundation-emails gulp-if gulp-replace gulp-rename run-sequence gulp-sourcemaps gulp-sass gulp-inline-css gulp-htmlmin

and/or download the starterkit which includes the gulp tasks and the basic folder setup you’ll need.

The Setup:

Install the NPM packages
Add the gulp tasks to your project
Create/add the folder structure to your styles.
And direct the paths to the right location.

And now:

You write an .inky.cshtml for every component, be it a feature or layout component, where you will use the inky markup. And you can even write your own fancy sassy scss.

simple foundation for email markup

After you run  gulp emails  all the scss will be compiled. Run gulp email --production and the inky markup will be transformed to tables and tables and tables, all styles will  be inlined, so now the files are ready for production.

See that pesky <OrderConfirmationEmailViewModel> tag? Inky will automatically close that for you. Which we don’t want. You can wrap snippets of code between ignore tags and anything inside it will be left alone.

yay, code oreo’s!!

Then run gulp email

effortless inlined bulletproof automatic emailtemplate

Don’t forget to test, use Litmus, it doesn’t suck.

Internet for everyone

TL;DR;

There are more HTML tags than just div’s. You might be using more javascript than you need and everybody is lame sometimes.

Accessibility

For years I have been an advocate for writing good semantic HTML code that is accessible for everyone. With a touch of profound css to fancy it up and the least amount of javascript I can get away with I have tried to make the internet a better place.

Unfortunately clients and deadlines often are reason to step away from my ideal web for the sake of ‘getting shit done and getting it done yesterday!’ And every year when I visit a conference I am again inspired and reminded of my beliefs. I would like to share the following two talks with you because even though hacking the shit out of divs is fun any day, it should only be done responsibly or out of sheer desperation.

Inspiring talks

Rian Rietveld talks about HTML  and how you should stop using javascript for things html tags can do for free, my kind of woman. She also provides some useful tools to start checking your code for accessibility errors.

Adrian Roselli makes it personal. How do you sell accessibility to your clients. Why should a designer care about color contrast. Why developer should stop &:focus { outline: none; }.  Accessibility applies to everyone at some point in their life. Read this if you spend computer time with a sandwich, soda or dick sigarette  in your hand, if you are using a screen on summer holiday in the bright sun and cram up the brightness or come back from a skiing trip in a cast and can’t use a mouse.

Easy

Most of what is said should be part of our workflow, go do it, today. Some of it is open for discussion with you team or client. Start that conversation.