Code an Email Newsletter from PSD to HTML
Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template. I personally like to use an existing template, especially the ones supplied by Mailchimp simply because they have been tried and tested and they don’t ‘break’. Whichever way you decide to go about coding HTML emails you need to remember the following:
1. Use inline CSS to control presentation, such as background colors and fonts. eg:
2. You have to use Tables to control the designs layout – Pure CSS Layouts just won’t cut it i’m afraid. (I hate them too) It’s recommended that you know about HTML tables before following this tutorial as I am not going to be covering the basics of creating tables.
1. Setting up the Document
Open the PSD containing the email design and slice and export any images that are going to be used in the email. Create a new HTML file in your IDE of choice and copy and paste the following code into the document.
<!-- --> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb"> <tbody> <tr> <td align="center" valign="top"></td> </tr> </tbody> </table>
All extra styling will be placed inside <style></style> and the email content will be placed between <td></td>
This entry was posted on Wednesday, July 14th, 2010 at 17:15 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
21 Responses »
- Code an Email Newsletter from PSD to HTML | Speckyboy Design Magazine
- Friday Focus 07/16/10: The Many Faces of Paper | CSS Citadel
- Code an Email Newsletter from PSD to HTML | Design Woop | The Web Design and Development Blog
- Code an Email Newsletter from PSD to HTML | moof twittert and blogt!
- Designing newsletter - essential resources | Jayhan Loves Design & Japan
- 30 Inspirational Email Newsletters | TutToaster
- interior design courses online
Leave a Response
We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.