Skip to main content

Sending HTML Emails the right way with Open Source Templates


 

When sending HTML emails one always has to consider the different devices / clients the receiver is using to read the contents of the email. Be it a mobile device or web-mail client via a browser, the email needs to display correspondingly to your requirements and send your message across without unwanted modifications.

To address this requirement we recommend using responsive HTML blueprint templates from known providers. These templates have been released and maintained open source by email delivery companies and provide versatile layouts that are responsive as well. We consider them a valuable asset and starting point when creating HTML emails.

List of Open Source Email Templates

Browsing through the examples below, one will find all popular layout options viable for most email types. Basically the bellow resources provide skeletons for inserting email contents like: text, images and links.

Auto inline all CSS rules

When reading HTML emails, most email clients strip out <head> and <style> tags, thus the email will most likely display with no styling. To conquer this, we recommend users to inline their CSS rules (append each elements style directly into its container in the DOM). Obviously this is a daunting task and no developer should be stuck working this way thus here come some options for auto transforming email contents to include CSS styles inline.

Sending the HTML email

Last step is to actually send the email, this step is the easiest one. Copy the outputted code from one of the CSS inliner tools and save it. This code is what makes up the email. Most email clients have options to “Insert HTML”, search for that option, paste the code from the CSS inliner and send a test email. That's it.

Popular Webmaster Tutorials

WEBSITE TEMPLATE: SLIDING DOORS - Use it as a website template for intros with animation and landing page forms

Greetings fellow webmasters!   Here is a new template for you to use freely on your web development projects. It's called Sliding Doors. This template uses just a little bit of Javascript for its awesome reveal animation effect. Check it out, it's really cool! Check it out here, live preview: https://sliding-doors.webmasterbits.com/ Download it on github, here's the link: https://github.com/webmasterbits/sliding-doors As always, you can check out all of our free website templates here: https://www.webmasterbits.com/p/templates.html Let us know what you think of this new template in the comments bellow. You are welcome to include links to projects you've used this template for.

DAY 1: Become a Webmaster Tutorial - BUILD A WEBSITE IN 10 MINUTES and host it on Github for Free

  Greetings fellow webmasters and soon to become webmasters!   I released my first video in the Become a Webmaster series. With this video I am also updating the Become a Webmaster page with the tutorial for Day 1. Watch the Day 1 video on youtube here: https://youtu.be/kJYONpeeDj4   Read the detailed tutorial on Day 1 here: https://www.webmasterbits.com/p/become-webmaster.html Day 1 is the most important day in your journey of becoming a webmaster. Here's what I explain in the video and tutorial: How to gather content for your new website How to create a Protonmail account How to create a Github account How to create a repository for your new site How to create the index.html file How to add headings Read the tutorial and then watch the video to follow along.  

How to do research for a website

  Being a Webmaster is a lot of work and research is a big part of it. Like most professions, you need to stay on top of your game. Whether you're building a new website or taking one over, you will need a plan. And a solid plan requires research. If you haven't already, read What is a Webmaster first . Below we have compiled a list of areas of research that you as a Webmaster shoud be very familiar with and actively pursuing. Remember to write down everything you research and the results of your research.   Tools & Service Providers Research Having the right tools for the job is key. Knowing what to use and when will give you the confidence to move forward faster and get things done. As a Webmaster you'll always be asked: where do I register a domain? what's a reliable hosting company? what's your recommendation? Being able to provide knowledgeable advice is your most valuable asset. It's your most valuable asset because it's a source of passive income.