Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Snehal Mistry
Snehal Mistry
4,431 Points

HTML for e-mail design

Hi,

Are there any tutorials teaching how to design email templates / e-shots? There is one on general email marketing but it doesn't go into how to produce these using photoshop, slicing elements and then using HTML to produce these. I am really interested in learning and would have thought Team Tree House would have a specific set of tutorials for this? Can anyone help?

Thank you

5 Answers

Wilt Chaimberlain
STAFF
Wilt Chaimberlain
Treehouse Guest Teacher
Wilt Chaimberlain
Wilt Chaimberlain
Treehouse Guest Teacher

Hey, Snehal! An HTML email design course is in the works right now! Keep your eye on the Roadmap...

Snehal Mistry
Snehal Mistry
4,431 Points

Thanks chris!

Steven Schweibold
Steven Schweibold
7,742 Points
Steven Schweibold
Steven Schweibold
7,742 Points

If you need some templates to help guide you towards building one now you can check out Mailchimp's set of responsive templates here on Github: https://github.com/mailchimp/Email-Blueprints

As long as you understand CSS and HTML it should go okay for you. Just understand that email is one of those quirky things that doesn't always play nice.

Snehal Mistry
Snehal Mistry
4,431 Points

Thank you - i will check it out :-)

Snehal Mistry
Snehal Mistry
4,431 Points
Snehal Mistry
Snehal Mistry
4,431 Points

That's fantastic to hear it's in the pipeline. I hope it's out soon as i really want to learn about this. Thanks Steven i will check the link out :-)

Patrick Cooney
Patrick Cooney
12,216 Points
Patrick Cooney
Patrick Cooney
12,216 Points

So until the new course comes out just remember this, don't use any of the best practices for HTML and CSS you've spent all this time learning. You should create layouts using tables rather than CSS and while we're on the topic of CSS you should put all of that inline. Just know that even when you do this, it's still not going to look uniform in all mail clients. Also, its not a good idea to slice up photoshop files and stick them in the email. Most email clients will block images unless specifically told to download them. You should really try to design without images and only add them where absolutely necessary. This is a good starting point for designing html emails.

Snehal Mistry
Snehal Mistry
4,431 Points

Thanks Patrick. I must confess i am pretty new to HTML as my background is design for print. I have been told that design for email is different to HTML / design for the web. I think initially it would be good to learn using slices from photoshop as i am guessing to create certain things that can easily be done in photoshop requires more skill to produce in HTML which i don't really have. Anything to help me start learning and piecing it together would be great. Hopefully the more advance i get the more i can produce using HTML!

Snehal Mistry
Snehal Mistry
4,431 Points

And i have also been advised about what you are saying about tables rather than CSS

Terry Burr
Terry Burr
2,172 Points
Terry Burr
Terry Burr
2,172 Points

Hi Snehal,

I too have stepped into the world of HTML email design (I too come mainly from a print design background). First piece of advice... AVOID using photoshop/slicing - I tried that before and although it's fairly simple and may look nice, it rarely works properly.

Find out what browsers/devices your market is using to view emails as this can help guide how heavy you use images - Outlook and Gmail (the two that my market mainly uses) do not display images and you can not rely on the end user to opt to download them (or view in browser).

I've just completed the learning adventures for HTML and CSS - go through these videos, work with the project files and complete the challenges. Although there is a lot of stuff that we can not do in email design; it's great to understand it as a whole rather than parts.

I'm now at the stage where I have created all my written content, links and general layout using HTML and tomorrow I will style it and tidy it up using inline CSS.

I know it will need some work still but I feel confident from what I have learnt and researched that I can design at least a first, workable, version of email - I will then come back to it and refine.

It took me about 7 working days to get through all the HTML and CSS in the learning adventure (I ignored the 'transitions' and 'animations' ones in CSS as these are not relevant/suitable for my email design).

Other good thing is find an email layout that is similar to what you would like to achieve, open it in say Google Chrome, right click and select "view page source"... viola - HTML!!! You can always try copying this into an HTML editor (or dreamweaver if you have it) and start playing around. understanding HTML will really help (hence... complete the HTML section).

Hope this helps and is not too preachy! Good luck!

Obed Lorisson
seal-mask
.a{fill-rule:evenodd;}techdegree
Obed Lorisson
Front End Web Development Techdegree Student 6,151 Points
Obed Lorisson
.a{fill-rule:evenodd;}techdegree
Obed Lorisson
Front End Web Development Techdegree Student 6,151 Points

Meanwhile you're waiting you can have a head start with this tutorial form wedesigntuts check it out here. it's pretty much basic. but you will have a pretty basic idea how to design and code one from scratch.

Snehal Mistry
Snehal Mistry
4,431 Points

Thank you very much! I will check it out