I love designing web pages and web sites. It’s a wonderful process that involves wrapping the latest technologies together with creative ideas and design. Who doesn’t love that combination. Well apparently Microsoft, Google, and the rest of the motley bunch of email client creators. The are firmly “stuck in the 90s”. You need to lobotomize your web approach, to remove all those pesky standards that guide your web designs.
Things to know when you design email templates:
Designing email “templates” are not the same as designing web pages. If they are, then you need to seriously adjust how you design web pages. Initial web pages, all through the 1990’s, and early 2000’s were designed using “<table>” elements to layout the content. Then design evolved, and tables were looked at with disdain – as developers understood they should only hold tabular data, and not be used for layouts. Now, proper websites and pages are developed using “<div>” elements to lay them out, and for HTML5 use, the “<section>“, “<header>“, and “<menu>” tags. That’s why, to design the proper and consistent email template, you gotta kick it old school.
“Tables are your best friend” (pardon me…I have to wash my mouth out with soap for a moment. Ok. Back). The reason I say this, is that tables are what you must use to contain your layout. It is not yet an option. To keep the look of a template you simply have to do this. Tables are not the only thing differentiating email code from web code. Desktop email clients such as Microsoft Outlook and even online clients such as GMail or even the new online MS Outlook, are so insanely inconsistent in how they render emails, it will drive you crazy. To avoid this frustration, try to stick with a few guidelines…
Try to keep the email width at a max of about 600px. This is to account for the preview pane in many email readers. Website can be designed much wider, but you need to stick with narrow widths for email design. Height can remain variable, as there are no real issues with scrolling. People are used to doing so. But keep in mind, with a more narrow content holder, the scrolling area will be longer. Try to keep it reasonable.
Flash or Movies?
You can’t embed flash or movies in your emails. Apart from Apple Mail, no client will render them in the content viewable area. Avoid.
Work wonderfully, but be sure to place the alt tag and title information on every image you use. It is what is show to a user when it pulls up with the images not loaded. They need to give an idea of the content and images before expecting a user to load them. JPG, GIF, PNGs are fine. TIFF and BMPs are not. Do not use background-images, as they will only render in a few of the clients.
Do not include:
– background images
– external style sheets
– inline css styling
– font-size in pixels
– a link to view it online (great to use if you do want to render in an actual browser)
– important content? Keep as text, not images. Many, if not most, email readers will not load images without permission from the viewer
Sites and guidelines to helping you create email newsletters that look correct in all clients:
CSS Support by Email Client
Mailchimp for Designers
Email Jitzu (awesome guide)