State of the web: of apps, devices, and breakpoints

IN The ‘trouble’ with Android, Stephanie Rieger points out the ludicrous number of Android screen sizes on a typical UK client’s website and comes to this conclusion:

If … you have built your mobile site using fixed widths (believing that you’ve designed to suit the most ‘popular’ screen size), or are planning to serve specific sites to specific devices based on detection of screen size, Android’s settings should serve to reconfirm how counterproductive a practice this can be. Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices. Alternatively, attempting to track, calculate, and adjust layout dimensions dynamically to suit user-configured settings or serendipitous conditions is just asking for trouble.

I urge you to read the entire article—it’s brief yet filled with rich chocolatey goodness.

Responding to it, Marc Drummond concludes that responsive web design default breakpoints are dead and urges designers to “use awkwardness as your guideline, not ephemeral default device widths” and return to fluid design. (I believe he may actually be thinking of liquid layout—the kind we practiced back in the early mid-1990s when cross-platform and multi-manufacturer desktop screen sizes and pixel-per-inch ratios—not to mention strong user font, size, and color preference options—made fixed-width layout design challenging if not impossible. As I understand fluid design, it is merely another word for responsive design, in that it relies on CSS3 media queries set to breakpoints.)

We’ve lost our compass

Rieger and Drummond are hardly alone in feeling that “our existing standards, workflows, and infrastructure” cannot support “today’s incredibly exciting yet overwhelming world of connected digital devices” (futurefriend.ly) and that something new must be done to move the web forward. And of course ppk has been warning us about the multiplicity of platforms and viewports on mobile since 2009.

Agreed: that is an exciting and challenging time; that fixed width layouts do not address, and adaptive layouts (multiple fixed-width layouts set to common breakpoints) do not go far enough in addressing, the challenges posed by our current plethora of mobile screen sizes, zoom settings, embedded views (i.e. “browser” windows inside app windows, often with additional chrome) and what Rieger calls “the unintended consequences” that occur as these various settings clash in ways their creators could not have anticipated.

As consumers, we’ve all had the experience of seeing the wrong layout at the wrong time. (Think of a site with both mobile and desktop versions—whether these versions are triggered by CSS3 media queries or JavaScript and back-end magic is beside the point because technology is beside the point—good user experience is all this is supposed to be about. On a Twitter app on a mobile device, the user follows a link; the link opens in the browser built into the Twitter app. Which version of the site does the user see? The mobile one or the desktop? Often it is the desktop, and that can be a problem if the app’s version of the browser does not permit zoom. Even if it is a mobile version, it may be the wrong mobile version, or it may not fit comfortably inside the app’s browser window.) Considering our own experiences and reviewing Rieger’s chart, it is easy to share Drummond’s conclusion that breakpoints are dead and that all sites should be designed as minimally as possible.

If breakpoints are dead, responsive design is dead

Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts, i.e. a minimal layout for the user with a tiny screen and not much bandwidth, a more fleshed-out one for the netbook user, and so on.

But responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.

I respect those colleagues who say breakpoints are dead, understand how they reached this conclusion, and am eager to see where it takes them in the coming months as they experiment with new methods, perhaps developing wonderful and unforeseen best practices. I hope design will be a brilliant part of these new methods, not something that gets abandoned to create a bland but workable lightweight experience for all.

But I also believe it is possible to draw a different conclusion from the same data. It is even possible, I believe, to say the present data doesn’t matter—at least not in the long run.

Tale of the chart

There was a time in the late 1990s when industrious web designers showed how atrocious CSS support was in browsers. Eric Meyer’s Master Compatability Chart for Web Review, formerly at http://www.webreview.com/pub/wr/style/mastergrid.html, was one of the best, but is no longer available for your historical viewing pleasure—not even at the mighty Wayback Machine. That’s too bad, as it would have perfectly illustrated my point. The chart used a variety of colors to show how each detail of the entire CSS specification was or was not supported (and if supported, whether it was supported correctly and completely, partially and correctly, partially and somewhat incorrectly, or completely incorrectly) in every browser which was available at the time, including, if memory serves, close to a dozen versions of Netscape, Explorer, and Opera.

Looking at that chart induced nausea and vertigo. It was easy to draw the conclusion that CSS wasn’t ready for primetime. (That was the correct conclusion at the time.) It was also easy to look at the table and decide that table layouts and font tags were the way to go.

That’s what most designers who even bothered looking at Eric’s chart decided, but a few (Eric and me included) drew a completely other inference. Instead of trying to memorize all the things that could go wrong in each browser, we created general rules for what worked across all browsers (e.g. font-size in px, floats for layout) and advocated design based on the things that work. This, I believe, is exactly what the futurefriend.ly and Move the Web Forward folks are doing now: trying to figure out commonalities instead of bogging down in details. (This is why some in our community have labeled futurefriend.ly and Move the Web Forward “WaSP II.”)

The other inference Eric, I, and others in the 1990s drew from Eric’s chart was that browser makers must be petitioned to support CSS accurately and correctly. We and many of you reading this engaged in said petitioning, and thanks largely to help from with the browser engineering community (from people like Tantek Çelik and Chris Wilson and organizations like Mozilla) it came to pass.

Of mice and markets

We cannot, of course, petition all the makers of, say, Android devices to agree to a set of standard breakpoints, because there are over 500 different Android devices out there, many of which will fail in the coming months—or if not outright fail, simply be replaced in the course of planned obsolescence AKA upgrading that drives the hardware segment. And each new product will in turn introduce new incompatibilities (AKA “features”).

In the short run it’s going to be hell, just as the browser wars and their lack of support for common standards were hell. But it is the short run.

500 standards is no standard. Give a consumer 500 choices and the price-driven consumer picks what comes with her plan, while the selective consumer begins gravitating toward a handful of emerging market leaders. Eventually this nutty market will stabilize around a few winning Android platforms (e.g. Kindle Fire) and common breakpoints will emerge. What The Web Standards Project achieved with browser makers, the market will achieve with phones.

Until that time, designers certain can abandon breakpoints if they can find a way to do good design under purely fluid conditions—design that pleases the user, satisfies the client, and moves the industry forward aesthetically. But designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will help accelerate the settling out of the market and its resolution toward a semi-standard set of viewports. This I believe.

When I see fragmentation, I remind myself that it is unsustainable by its very nature, and that standards always emerge, whether through community action, market struggle, or some combination of the two. This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. Some of us will get there via all new thinking, and others through a combination of new and classic approaches. Happy New Year, web designers!

My glamorous life: some holiday!

THIS WEEK I will finally sign my divorce papers. It’s like that old Woody Allen joke, “The food here is terrible – and such small portions.” I didn’t want to get divorced, and I’ve been waiting two years to do it. It’s a friendly little divorce that started out as a simple mediated settlement, but we made the mistake of hiring lawyers. The legal bloodletting around the Beatles’ breakup took less time and surely cost less. But here we finally are, about to sign papers that enshrine our daughters’ rights and our rights as parents and put into stark English the courtesies my ex and I would naturally extend each other anyway.

That’s Wednesday, unless it’s Tuesday (my lawyer can’t seem to keep track of which day we’re meeting), and Wednesday also there is a school field trip I chaperone to I don’t remember where, and somehow between the field trip and the review and signing of the divorce papers I hire a team to gut and rewire our new A Space Apart office on Madison Avenue, arrange for two internet services to wire our 19th century building, and order the furniture.

Today I take the kid to school, meet about wireframes for the A List Apart redesign, interview Khoi Vinh for The Big Web Show, meet about a Happy Cog redesign, and run back to school for the kid. Somewhere in there I get a meal. Thursday, blessed relief, I’m in Philadelphia for a holiday party (yay!), and Friday my Dad and his bride arrive.

In short, it is a week like any other.

Since I started my first business with two nickels and a Power Computing Mac clone, I have not had a week that would pass for normal, if normal means manageable. The last predictable week I had was my first week in AA in May of 1993, although that certainly wasn’t usual in that sweating and shivering and coming to God (in other words, quitting drinking) isn’t a normal or even expected event in an alcoholic’s life. But that week did find me in the same room in the same city doing the same thing for five days straight — surely the last time that happened, if you don’t count those four days in Disney World.

I’m a boring guy, but my life has conspired to be interesting. Members of my inner circle who have access to my calendar get ulcers just from looking. And for all that constant change and growth, although somewhat stressed, I am most grateful.

Say No to SOPA!

A LIST APART strongly opposes USHR 3261 AKA the Stop Online Piracy Act (SOPA), an ill-conceived lobbyist-driven piece of legislation that is technically impossible to enforce, cripplingly burdensome to support, and would, without hyperbole, destroy the internet as we know it.

SOPA approaches the problem of content piracy with a broad brush, lights that brush on fire, and soaks the whole web in gasoline. Learn why SOPA must not pass, and find out what you can do to help stop it.

A List Apart: Articles: Say No to SOPA.


Illustration by Kevin Cornell for A List Apart Magazine.

Downtime at Disney World

DAY TWO, mid-day, taking a breather in our hotel room. Listening to my daughter play with her tiny new Disney figurines. In the distance, the gull-like shrieks of children in the hotel pool.

My week on narcotics

THE DREAMS YOU HAVE when you’re withdrawing from narcotics make David Lynch look like an After School Special hack. How I got on narcotics was outpatient, noninvasive surgery on a double hernia. I got the double hernia from a mistake I made in the gym, or maybe I slipped in the bath and caught myself funny and ripped open my abdominal wall in two places without knowing it.

Doctors dump all this useless data on you and tell you nothing you need to know. Before the surgery I was given a 40 page disclaimer about my privacy rights and how hospitals use and share my medical information. I reckon I was given this because someone sued someone else once. Flash to the medical community: I want you to share my info. That’s what databases and XML and the internet are for. If I fall down a staircase in Katmandu, I want the emergency medical team that rescues me to know I’m allergic to penicillin, and I want the doctor who attends me to know what medicines I take. Thank you for the lovely 40 page disclaimer.

And no thank you for what I left the hospital with: a prescription and nothing else. After all that upfront paperwork, the hospital didn’t even bother giving me my surgeon’s name and phone number. (I had to look them up on the web when my painkiller prescription ran out.)

Here’s some information the hospital could have given me: your peas and carrots are going to swell up and look more like eggplants and cauliflower. That’s normal and you don’t need to call in. For at least five days, you’ll feel like someone just cut you open with a street knife. That’s normal and you don’t need to call in. Your sleep will be fitful, with wild dreams. You’ll wake up at 2:00 AM and 5:00 AM, unable to sleep. If you take the prescription pain killers, your sleep will be even more disrupted. The pain killers don’t so much take away the pain as move it slightly off-camera. You’ll want to take more than we give you and your digestive system will resemble that of a hardcore junkie within two days. All of this is normal. After five days, we cut off the pain killers and provide no way for you to get more. But you’ll still be in terrible pain. This is normal.

If they had told me that in the hospital and written it down somewhere, I wouldn’t have worried so much when parts of my body started resembling clubbed baby seals and seemed to be undergoing racial transmutation. While they were at it, they could have left me a card with my surgeon’s phone number and asked me to call in after four days for an evaluation.

They wanted to evaluate me next week, but I’m taking my daughter to Disney World next week, so instead they’ll see me when the surgeon returns from vacation on August 15. Meantime, I guess I muddle through.

I’m not on narcotics today and the pain is bad but manageable with Advil. I haven’t had that shit or any shit in my system for nearly 20 years, and I don’t like how close it brings me to the old days. I can get my prescription refilled by begging the surgeon’s answering service until eventually he calls the pharmacy, but I think maybe I’ll stick with Advil.

How could I refuse?

Message:

To Whom it may Concern,

I recently discovered your “Home” page here:

http://www.zeldman.com/2010/10/17/ipad-as-the-new-flash/

Would you please consider adding a link to my website called Job-Applications.com? It is a resource that provides hundreds of printable and online applications for retail stores, department stores, pharmacies, grocery stores, restaurants, shops, etc. Its a great way for people to find part time and full time work quickly.

If you think it would be of use to your visitors, would you please consider adding a link to my website on your page here:

http://www.zeldman.com/2010/10/17/ipad-as-the-new-flash/

Here is the HTML link you could add: Job-Applications.com – Find hundreds of online applications and printable job forms.

Please let me know if you have any questions.

Thanks!

[Name withheld]

Cameron Diaz and Me

THE FIRST PART has long been known:

Saw Cameron Diaz on her way to the gym. I was wearing the shirt I’d slept in, walking my dog, holding a bag of shit.

Now, here’s the rest of the story:

My dog, a mangy old rescue Shih Tzu named Emile, had finished his business and was investigating a sidewalk gum wad. He loved sniffing filthy things on the street, and Midtown Manhattan was always happy to oblige. As was my routine, I monitored his activities closely, partly out of horrified fascination, and mainly to make sure he didn’t choke or poison himself.

Typically this activity required my full attention, or at least that part of my attention that wasn’t lost contemplating family and business anxieties, petty resentments, and the recollected snippets of imagery, music, and dialogue that pass for thought. But today, for some reason, I looked away as Emile tackled an apparently sumptuous abandoned cigarette filter. As if spellbound, my eyes crossed two streets to hone in on a couple that was briskly heading my way.

The man in the couple wore gym clothes, and seemed to be speaking quickly, with huge animated arm gestures. But it wasn’t the man who had made me look up from my dog’s debauchery.

At least a head taller than her companion, wearing skimpy gym clothes, the woman appeared athletic and radiant, even from this distance—too far away to see faces. Instead of moving on to discourage Emile from his sidewalk shenanigans, I stood rooted to the spot, waiting as the couple came closer and closer. A fancy gym was nearby, I knew—not from going there myself, but because a friend did, and it was a magnet for activity on this block.

As the couple came closer, the woman lost none of her allure, and I became self-conscious about staring. Not because I felt fat, old, dirty, and tired—a middle-aged man holding a bag of shit, walking an ailing Shih Tzu with a penchant for street turds and candy wrappers—but because it’s rude to stare. It’s rude to stare at the unfortunate: their hand-me-downs, their hopeless haunted eyes. It’s also rude to stare at the genetically blessed, the gorgeous, the toned, the fertile, famous, and wealthy. I still had not recognized Cameron Diaz, but she radiated fabulousness.

So I did what any eldest son raised by my late mother would do: as the couple came closer and closer, I focused my attention on the man. So as not to make the lady uncomfortable, you see. (From this fragment of mental DNA, you should be able to reconstruct me completely.)

So here they were, now on my block, now halfway up the block to me, now almost within arm’s reach.

And there I was, with my dog and my shit bag and my eyes firmly trained on the male half of the couple.

Who was either a gym buddy or personal trainer but definitely not a boyfriend, I gathered from their body language with respect to each other, and especially from his smiling quick speech and big sweeping arm gestures, which vibed “consultant meeting an important client” and perhaps Italian-American and maybe also gay. If I was right about that last bit, my staring at him for the past five minutes didn’t worry me, but it might be freaking him out. At any rate, that was my cover story to myself for what I did next.

For the couple was now an arm’s length away, about to pass out of my sight forever. And while I had been working hard to respect the lady by not telegraphing waves of hopeless lust, if I didn’t steal one more glance right now, I would never see her again, never even know what she really looked like up close.

My eyes slid toward her of their own accord, and as they landed, I saw that her smiling, knowing, superior but also playfully flirtatious eyes were locked on mine. She had been watching me studiously avoid looking at her, waiting for the inevitable collapse of my will, the moment when I could no longer resist. “Busted,” her eyes said. “You didn’t fool me for one minute. Yes, it’s me. Nice meeting you. Bye.”

And then, with a taunting but also pleasing smirk, she was gone. And two things hit me:

  1. That was Cameron Diaz.
  2. And she can read minds.

Responsive Web Design – The Book

SOME IDEAS SEEM inevitable once they arrive. It’s impossible for me to conceive of the universe before rock and roll or to envision Christmas without Mr Dickens’s Carol, and it’s as tough for my kid to picture life before iPads. So too will the internet users and designers who come after us find it hard to believe we once served web content in boxy little hardwired layouts left over from the magical but inflexible world of print.

I remember when the change came. We were putting on An Event Apart, our design conference for people who make websites, and half the speakers at our 2009 Seattle show had tumbled to the magic of media queries. One after another, CSS wizards including Eric Meyer and Dan Cederholm presented the beginnings of an approach to designing content for a world where people were just as likely to be using smart, small-screen devices like iPhone and Android as they were traditional desktop browsers.

Toward the end of the second day, Ethan Marcotte took what the other speakers had shared and amped it to 11. Suddenly, we had moved from maybe to for sure, from possible to inevitable. Ethan even gave us a name for his new approach to web design.

That name appears on the cover of this book, and this book represents the culmination of two years of design research and application by Ethan and leading-edge design practitioners around the world. Armed with this brief book, you will have everything you need to re-imagine your web design universe and boldly go where none have gone before. Happy reading and designing!

Jeffrey Zeldman,
Publisher,
Responsive Web Design

16 years online

ON MAY 31, 2011, this website turned sixteen years old. Thank you for indulging me. (And thanks to Sean M. Hall for reminding me.)

Here is a reflection written when the site turned 13.

And here, from 2007, is a mini-retrospective of The Daily Report beginning with 31 August 1997 (entries from 1995–1996 are gone due to overwriting), and continuing through years of constant writing and strange design such as daily/0303a.shtml, daily/0103a.shtml, and daily/0902b.html. (Of course to really see these pages as the world saw them then, you’d need a non-antialiased operating system, a non-standards-compliant browser, and a dingy TV tube monitor. But I digress.)

More of this site’s juicy Web 1.0 goodness may be unearthed here.

If you like, you can also peruse a small gallery of my article header images from the early days of A List Apart Magazine.

Here’s to plenty more years ahead, inventing the web and modern design together.

One blog post is worth a thousand portfolio pieces.

I HIRED JASON SANTA MARIA after reading this post on his site.

The year was 2004. Douglas Bowman, one of my partners on a major project, had just injured himself and was unable to work. I needed someone talented and disciplined enough to jump into Doug’s shoes and brain—to finish Doug’s part of the project as Doug would have finished it.

I lack the ability to emulate other designers (especially classy ones like Douglas Bowman) and I was a Photoshop guy whereas Doug worked in Illustrator, so I knew I needed a freelancer. But who?

A Google search on Illustrator and web design led me to a post by a guy I’d never heard of. The post was enjoyably written and reflected a mature and coherent attitude not simply toward the technique it described, but to the practice of design itself. Yes, the blog itself was intriguingly and skillfully designed, and that certainly didn’t hurt. But what made me hire Jason was not the artistry of his website’s design nor the demonstration that he possessed the technical skill I sought, but the fact that he had an evolved point of view about web design.

Anyone can write a how-to. Not everyone thinks to write a why.

Jason had.

I offered him the thankless task of aping another designer’s style for not a ton of money under extreme time pressure, and to my pleased surprise, he accepted. He did so well, and performed so selflessly, that I hired him for another project, this time one with full creative freedom. I have never regretted those decisions.

Just about everyone I know and work with I first met online. And, although well-done portfolio services have their place, neither I nor anyone at Happy Cog has ever hired someone purely (or even largely) on the basis of their portfolio. It’s all about how you present yourself online. Before I even meet you, do I feel like I know you—or like I wish I knew you?

Have you got a point of view? Are you sharing it?