Can email be responsive? →

Jason Rodriguez, writing for A List Apart:

Just like with responsive websites, there are three main components of a responsive email: flexible images, flexible layouts, and media queries.

The only difference between the web and email is in how these three techniques are implemented.

In email design, we have a limited subset of HTML and CSS at our disposal. We can’t rely on properties and values that designers use for responsive sites on the web; margins, floats, and ems don’t work in many email clients. So we have to think of workarounds.

Frankly before this post I considered “responsive” email as something of a lost cause. But there’s a lot of strategic, well explained code examples here that make me want to revisit the emails we regularly send out as part of our day job. At the very least check out Jason’s solution for flexibile images which has a very clean HTML and CSS-based solution.

Mad Men: “Waterloo” →

Yes, Mad Men’s midseason finale was a week ago. But after an extremely busy week at work, I finally caught up to this A.V. Club review by Todd VanDerWerff and Sonia Saraiya and it’s incredible (spoilers for the episode below and of course in the post):

As aware as Mad Men is of the future—because it’s really about our present, told through the lens of 1960-1969—its characters are conscious of the past. Bert was a piece of that past—a piece laid to rest tonight, as astronauts did the unthinkable and miraculous. There is no moment that says the past is over more powerfully than the moon landing. And for this show, there is no more powerful moment that says the past is over than killing off Bert Cooper and selling his agency before his body is cold. Bert was the past, and now the show’s sense of past is gone. The future is now, as Cutler intimates to Roger—SC&P is becoming “the ad agency of the future.” And that means the next crop of people to die will be those characters currently left standing in the halls of the Time-Life building. Great moments have a way of boiling down to the exact same feeling—a dawning realization that outside of the hustle to stay alive, the only thing that is waiting for you, for sure, is death.

How we made The Last of Us’s interface work so well →

A guest Kotaku post by Naughty Dog’s Alexandria Neonakis on UI design within one of the most critically acclaimed games from 2013. I love seeing how the interface changed over time. It’s an especially cool look considering how rarely we get behind-the-scenes access to AAA game design.

Picturefill 2.0 →

It’s exciting to be able to deploy a true “finalized” responsive image spec to the public, something in upcoming months that should be rapidly adopted by the browsers. That’s exactly what happened to us at Pocket – a stable version 2.0 release came out a few weeks before I needed it for our latest major release. If you’re already using some other, competing responsive image solution, I’d recommend looking into Picturefill and consider switching over. It’s a polyfill that’s very well equipped for the finalized picture element.

The implementation was pretty painless, though I did find occasional image pop-in when using the srcset attribute in a solo image (no picture element). There’s also sometimes a double image download in already native-supporting srcset browsers (e.g. latest Chrome). It’s a known temporary issue and only a minor downside given Picturefill’s overall benefits.

Politespace →

As part of my work on the Pocket Premium purchase flow, I integrated the Filament Group’s Politespace plugin for our credit card form field. It’s pretty simple: when the user blurs off the input field in question we auto add spaces to improve readability (e.g. in our case for Visa cards we add spaces between every four characters). When a user focuses back on said field the spaces are removed.

Pocket Premium →

It’s very rare I write a plug about my day job here, but this deserves a mention: today Pocket unveiled Pocket Premium, a for-pay subscription service that adds permanent library, full-text search and suggested tags to the core (free) Pocket platform. It was a huge effort among the whole team and my web work added significant improvements for all users: a slicker, smarter search, a conversion of the whole site to a smarter blend of Typekit, Picturefill 2 for responsive imagery across our marketing pages and much more.

A practical guide to web app success →

Cool online book by author Dan Zambonini on getting a web app off the ground successfully. As he writes:

You’ll find processes, statistics and resources that you can use for the entire lifecycle of your app, from developing the seed of an idea to post-launch promotion. Rather than getting bogged down with unnecessary detail and opinion disguised as best practice, this book concentrates on the critical points of each topic to ensure a well-rounded app that’s equipped for even the most demanding users.

That’s the key – it’s short and very much to the point. And it’s completely free.

A cure for Hacker News overload →

Engineer Jeff Miller put together a simple but well thought out Python bot that tweets Hacker News stories:

Here’s a robust cure for Hacker News overload: use score thresholds. This solves the problem of too many stories by cutting out low-scoring noise while still leaving behind those links interesting enough to have been upvoted by the HN community.

I’ve created a handful of Twitter and RSS feeds that apply score thresholds to Hacker News. Stories enter the feeds in near real-time as soon as they reach X points on the main HN site.

Building Flickr’s new hybrid signed-out homepage →

The Flickr web developer team breaks down the usability and performance considerations behind their new signed out homepage. There’s a lot of solid content including emphasis on 3d transforms to keep CSS animations fast and throttling JavaScript-based scroll events.

The rise of the bespoke TV series →

Vulture’s Matt Zoller Seitz writes on TV series that are breaking away from the traditional 13 to 26 episodes per season format. It’s a concept often mentioned on social media and the occasional blog post, but Seitz constructs the best argument to date. He cites influences like the BBC and Netflix, along with our changing viewing habits and mediums (e.g. TVs, computers, tablets) to help shape the “anything goes” approach that defines a lot of TV today.