Four tools you might consider are Campaign Monitor, MailChimp Inbox Inspector, Litmus, and Email on Acid. (Also, refer to these handy resources to help you make sense of the vagaries of email client CSS support.)

Which Is the Best Email Testing Tool?

It depends on you. All of these tools are robust, easy to use, and reasonably priced. I have had positive customer support experiences with all but Email on Acid (I have not had any contact with their support team). Campaign Monitor and MailChimp are campaign management/delivery services with a built in testing tool. Litmus and Email on Acid are dedicated testing tools.

How often do you test? Do you require spam and content testing, or are you only concerned with email design issues? Do you have team members who need to share the tool?

If you are looking to manage and send email campaigns, you might prefer Campaign Monitor or MailChimp. If you only test, then it might be a pain to have to set up a campaign first, so you might prefer to go with a dedicated testing tool like Litmus. But don’t take my word for it—try them all and then decide. (And if you have a favorite testing tool that I haven’t mentioned, let me know what it is and why it’s great!)

For instance, while writing this article, I almost overlooked the fact that MailChimp has a code analysis tool in my excitement over sharing the good news about Email on Acid. Reason being, I need a dedicated testing tool, and I run so many design tests per day that, for me, using MailChimp for testing is not feasible.

Campaign Monitor

Campaign Monitor provides simulation screen shots of your email in the following email clients:

Desktop Email Clients

• AOL 9
• Apple Mail 2.1
• Apple Mail 3
• Lotus Notes 6.5.4
• Lotus Notes 7
• Lotus Notes 8
• Outlook 2000
• Outlook 2003
• Outlook 2007
• Outlook Express 6
• Outlook XP
• Thunderbird
• Windows Mail

Web-based Email Clients

• AOL Web
• Gmail
• Mobile Me
• Windows Live Hotmail
• Yahoo! Classic
• Yahoo! Mail

Mobile Email Clients

• BlackBerry
• Windows Mobile 5
• Windows Mobile 6

Cost: $5 per test; pay as you go. Set up a free account to get started.

Campaign Monitor design test

This is a good, solid tool that I like to use. And I really like the nice folks at Campaign Monitor. Campaign Monitor’s design and spam testing tool was the first I ever tried, which was in 2007. It’s pretty straightforward: after you upload your campaign and before you send it, you click a button. My one complaint at the time was that sometimes too many screen shots would fail (I got a “screen shot could not be produced” error), which made my test a bust. This is really annoying when you’re on a tight deadline! However, on the few occasions that this happened, I wrote to Campaign Monitor’s excellent, friendly, and helpful support team, and they always cheerfully refunded my money.

That said, when I ran a Campaign Monitor test last month, it was fast and complete.

Campaign Monitor also runs your email through popular spam filters and lets you know which ones failed and why.

Pros

• Fast and easy
• Smoothly integrates with your campaign development process
• Tests in lots of clients and spam filters
• You don’t have to commit to a subscription or contract
• Super-awesome customer support team

Cons

• Not as convenient if you want to test code but not send campaigns (because you have to set up a campaign before you can test your code)
• Can get expensive if you routinely run lots of tests
• Retesting is not as convenient as with other tools, plus you have to buy another test

Overall, a great, reliable tool that is probably best for those who test less frequently and/or also need a service for managing/sending campaigns. I worked at a company that sent two to four emails a month, and this was perfect for them.

MailChimp Inbox Inspector

MailChimp‘s Inbox Inspector is also for design and spam testing. Like Campaign Monitor, MailChimp is primarily an email campaign sending/management service, so you have to set up a campaign in order to run a test. MailChimp says they check your campaign “by sending it to real ISPs and email services all over the world. These are not simulated screenshots.” I’ll admit my ignorance here: I’m not sure if that is any different from what the other services do. (If someone knows better than I about how these tests work, please write in and share!)

Inbox Inspector checks your email in over 25 desktop, web-based, and mobile clients. Frankly, I found the list overwhelming—nothing wrong with that! But I personally did not find some of the more obscure clients useful. I need to test in major clients used by folks in North America, so I did not derive value from viewing simulations in European and Asian clients.

Inbox Inspector also performs spam testing, content analysis, and code analysis. It identifies which lines of code are kicking up compatibility problems, which is vital for any email designer. It even makes suggestions for rephrasing your email content!

Cost: $14 per 3 tests; pay as you go. Set up a free account to get started.

Pros

• Easy to integrate into your campaign management workflow
• You don’t have to commit to a subscription or contract
• A good value if you don’t run frequent tests
• User interface makes navigating through results easy
• Code analysis tool
• Super-awesome customer support team

Cons

• Robust testing might be overkill for some people; for instance, I do not need all of the clients included in testing, nor do I need any of the spam or content analysis tools
• Can get expensive if you run frequent tests
• You have to set up a campaign in order to run a test

Litmus

Litmus provides simulation screen shots of test email in the following email clients:

• Live Hotmail
• AOL Mail
• Yahoo! Mail
• Outlook 2000
• Outlook 2002/XP
• Outlook 2003
• Outlook 2007
• Lotus Notes 6.5
• Lotus Notes 7
• Lotus Notes 8
• Apple Mail 2
• Apple Mail 3
• Gmail
• Yahoo! Mail Classic
• Thunderbird 2.0
• Thunderbird 3.0 Beta 3

Cost: Free limited testing (2 clients, 50 tests/month); $24 day pass, $49/month single user (unlimited browser and email testing, spam analysis), $199/month team (up to 10 users, unlimited browser and email testing, spam analysis)

Litmus email test

Litmus is not a sending service, so to get started you just copy and paste your code (or email it to them), and off you go. The user interface lists the email clients in the right-hand column so you can tab through your results quickly instead of always having to return to a main screen. You can retest an individual client or the entire batch with one click and tab through the versions you generate. You can generate compatibility reports for your coworkers. Litmus will even email, tweet, or IM you when your test is complete. This puppy is packed with features!

Pros

• Subscription pricing is a good value if you run frequent tests (no contract required)
• Easy to retest
• Great sharing tools
• Includes browser testing (if you need it anyway)
• User interface navigating through results easy
• Receive email, IM, or Twitter notice when test is complete
• Super-awesome customer support team

Cons

• No code analysis tool (though you can view your source code with one click)
• Maybe too expensive if you don’t run frequent tests
• Does not manage and send the email campaign (if you need that)

Overall, a very impressive tool with the most features I’ve encountered. I am using Litmus at a company I work for currently. I run many tests per day, which makes this a great value.

Email on Acid

I found this brand-spanking-new service while doing research on email testing tools last month. Email on Acid is still in beta, but I find myself gravitating there every day to run their Acid Tests. I am using Litmus and Email on Acid in tandem, in fact.

Email on Acid simulates your email in 15 popular email clients. The nifty tabbed interface lets you rotate quickly through the results. But what I love love LOVE about this service is the code analysis tool. For each client, you get not only a screen shot but a list of HTML/CSS errors. You can scroll through the source code to see the errors, highlighted in red, to identify which HTML or CSS declarations the client does not support. I did notice a difference in the rendering between Litmus and Email on Acid, and I can’t say which screen shot was inaccurate or why. But I am singing Email on Acid’s praises because it’s streamlined, code-oriented, and doesn’t have extra bells and whistles I don’t need.

Email on Acid design test

Email on Acid code analysis tool

Cost: Free testing while product is in beta. Help these folks out by trying an acid test and sending your feedback, will ya?

Pros

• Code analysis tool
• Free (for the time being)
• Testing tool only; you don’t have to set up a campaign to run a test)

Cons

• Product is in beta; not well established
• Doesn’t test in as many email clients as the other services
• Not a campaign sending tool (if you need that)

Overall…WOO HOO!! Email designers everywhere should be rejoicing over a tool that puts so much emphasis on code aalysis. I may be getting ahead of myself here, but this service looks extremely promising.

Resources

• Doctype (Q&A site for CSS issues): http://www.doctype.com
• Campaign Monitor Guide to CSS Support in Popular Email Clients (PDF and Excel spreadsheet available for download): http://www.campaignmonitor.com/css/
• MailChimp email marketing blog
• Email Standards Project blog (reports on email client compatibility issues): http://www.email-standards.org/blog

The trouble is that business owners usually don’t know enough about the Web to hire wisely. Asking a friend for a referral often doesn’t help because that friend is probably equally clueless about the distinguishing characteristics of a reputable Web professional. (I’m familiar with this phenomenon as well.) What’s a business owner to do?

Ask the Right Questions to Find Your Dream Developer

You don’t need to become a Web expert to recognize a good designer from a bad one. The following 10 qualities are what I would look for were I hiring a Web designer.

1. She Hand-Codes Standards-Compliant XHTML and CSS

If the designer doesn’t know what this means, run. Look for someone who writes her own code and does not rely on a WYSIWYG (“what you see is what you get”), or visual, HTML editor. (NOTE: Dreamweaver does include a WYSIWYG interface, but many designers do hand-code with it, so apologies for taking a dig at it before.) The designer should know what the W3C (World Wide Web Consortium) is and that this entity creates the protocols we follow when building Web sites and applications. She should know what valid code is. The designer should code semantically correct XHTML and not rely on layout tables.

2. He Understands the Importance of Web Accessibility

Your designer should know about or at least appreciate the value of making Web content accessible to as many people as possible regardless of physical capabilities, situational factors, or the type of device they’re using to browse the Web. This designer will also know that when we make Web sites accessible for human beings, we are also dramatically improving SEO (search engine optimization). Familiarity with WCAG and Section 508 is also a plus.

3. She Has a Basic Understanding of Organic SEO

A Web designer is not necessarily an SEO expert, but a good designer will appreciate how Web design influences search engine optimization. Your designer will probably be adding metadata to your Web pages for you (unless that’s not part of your service agreement). She will know that standards-compliant, semantically correct code is much more search engine-friendly than table layouts bloated with deprecated HTML.

Big plus: She offers to integrate Google Analytics or some other metrics gathering application into your site (and email campaigns, if applicable) so you can measure performance instead of just guessing at why your site does or doesn’t bring you business.

4. He Knows You Can’t Design a Web Site without Content

How can you design a layout when you don’t know what kind of information is going on the page? Particularly with templated sites, you must plan the content and site architecture first. I would be leery of a designer who wants to jump into visual design right away without considering content.

That said, you shouldn’t necessarily expect your Web designer to write great copy or be familiar with content strategy. Just look for someone who recognizes the key roles content development and site planning play in the design of an effective Web site.

5. She Doesn’t Confuse Being an Artist with Being a Designer

Some artists are great Web designers, but many Web designers are not great artists. I’m including this tip because every time a prospective client has called his former designer “artistic,” it meant that the site was constructed poorly. Several times I found that each page on the site was just an image map (invisible to assistive devices, text-only browsers, and search engines, as I demonstrated in my article on the importance of Web accessibility).

Web design is a specific discipline that requires specific creative, technical, and marketing expertise. There are established criteria by which to judge good design. And there are many other factors that determine how effective a Web site will be. Being a good artist alone doesn’t cut it.

“Artistic” also seems to be a code word for petulant, but, again, that’s only anecdotal evidence….

6. He Has a Great Portfolio

I’ll admit, I’ve been interviewed for a number of freelance and fulltime gigs where the client did not look at my work before talking to me. But you should look at your prospective designer’s past work. You may not be able to judge the quality of the code, but at least check to see if the work examples (not to mention the designer’s own site) looks clean and professional.

7. She Has a Great Blog

I’ve become a customer of several companies because of their blogs. For example, when I got (unexpectedly inherited) my first email marketing job, I had to do a lot of research to train myself. Campaign Monitor’s blog invariably provided the answer. By establishing itself as a trusted adviser, CampaignMonitor was first on my list when it came time for me to choose an email delivery service for my company.

No blog? I wouldn’t necessarily count it against her. But if she does, I’d consider it a sign of commitment to and deep interest in Web media–not just building it for others but being an active participant. Check out the blog if there is one. Does she seem knowledgeable about her topics? Does she write about Web design and marketing? Is she engaged with the Web design community? Does she seem able to help you launch your own blog (if that is part of your project)?

8. He Focuses on Your Business Goals

Your designer should be asking you about who your audience is and what you want them to be able to do on your Web site. Your site development should focus on achieving your business goals. Does he ask you about these things up front before tackling the visual design?

9. She Can Provide a CMS

If you want to make updates to your site without the help of a developer, you’ll need a content management system, which is software you use to create a dynamic, database driven site that includes a WYSIWYG administration area. CMSs also add lots of functionality to your site that most businesses want these days, such as blogging, calendars, social networking features, and so on. If this is part of your project, ask which CMSs the designer uses.

10. He Is Prompt, Polite, and Respectful

No client should be treated with disrespect. If you have an ooky feeling about someone, don’t hire him. If you don’t feel like he is taking your project seriously, don’t hire him–or at least ask him why. Sometimes designers have to prioritize, but he should be able to explain his reasoning respectfully.

No Need to Settle for Less than the Best

Assuming that you are willing to pay the going rate for a professional developer (it varies, but it’s not cheap), you should insist on these qualities because there are too many people who have them for you to settle for less.

I live in Austin, and I am bowled over by the talent I see in my friends and colleagues. We’ve all worked very hard to learn our craft. Moreover, we continue to work at it all the time as technology and the Web design industry evolve relentlessly.

What will the future bring for Web design professionals? I don’t know, but I hope it will include better accountability for us and a higher level of service expected by (and delivered to) our customers. Any thoughts?

But fear not—the longest journey starts with a single step! Using a few simple tools, you can quickly check for accessibility issues on your site, even if you’re not a Web developer!

In my last post about why it’s so important to make your Web content accessible, I picked on another company’s Web site. Felt a wee bit guilty afterward. This time I’ll use my own site, gelfanddesign.com, for my examples!

First Things First: Get the IE Accessibility Toolbar

This handy toolbar gives you access to a wide variety of testing tools. Ordinarily I work in Firefox, which also has accessibility tools included in the Web Developer Toolbar, but the IE version has quite a few additional features, including access to major accessibility tests such as Cynthia Says and WAVE. Also, screen reader users will be using IE as their browser, so if you’re testing for screen readers anyway, you might as well use the IE toolbar.

Download the IE accessibility toolbar.

Test 1: Validate Your Page

The rules for how Web pages should be built are determined by the World Wide Web Consortium (W3C). The DOCTYPE in your Web page source tells your browser which W3C protocol to check your page against. When your page follows all of the W3C’s rules for that DOCTYPE, your page is considered valid.

Select Validate»HTML W3C Validator»Validate HTML to see if your Web page is following all of the rules!

Test 2: Turn off CSS

Cascading Style Sheets are the files that tell your browser how to display the elements in your HTML pages—from font colors to the positioning of text and images on the page. Adaptive technology (and search engines!) don’t perceive CSS—they’re blind, remember? They just read through the page. Turn off CSS to see if the content on your page is still readable and displays in an order that makes sense.

Select CSS»Disable CSS to see how your site looks without any styles

Even without styles, the content on this page still makes sense

Test 3: Turn Off Images

Often, in an attempt to make beautiful designs, we make heavy use of images. When we use images in place of text, however, we risk hiding that content from a lot of users:

• Adaptive technology such as screen readers
• Search engines
• Anyone who has chosen to disable images in their browser (for instance, the person might have a slow internet connection and want pages to load as quickly as possible)

How does your Web site look with images disabled? Can you still get to all of the content? Does the page still make sense?

For some reason IE’s accessibility toolbar doesn’t have an option for disabling images (yuck), so I am switching over to Firefox for this test.

Select Images»Disable Images»All Images to turn off images in your Firefox browser

Test 4: Check the ALT Text of Images

All images (<IMG> elements) should have an ALT attribute:

<img src="image.jpg" alt="text describing image goes here" />

The ALT text should describe your image. If the image is purely decorative, or if the image is placed directly beside a caption or description, then the ALt tag can be “empty:”

<img src="image.jpg" alt="" />

If an image is wrapped in an anchor (link) element, then it absolutely needs alternative text.

<a href="/path/to/destination.html"><img src="image.jpg" alt="this image is my only clue about where this link goes!" /></a>

The W3C validation test will reveal if images are missing ALT attributes, but you also need to evaluate whether the ALT attributes needs to contain text and ensure that the ALT text is useful. Selecting Images»Show Images in the IE accessibility toolbar will outline all IMG elements on the page, as well as the corresponding alt text.

Use Images»Show Images to review the ALT text on your page

Test 5: Check the Contrast of Colors

Ever tried to use your cell phone outside but weren’t able to see the screen because of the sunlight? People who have problems discerning contrast or who are color blind have this problem all the time.

The IE accessibility toolbar has a number of different tools to help you see your Web page through another person’s eyes. The Color Analyzer is a handy way to see if the contrast ratio meets accepted guidelines.* There’s even an awesome little eyedropper tool to help you catch the color you need to analyze.

Select Colour»Contrast Analyser (application) to see if there is enough contrast between foreground and background colors

The Tip of the Iceberg

You can use these tests on a few representative pages of your site (the home page, a landing page, a plain content page, and your contact form page) in just a few minutes. You’re only scratching the surface, but the results should give you an idea of areas you can improve, often with simple solutions like adding ALT text to your images, updating font/background colors, and correcting HTML markup errors.

Stay tuned for more information on ACCESSIFYING your site!

The federal government acknowledged through the 1998 amending of the Rehabilitation Act (Section 508) that access to information is a civil right. I would like for this to be the cornerstone of any argument for accessible design. However, in my experience, C-level executives don’t jump at the chance to spend money or alter existing practices for the sake of Doing the Right Thing. For better or worse, a company’s accessibility champion has to make these decision-makers see dollar signs to inspire them to take meaningful action. So, how do you do that?

Accessibility Is for Everyone

Accessibility is about removing barriers between your Web content and your customers. That does mean making content available to assistive technology such as screen readers and taking into consideration the possible physical and cognitive limitations of your audience, but the end result is making your content easy for everyone to use no matter where they are, what they’re doing, or what device they’re using to browse the Web.

• When designing a site, when we consider assistive technology, we’re also addressing emerging technology such as mobile devices. We can never know how people will access the Web in the future. Forward compatibility prevents potentially expensive refitting.
• “Disability” can be situational. Would anyone argue that someone talking on the phone while driving isn’t impaired? How about someone talking on the phone while browsing the Web? Or someone browsing the web on a mobile device using keyboard navigation.

The end result is about making your site available to the widest audience possible as much of the time as possible.

The Population Is Changing

• Over 50 million Americans have some type of physical disability.
• The U.S. population is graying. Millions of Americans will be experiencing a decline in sight, hearing, and physical mobility. They won’t stop spending money, though. Businesses will want to make the online customer experience accessible to this massive demographic.
• Thousands of disabled veterans are returning home each year.

Your Most Important Web Site Visitor Is Blind and Deaf

This is the best argument by far to bring to the Big Boss’s attention.

Accessible sites that are coded with lean, mean, standards-compliant XHTML and CSS aren’t just easier for screen readers to handle; they’re also more search engine friendly. Google, your friendly neighborhood “bot” responsible for indexing Web pages and serving them up on Web searches, can’t see or hear. It relies on the text in the Web page source to figure out what your site is about and where it should be ranked in search results.

Want to see what Google sees? Strip out images and CSS from your Web browser view. You can do this by using the Firefox browser and installing the Web Developer plugin. In the event that you don’t have the time or inclination to do that, I found a nice-looking business site and turned off images and styles for you. Take a look. Ask yourself: What Would Google Do? (Company title and tagline blurred out to keep them from coming after me!)

Beautiful Web page with all styles and images visible

Same site with styles and images disabled. You're not hallucinating - the entire site disappears without imges enabled! That's what Google sees.

Businesses Get Sued for Inaccessible Web Sites

Although only the federal government is subject to Section 508 requirements, businesses are not off the hook by any stretch of the imagination. Both the government and commercial establishments are vulnerable to legal action. Last year Target settled a class-action lawsuit with the National Federation of the Blind for $6 million over complaints that its site was’t accessible to screen reading technology. The National Federation of the Blind also filed suit against AOL in 1999, and Access Now, Inc., has sued Southwest Air, claire’s, and Barnes & Noble for having inaccessible Web sites.

That Said, Focus on the Positive

I’m not a fan of fear tactics, so I would not use this as a justification for accessibility when talking to C-level executives. The ADA applies only to government institutions. Most businesses will fly under the radar and never be sued (I think). Focus on the low cost of building accessibility into the design, the benefits of search engine optimization, the accommodation of potential customers, and forward compatibility. (And, while you’re building your impressive laundry list of why to get Accessified now, access to information as a CIVIL RIGHT!)

Accessibility Just Makes Sense

Making the case for accessibility requires getting past abstract ideals or threats. It’s about injecting common sense into the design process by taking into account:

• Accessible sites are not more expensive or more difficult to build—in fact, I’d say the opposite is true.
• The cost of refitting
• The requirements of future technology
• The universal need people have to get to information on the Web quickly and easily
• A superior customer experience on the Web—no angry or frustrated customers
• Search engine optimization

Where Do You Go from Here?

You’re on board, I just know it! So, what do you do now? Is your site accessible? What can you do to make your site more accessible? Stay tuned for answers, tips, and resources to help you Get Accessified!

1. Browse Web site galleries for inspiration. One of my old standbys is CSS Remix, but I am a great fan of finding any random site about Web design and following a daisy chain of “Related Article”  links. You never know what might pop up.
2. Start a morgue file. As you browse the Web (or thumb through magazines or walk by something interesting on the street), collect images of any visual element that strikes your fancy. Lots of people save their Web design morgue files on Flickr, but a manila folder full of clippings will work just fine, too.
3. Take a hike. Or go cycling. Or hit the gym. Just get some fresh air and exercise. I tend to think of things while I’m walking around the neighborhood.
4. Brainstorm and sketch. Set a time limit and force yourself to sketch six layouts, no matter how implausible or lousy you think they are. I usually grab a piece of scratch paper from the recycling bin and divide the page into six boxes. Then I fill those six boxes–no stopping at two or three.
5. Try some reverse psychology. If you have a vision stuck in your mind of what you’re trying to accomplish, go design the polar opposite. Do something with a completely different layout, tone, or look-and-feel (no matter how garish, tacky, totally against your aesthetic sensibilities).
6. Make a word association chart. I call these “bubble charts,” where I start with the name/subject of my site in the center of the page and draw a spider’s web of associations around it. Let your mind roam. Indulge in word play. Explore the emotions you want to evoke in your audience.
7. Snort a few lines of coke. Just kidding.

Now I’m going to try to follow my own advice and see how it goes. Hope my next post includes a link to my new Hidden Mickey site. Wish me luck, folks!
UPDATE: HOLY COW, I THINK IT’S WORKING. HOORAY!

So You Wanna Build Your Own Portfolio….

• Carbonmade online portfolio service
• Free Flash portfolio templates from Warm Forest
• Slideshow Pro Gallery for Flash
• Ajax/Javascript/DHTML Gallery Scripts
• Get a Free WordPress Blog
• Get a Free Blogger Blog
• Install a Free WordPress Blog on your Web Site
• WordPress Themes for Photographers
• Prophoto Themes for Photographers
• Top 10 Photoblog Themes and Templates
• 12 Free Photoblog Templates for Blogger
• Also see Photobucket under “Promote and Sell Your Work”

Inspiration

• 99 Remarkable Photographer’s Portfolios
• 25 of the Best Photographer Portfolio Web Sites
• Top 100 Photography Blogs
• Fine Art Photoblog
• One Page Love gallery of single-page Web sites

Promote and Sell Your Work

• MOO Custom Printing Service
• How to Use Flickr to Promote a Photography Business
• Secrets to Selling and Publishing Photography (lynda.com online training)
• Comprehensive Guide to Using Flickr for Traffic Building and Brand Marketing
• How to Market on Flickr
• Using Flickr in Your SEO & Linkbuilding Strategy
• Photobucket (image hosting, free photo sharing, free video sharing)

The Austin Photography Group meets at Book People on the second Sunday of each month.