awhite.ca – Page 5 – Cambridge area web developer

Hard-won HTML email tips, free

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!

Close tabs to the right for Safari

Chrome has a terrific feature that lets you close all the tabs to the right of the current one. Very handy if you’ve opened a bunch of links from search results, found the one you want, and want to get rid of all the rest. Safari is a bit more limited; you can only close all but the current tab. You can get around that via Applescript.

First, make sure “Show Script menu in menu bar” is checked in the Applescript Editor preferences. Enter the following script into Applescript Editor, and save it to ~/Library/Scripts/Applications/Safari.

tell window 1 of application "Safari"
    close (tabs where index > (get index of current tab))
end

If you wanted to be able to assign a keyboard shortcut for this, you can turn the script into a service using ThisService, and assign the shortcut in the Keyboard Preferences Pane.

(via Ask Different)

Markdown coming to Jetpack

WordPress.com have just rolled out native Markdown support. Down in the comments, the author suggests that the functionality may be coming to Jetpack soon.

The bash function I should have written years ago

I bet you nine times out of ten when you mkdir whatever, the next thing you do is cd whatever. Add this to your bash profile.

function mcd() {
    mkdir $1
    cd $1
}

Run mcd whatever at the shell prompt, and you’ll find yourself in a brand new directory called whatever.

Use DNS prefetching to speed up web font loading

Poking around in a framework today, I saw they’d suggested using the new dns-prefetching feature in HTML5 to speed up resolving some foreign domains. Further digging showed folks are prefetching the domains from which Google serve their web fonts. It’s a great idea, given that web fonts are one of the biggest contributors to page weight on a largely text web site.

To include prefetching of the Google web fonts domains in your page, add the following code to your head:

<link rel="dns-prefetch" href="//themes.googleusercontent.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">