Email Newsletter Design

Using colored text against a colored background image is a perfectly acceptable practice when designing a website. In an email, however, you should assume that the background image will not load. If that happens, your pink text on a brown background image will turn into unreadable pink text on white or grey. Needless to say, an unreadable email is worthless.

Many designers attempt to circumvent the constraints of email layouts by designing a promotional email using only images. While this allows you to do very creative layouts, it also makes your email worthless if your images don’t load.

Your viewers are just going to get an email with a bunch of broken image links. Lots of your recipients are going to be viewing email from a cellphone or behind a company firewall or other content-filtering system that may block your images as well. So keep that in mind.

Also, putting a handy “Having Trouble Viewing This Email” link that takes the viewer to an actual webpage with your email content isn’t a bad idea either.

Many people don’t actually open their email but view it in the preview pane along the side of their inbox. This gives a very narrow space to work with if you don’t want to make someone scroll to see your entire layout.

Keeping your design at 600px wide or less is a good rule of thumb, but even then some email clients are going to only display a narrow portion of your email. Make sure you have your important text on the left side of the email toward the top. That part of the email is sure to be seen and will entice the viewer to either scroll or open your message in a full window

source: http://www.webdesignerdepot.com/2011/05/dos-and-donts-for-designing-email-newsletters/

Do extensive testing

For testing, make sure you set up accounts with all the major web-based email services like GmailGmail,
HotmailHotmail, and
Yahoo MailYahoo Mail as well as the common desktop email clients like Outlook,
Apple Mail, and Thunderbird as well as the mobile Android and iPhone mail apps.

(Hired. 2nd day in UWCSEA. Thank you Lord!)

jQuery

$('#fader').hover(function() {
$(this).find('img:eq(1)').stop(true,true).fadeIn();
}, function() {
$(this).find('img:eq(1)').fadeOut();
})

We’re specifying true for both clearQueue and gotoEnd, so our fade animation will immediately stop any other queued animations and jump straight to where it was headed (in this case, it will jump straight to the fully faded-out state, so we can fade it back in). This prevents animations from backing up if you mouse over and out quickly.

setTimeOut(code , milliseconds)
setInterval(code, milliseconds)


var boxLeft = parseInt($('#box').css('left'));
setInterval(function(){
$('#box').css('left', ++boxLeft)
}, 200);


Be careful, though: if you set the delay very low (say, less than 50 milliseconds) and you’re doing a lot of DOM manipulation with each loop, the average user’s browser will quickly grind to a halt. This is because their computer is not given enough time to do everything you asked it to before you come around asking it again. If you think your code might be at risk, it’s best to test it on a variety of machines to ensure the performance is acceptable.

var redLeft = parseInt($('#red').css('left'));
function moveRed() {
setTimeout(moveRed, 200);
$('#red').css('left', ++redLeft);
}
moveRed();