Some think it is a typical web designer’s worst nightmare. Because, guess what, it means your design is most likely laid out in tables! And, there are no external style sheets, or even header styles, all your styles have to be inline! And as opposed to about a dozen browsers that are common, there are over 100 e-mail programs that are common.
There are a couple of different styles of e-mail marketing/ HTML e-mails. There are the kind that most major brands send that are all images:
and there are the more news letter types (like the one below from MyFonts):
(disclaimer : I am not saying that these are the best ever examples of email marketing, they are what was in my inbox this morning when I was writing this post)
While this type of code does go against everything we know and love as fans and lovers of a semantic web, it is actually easy to create (well to start, just don’t let it become habit-forming!) To start:
- Set up a document in Photoshop that is no wider than 550px wide. Reading pane limitations force this on you. And, if you make your document too much taller than 700px for a typical image-type HTML e-mail, information will get lost.
- Quick Photoshop tip: As long as you name all your slices in Photoshop, and you have sliced well, you are going to simplify one of your development steps: table creation. When you save for web, make sure you save images AND html, to help you cut down on a development step.
- Now, make sure your images are moved to a server and then deleted from the relative file and linked to using their absolute address. This is very important. If you link to a relative address, the recipient will not see the images, because you are only sending them the code, not the entire directory that contains the code and images. Deleting them from their relative file will help you check for errors.
- Including alt text for your images and title tags for your links is imperative. While you don’t need to be concerned about search engines, you do need to be concerned about accessibility for people with images turned off (the majority of e-mail clients do this) and people with disabilities.
- Also, you will need to include a plain text version of your e-mail, so make sure that your client has provided you with one, as some e-mail servers only accept plain text messages. Your e-mail marketing provider will walk you through this step.
- Does your design account for the CAN-SPAM notices? Most (but not all) e-mail providers automatically append this information to the end of your e-mail. You also need to allow for an unsubscribe method. No one likes a spammer.
Good luck with your e-mail designing! I have plans for writing a tutorial on design principles of e-newsletters soon!
. Thanks for sharing this nice post.
