Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Jenny Chan
Jenny Chan
6,905 Points

HTML Email Tutorial - What did you think?

Has anyone completed the HTML Email Tutorial yet? I've coded my own email templates before, and I still found the tutorial hard to follow. It was confusing to keep track of all the CSS that Fabio copy and pasted. I was hoping for more explanation with how the elements were built. What did you think?

Fabio Carneiro
Fabio Carneiro
Treehouse Guest Teacher

I'd be happy to expound on how each of the blocks was built. You may also find the email blueprints I've created helpful in showing how content blocks can be constructed. Specifically, the 'modular-templates-patterns' directory in that Git project contains a framework created specifically around the idea of common design patterns.

9 Answers

I'm working on a responsive email template at the moment for the first time in about a year (forgot how annoying they are!).

You should check out Ink from Zurb. Here you can find various responsive starter templates. You can copy and paste into popular campaign programmes such as MailChimp. All templates have been tested in all major email clients. You can view how each one looks in each email client, on various devices. The website has helpful documentation and tips to help you produced a good working responsive email.

So have a good inspection of the code to understand how it works and have fun customising the templates for a particular client and / or campaign.

Have fun, I know I will...

Dan Gorgone
STAFF
Dan Gorgone
Treehouse Guest Teacher

Hi Alexandra Moss, I appreciate your comments here and want you to know we're going to give the course a second look. We certainly did edit the screencast portions to speed up the process in the hopes that would provide a benefit, but perhaps we were too aggressive with it. Again, we're going to take a second look and see what we can do to improve it.

But to everyone, we appreciate the feedback here. We want to make this course - and all our courses - the best they can be. If any of you have watched by Usability course (cheap plug, I know), you'll know how important other perspectives are to ensure success!

From my point of view, the tutorial was rather a general presentation on how to create and implement a design for email given the constraints imposed by different email systems and the table-based HTML.

The CSS part confused me a bit too, but I later realized that some of it (the email system specific declarations) is pretty much identical for all responsive emails since the restrictions are already known and there are no new solutions to be used in those cases.

End of the road, building an email template is partially dependent on the platform used for sending, so each email marketing company can provide more detailed information on how to make a template that can be later customized using the default editor. MailChimp has extensive documentation here: http://templates.mailchimp.com/

On the topic of email templates, I discovered two interesting books I definitely want to check out when I finish my current readings: http://www.amazon.com/Create-Stunning-HTML-Email-Works/dp/0980576865

http://www.amazon.com/Modern-HTML-Email-Responsive-Effective/dp/0615863620/

Thanks i just finished the tutorial and is was a bit difficult to follow. Still need to practice with this a bit more.

Mary Ann Miller
Mary Ann Miller
2,839 Points

I agree with Jenny. I also write code for custom HTML emails, and I found it hard to follow the CSS that Fabio was pasting - it was way too fast, with too little explanation of why he was doing things a certain way. There wasn't any time to try and follow along with the project files.

I liked the modular email sample that Fabio created, and I appreciate the code, but I wished that he would have circled back to the beginning, where he talked about the 3 different types of emails, and related that part of the class to the final product. I felt like it ended too abruptly, and something was missing.

Fabio Carneiro
STAFF
Fabio Carneiro
Treehouse Guest Teacher

Hi all -

First, thanks for your feedback; it's much appreciated. Apologies for the fast pace of the course. Unfortunately, there's so much information to cover and such a short amount of time to cover it in that the course kind of had to be a very broad one.

I'm around and more than happy to answer questions!

Jenny Chan
Jenny Chan
6,905 Points

Thank you to everyone who's responded, and especially Fabio.

I learned a lot from the course, from client-specific styling to using a mini table to mimic a calendar. I think this course is different than the average Treehouse experience, in which you are walked through step by step. Listing it as a "Beginner" course is misleading, it should be "Intermediate" in my mind. You need to be quite familiar with HTML and CSS to even follow along.

James Barnett
James Barnett
39,199 Points

Jenny Chan -

> Listing it as a "Beginner" course is misleading, it should be "Intermediate" in my mind. You need to be quite familiar with HTML and CSS to even follow along.

I think that's a really good point, what do you think Nick Pettit & Fabio Carneiro.

I agree this course is not quite beginner material. Beginner would be creating a very simple template and then optimizing it step-by-step for different email systems showing the display issues and the way to correct them (pretty much like the responsive design one).

Working for an email marketing company I have display issues under my nose nearly every day, so it's hard to be completely objective. Sorry about that :)

Nick Pettit
Nick Pettit
Treehouse Teacher

These are good points. I'm copying in Dan Gorgone. He was the producer of the course and should have more details.

Dan Gorgone
Dan Gorgone
Treehouse Guest Teacher

Yes, I agree - I've gone ahead and reclassified the course as "Intermediate" content. I am also going to discuss some of the "pre-requisites" students should have before going through the course, such as an understanding of HTML, CSS, and so on. I think that'd help as well.

Andrew Milne
Andrew Milne
10,071 Points

I completed this course the other day and sadly found it a little disappointing. I managed to follow along with what was going on without too much trouble, but I have created a few html emails in the past so making this a more intermediate course is better I think.

The trouble with HTML emails is, the code has to be horrible to work. Nested tables begins to get very tricky to manage, especially with large font size to show on a video. I know from experience the code can become incredibly unmanageable very quickly so I sympathise with the fact this is a difficult topic to cover.

I think the biggest problem is that the course probably really needed to be twice as long to go into more detail and explain why things are the way they are with html email. There was a lot of code inside each of the td tags for example with no explanation of why that was there. Also, I cant remember off of the top of my head when, but I'm sure there were a couple of times when the commentary didn't match up with the video, which was pretty off putting.

I really enjoyed watching how best to break up html email into different sections. I had never approached it that way before and it definitely helps to keep track of what your code is doing so for me, this course was much more useful in planning and going about writing html email than it was actually writing the code you need.

I have to agree with the rest of the people taking this course, definitely not for beginners. It's too fast paced with Fabio just copying and pasting (without warning), I have to stop the video too often to check if there was something I may have missed him pasting in. Unfortunately, it makes it very difficult to work alongside with the project files, so much so I feel I'm not learning and more just trying to copy and figure it out later.