Press "Enter" to skip to content

#2: How to Create a HTML Email  —  HTML (2 of 3)

This is part 2 of a 3 part series on how to create a HTML email. This is based on the email template I released a few weeks ago, Here. This is my first ever screencast series so any kind of feedback would be great. In Part 2 I’ll show you how to convert a PSD into HTML.


To stay updated on next week’s screencast, please sub­scribe by either using E-Mail, RSS Feed or follow us on Twitter.


  1. Alex Alex July 20, 2010

    good tutorial video, but needs more explanations.
    im following it but doing it for my own design

    send me you email address and ill send you a copy of it. if you could please tell me about how to go around coding it or send me a copy of your code explaining what i need to edit that would be muchly appreciated.

    • Mohammad Koubeissi Mohammad Koubeissi July 22, 2010

      @Alex Hello Alex, Thanks for your input. I’m kinda new to the whole ‘screencast’ game – It’ll be better next time, promise :). If you need to contact me, please use the contact form here:


  2. colin colin November 7, 2010

    Tips for your HTML, close the tags as soon as you open one, that way you don’t lose track of what is still open.
    Question, why don’t you use instead of
    Also you repeat the font-family, isn’t it taken care of already in your body tag?
    I would also like more explination while your ‘filming’.

    all in all, as i’m just writting up my first ’email’ I like what you’ve shown, keep up the good work.

  3. Mohammad Koubeissi Mohammad Koubeissi November 8, 2010

    Hello Colin,

    Thanks for your comment.

    I completely agree on closing the tags as soon as I open one. I have got rid of my bad habits since then thanks to Textmate.

    Unlike the standard way of building websites; including the font-family in the body would be enough but, when building email templates because of how mail clients render the HTML, one must repeat themselves to make sure the selected font-family is used properly.

    I have just released a new template and I will create a new set of videos with better explanations of my work flow.

  4. freed freed November 16, 2010

    check this out

    it awesome

    How to code an HTML Email Newsletter – The Email Dance

  5. Boaz Boaz December 17, 2010

    Why don’t you just use margin to create the space between the button and your text? You’re learning some bad habits here.

    Nice tutorial though with a nice result.

    • Mohammad Koubeissi Mohammad Koubeissi January 5, 2011


      Initially I did use margin to create spacing around elements, but had problems with certain mail clients during the testing phase.

  6. Janine Janine March 10, 2011

    Terrific screencast. Thanks so much for sharing. I am a designer and I have built a couple of websites using dreamweaver but shifting to tables and the methods of coding for email has made my head hurt.

    BTW, I’m a skydiver so regards your dream of base jumping in Norway; I’d say go for it!

  7. Nicola Nicola March 10, 2011

    This has been really helpful. The last time I coded in html feels like centuries ago and this has really been a useful refresher. I’ve been trying to reverse engineer a few free templates but trying to figure out someone elses code after the fact is a complete nightmare (especially when you have no clue what you are doing!)

  8. SteveHiggs SteveHiggs April 20, 2011

    Just a note, you really should use the slice tool to slice your Photoshop layouts and ‘save for web’ that way rather than using the crop tool. Slicing allows you to name each segment, with set dimensions and not have to re-crop every time. This slice info also saves with the PSD so you never have to use the history/undo to get those back.

  9. Mohammad Koubeissi Mohammad Koubeissi April 21, 2011

    @SteveHiggs Bad habit Steve. I already know about the slice tool I just find using the crop tool more comfortable even if it’s a longer process 🙂

  10. Alex Alex June 15, 2011

    To trim images:

    1. cmd + click to select image
    2. Option click the layer’s eye ball to turn off the rest of the layers
    3. Then on the top nav go to Image / Trim and select Transparent Pixels

    It is faster this way. Good tut. Thanks.

  11. Labanino Labanino June 15, 2011

    Hey Mohammad I a questio. Are the images url allowed to hold parameters, e.g.



  12. Grazone Epic Grazone Epic September 6, 2011

    Great tutorial thanks

    me from UAE are you egybt

  13. Roberto Roberto October 3, 2011

    Thank you very much for your tutorials they are amazing. Congrats!

  14. Thomas Brooks Thomas Brooks October 18, 2011

    Man I love that you go through the stages of building an email template fully for someone like me who is just learning of what an email template is. Much thanks.

  15. david david November 16, 2011

    Thank you for this. It’s difficult for some of us print designers to make this transition. Learning simple techniques (until I can understand the full scope) is what I look for and your layouts are spot-on.

    Yours is a service to the community. That and

  16. Sara Sara November 18, 2011


    Muhammad thanks for tutorial, but i am confused.. If you had to make HTML code by hand then why did you make it in Photoshop..?

  17. Mohammad Koubeissi Mohammad Koubeissi December 2, 2011


    I designed it in photoshop to give me a ‘wireframe’ to work with.

  18. Mohammad Koubeissi Mohammad Koubeissi December 2, 2011


    Yes images can hold parameters. Quite a few tracking services use this technique

Comments are closed.