Straight to your inbox
Get the best email and digital marketing content delivered.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.
Subscribe
If you’ve checked out our Campaign Monitor shirts then you’ve experienced Shopify, a slick hosted ecommerce product. It’s super fast to setup and a great choice for selling anything from t-shirts to toasters online. This morning on the Campaign Monitor forums, Alex Dunae has just announced his Campaign Monitor “Subscribe” Web Hook for Shopify You may remember Alex from such hits as Premailer and Gladys the Groovy Mule. Alex’s code allows you to easily process a Web Hook from Shopify and subscribe the purchaser to a specific Campaign Monitor list via the API. Read more and download the code to get started. Another great job Alex! Finally, speaking of our shirts, if you’ve got one, and you are coming to Web Directions in Sydney, make sure to wear it. You’ll an extra entry in our competition…more on that later.
Last month Apple replaced .Mac with a new service called MobileMe and while it is certainly slicker visually and nicer to use, in terms of CSS support the results were mixed. We ran MobileMe through our baseline CSS test, and found that there were improvements in some areas (see our Email Standards Project test result) but in other places some CSS support was actually degraded compared to .Mac rendering. It is still a very solid client, but of course it is never nice to see the level of support going in reverse. MobileMe lost point in CSS selectors, and we saw odd results with link colours and heading styles. CSS defined in the head is partially ignored (for example in lower level headings) but if you drop the styles inline, everything seems to render much more reliably, much like Gmail. Nonetheless, MobileMe dropped a few points in our test. We’re already planning the next version of the CSS test, which will broaden its scope to better cover both inline styles and styles in the head, giving you as much information as possible to build emails which will render more consistently. If you haven’t already checked them out, take a look at our free email templates which are built using all the information gathered during the CSS test.
What is a ‘web 2.0’ type experience? Nobody seems to know for sure, but there is a few common ideas. There’s the gradients and corners, the community-social-linking-sharing love in and the catastrophic shortage of vowels. While there is debate about whether or not CampaignMonitr itself qualifies (surely email is pretty much web 0.5!), we do see Campaign Monitor used a lot for one more web 2.0 ingredient, the teaser signup page. You know the ones, with the enormous text field for adding your address, the big logo and the promise of an impending launch for a new web application. Ideally the page should give almost nothing away about what the application actually does. We love a good teaser page, and Campaign Monitor is a great tool to use when setting one up. You can create your account, setup a list, and collect names and email addresses as long as you like for absolutely no cost, you only pay when you send (which gives you time to secure that second round of funding!). Super designer Shaun Inman, creator of the excellent Mint which we use ourselves, has written up how he built his teaser page for the upcoming Fever. My sign-up pages usually have three states: The sign-up form The status message for subscribers The unsubscribe message for the dearly departed All three states are served from the same page. Which state is displayed depends on an optional query string and the presence of a cookie. Shaun goes on to provide his actual PHP code to make it all work, which you can use for your own pages. The technique uses Campaign Monitor’s ability to have custom unsubscribe and subscribe redirect page URLs for each list. Jump over to the Fever site and add yourself to see it in action. Thanks to Shaun for sharing his code, and for his kind words about Campaign Monitor! p.s Please consider this your invitation to post a link to your own teaser page, we’d love to see them!
A little while back I posted a poll that asked ‘Who do you design for?‘. The idea was to find out whether you were mostly freelancers, design company owners or employees, inhouse designers or something else. We’ve had over 300 responses covering all areas of design, and we wanted to let you know how the votes have played out. Who do you design for? Votes % Run my own design company 81 25% Freelancer designer 49 15% Inhouse designer for a web/software company 45 14% Inhouse designer for a non-web company 42 13% Designer for a marketing agency 34 10% Designer on the side, not my main job 32 10% Work for a pure design agency 16 5% Other 14 4% Designer for an educational institution 12 4% Designer for a government body 4 1% Clearly the dominant group is designers running their own companies. 25% of you are in that position, which is fantastic. One interesting piece of information is that the responses were heavily skewed towards owners and freelancers when the poll first went live. However, after we mentioned the poll in our newsletter, we had a big jump in the number of inhouse designers. Perhaps inhouse designers are less likely to spend time on the blog? Inhouse designers (at web and non-web companies combined) make up slightly more than a quarter of respondents. Designers in marketing agencies, and ‘on-the-side’ designers make up the other big groups. So what can we learn from this? For one thing, clearly design is being integrated into all forms of business, so the opportunities for designers to work in a variety of areas are huge. On the other side, Campaign Monitor customers seem highly likely to be business owners as well as designers, which is a whole other area of expertise. So we’d love your feedback on this: Should the Campaign Monitor blog stick to the technical side of HTML emails? Should we include more content of general interest to web designers? Don’t worry, Campaign Monitor will always be the place for in depth research and guidance, but our ultimate aim is to help designers build their businesses. If we can do that in other ways, let us know! Don’t forget that we also blog (sporadically!) over at Freshview about the company, and we could perhaps talk more about business on that blog. Thanks to everyone who took the poll, we appreciate your time, and please do leave us a comment!
Today we’ve uploaded a hot new set of totally free templates you can use for your email campaigns. If you’ve read our reports on CSS support in email clients you will know that it can be very tricky to get an email looking good in all the major programs. You may remember that we have previously released a set of free templates. With those designs, what we tried to do was stick as closely to clean, semantic code as possible. In doing so we made compromises in the design consistency in order to keep the code easily editable. While that was fantastic for many designers, who took them as a base and built up beautiful designs on them, for others it was a bit frustrating. We heard some feedback that you were expecting designs which varied less between different mail programs. So this time we’ve changed our approach and gone all out to get the rendering as close as possible in everything from Outlook 2007 to Thunderbird. That means using HTML and CSS that’s more complicated than before, and a little trickier to edit. If you do make changes, make sure to re-test before sending! We’re not saying the design will be 100% the same in every email client; sometimes there are limitations that can’t be worked around. You will find that they are pretty close, most of the time, and always end up looking good. We think you’ll love the visual impact of these designs too, as we’ve added some more personality and character to the new layouts. Each template comes complete with its original Photoshop file which you can use to edit the graphical touches. If you’re a MailBuild user too, then you get double benefits, because we’ve also included a version with MailBuild template tags built in, and they even take advantage of the new multiple repeater functionality. So visit the templates page now and check them out!
Setting up DomainKeys and SenderID is well worth doing as a way of authenticating your emails, officially nominating Campaign Monitor as an authorised sender for your domain. However, it can be a tricky process because it relies on DNS changes being made, and every host and DNS provider seems to use a different method. We’ve listed guides for a few specific providers already, but today’s guide covers a multitude of hosts who use a recent version of CPanel to administer domains. How to add authentication records to your CPanel domain First off, a big thank you goes to Campaign Monitor customer Brad Schmidt for providing these instructions for us. Adding SenderID Select DNS Functions, Edit DNS Zone Select domain you want to edit. In the first field, put yourdomainname.com. (be sure to include the trailing “.”) Select TXT Enter the SenderID value in right field, which you can get from your account. It looks like “v=spf1 mx include:cmail1.com ~all” Adding a DomainKey In the first field put: cm._domainkey (this time there is no trailing “.”) Select TXT Paste your key from your account into the right field The quotes around the text may be added automatically for you, or you may have to add them in – we’ve heard conflicting reports, so just check what happens when you save. It should look like this: Now go to restart services Restart the DNS Server (Bind) That’s it! You may have to wait a few hours for the DNS changes to propagate, but eventually Campaign Monitor should be able to verify that your records have been added. Make sure you have clicked the ‘I’ve added the records, verify them for me’ button in your account too.
Over on the Email Standards Project blog we’ve posted about how you can get a copy of our email ACID test sent to your own email address. That means you’ll be able to check how our base test renders in your email client of choice. We’ve heard from a few developers of smaller email clients, and this is a great way to compare their rendering prowess to the big market players. So jump over to the “Want to test your own client?” post, and add your address if you are interested.
The clever team over at SitePoint recently discovered a neat way to target Microsoft Office, and most importantly Outlook 2007 using conditional comments in your CSS. For those new to the concept, conditional comments are a Microsoft only technique historically used to target specific versions of Internet Explorer. For example, you can write a separate set of CSS rules that will only be applied to Internet Explorer 6. You can read all about them and see examples here. Importantly for us email designers, James Edwards from SitePoint has discovered that using the following conditional comment, you can actually target Outlook 2007. <!--[if gte mso 9]> // This CSS will only be seen in Outlook 2007 <![endif]--> Why would I use this? Most of the time you probably wouldn’t. As Mat recommended back in May, you really should be coding your email newsletters using tables and inline CSS to get the best results across the board anyway. This approach generally leads to a good result in Outlook 2007 without the need for special hacks (see exactly what CSS properties and selectors Outlook 2007 supports here). However, there are plenty of times when every email client plays nice with your design, but for some reason Outlook 2007 just won’t come to the party. We see plenty of examples of this when helping our customers with coding issues. If you’re in this frustrating position, this conditional comment method is a handy way to add Outlook 2007 specific code to try and fix the rendering issue without messing your design up in all other email clients. An example of the method in action To illustrate how handy this technique can be, I created a simple test email shown below. If anyone has tried to design an email with unordered lists , you’ll know that Outlook’s support is shaky at best. Here’s the code for my test: The CSS <style type="text/css"> ul { margin: 0; padding: 0; list-style-position: inside; } ul li { font: normal 12px arial, helvetica, sans-serif; } </style> The HTML <p>Here is a list:</p> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ul> The screenshot on the left is how my email rendered in Outlook 2003, and on the right in Outlook 2007. As you can see, Outlook 2007 refuses to show my bullets, whereas Outlook 2003 (and all other email clients) show them just fine. Using the conditional comment, I’ll add some extra CSS for Outlook 2007 only that fixes the issue by adding an additional left margin to the unordered list. The updated CSS with conditional comment <style type="text/css"> ul { margin: 0; padding: 0; list-style-position: inside; } ul li { font: normal 12px arial, helvetica, sans-serif; } </style> <!--[if gte mso 9]> <style> ul { margin: 0 0 0 24px; padding: 0; list-style-position: inside; } </style> <![endif]--> With the new Outlook 2007 only CSS, I get the following results. Notice that the bullets are now visible because it recognizes the conditional CSS and applies the required left margin. Impact on other email clients When running these tests I also had a look at the impact of the conditional comments on other email clients including all flavors of Outlook, Gmail, Yahoo! Mail, Lotus Notes, Thunderbird, Apple Mail, Hotmail and AOL. From what I could gather, they didn’t have any negative impact on these clients, but I recommend testing against them with your version before sending. While the unordered list bug was the first example I could think of that would take advantage of this hack, I’m sure there are plenty of others. I think it’s also worth echoing that this certainly isn’t something you’ll need to use all the time. But, for those odd occasions that Outlook 2007 is making life difficult, this could just be your saving grace.
Adding background images to email? We’ve already done the hard work for you. Check out Stig‘s ‘Bulletproof Email Background Images’ code generator at emailbg.net I’ve been hard at work getting the next round of templates ready for mass consumption and stumbled upon something I could have sworn wasn’t possible. My background images (on the body) were working. Uhh, huh? I glanced across the office and asked Mat if this was something he knew about and simply never told me but he was just as surprised as I was. The bit of CSS that has proven itself effective in Outlook 2007 is: background-image: url('http://www.abcwidgets.com/bg.jpg'); background-repeat: repeat-y no-repeat; background-position: top center; background-color: #d9c092; Now the key difference with this and every other bit of CSS code I’ve ever written was the background-repeat. In the past, I would use solely: background-repeat: repeat-y; And while every other client seems to gracefully assume no-repeat for the repeat-x, Outlook 2007 does not. Stick that in and boom, you have body background images working. I gave this a go with some other elements (like divs and tables just to make sure we weren’t all going crazy) and background images definitely only work on the body and otherwise don’t display.
If you are relatively new to Campaign Monitor, or you don’t always follow the blog, you might have missed some of the HTML email support research we have done in the past. Here are links to our most popular posts on some tricky facets of HTML emails: What CSS is supported in email clients? (just updated for 2008) Does Flash work in emails? Can I use forms in my emails? Which clients block my images? Do animated gifs render in email clients? Will image maps work in an email? You might be able to save yourself a lot of time and hassle by visiting these pages next time your client has an odd request. If there is other technical support issues for HTML email you’d like to know about, just leave us a comment below. We’re always looking out for more useful information we can provide to make at least the technical side of HTML emails easier.
The Freshview team are big fans of t-shirts, so much so we even have Campaign Monitor shirts available. So we’re always on the lookout for cool new shirts, and the local postal workers must get sick of delivering shirts to us. HTML email newsletters are a great way to publicise shirts because having a picture of a great new shirt delivered directly to your inbox is an instant stimulus to buy. Of course, the classic example, and one I use in my talks and articles often is Threadless. The SkinnyCorp guys are long-term Campaign Monitor users, and their newsletter for Threadless is hugely popular. Here’s a recent example: It’s very focused on the goal of showing you which new shirts are available this week and is instantly scannable. We love it! This is not the only way to go, though. Recently I read a comment from top designer Khoi Vinh about another t-shirt newsletter: For fans of the more popular, generally excellent, community-driven tee-shirt site Threadless, you may already be finding similar amusement in their regular sales newsletter, which more brazenly hocks their latest wares. The Rumplo newsletter, though, is much less hard-sell, and feels more expansive in its culling from the most obscure corners of graphic tee-dom. In a way, it’s very much a weekly review of what’s happening in this hidden-in-the-open medium. As it turns out, Rumplo has sent out some great emails recently. Here’s the most recent edition: Design wise it is not hugely different, but there is certainly less of an emphasis on buying, and more on exploring. That works well for Rumplo. Campaign Monitor seems to be a haven for t-shirt sellers actually – a quick review of campaigns found some more great examples. Even when handling basically the same content, there are plenty of different design approaches to take. You can choose to emphasize particular designs, to drive purchases directly from the email, or you can just push people to the website. Different goals will create different designs, from visual positioning to copywriting, length and frequency. One factor not focused on by any of these examples is the shirt construction – no mention of the shirt fabric or printing technology. No mention of environmental impact or location of manufacture. I’m sure there are more examples out there that cover these areas too. Where do you buy your t-shirts? Do you subscribe to these emails? Are you loyal to a store, or just focused on the shirt designs?
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.
SubscribeFrom Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.
Get started for free