A quick tip for improving the accessibility of CSS sprites: instead of using sized backgrounds, use the
:before pseudoelement. Sprites added with
:before will still show up in Windows high-contrast mode, whereas backgrounds are eliminated.
Having just finished the most advanced responsive HTML email project I’ve worked on yet, I thought I’d share a few things I’ve picked up.
- Use the Zurb Ink mail framework: It’s restrictive, but it’s the fastest way to get good results in the majority of clients
- Start with the desktop. There are two reasons to do this. Firstly, desktop clients are the least capable mail clients. (if you have Outlook 2011, thank your lucky stars. It actually does a pretty good job). Secondly even on mobile, many people will get the desktop view. Many mobile clients can’t parse media queries, so your finely crafted mobile view gets thrown out.
- Outlook 2013 is your worst nightmare. It’s terrible. Test that first, worry about everything else next. Outlook 2007 is probably second worst of the most-used desktop clients. Remember people upgrade email clients pretty infrequently.
- Try and make your mobile view simply a collapsed version of your desktop view. Many designers are used to the flexibility of responsive design in the browser. For web pages, you can practically include two or three completely different designs. Mobile clients don’t have the space or the smarts.
- If your design requires you to hide an element, hide it for mobile. Campaign Monitor have detailed a supposedly effective method of hiding content for desktop and webmail clients. I’ve had limited success with it. The
.hide-for-small classes included with Ink work well, though.
- Inline your CSS with MailChimp Lab’s Inliner. It seems to have a few more smarts around avoiding over-ridden classes. Just remember to uncheck the option to strip out the style tags, or you’ll lose your media queries.
- Test with Litmus. It’s expensive, slow, and suffers from frequent outages, but I don’t think there’s another option.
Update: The W3C have announced a community group for HTML email. It’s currently just a few days old, but looks promising. Their goal is to document the current state of HTML email and figure out a way to improve things. Hopefully client vendors and companies like Litmus, MailChimp and Campaign Monitor get involved!
On April 13th, WooThemes hosted WordSesh, a full day of streamed talks on various WordPress topics by WordPress professionals. The videos from those talks are now available on the WordSesh channel on YouTube.
I often get content for sites in Word docs which I used to open in Pages. Getting the text out of pages involved far too much clicking, particularly if I was extracting a URL from text in a table. To save my wrists, I figured out the following:
catdoc file.doc | coda >> temp.txt
catdoc converts the Word file into plain text, and outputs to STDIO. I pipe that into Coda using
coda-cli. For some odd reason, I need to provide the
temp.txt throw-away file, or Coda doesn’t respond. The result is a new tab in Coda with the contents of the Word document.
coda-cli can be installed using Homebrew.
Litmus have just announced a new tool called Scope. It’s a bookmarklet that lets you view prettified versions of the source to the HTML email you’re viewing in your browser. There’s also an option to view the text or mobile version of any email, and you can share the email with your personal information scrubbed. Check out the introduction and get the bookmarklet on the Scope page.