How to Create a HTML Email Template (2 of 3)

Part 1: beautifulemails.com Part 3: beautifulemails.com Free Email Templates: beautifulemails.com ————————- 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. Visit beautifulemails.com for more amazing tutorials.
Video Rating: 4 / 5

www.perfit.com.ar – Perfit es una empresa de desarrollo de software centrada en las comunicaciones digitales y especializada en Sistemas, Marketing y Gestion Comercial. Hemos construido nuestra propia herramienta de email marketing permitiendo a nuestros clientes llegar a sus audiencias de forma inteligente, optimizando el rendimiento de cada interaccion: la aplicacion de marketing directo Perfit asegura que sus mails promocionales y newsletter seran entregados en forma sencilla y segura.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
Uncategorized

50 Responses to “How to Create a HTML Email Template (2 of 3)”

  1. *slices
    

  2. WHY THE SMEG ARE YOU USING CROP TO SAVE YOUR IMAGES AND WHY ARE YOU SAVING THEM WITH THE BACKGROUND, BAD PRACTICE, PS USES SECTORS WHICH IS QUICKER EASIER AND DESIGNED FOR USE WITH SAVE FOR WEB DEVICES…

    also you should have saved the button without a background and as a png so you can re use if the bg color changes…

  3. Thank you for sharing this awesome tutorial. How long did it take you to learn HTML and CSS?

  4. I am pretty much a noob, however i have done a html email before, and i used to slice up the image in photoshop, create a table based html file and then inserted it as text in outlook then sent it out. That worked fine… so why is there this complicated method? if someone could shed some light, that would be great. thanks.

  5. @BeautifulEmails Is it possible to use divs instead of tables here? thanks

  6. @tiqefu05 if you wanna make money you have to spend money the saying goes and I honestly spent a lot of it! I’m so happy I did though cause finally i came across that one course that really changed my life and I would buy again a million times if i had to, its that good!. if you take it seriously you can start earning commissions within the first week. just watch it here: /watch?v=ssNdvw1ALTo «——

  7. Tables don’t have a height property.

  8. Google ‘team treehouse’

  9. Google ‘team treehouse’

  10. It’s best to keep the styles inside the HTML. Faster loading and less issues down the line :)

  11. Correct. The design would be created in photoshop then ‘re-created’ in HTML.

  12. From the photoshop draft.

  13. Thanks for the video, sometimes I learn better by just watching someone do something versus them lecturing so this helped me a lot!

  14. are the width and height values you are putting down for the tables associated with values that came from the photoshop draft? or is this html experience that is helping you decide how wide these tables are going to be?

  15. from the first ten min, it looks like you are recreating what you designed in photosohp with your skills in html. is this saying that people usually draft their email’s appearance in photoshop, and then hard code in html completely to make an html email? and then insert the button and box pictures into the html, being the only images in the email? does photoshop have any more involvement in the html emails than that? this is really helpful!

  16. - thanks

  17. This should help. amazon.com/gp/product/059610197X/ref=as_li_ss_tl?ie=UTF8&tag=gercha-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059610197X

  18. Google HTML tables

  19. Has to be together.

  20. I’m afraid this is just like watching someone working, it’s not teaching anything as there is no explanations to what you are doing just bla bla bla

  21. why do you noobs want to do this when the whole point of it is HTML. Use GOOGLEand search html tutorial.
    My question for this can you style it on a separate file or does it have to be together with the html?

  22. is there any totourials for how to write html codes

  23. w3.org/wiki/HTML/Elements/td

  24. hi great video but as I’m a beginner is there a webpage that explains the tr and td tags along with padding and span ? Thanks.

  25. Leo van den Bergh Reply July 15, 2012 at 1:32 pm

    I’am sorry, I mean I do not hear the explanation from your video!

  26. *slices
    

  27. WHY THE SMEG ARE YOU USING CROP TO SAVE YOUR IMAGES AND WHY ARE YOU SAVING THEM WITH THE BACKGROUND, BAD PRACTICE, PS USES SECTORS WHICH IS QUICKER EASIER AND DESIGNED FOR USE WITH SAVE FOR WEB DEVICES…

    also you should have saved the button without a background and as a png so you can re use if the bg color changes…

  28. Thank you for sharing this awesome tutorial. How long did it take you to learn HTML and CSS?

  29. I am pretty much a noob, however i have done a html email before, and i used to slice up the image in photoshop, create a table based html file and then inserted it as text in outlook then sent it out. That worked fine… so why is there this complicated method? if someone could shed some light, that would be great. thanks.

  30. @BeautifulEmails Is it possible to use divs instead of tables here? thanks

  31. @tiqefu05 if you wanna make money you have to spend money the saying goes and I honestly spent a lot of it! I’m so happy I did though cause finally i came across that one course that really changed my life and I would buy again a million times if i had to, its that good!. if you take it seriously you can start earning commissions within the first week. just watch it here: /watch?v=ssNdvw1ALTo «——

  32. Tables don’t have a height property.

  33. Google ‘team treehouse’

  34. Google ‘team treehouse’

  35. It’s best to keep the styles inside the HTML. Faster loading and less issues down the line :)

  36. Correct. The design would be created in photoshop then ‘re-created’ in HTML.

  37. From the photoshop draft.

  38. Thanks for the video, sometimes I learn better by just watching someone do something versus them lecturing so this helped me a lot!

  39. are the width and height values you are putting down for the tables associated with values that came from the photoshop draft? or is this html experience that is helping you decide how wide these tables are going to be?

  40. from the first ten min, it looks like you are recreating what you designed in photosohp with your skills in html. is this saying that people usually draft their email’s appearance in photoshop, and then hard code in html completely to make an html email? and then insert the button and box pictures into the html, being the only images in the email? does photoshop have any more involvement in the html emails than that? this is really helpful!

  41. - thanks

  42. This should help. amazon.com/gp/product/059610197X/ref=as_li_ss_tl?ie=UTF8&tag=gercha-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059610197X

  43. Google HTML tables

  44. Has to be together.

  45. I’m afraid this is just like watching someone working, it’s not teaching anything as there is no explanations to what you are doing just bla bla bla

  46. why do you noobs want to do this when the whole point of it is HTML. Use GOOGLEand search html tutorial.
    My question for this can you style it on a separate file or does it have to be together with the html?

  47. is there any totourials for how to write html codes

  48. w3.org/wiki/HTML/Elements/td

  49. hi great video but as I’m a beginner is there a webpage that explains the tr and td tags along with padding and span ? Thanks.

  50. Leo van den Bergh Reply July 16, 2012 at 2:16 am

    I’am sorry, I mean I do not hear the explanation from your video!