Responsive Design for Emails

With the explosion in mobile devices over the past few years it’s no surprise that mobile-first and responsive design have become the standard when building new web applications. And while users spend a considerable amount of time browsing the web and using apps on their mobile devices, they spend an equal or greater amount of time reading email.

But if you’ve subscribed to any number of newsletters or interacted with products / services that communicate via email, it’s quickly apparent that techniques for developing emails have failed to keep up with modern design and device requirements.

Last week Etsy posted this great article on creating responsive emails that actually work…

You get a mobile-oriented design on phones, a desktop layout on Gmail, and a responsive, fluid design for tablets and desktop clients.  It’s the best of all worlds—even on clients that don’t support media queries.

Check out the article for more details on how this technique works and try out the code which they kindly posted to GitHub:

<style type="text/css">
table table {
width: 600px !important;
table div + div { /* main content */
width: 65%;
float: left;
table div + div + div { /* sidebar */
width: 33%;
float: right;
table div + div + div + div { /* footer */
width: 100%;
float: none;
clear: both;
@media (max-width: 630px) {
table table {
width: 96% !important;
table div {
float: none !important;
width: 100% !important;
<body style="margin: 0; padding: 0; background: #ccc;">
<table cellpadding=0 cellspacing=0 style="width: 100%;"><tr><td style="padding: 12px 2%;">
<table cellpadding=0 cellspacing=0 style="margin: 0 auto; background: #fff; width: 96%;"><tr><td style="padding: 12px 2%;">
<h2 style="margin-top: 0;">Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem dictum, iaculis magna ornare, dignissim elit.</p>
<p>Cras justo mauris, elementum id purus ut, elementum volutpat nibh. Proin quis augue sed dui vulputate bibendum. Sed congue arcu eget porta pellentesque. Integer pretium tristique augue, lacinia ultricies libero malesuada id.</p>
<p>Cras quis est convallis, malesuada neque nec, pellentesque lorem. Maecenas tempor dui id lorem imperdiet, vitae sollicitudin lacus tincidunt. Aliquam nec arcu eu dui tempus dignissim. Mauris consequat metus nec erat elementum egestas. In vitae lacus pretium justo suscipit imperdiet.</p>
<h2 style="margin-top: 0;">Sidebar</h2>
<p>Donec tincidunt tincidunt nunc, eget pulvinar risus sodales eu.</p>
<div style="border-top: solid 1px #ccc;">

view raw


hosted with ❤ by GitHub

HipChat vs Slack

UPDATE: See this post for details on the 3.0 release of HipChat.

UPDATE: See HipChat vs Slack – Part 2 for a feature and pricing comparison between the two products.

I’ve recently started playing around with Slack at work (we’re big HipChat users at the moment) and so far I’m pretty impressed. Tons of integrations, beautiful UI, available on lots of platforms, etc. I really like their idea of using channels for conversations rather than rooms.

My only complaint thus far is the readability of the conversation threads. In the default message theme, there’s a lot of noise around each message in the conversation: icon, name, time sent. And it’s all grouped right around the thing that’s actually important – the message. You can switch to “compact” theme but it’s still pretty noisy IMHO.

HipChat, which also features a ton of integrations as well as native support for a few additional platforms including Windows and Linux, does a very nice job of moving all of that same information (minus the icon as HipChat doesn’t use icons) out of the way. Names on the left, conversation down the center, and times on the right.

This allows you to quickly scan the conversation in whole, and then pick out the pieces that you need to know more about (i.e. who said something when). Also notice that Slack uses a black, bold font for the names in combination with a black regular weight font for the message. HipChat, on the other hand, only uses black for the conversation itself. Everything else is lighter colors. Again, this gets your eye to focus on the most important information first – the conversation.

I look forward to seeing what Slack does in future releases to address these small, but pesky UX issues.

Why Native Advertising Will Win

Three animating ads, one of which appears when you happen to place your mouse over a random word in the article for only the briefest second.

Is this the type of user experience consumers will be comfortable with in 5 years? 10 years?

I don’t think so.

The UX of Facebook’s New Like Button

Much of the discussion around the new Like button has centered on the removal of the thumbs up icon. And while that it is a major symbolic move, the real change from a UX perspective is the color.

If you didn’t already know how huge the Like button is, here’s some perspective – the button is viewed 22 billion times daily across more than 7.5 million websites. Massive.

But that huge number of impressions was happening next to a whole slew of other sharing buttons that have popped up from companies such as Twitter, LinkedIn, Pinterest, etc.

And because all of those other companies had simply followed Facebook’s lead, and their UX, all the buttons pretty much looked identical. Lazy users had no visual indication as to which button to click first. Not any more…

One look and it’s clearly a great UX move. A simple splash of color is all it took to differentiate the button from the rest and draw the user’s eye. I would love to know what kind of engagement bump they’re seeing after the new button rolled out late last month.

I’m guessing it’s only a matter of time until we see colored buttons from everyone.