Below are just a few tips and tools needed to help understand the process of HTML Email blasts. Shaffer Design Works implements and uses the most up to date tools available for Web design and development.
1. A design application, like Adobe Photoshop, Fireworks, Dreamweaver, or Illustrator. Use these tools to layout your template, and slice out your graphics (like your company logo, and product photos).
2. A good, “pure” HTML/Text editor, like BBEdit and TextWrangler for the Mac, or HomeSite, and NoteTab Pro for the PC. You could use “WYSIWYG” style tools to generate HTML, like Microsoft FrontPage, or maybe Adobe GoLive or Macromedia Dreamweaver. But they have their disadvantages. WYSIWYGs very often throw in gobs of junk into your code (FYI, Microsoft says the extra code is to help with “round tripping” which means you can export from Word to Powerpoint to HTML, then back again, without losing anything). All this extra code usually ends up just breaking things, or setting off spam filters. There are some WYSIWYGs out there that generate “clean code” but we’ve found those are a bit “too perfect,” because they’re designed for web pages, not HTML email (so they don’t know all the things you have to “rig” in your code.). If you want to do HTML email correctly, you should learn to code HTML “from scratch” with a good text editor.
When considering HTML templates it is best to consider a design firm that has the experience to execute a well designed and unique Email Blast. There are several Websites that offer HTML templates. The downside of a using a pre-existing HTML Email template is that they are stock and you run the chance of someone Else's Email blast looking just like yours. The road of originality is always the best route.
3. Your own web server, to host all your images and archives. You should create a folder on your website for email newsletters. This is where you’ll store images, then point to them with absolute paths in your HTML code. Everybody has their own organization style, though. Just be sure to come up with a system and process for archiving, so that each newsletter isn’t a huge chore to publish.
4. An FTP program, like Fetch for the Mac, or CuteFTP for PCs. When you design your email and slice out all your graphics, you’ll use FTP to move those files from your computer to the server.
5. A test machine (or two), loaded with as many different email applications and accounts as possible. You’ll want to check your HTML email designs under lots of different scenarios. Unlike web design, where you only have to check your work in a small handful of browsers, there are tons of email applications out there, and they all handle HTML email differently.
Design Guidelines
Here are some pointers for designing your email. Early warning: If you’re a seasoned web designer, you’re not going to be happy with all the compromises and hacks you’ll have to make when designing for email applications.
Set your width to about 500-600 pixels.
If you’ve ever worked on a website, you’re probably used to designing pages to fit in 800x600 pixel resolution screens, or maybe even 1024x768. But that won’t work when you design HTML email. Most recipients will be looking at your email through their “preview pane” which is usually a small portion of their available screen.
Above in an example of a recent Email campaign created and designed by Shaffer Design Works. This Email campaign was also tied into several printed pieces as well. Shaffer Design Works specializes in brand development and consistency.
Shaffer Design Works can execute both the largest of Email blasts or even help design, development and execute a small Email campaign of only 50 or so Email addresses.
Contact us today to see how we might be able to help with your next project.
