Code an Email Newsletter from PSD to HTML
4. Adding the Instructions
Create a new table using the same table structure as the others, only this time add a cellspacing value of 20. This is because this table will contain 2 tables. One for the instructions telling the user how they can claim their free bar of Monsterchomp and the table to the right will contain Terms and Conditions of entry. So the cellspacing controls the space between the columns rather than them being directly next to each other. It works the same way as margins and padding do in regular CSS.
Inside the first cell wrap the header around span tags with relevant styles reflecting the design. Style the ul, li, and re-tweet elements in the header where we create <style></style>. It’s also important that the width of the instructions cell is 570
So, the HTML for this cell will look like this:
<span style="margin-bottom: 10px; font-size: 22px; font-weight: bold; color: #5cce13; font-family: arial; line-height: 110%;">There are just 4 steps to Happiness:</span> <ul class="steps"> <li><strong>1.</strong> Login to Facebook and Like the Official Monsterchomp page here.</li> <strong>2.</strong> Login to Twitter and RT this message @monsterchomp:</ul> <div class="retweet"> @monsterchomp RAWRk! I love #monsterchomp bars!</div> <ul class="steps"> <li><strong>3.</strong> Click the button below to tell us you're ready & we'll check if you've done everything we asked.</li> <li><strong>4.</strong> If you did everything like were supposed to, we will ask for your post details and your free bar of Monsterchomp will be on it's merry to your letterbox.</li> </ul>
and the CSS in the head of the email will look like this:
<!-- ul.steps { margin: 0; padding: 0; list-style: none;} ul.steps li { margin: 0 0 15px 0; } .retweet { margin: 15px 0; color: #3c890b; padding: 10px; text-align: center; background: #e2f8d4; border-radius: 7px; font-size: 13px; } -->
5. Adding the T&C’s sidebar
Create a new cell after the closing of the instructions cell and set the width of this table to 170. Set the background colour of this cell to #F4F4F4 and give the cell a border radius 10px using the appropriate browser-specific CSS3 Declarations.
Again, use <span> styles to style the header and the text, setting the font-family to arial for both, a font-size of 14px for the header and 11px for the text.
<span style="font-size: 11px; font-weight: normal; color: #999999; font-family: arial; line-height: 150%;"> <span style="font-size: 14px; font-weight: bold; color: #575757; font-family: arial; line-height: 150%;">T& C's of entry </span> Both methods of promotion will need to successfully be carried out. No exceptions will be made. All consumer data that is collected post stage 4 will remain private and we will not sell or redistribute your data. By entering this competition you allow Monsterchomp to use your Twitter / Facebook or Email address for future promotions. Entrants must be aged 16+. </span>
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.
Thanks for sharing…very use full
Nice project, but .
I know M$ Outloooks, but …
U see this? http://fixoutlook.org/
Best regards!
Pawel
Do we still need to use display: block; on all the images? I know before that was required for Hotmail to display images correctly but don’t know if we don’t need to anymore.
I still use it now and again, just to be on the safe side.
Thanks Great Post..:)
Thanks so much just what ive been looking for!
Thanks!
My Tip:
Remove all blank spaces are not used between the html tags, and also the “tabulations”. So some problems with various browsers and mail readers are solved.
Here’s an example of a handbag made of html like thiss: http://www.render.com.br/news/227/index.html
It will be use on my newsletter design, thanks
Great post! But which email clients do these methods work in? I build emails for lotus notes, outlook, yahoo, gmail, hotmail etc. I think you should mention that these methods wont work in all clients.
Thank You Very Much I Will Be Use
What a great tutorial, retweeted!
It is to my understanding the the most email clients with ignore
any css rules in the header. So that method of styling is not recommended. If want to take a chance add all your styles within the
body and even it should be used very sparingly.
Good luck
Great tutorial, good thing that every design should know, now the days move to email marketing.
I run psd to html email conversion and email design service http://psdnaaremail.nl for people who don’t have the time
to convert it or to design the email template.
I’ll tweet your tutorial, so more can learn.
Thank you for this tutorial. Helped me a lot by programming my first html-newsletter 🙂