Thursday, September 19, 2024

Designing for Email

Quite a few of you have written in asking how to send out your own html formatted emails, it can be quite simple depending on the volume you’re sending. If you’re just talking under 100 addresses, Outlook or any other up-to-date email client can handle it. All you would need to do is create your html file, save it and import it into the mail client as stationary (or what ever term your client uses for importing html). Some clients will even allow you to edit the html from the new message window. And if you’re talking mass mailing, there are various programs out there that do the job faster than a standard mail client.

People like Vertical Responseand Roving charge for their service/product, yet they have a ton of features and aren’t expensive. www.murdok.org uses Accucast, and we have a subscriber base of around 6million, but the license on that is going to run a pretty hefty sum of money. And there’s others out there that can vary in price and features. There’s even tons of freeware to be found that do the trick. For you Mac users I suggest doing this and looking for a client that allows you to import html into the mailing, being as Outlook for Mac and Entourage aren’t too friendly when it comes to mass mailing. Often times you can find programs for this that will install on a server and you can manage every thing from a browser window. Outlook and other standard email clients don’t handle link tracking, opening rates and list management for opt-in list, but the other options usually do.

As far as a design note goes for html formatted email, always put your images on a server and make sure in the html they have an absolute url, otherwise, mail clients try to send them with the images attached and they can really slow things down for everyone. Also try to keeps things 700 pixels wide or less, simply because you want to design for the lowest common denominator or screen resolutions which by most standards is 800×600. Some people have less, going as low as 640×480, but to design for that just doesn’t leave enough space to accomplish anything worth doing.

And as always, load times are a factor. You want to keep the file size as low as possible on the images because as everyone knows, the longer it takes a page to load, the less likely someone is to view it. Most of the time your standard image formats work just fine in any client that will view html mailings, however you may run into a problem concerning Flash, iFrames and scripts of any kind. Some clients don’t have a problem with these things depending on the user’s security settings, some do. Hotmail simply doesn’t allow any of that to go though to the recipient, so if you have a large amount of hotmail addresses on your list, not using those features would be a serious consideration.

On a side note, you’ll always want to thoroughly test any mailings before the final mailing. Different clients will display the message differently. So I suggest installing as many email clients and browsers as possible and checking your work in all of them. This may seem like a real pain, but it can be a huge benefit if everyone can open and view your content just as you intended it to be. If you only design around Outlook and Internet Explorer you’re needlessly ignoring potential viewers with various other clients.

Graphics Formats

Odds are, if you have ever designed anything in your life, you’ve run across the GIF and JPG file format and possibly even the PNG format. But when do you choose one over the other? What are the differences? Well here is the low down for those of you new to graphic design.

GIF GIF (Graphics Interchange Format) – Perhaps the most popular format on the web. GIF is a powerful format in that, it supports animation and it’s ability to be compressed and not lose quality is great for making fast loading web pages. This is done because the GIF format can only support 256 colors in it’s palette. Unused colors are removed from the palette in order to compress the file (This is a great feature when you’re wanting to create propaganda style 2-color images). It also supports transparency and interlacing. All this makes GIF the format of choice for logos, line drawings and any thing with text. It doesn’t handle gradients and anti-aliasing as well as you would want it to for quality work at minimal file size.

JPG/JPEG JPG (Joint Photographic Experts Group) – JPEG’s are probably the second most common image files found on the Web. Why? Mainly because of their ability to display a photo is superior to that of the GIF format. They also support up to 16million colors which makes them better suited for gradients and anti-aliasing. JPEG uses what is called a “lossy compression” which basically means, the more you compress the image, the more you lose quality. Most digital cameras have to the ability to save your pictures as a JPEG, which makes them very web friendly unlike the alternative, the TIFF format, which, while maintains the highest quality, also maintains the highest files sizes and is mostly for print.

PNG PNG – (Portable Network Graphics) – This format is slowly growing in popularity on the web although not supported on all browsers. The PNG format was established to be an upgrade to the GIF format, yet it has no animation capabilities. PNG’s allow for greater compression than do GIF’s and can be saved, restored and saved yet again and there will be no degradation in the quality of the image, unlike the other 2 formats. PNG’s support indexed-color, grayscale, and truecolor images and actually do a decent job with photos as well as opacity as opposed to full-blown transparency.

SVG SVG – (Scalable Vector Graphics) – This is a newer format and is hardly supported at all by any browsers, but I feel it needs to be mentioned because of the backing it has with W3C. SVG is nothing more than an XML document. It’s not an image format as such, but more of a text file in which information is given about the coordinates and shape of an object, resulting in a vector graphic similar to that of a Flash document, yet the file size is so astronomically small it will blow your mind. It’s allows for zoom and pan, selectable text, text tables for searchability, other image formats can be imbedded as well as complex animation. I suspect to see a boom in this format considering most of the major players in the world of graphic design, Adobe and Corel for example, are backing it by having SVG as an export option in some of their software.

Scott Harris a former graphic designer for murdok and currently the design manager for C.A.D. Website Design and RSStatic

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles