#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.Watch Full Movie Online Streaming Online and Download

Notes

YouTube Preview Image

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

Freelance Web Developer - Tailor, Gym Rat and Mountaineer.

21 Comments

  • June 1, 2010

    Mohammad Koubeissi

    @kswiss

    Thank you, part 3 should be ready this week.

  • July 20, 2010

    Alex

    hi
    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.
    thanks
    alex

    • July 22, 2010

      Mohammad Koubeissi

      @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: http://beautifulemails.com/contact/

      Thanks.

  • November 7, 2010

    colin

    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.

  • November 8, 2010

    Mohammad Koubeissi

    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.

  • November 16, 2010

    freed

    check this out

    it awesome

    How to code an HTML Email Newsletter – The Email Dance

  • December 17, 2010

    Boaz

    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.

    • January 5, 2011

      Mohammad Koubeissi

      @Boaz

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

  • March 10, 2011

    Janine

    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!

  • March 10, 2011

    Nicola

    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!)

  • April 20, 2011

    SteveHiggs

    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.
    Cheers

  • April 21, 2011

    Mohammad Koubeissi

    @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 🙂

  • June 15, 2011

    Alex

    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.

  • June 15, 2011

    Labanino

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

    src=”http://oascentral.newhomesource.com/RealMedia/ads/adstream_sx.cgi/nhs.com/cr/271301814@Top,Right2,Middle,Middle3,x02,x01,x03!Right2?prt=1&Spicewood&b3007&z78669&Austin&b3758&z78734&Kyle&b10684&z78640&Cedar%20Park&z78613&Round%20Rock&b0038&z78665&Hutto&b10430&z78634&b4961&z78737&Lakeway&b2686&z78734&Georgetown&z78626&Manor&b5097&z78653&Driftwood&z78619&b5026&z78633&b2542&z78738&b4654&z78664&m=269&m269&s=TX”

    Thanks.

  • September 6, 2011

    Grazone Epic

    Great tutorial thanks

    me from UAE are you egybt

  • October 3, 2011

    Roberto

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

  • October 18, 2011

    Thomas Brooks

    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.

  • November 16, 2011

    david

    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 W3schools.com

  • November 18, 2011

    Sara

    Salam

    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..?

  • December 2, 2011

    Mohammad Koubeissi

    @Sara

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

  • December 2, 2011

    Mohammad Koubeissi

    @Laban­ino

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