№ 139: Every Time We Touch—Josh Clark, author of “Designing For Touch”

Author Josh Clark on The Big Web ShowTOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.

In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.

Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.


Big Web Show Episode № 139
Big Medium
Designing For Touch

Responsive times two: essential new books from Ethan Marcotte & Karen McGrane

Responsive Design times two! New books from the geniuses, Ethan Marcotte and Karen McGrane.

IT WAS the early 2000s. The smoke from 9/11 was still poisoning my New York.

Karen McGrane was a brilliant young consultant who had built the IA practice at Razorfish while still in her early 20s, and was collaborating with my (now ex-)wife on some large, exciting projects for The New York Public Library. Ethan Marcotte was a Dreadlocks-hat-sporting kid I’d met in Cambridge through Dan Cederholm, with whom he sometimes collaborated on tricky, standards-based site designs. The first edition of my Designing With Web Standards was in the can. I figured that, like my previous book, it would sell about 10,000 copies and then vanish along with all the other forgotten web design books.

Nothing happened as I expected it to. The only thing I got right besides web standards was the desire to some day work with Karen, Ethan, and Dan—three dreams that, in different ways, eventually all came true. But nothing, not even the incredible experience of working with these luminaries, could have prepared me for the effect Ethan and Karen and Dan would have on our industry. Even less could I have guessed back then the announcement it’s my pleasure to make today:

Ethan Marcotte’s Responsive Design: Patterns and Principles and Karen McGrane’s Going Responsive are now available in our A Book Apart store.

It was thrilling to bring you Ethan and Karen’s first industry-changing A Book Apart books. Being allowed to bring you a second set of absolutely essential works on responsive design from these two great minds is a gift no publisher deserves, and for which I am truly grateful.

Building on the concepts in his groundbreaking Responsive Web Design, Ethan now guides you through developing and using design patterns so you can let your responsive layout reach more devices (and people) than ever before.

Karen McGrane effortlessly defined the principles of Content Strategy for Mobile. She’s helped dozens of teams effectively navigate responsive projects, from making the case to successful launch. Now, she pulls it all together to help you go responsive—wherever you are in the process.

Ebooks are available immediately and paperbacks ship next week. Buy Responsive Design: Patterns and Principles and Going Responsive together and save 15%! (Learn more.)

Save “Save For Web”

TWENTY years or so ago, Adobe Photoshop was, as its name suggests, primarily a tool for professional commercial photographers. Strange though it may seem for a company that now sells its software via a “Cloud” subscription service, the web was not at all on Adobe’s radar in those days. “Save For Web” was not even a widely held concept, let alone a Photoshop menu option.

This vacuum created an opportunity for independent developers and designers. Which is how the very talented Craig Hockenberry of Iconfactory and I came to release Furbo Filters, an indie shareware product that let designers prepare images for the web. It did a few other things as well, such as offering garish, psychedelic treatments you could apply to any image—not unlike the far more expensive (and also far, far more developed) Kai’s Power Tools. (And you know what they say: if you’re old enough to remember Kai’s Power Tools, there’s a Drop Shadow in your closet. But I digress.) Some of you may have used DeBabelizer to manage your web color palettes in those days when Adobe and Photoshop ignored the web. Some may even have used Furbo Filters.

Then Adobe created a “Save For Web” option (in Photoshop 5.5), and Furbo Filters’s beautiful market was gone in a moment. All that remains as a memento of that time and that product is the domain name furbo.org, which is where Craig keeps his blog.

I was reminded of this during a workplace discussion about the seeming disappearance of “Save For Web” from modern Photoshop.

To be clear, “Save For Web” still exists in Photoshop CC 2015. But it has been rather awkwardly deprecated, as revealed through both UX (“Save For Web” no longer appears in the part of the interface where we’ve been trained to look for it for the past twenty years) and language: when we stumble onto “Save For Web” hiding under Export, after not finding it where we expect it, we’re presented with the words “Save For Web (Legacy),” clearly indicating that the feature is no longer a recommended part of today’s workflow.

Adobe explains: “Because Save for Web is built on the former ImageReady product (now discontinued), the code is too antiquated to maintain and develop new features.” (If Furbo Filters and DeBabelizer didn’t resurrect dead brain cells for some of you, I bet “ImageReady” did. Remember that one? Also, how scary is it for me that half the tools I’ve used in my career only exist today as Wikipedia entries?)

Instead of Save For Web, we’re to use Export: Export As…, which Adobe has built on its Generator platform. Stephen Nielson, writing on Jeff Tranberry’s blog for Adobe, explains:

Adobe Generator is a new, modern, and more efficient platform for exporting image assets from Photoshop. We have been building new capabilities on top of this platform for the past two years, including the new Export As and Device Preview features. The Generator platform allows us to build new, streamlined workflows and incorporate more efficient compression algorithms like PNGQuant into Photoshop.

The new Export As workflows are a complete redesign of how you export assets out of Photoshop. Export As has new capabilities like adding padding to an image and exporting shapes and paths to SVG. We also introduced the Quick Export option, which allows you to export an entire document or selected layers very quickly with no dialog.

Going forward, we will no longer develop new features in Save for Web, which is why it now is labeled as “Legacy”. Don’t worry; no features have been removed from it and we know there are critical workflows that still require Save for Web. However, Save for Web does not support, for example, new Artboard documents.

—Jeff Tranberry’s Digital Imaging Crawlspace, “Save for Web in Photoshop CC 2015

While I believe the Export As function is built on newer code, and I get that Adobe is committed to it, after months of use, I still spend a tremendous amount of time searching for Save For Web whenever I use Photoshop. And when I make myself use Export As, I still don’t feel that I’m getting the speed, power, and options I loved and came to depend on in Save For Web. This is a subjective reaction, of course, and “users hate change” is not a truth to which designers are immune—but I’ve yet to meet a designer who prefers the new tool and doesn’t feel confused, frustrated, and bummed out about the switch.

What I’m saying is, Craig, let’s talk.

Web Performance Today

WEB DESIGNERS have cared about web performance since the profession’s earliest days. When I started, we saved user bandwidth by employing GIF images that had the fewest possible colors—with no dithering, when possible, and by using actual web text instead of pictures of web text. (Kids, ask your parents about life before CSS enabled, type designers created formats for, browsers finally supported, and Typekit quickly popularized web fonts.)

Later, we learned to optimize JPEGs and blur their backgrounds: the blurrier large swathes of a JPEG image can be, the lower the bandwidth requirements for the image. We found the optimally performant size for repeating background tiles (32 x 32 and 64 x 64 were pretty good) and abandoned experiments like single-pixel-wide backgrounds, which seemed like a good idea but slowed browsers, servers, and computers to a crawl.

We developed other tricks, too. Like, when we discovered that GIF images optimized better if they possessed repeating patterns of diagonal lines, we worked diagonal background images into a design trend. It was the trend that preceded drop shadows, the wicked worn look, and skeuomorpic facades, which were themselves a retro recurrence of one of the earliest styles of commercial web design; that trend, which was always on the heavy side, performance-wise, eventually gave way to a far more performant grid-driven minimalism, which hearkened back to classic 1940s Swiss graphic design, but which our industry (sometimes with little knowledge of design history) called “flat design” and justified as being “born digital” despite its true origins going back to pixels, protractors, and a love of Greek mathematics.

All of this nostalgia is prelude to making the obvious comment that web design today is far more complex than it was in those golden years of experimentation; and because it is so much more complex, front-end performance is also far more complicated. You didn’t need an engineering degree to run DeBabelizer and remove needless elements from your markup, but, boy, does front-end design today feel more and more like serious coding.

All of which is to say, if you’re a front-end designer/developer, you should probably read and bookmark Nate Berkopec’s “Ludicrously Fast Page Loads – A Guide for Full-Stack Devs.” While you’re at it, save it to Pocket, and as a PDF you can read on your tablet.

I cannot verify every detail Nate provides, but it is all in line with recommendations I’ve heard over and over at top conferences, and read in articles and books by such performance mavens as Jake Archibald, Lara Hogan, Scott Jehl, and Yesenia Perez-Cruz.

You should also pick up these great books on performance:

(It’s not why I wrote this post, but if you order Scott’s book today, you can save 10% when you enter discount code ABAHARVEST at checkout.)

Even the most complex site should work in any device that reads HTML. It should work if stylesheets fail to load or the device doesn’t recognize CSS. It should work if JavaScript fails to load or the device doesn’t recognize JavaScript. The principles of standards-based design will never change, no matter how complex our web becomes. And as it becomes more complex (and, arguably, much richer), it behooves us to squeeze every byte of performance we can.

Websites can never be too rich or too thin.

USA: Designed With Web Standards

cover_quarterMY BIG WEB SHOW guest today is front-end designer Maya Benari, a leading contributor to the U.S. Web Design Standards.

Recently launched, and deservedly much lauded, the U.S. Web Design Standards consist of open source UI components plus a visual style guide, and are designed to create consistency and beautiful user experiences across U.S. federal government websites. Accessibility, semantics, and mobile-first responsive web design are baked in, right out of the box.

Maya and Jeffrey discuss the genesis of the project, the teams behind the scenes, and why improving people’s lives is sexier than building sandwich rating apps.

✩ ✩ ✩ ✩ ✩ ✩ Listen to Big Web Show № 136—USA: Designed With Web Standards, featuring Maya Benari.


You’re welcome: cutting the mustard then and now.

EVERY TIME I hear a young web developer cite the BBC’s forward-thinking practice of “cutting the mustard,” by which they mean testing a receiving web device for certain capabilities before serving content, I remember when my team and I at The Web Standards Project invented that very idea. It’s a million web years ago, by which I mean fourteenish human years ago, so nobody remembers but me and some other long toothed grayhairs, plus a few readers of the first edition of Designing With Web Standards. But I like you, so I will tell you the story.

Back then in those dark times, it was common practice for web developers to create four or more versions of the same website—one for each browser then in wide use. It was also a typical (and complementary) practice to send server-side queries to figure out which browser was about to access a site’s content, and then send the person using that browser to the site version that was configured for her browser’s particular quirks, proprietary tags, and standards compliance failings.

The practice was called “browser detection.” Nobody but some accessibility advocates had ever questioned it—and the go-go dot-com era had no time or care for those folks.

But we at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone. In a world like that, you wouldn’t need browser detection, because every browser and device that could read HTML would be able to feast on the meat of your site. (And you’d have more meat to share, because you’d spend your time creating content instead of crafting multiple versions of the same site.)

To hasten that world’s arrival, in 2001 we launched a browser upgrade campaign. Those who participated (example participant here) employed our code and content to send their users the message that relatively standards-compliant browsers were available for every platform, and inviting them to try one. Because if more people used relatively standards-compliant browsers, then we could urge more designers and developers to create their sites with standards (instead of quirks). And as more designers and developers did that, they’d bump against still-unsolved standards compliance conundrums, enabling us to persuade browser makers to improve their standards compliance in those specific areas. Bit by bit, stone by stone, this edifice we could, and would, erect.

The code core of the 2001 browser upgrade campaign was the first instance of capability detection in place of browser detection. Here’s how it worked. After creating a valid web page, you’d insert this script in the head of your document or somewhere in your global JavaScript file:

if (!document.getElementById) {
window.location =

We even provided details for various flavors of markup. In HTML 4 or XHTML 1 Transitional documents, it looked like this:

<script type="text/javascript" language="javascript">
<!-- //
if (!document.getElementById) {
window.location =
// -->

In STRICT documents, you’d either use a global .js file, or insert this:

<script type="text/javascript">
<!-- //
if (!document.getElementById) {
window.location =
// -->

You could also just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
window.location =

Non-WaSP members (at the time) J. David Eisenberg, Tantek Çelik, and Jim Heid contributed technical advice and moral support to the effort. WaSP sysadmin Steven Champeon, the inventor of progressive enhancement, made it all work—under protest, bless him. (Steve correctly believed that all web content should always be available to all people and devices; therefore, in principle, he disliked the upgrade campaign, even though its double purpose was to hasten the arrival of truly standards-compliant browsers and to change front-end design and development from a disrespected world of hacks to a sustainable and professional craft. ((See what I did there? I’m still respectfully arguing with Steve in my head.)))

Discovering rudimentary DOM awareness or its absence in this fashion was the first time web developers had tested for capabilities instead of chasing the dragon in a perpetual and futile attempt to test for every possible browser flavor and version number. It was the grandparent, if you will, of today’s “cutting the mustard.” And it is analogous as well to the sensible responsive design practice of setting breakpoints for the content, instead of trying to set appropriate breakpoints for every possible device out there (including all the ones that haven’t been invented yet).

Which reminds us that the whole point of web standards was and is forward compatibility—to create content that will work not only in yesterday’s and today’s browsers and devices, but in all the wonderful devices that have yet to be invented, and for all the people of the world. You’re welcome.

—CHICAGO, Westin Chicago River Hotel, 1 September 2015

Hat tip: John Morrison

Publishing v. Performance—or, The Soul of the Web

MY SOUL is in twain. Two principles on which clued-in web folk heartily agree are coming more and more often into conflict—a conflict most recently thrust into relief by discussions around the brilliant Vox Media team, publishers of The Verge.

The two principles are:

  1. Building performant websites is not only a key differentiator that separates successful sites from those which don’t get read; it’s also an ethical obligation, whose fulfillment falls mainly on developers, but can only happen with the buy-in of the whole team, from marketing to editorial, from advertising to design.
  2. Publishing and journalism are pillars of civilized society, and the opportunity to distribute news and information via the internet (and to let anyone who is willing to do the work become a publisher) has long been a foundational benefit of the web. As the sad, painful, slow-motion decline of traditional publishing and journalism is being offset by the rise of new, primarily web-based publications and news organizations, the need to sustain these new publications and organizations—to “pay for the content,” in popular parlance—is chiefly being borne by advertising…which, however, pays less and less and demands more and more as customers increasingly find ways to route around it.

The conflict between these two principles is best summarized, as is often the case, by the wonderfully succinct Jeremy Keith (author, HTML5 For Web Designers). In his 27 July post, “On The Verge,” Jeremy takes us through prior articles beginning with Nilay Patel’s Verge piece, “The Mobile Web Sucks,” in which Nilay blames browsers and a nonexistent realm he calls “the mobile web” for the slow performance of websites built with bloated frameworks and laden with fat, invasive ad platforms—like The Verge itself.

The Verge’s Web Sucks,” by Les Orchard, quickly countered Nilay’s piece, as Jeremy chronicles (“Les Orchard says what we’re all thinking”). Jeremy then points to a half-humorous letter of surrender posted by Vox Media’s developers, who announce their new Vox Media Performance Team in a piece facetiously declaring performance bankruptcy.

A survey of follow-up barbs and exchanges on Twitter concludes Jeremy’s piece (which you must read; do not settle for this sloppy summary). After describing everything that has so far been said, Mr Keith weighs in with his own opinion, and it’s what you might expect from a highly thoughtful, open-source-contributing, standards-flag-flying, creative developer:

I’m hearing an awful lot of false dichotomies here: either you can have a performant website or you have a business model based on advertising. …

Tracking and advertising scripts are today’s equivalent of pop-up windows. …

For such a young, supposedly-innovative industry, I’m often amazed at what people choose to treat as immovable, unchangeable, carved-in-stone issues. Bloated, invasive ad tracking isn’t a law of nature. It’s a choice. We can choose to change.

Me, I’m torn. As a 20-year-exponent of lean web development (yes, I know how pretentious that sounds), I absolutely believe that the web is for everybody, regardless of ability or device. The web’s strength lies precisely in its unique position as the world’s first universal platform. Tim Berners-Lee didn’t invent hypertext, and his (and his creation’s) genius doesn’t lie in the deployment of tags; it subsists in the principle that, developed rightly, content on the web is as accessible to the Nigerian farmer with a feature phone as it is to a wealthy American sporting this year’s device. I absolutely believe this. I’ve fought for it for too many years, alongside too many of you, to think otherwise.

And yet, as a 20-year publisher of independent content (and an advertising professional before that), I am equally certain that content requires funding as much as it demands research, motivation, talent, and nurturing. Somebody has to pay our editors, writers, journalists, designers, developers, and all the other specialtists whose passion and tears go into every chunk of worthwhile web content. Many of you reading this will feel I’m copping out here, so let me explain:

It may indeed be a false dichotomy that “either you can have a performant website or you have a business model based on advertising” but it is also a truth that advertisers demand more and more for their dollar. They want to know what page you read, how long you looked at it, where on the web you went next, and a thousand other invasive things that make thoughtful people everywhere uncomfortable—but are the price we currently pay to access the earth’s largest library.

I don’t like this, and I don’t do it in the magazine I publish, but A List Apart, as a direct consequence, will always lack certain resources to expand its offerings as quickly and richly as we’d like, or to pay staff and contributors at anything approaching the level that Vox Media, by accepting a different tradeoff, has achieved. (Let me also acknowledge ALA’s wonderful sponsors and our longtime partnership with The Deck ad network, lest I seem to speak from an ivory tower. Folks who’ve never had to pay for content cannot lay claim to moral authority on this issue; untested virtue is not, and so on.)

To be clear, Vox Media could not exist if its owners had made the decisions A List Apart made in terms of advertising—and Vox Media’s decisions about advertising are far better, in terms of consumer advocacy and privacy, than those made by most web publishing groups. Also to be clear, I don’t regret A List Apart’s decisions about advertising—they are right for us and our community.

I know and have worked alongside some of the designers, developers, and editors at Vox Media; you’d be proud to work with any of them. I know they are painfully aware of the toll advertising takes on their site’s performance; I know they are also doing some of the best editorial and publishing work currently being performed on the web—which is what happens when great teams from different disciplines get together to push boundaries and create something of value. This super team couldn’t do their super work without salaries, desks, and computers; acquiring those things meant coming to some compromise with the state of web advertising today. (And of course it was the owners, and not the employees, who made the precise compromise to which Vox Media currently adheres.)

Put a gun to my head, and I will take the same position as Jeremy Keith. I’ll even do it without a gun to my head, as my decisions as a publisher probably already make clear. And yet, two equally compelling urgencies in my core being—love of web content, and love of the web’s potential—make me hope that web and editorial teams can work with advertisers going forward, so that one day soon we can have amazing content, brilliantly presented, without the invasive bloat. In the words of another great web developer I know, “Hope is a dangerous currency—but it’s all I’ve got.”

Also published in Medium.

Big Web Show № 132: Modern Layouts with Jen Simmons

Jen Simmons

THE BIG WEB SHOW is back from its break. My guest this week is Jen Simmons (@jensimmons) of The Web Ahead. We discuss moving beyond cookie-cutter layouts on the web; the ins and outs of podcasting; tradeoffs when designing a website; learning from your users; Jen’s journey from theater to technology; and more. Sponsored by Dreamhost. Enjoy The Big Web Show № 132.


http://thewebahead.net/81 (great links in the show notes!)

No Good Can Come of Bad Code: Ask Dr Web in A List Apart

Remember: the future will come whether you design for it or not. If your company charges $300,000 for a website that won’t work on next week’s most popular device, your company won’t be able to stay competitive in this business. It might not even be able to stay in the business, period. After all, clients who pay for sites that break too soon will look elsewhere next time—leaving your company perpetually hunting for new clients in a downward spiral of narrowing margins and diminishing expectations.

Your company’s survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist. This has alwaysbeen the challenge of web design. It’s one A List Apart has taken seriously since we began publishing, and our archives are filled with advice and ideas you can boil down and present to your bosses.

Source: No Good Can Come of Bad Code