Panic Coda

Web: panic.com/coda | License: Commercial, $99

All the coding tools you could need in one place, including syntax-highlighted editing of all major code-types such as PHP, CSS, HTML, Ruby, Javascript, XML and more. I particularly love the excellent Site Manager which stores all of your sites in one place and provide easy access for direct, live editing of the site code using FTP, and the clips manager that serves as a snippets repository for reusable code.

Filezilla

Web: filezilla-project.org | License: Free

Simple to use and packed with great features – one of the best free FTP clients out there.

Adobe Fireworks

Web: www.adobe.com/products/fireworks | License: Commercial, ~$299

Easy to use graphics editor with the best support for PNGs for web use. Build rapid designs and slice them up ready to build into a template. Fireworks can also handle (most) Photoshop PSDs with ease, so it’s particularly useful if you work with designers who prefer to work in Photoshop.

VMware Fusion

Web: www.vmware.com/products/fusion | License: Commercial, $79.99

Set-up multiple operating systems which can be run in OS X without needing to reboot. Essential for effective cross-browser testing.

MAMP

Web: www.mamp.info | License: Free (Pro version: £39)

Localhost server environment to enable fast, live development – provides a one-click server running Apache, PHP and MySQL.

Quicksilver

Web: docs.blacktree.com/quicksilver/quicksilver | License: Free

Quickly access all of your applications at the touch of a button – no more searching around in your Apps folder!

Apple Time Machine

Web: www.apple.com/macosx/what-is-macosx/time-machine.html | License: Free (ships with Mac OS X)

The perfect incremental backup solution – and best of all, ships with OS X and is seamlessly integrated. Just add an external disk drive!

Betterzip

Web: macitbetter.com | License: Shareware, $19.95

Brilliant archive utility offering a variety of formats and and easy-to-use interface.

Skype

Web: www.skype.com | License: Free

Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.

Process

Web: www.jumsoft.com/process | License: Shareware, $39

Useful task-list and project tracking.

This article describes the basics for turning your newsletter designs into functional newsletters.

Getting Started

First off, work from a design so you know how the final construction will look. This can be a full-blown Photoshop mock-up, or a wireframe…however you make it, just make sure it’s designed as you’d like the final newsletter to appear.

Once your design is ready, you will need to create the framework of the newsletter, using HTML tables and a combination of carefully defined table-cells. You can save some time here by using a visual (WYSIWYG) editor such as Dreamweaver to visually create the layout; this will save a significant amount of time over hand-coding the table layout. In fact, you can use a visual editor to create the whole thing – but I personally prefer to see exactly what’s going on, so tend to hand-code once the basic structure is defined.

Note that the table I’ve used here is quite narrow (600px) and centered – you can use your own dimensions and alignment here, but this arrangement seems to work best for most email clients and display resolutions.

I’ve also left the border active (border="1") which will help when I add content to the layout. You can disable this later if you do not wish the borders to be displayed in the final newsletter.

Adding Content

Once you have your basic structure in place, you’re ready to start adding content (text and images) to the newsletter. For now, don’t worry about the styling; just add the bulk of the text and any images you have to the layout.

If you don’t have final images, use exact-sized placeholders until the graphics are ready. This will help to get the layout exactly right, and show where any fine adjustments to the table layout is needed.

Images should be added using the absolute path to the server where they are stored:

<img src="http://mydomain.com/images/header.jpg" alt="" />

…this will ensure the images load correctly into the document. Note that many email clients will require user approval before they fully display embedded images – it is not possible to override this.

Adding the Style

This is where most of the time is consumed – actually adding the inline CSS to the layout in order to get the look to match the design you’ve made. Inline styling offers the best and most widely compatible method to add styling to the newsletter. If you’re comfortable with hand-coding the styles, this is the best way – but of course you can always use a visual editor…just keep an eye on the way the styling is added to the document – some editors (such as Dreamweaver) may define styles in a stylesheet format which won’t work for the newsletter.

The styles must be applied to each and every element that needs to be altered from the default. You can of course apply a global style to the whole container (the main table definition) to set a standard font size/colour/style to start you off:

<table width='600px' border='1' cellspacing='0' cellpadding='5' align='center' style='font-family: Georgia, 'Times New Roman', Serif; color: #222222; font-size: 13px>

This will give you your text style for any text that does not have it’s own definition. Much of the styling information will be applied to things like headers and links:

<h2 style="font-size:18px; font-weight:bold; color:#FF3300">Here's My Title</h3>
<p>Check out the following link:</p>
<a href="http://www.mylink.com" style="color:#3F84BA; text-decoration:underline">My Link</a>

It is necessary to add all styling information in this way. You should also refrain from using shorthand CSS as some email clients will ignore this method of styling, such as:

<p style="font: bold 14px/120% Arial,Sans-Serif">This is my paragraph.</p>

Viewing the Newsletter in Other Formats

If your mass-mail system supports a plain-text version of the newsletter, you should take the time to create this alongside your HTML version so that users who cannot view mail in HTML format can still read the email.

If this is not practical or possible, provide a link to the HTML document on your server at the top of the email, this way readers who cannot properly view the newsletter will at least have the option to view the newsletter in their browser, which has a good chance of being rendered as you intended it.