When designing and coding email designs, more often than not you’re forced into using your browser to render the HTML code you’re working on, and have to wait until you’re ready to test across multiple inboxes to find the per-client issues (looking at you, Hotmail, Gmail and Outlook 2007). Working towards that point is probably the most important in the development phase, as the better you create your base file, the less likely it is you’ll have to tweak and hack to accommodate those pesky email clients.

A great way to help in the pre-inbox development of email campaigns is Firefox’s web developer toolbar add-on. Normally reserved for developing, debugging and QA’ing websites only, the toolbar can double as a quick but effective QA tester for some of the most important (and easy to fix) email issues.

Here’s a list of some great commands in the WD toolbar that I’ve found make my development process easier, which of course keep me happier in the long run (and prevent me from pulling my hair out – I reserve that for IE6 on the web side of things). CSS CSS > Disable all styles Almost an inevitability, there are some email clients out there (ie Lotus notes) that seem to live simply to mangle your beautiful email designs, namely through poor support for the CSS. Whether or not you use inline styles (you should), this command is great to view the ‘worst case scenario’ of your entire message being viewed without CSS. Not pretty, but you should always strive to maintain a well-structured campaign with and without CSS support. Images Images > Display alt attributes Self-explanatory; great for ensuring you have the right alt tags on the right images and gives you easy-to-scan highlights to ensure everything’s in order. Images > Find broken images Again self-explanatory, but always worth a check (especially as Firefox doesn’t show the ugly red ‘x’ as IE does – sometimes a good thing! Images > Hide images Great for a quick and simple check of how the campaign’s message is affected if images are turned ‘off’. By referring to this early, you can ensure your campaign’s style, layout and message aren’t too badly affected by images off by default. Images > Replace images with Alt attributes Probably the most important – this is the closest you’ll get, outside of inbox-testing, to see how your email will look with images turned off. This is when the Alt tags are displayed to the recipient. Information Information > Display table depth The use of multiple, deep-nested tables in your email designs can severely affect email rendering across all email clients – some clients don’t handle nested tables as well as others, meaning your carefully-crafted email and message might appear as a jumbled mess. This command helps you determine how deep (in levels) your nested tables go. Information > Display title attributes Similar to alt tags, title tags are a great way to ensure your message is readable even if images are turned off by default in your recipient’s inbox. Information > View document size Crucial in the design and development of email campaigns, the heavier a campaign is, the more likely it is to get flagged by a spam filter as malicious. Ensuring your campaign’s weight – both with and without images – is something you should check early and often. Don’t have the Web Developer toolbar add-on for Firefox yet? Download it here.