Product Tip: Foundation for Emails 2
Quickly create responsive HTML emails that work.
Even on Outlook.
This email framework takes the pain out of developing HTML emails by providing developers and designers with a set of already tested components out of the box. This includes a responsive grid, buttons, callouts, menus, and more to cater for the changing mobile devices and screen sizes.
There are two ways to get started with Foundation for Emails:
The CSS version is a ZIP file download with all the HTML and CSS you need to get started writing an HTML email. You’ll need to run your HTML through a web inliner before you can send them off.
The Sass version gives you more control over the visual styles of the framework, and a full build process, which includes a Sass compiler and image compression. It also includes Inky, a custom HTML language which makes writing code faster, a built-in inliner, and a live reloading server for testing. The Sass version requires you to have Node.js installed.
The stack:
Comprises of a wide choice of tools
- Gulp — A task runner for automatic updates as you change the email content
- Inlining — Automatic inlining on running npm run build
- Panini — This separates things like the header and footer content into partials, letting you focus on your code when you’re building, and can reuse the common parts for different email templates.
- Browser Sync — Helps you see your code changes in the browser in real-time.
- Image compression —Compresses image files thus minimizing email load speed.
Using Foundation CLI to set up a new project
Run these commands to get you started
npm install — global foundation-cli
foundation new — framework emails
foundation watch
npm run build (Run this after making changes on the templates)
In the src folder, this is the structure:
- assets — image files
- helpers — Special functions that manipulate content on the pages(raw.js)
- layouts — HTML boilerplates
- pages — HTML files
- partials — reusable HTML
As you change things in the templates, current state is displayed in real time in the browser. The compiled code can be found in the dist directory.
After the build command, what is in the dist folder is a minified, ready version, suitable for production but cannot be edited directly.
Foundation for Emails makes use of Inky, a templating language which helps remove the complexity of having to use nested tables. There are different tags supported for different components.
Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
Testing:
The email is now build and inlined, we need to test it in real email clients to make sure it looks good and gives a good UX. With foundation, all components have already been tested in major email clients.All we have to do now is test the email before finally sending them out to product users. Below are some tools to use for testing:
For more on responsive emails design and development, follow the official docs and they have great tutorials too:
