Search
Designing and Coding
Now that you have a basic understanding of how HTML email campaigns work, and how you should deliver them, we can start talking about designing and coding them (the fun part!).
If you want to get good at coding HTML email, here are the tools you'll need...
- 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).
- 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.
- 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. You might also want a folder on your website to store archived newsletters. When we first started out, we created a folder on our website and then kept campaigns under subfolders named by /date/ to store each campaign. 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. Nowadays, we don't even bother, because we use euro.message's built-in archive functionality. It'll save a copy of every campaign you send from our system. You can build a page on your website called "Newsletter Archives" and paste a little code snippet from euro.message. We'll keep your page updated with all your most recent campaigns. Saves so much time.
- 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.
- 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. If you use euro.message LIVE, you can use our Inbox Inspector tool and let us do all the testing for you.
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.
1.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 (see screenshot below).
Above is a screenshot of an HTML email in Microsoft Outlook's preview pane. Outlook is maximized to full screen (1024x768 pixels), but as you can see, the preview pane is only about 440 pixels wide. In AOL 9, the "preview pane" is only about 194 pixels wide, then when you click "Full View," it typically opens up a window that's about 540 pixels or so. This is why you shouldn't design emails to be much larger than 600 pixels in width.
2-Simple Layouts and Tables Work Best
You wouldn't believe all the different ways email applications garble up HTML email. You'll need to keep your email designs nice and simple. Avoid complicated layouts, too many embedded tables, and tables with too many rows and columns. A simple two column table with a row across the top is about as complex as you can get. There are lots of email applications that don't cooperate when you code tables with colspans (table cells that "span" across multiple columns) in them. One application that's particularly finicky when it comes to tables (and just about everything else) is Lotus Notes. We can't stress it enough. You've got to keep your layouts very, very simple, if you want it to work across all the major email apps. If you're working on an email layout and find the tables are getting complex, and you're having to code too many "COLSPANS," you might think about chopping it up into separate tables. For instance, we almost always use separate tables for the header, body, then footer of our emails. Better to go with more "simple" tables, than one big "complex" table. If you're a CSS ninja, you're probably rolling your eyes in disdain with all this "TABLES" talk. But trust us - you're not going to be able to use all that cool, timesaving CSS stuff.
Solutions
euro.message LIVE makes it possible for you to reach your customers at the right times with the most significant messages. It enables the implements you need to describe, perform and optimize the most comprehensive array of marketing campaigns and programs in order to gain maximum efficiency and results.
Why euro.message?
You can manage various interactive marketing campaigns through different channels over a single platform. By utilizing our e-mail, sms, social media and web analysis technologies, you may contact your customer on a one-to-one basis, create sales opportunities, increase customer loyalty and more importantly increase your ROI.
