I know you are shocked beyond belief at the revelation I have just given you, but for all you super-smart dudes & dudettes, I’ll give you something a little extra.
the Image to the left highlights a website called Campaign Monitor. If you look under resources, you will find numerous tips on building email templates including:
A Guide to CSS support
Email design guidelines
Some email design inspiration
Info on the current state of VIDEO in email
As well as many other guides and tips on email markup and design!!
Finally I would like to address Adobe Photoshop’s “Save for the Web” feature. As we all know we can slice images up and save them as HTML…good idea?? Um well, I’m not here to argue for or against it. What I do know is that every instance where I use it has not failed. It greatly decreases the time I use marking up those table elements… Just make sure you slice up the areas you need to contain text separately from the images. Replace the image with a background color, and insert your text.
One Final Note! If you remove the “!doctype” element at the top the template is rendered in quirks mode this jacks up your table. Your table is doing this because the td elements are expecting content and at the bottom of each image there is extra space for hanging characterssuch as “g, y, q, j, etc…” Don’t worry this can be fixed by adding simple CSS to each td or img element in your table:
Well, that is all! You have done well my young padawan…You now have the fundamentals of Email Template Design.
No comments:
Post a Comment