Giter VIP home page Giter VIP logo

htmlemail's Introduction

How to use email templates from HTMLemail.io

For bugs and problems please create a new issue here.

Quickstart guide

How to try out these email templates as quickly as possible.

  1. Go to HTMLemail.io and download the templates.
  2. Unzip htmlemail.zip. You should now have files that look like this.
  3. Open up PutsMail and create a new test email. Enter your email as the recipient.
  4. Open up one of the inlined emails alert-success-inlined.html in your favorite editor. Copy and paste the code into PutsMail like this.
  5. Check your inbox to see a preview of your email.

๐ŸŽ‰

Working with inline CSS

These emails come packaged with both inlined CSS and a CSS stylesheet.

image

CSS stylesheets are great for ensuring all your emails are consistent as you can manage styles in one place.

However, before you send your HTML email, you need to inline the CSS as some email clients do not render CSS that is not inlined.

How to inline CSS

Option one is to use the templates that are already inlined, and continue to write any new styles inline. But as mentioned these are harder to work with as it is harder to maintain your styles.

Option two is to use an inline CSS tool. Copy and paste your email into an inliner and it will inline the CSS for you. I like using Premailer. Putsmail, Zurb, Campaign Monitor and Mailchimp all have good inliner tools.

Option three, you can rely on your ESP (email service provider) to do the work for you. For example, you can set Mailchimp to automatically inline CSS for you before sending your campaign.

Working with images in email

These emails come packaged with retina ready image assets and some stock photography.

image

In order for these to work they need to be uploaded somewhere and available via the web. The src then has to reference the full path of the image.

The good news is if you're using an ESP like Mailchimp, Campaign Monitor, Salesforce or any other marketing service, they will let you upload the images. If you're using an API service like Mailgun or Sendgrid you may have to upload the images yourself to your own CDN.

For example, I've uploaded my logo to a CDN. In the header here I would replace img/logo.png with my logo's full CDN path.

<img src="img/logo.png">
<img src="http://1bb070fe7102b70b7b9b-8d9a58972604befd3cf8b483887bb2bb.r27.cf2.rackcdn.com/img/logo.png">

Working with Mailchimp (and other ESPs)

Mailchimp has great tools to make it easy for you to import HTML templates.

  1. Zip up your email template. You should include one html file, your main.css file and your img folder.
  2. Open up Templates, click New Template and select Import zip. Select your zip file and give it a name. Screenshot.
  3. If your zip file was set up right, that should be it. Now use Mailchimp's templating language and merge tags to customize your template.

image

Changelog

January 16 2017

  • Added better support for ordered and unordered bullet lists
  • Fixed a receipt table alignment issue in versions of Outlook by introducing a receipt-container element and class - wrap the receipt table with this container to ensure it is centered in Outlook
  • Updated the Instagram and Google Play store icons

August 19 2016

  • Removed display: block; from the container div as it was causing issues in Gmail for iPhone #2
  • Added explicit styles for article heading links to stop default blue being used in Outlook
  • Added an Outlook conditional statement to fix image rendering issues in Outlook 2013 120 DPI
  • Updated the license.txt to help clarify some questions around licensing and reselling

More support

Create a issue or email [email protected]

htmlemail's People

Contributors

leemunroe avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.