1. Use HTML.

Even if the majority of your list recipients are on Blackberries, an HTML e-mail can be Blackberry-friendly without being a wall of text. This means using images where appropriate, using text where appropriate, and giving all images alt tags.

2. Get an E-mail marketing provider or software.

Really push the adoption of e-mail marketing software if your client has the budget. Without being able to look at your e-mail statistics, open rates, click-throughs, etc. you’re flying blind. There are also a host of problems when sending out e-mails through Outlook or Entourage – the alternative.

I personally recommend Blue Sky Factory since they have a really great system and wonderful customer service, but there are other providers with different services and different pricing packages. I posted previously about the topic, but here is the list repeated:

If your client insists on sending out the e-mail without software, they will need Outlook (Stationery) for the PC or Entourage (with SCHWIF2004) for the Mac, bare minimum.

3. “Can’t see this e-mail? View it online.”

It’s fairly standard to have a link at the top or bottom of your e-mail to an online version of the same e-mail. If the HTML e-mail does view incorrectly in the viewer’s e-mail provider, they can see the correct version online.

4. Tonight we’re gonna code like it’s 1999.

E-mail clients don’t read full CSS. This means that all HTML e-mails are created with table-based layouts, CSS applied with the style tag. Script tags in the header won’t work in most e-mail clients, so the class tag is out.

HTML e-mails also need to account for the client the e-mail will be viewed in, so the e-mail will need a small width. Most e-mails don’t have a width larger than 700 pixels. I typically design with a 650 pixel width.

5. Some weird extra notes about HTML e-mail code.

Avoid nested tables. Some e-mail providers will display them incorrectly when they’re nested too deep. I usually nest one table deep when needed, but no further.

Yahoo!mail translates all paragraph breaks into normal breaks. Use two breaks together to make one paragraph break if a large portion of your list recipients are on Yahoo!.

Not all e-mail providers allow for table padding or margins, so set padding and margins to 0 and use a 1px square transparent gif (spacer) to expand rows and columns.

Don’t overuse the spacer if a majority of your list recipients are on Blackberries. The img tag code displays in Blackberries.

6. CAN-SPAM.

Per the CAN-SPAM act, you’ll need an unsubscribe option and a physical mailing address on your e-mail.

7. Testing, testing, one, two.

Have your e-mail tested for e-mail client compatibility through your e-mail marketing service. If the option isn’t available or there isn’t a budget for it, set up dummy accounts on several common e-mail hosts and test the e-mail yourself. Hotmail, Yahoo, Gmail, AOL, and Outlook are fairly common providers.

8. E-mail marketing practices.

Keep your subject line, or the most important part of the subject line, to 50 characters max, including spaces. A lot of e-mail providers cut off the subject line in the preview beyond 50 characters.

Avoid the use of exclamation points, all caps, and common spam words like ”free” in your subject line, which can auto-Junk the e-mail.

The most important article or the call-to-action goes above the fold (i.e. at the top, before the user has to scroll down).

9. E-newsletter specifics.

Named-anchor links to articles in your newsletter allow viewers to both read e-mail contents and jump down to the article they’re interested in. Use them.

Give a very short descriptor paragraph with a link to the larger article online rather than each full article in the e-mail – no one wants to read a 4 page e-newsletter in their inbox.

10. Lastly: don’t use the term blast

You may be shunned in the world of e-mail marketing if you do.

That’s it: all of the weird and quirky things I’ve learned about e-mail marketing!

Have any additions or comments? I’d love to hear them!

1. Talk to the developer before you begin designing, and be open to modifying your ideas.

Designs you have in mind may not translate to the web exactly the way you want. By talking to the developer before you have every page mocked up, you can establish what will be possible, what will be near impossible, and save time for you both.

2. Use the grid system, and think about your design in terms of content-blocks.

When designing for a non-Flash website, different sections, like navigation, body, and sidebar, can be grouped into subject-matter. This does not need to be obvious in the design, but it should be easy to block subject-matter together with imaginary rectangles. This is typically called wireframing.

Examples with content block overlays:

3. Assume your initial mockup is a template for the other pages.

Create a color palette and type treatments that can be used consistently from page to page. With cascading style sheets (css), each block of content will be defined much like Paragraph and Character Styles in InDesign. These styles can be repeated on various pages, like the main navigation, which will most likely be present on every page. Identify the colors and type treatment that you want for links, headlines, pull quotes, etc. in each block. Remember that colors should be consistent from level to level (e.g. heading 1 versus heading 2 text should vary from each other, but not change from page to page).

4. Create sample active links and mouse-over effects in your mockup pages.

Every mouse-over effect on every page doesn’t need to be mocked up, but general colors for active links, and basic mouse-over button effects, should be illustrated somewhere to keep the developer from guessing.

5. Design in Photoshop with layers kept intact.

Utilize Illustrator for effects, but import everything into your layered Photoshop mockup. Layers will need to be exported to jpg, png or gif format – all raster formats. Notice none of those formats are print formats like eps or pdf. This also means keeping your fonts intact (i.e. not flattening them to any other layers). Illustrator can be used in place of Photoshop if web design is line art heavy, but Photoshop is more typically used.

Edit: a great post on how to effectively organize your Photoshop layers was just posted.

6. Don’t expect your design to look consistent across all computers and browsers…

or exactly how it looks in your mockup. The type you are setting in Photoshop is not going to translate to the web the way that Photoshop displays it. The background you are creating may shift based on someone’s monitor resolution. The colors you pick may look slightly different on another computer.

Examples of a website in Internet Explorer 6.0 versus Mozilla Firefox 3.0:

7. Consider color blind visitors when creating your color palette.

As many as 1 in 12 visitors to your website may be color blind. There are four types of color blindness to consider, but the most common color deficit is red/green (Deuteranopia). “Although most people see red and green as contrasting, those with [Deuteranomaly Vision] will not be able to tell these colors apart. This also goes for combination with variations of green and red, including colors such as purple and orange.” (Source: How to Design Web Accessible Pages for the Color Blind)

Deuteranomaly Vision example:

8. Unless creating a headline that will be a graphic, use common fonts in your type treatments.

Verdana, Arial, Times, Palatino, Lucida Sans… Using cross-platform common fonts is standard for body copy in web design. Visit Common fonts to all versions of Windows & Mac equivalents for a complete list.

9. If you are using an image for a background, make sure it is tileable.

This may mean designing a separate background file that tiles correctly and tiling it in your mockups. Your background image may need to tile on all four sides, or tile on the left and right if it is a large image that is vertically stationary. This accounts for various large monitor resolutions.

Example of website with tiled background:

10. Realize that pdfs are usually available to site visitors only as a secondary source of information.

Pdfs can be used for printable versions of content already on a web page, but typically aren’t primary links or sources of information. First, site visitors don’t expect to open a pdf when clicking on a link. Second, search engines don’t typically rank pdfs very high, because pdfs aren’t usually optimized for indexing.

Doing it yourself

Many of these tips assume you will be having someone else do your web site development. If you are planning to script the website yourself and have never done it before, familiarize yourself with html and css, bare minimum. Use Dreamweaver (or similar WYSIWYG software) to help you with the scripting, but don’t design without looking at and familiarizing yourself with the source code, otherwise you will most likely end up with a website that is non-web compliant and will not look consistent across different browsers and platforms. Remember to test your site in multiple browsers and on both a Mac and a PC if possible.

Some final notes about doing the scripting yourself:

It is no longer the standard to design websites in html tables; the standard is css. This is important to keep in mind when you are using WYSIWYG software and also when learning the relationship between html and css.

You may also be tempted to use Flash to design your whole website, which has positives and negatives. The biggest positive is interactivity (check out thefwa.com for some great examples). The biggest negative is lack of search engine optimization. As a beginning web designer, I would not recommend an all Flash website.

Lastly, if you are just learning web design and are designing for a client, don’t over-promise! Outsource a web developer if the project looks too daunting.

Good luck!

Resources for designers shifting from print to web:

W3 Schools (web scripting tutorials and standards):
http://www.w3schools.com

Lynda.com (great tutorials on software and coding):
http://www.lynda.com

Web Monkey (web developer tutorials):
http://www.webmonkey.com/

Print Design versus Web Design