Responsive design is the new black

Collylogic.com, retooled as responsive design. The wide version.

The blog of Mr Simon Collison, retooled as responsive web design. The wide version.

Collylogic.com, retooled as responsive design. The narrow version.

The blog of Mr Simon Collison, retooled as responsive web design. The narrow version.

See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.

Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.

Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.

Seen any good responsive redesigns lately?


Boston Bound

Plane travel versus train travel, that sort of thing.

Morning finds me bound by train for Boston, capital of Massachusetts, land of Puritans, patriots, and host of the original Tea Party. Center of high technology and higher education. Where the John Hancock Tower signs its name in the clouds, and the sky-scraping Prudential Tower adds a whole new meaning to the term, “high finance.” Beantown. Cradle of liberty, Athens of America, the walking city, and five-time host to An Event Apart, which may be America’s leading web design conference. (You see what I did there?)

Over 500 advanced web design professionals will join co-host Eric Meyer and me in Boston’s beautiful Back Bay for two jam-packed days of learning and inspiration with Dan Cederholm, Andy Clarke, Kristina Halvorson, Jeremy Keith, Ethan Marcotte, Jared Spool, Nicole Sullivan, Jeff Veen, Aarron Walter, and Luke Wroblewski.

If you can’t attend the sold-out show, which begins Monday, May 24, you can follow the live Tweetage via the souped-up, socially-enriched, aesthetically tricked out new version of A Feed Apart, whose lights go on this Sunday, May 23. Our thanks to developers Nick Sergeant, Pete Karl II, and their expanded creative team including Steve Losh and Ali M. Ali. We and they will have more to say about the project soon. For now, you can always read our 2009 interview with Nick and Pete or sneak a peek on Dribbble.

There’s also a Flickr photo group and an interstitial playlist, so you can ogle and hum along from your favorite cubicle or armchair.

See you around The Hub or right here on the world wide internets.


Sleep never sleeps

Dreamed my parents were getting divorced. I’d be asking my momma why, and she would turn into my wife.

The conscious mind deals with what is in front of you, the unconscious processes what has yet to be behind you.


Layer Tennis Around the World

Layer Tennis around the world - Friday at 2:00 PM CT.

Around the world in ten layers with Coudal Partners: Ten designers in ten cities, fifteen minutes at a time. A single Photoshop file will circumnavigate the globe starting in Portland and ending in Tokyo with yours truly, Jeffrey Zeldman, providing the layer-by-layer commentary. Don’t miss this one, live Friday, starting at 2pm Chicago time.

Coudal Partners’ Layer Tennis presented by Adobe Creative Suite.


George Lois Tee

George Lois tee shirt

TypographyShop presents the first design in its new series, the Ten Commandments of George Lois, created with the approval and cooperation of the hall of fame art director himself.

The new shirt reads: “Great ideas can’t be tested. Only mediocre ideas can be tested.” Sport it at your next client meeting. Wear it, live it.

Younger readers may ask, “Who is George Lois?” Typography Shop supplies a mini-bio:

From his groundbreaking work at Doyle Dane Bernbach to his controversial Esquire covers to “I want my MTV,” George Lois has carved a career sans equal in the advertising industry. … George chose this design from among our treatments. Set in Franklin Gothic No. 2, designed by Morris Fuller Benton in 1902 and News Gothic, a related 1908 Benton creation.

Look for more George Lois shirts coming soon from Typography Shop.

Full disclosure: there will be Zeldman shirts coming as well.


Crowdsourcing Dickens

As an experiment in new new media thinking, I recently crowdsourced a new new literature version of Charles Dickens’s musty old old old lit chestnut, Great Expectations—the familiar tale of Pip, Ms Havisham, the convict Magwitch, et al.

Creative excellence and spin-worthy results required a pool of 10,000 people who had never read Great Expectations. Fortunately, I had access to 10,000 recent American college graduates, so that was no problem.

To add a dab of pseudoscience and appeal obliquely to the copyleft crowd, I remixed the new work’s leading literary themes with the top 20 Google search queries, using an algorithm I found in the mens room at Penn Station.

The result was a work of pure modern genius, coming soon to an iPad near you. (Profits from the sale will be used to support Smashing Magazine’s footer and sidebar elements.)

Gone was the fusty old title. Gone were the cobwebbed wedding cake and other dare I say emo images. It was goodbye to outdated characters like Joe the blacksmith and the beautiful Estella, farewell to the love story and the whole careful parallel between that thing and that other thing.

Gone too was the tired old indictment of the Victorian class system, and by implication of all economic and social systems that separate man from his brothers in Christ, yada yada. As more than one of my young test subjects volunteered in a follow-up survey, “Heard it.”

In place of these obsolete narrative elements, the students and the prioritized Google searches created, or dare I say curated, a tale as fresh as today’s algorithmically generated headlines.

The results are summarized in the table below.

Old Great Expectations New Great Expectations
On Christmas Eve, Pip, an orphan being raised by his sister, encounters the convict Magwitch on the marshes. n/a
The convict compels Pip to steal food from his sister’s table, and a file from her husband the blacksmith’s shop. Pip thereby shares the convict’s guilt and sin—but his kindness warms the convict’s heart. Guy on girl
Pip’s sister, Mrs. Joe, abuses him. Her husband loves Pip but is unable to protect him or offer him a future beyond blacksmithing. Girl on girl (multiple entries)
Pip meets Miss Havisham, an old woman abandoned on her wedding day, who sits in her decrepit house, wearing a yellowing wedding gown, her only companion the beautiful and mysterious girl Estella. Pip falls in love with Estella, but Miss Havisham has trained the girl to break men’s hearts. Guy on guy
Pip visits Miss Havisham until his apprenticeship with Joe the blacksmith begins. Pip hates being a blacksmith and worries that Estella will see him as common. Two girls, one guy
Mrs Joe suffers a heart attack that leaves her mute. A kind girl named Biddy comes to take care of Mrs Joe. After Mrs Joe’s death, Biddy and Joe will marry. Meanwhile, Pip comes into an unexpected inheritance and moves to London, where he studies with a tutor and lives with his friend Herbert. Dragons
Pip believes Miss Havisham is his benefactor and that she intends him to marry Estella, whom he still adores. Day by day, Estella grows more cruel. Pip never tells her of his love for her. Wizards
One stormy night, Pip discovers that his benefactor is not Miss Havisham but the convict Magwitch. The news crushes Pip, but he dutifully allows Magwitch to live with him—worrying, all the while, because Magwitch is a wanted man who will be hanged if discovered. Explosions
Miss Havisham repents having wasted her life and perverted Estella. She is caught in a fire. Pip heroically saves her but she later dies from her burns. Soon afterwards, Pip and Herbert try to help Magwitch escape, but Magwitch’s old enemy Compeyson—who happens to be the man who abandoned Miss Havisham at the altar—betrays Magwitch to the authorities. Magwitch and Compeyson struggle. Compeyson dies and Magwitch is taken to prison. Gunfights
Pip now realizes that Magwitch is a decent man and tries to make Magwitch’s last years happy ones. He also discovers that Magwitch is Estella’s father. Magwitch dies in prison shortly before he was to be executed. Pip tells the dying Magwitch of his love for Estella. Fistfights
Pip becomes ill and is nursed back to health by Joe, whom Pip recognizes as a good man in spite of his lack of education and “class.” Pip goes into business overseas with Herbert. Eventually he returns to England and visits Joe, who has married Biddy. They have a child named Pip. As the book ends, the middle-aged Pip makes one last visit to Miss Havisham’s house, where he discovers an older and wiser Estella. There is the implication that Pip and Estella may finally be together. Anal

Gowalla My Dreams

What if Gowalla and Foursquare could communicate seamlessly with Address Book? What if Google Maps contained the postal address, company names, and primary phone numbers of every pin on the map? All this information could be marked up in Microformats and standard HTML on optional detail pages you could visit with a click from your web browser or phone. Heck, while we’re at it, let’s add Bump, an iPhone app that lets two people share contact data the same way they share DNA—except that in this case they bump iPhones.

What if every time you used Gowalla to check into or found a spot, you had the option to add that spot’s street address, company name(s), and so on to your Address Book? Imagine meeting a potential client for the first time in an unfamiliar city or neighborhood. No longer simply a passive repository of spots you create, Gowalla or Foursquare could function as a guide, helping you locate the unfamiliar address to make your meeting on time.

As you check into your meeting in reality, you could notify not only Facebook and Twitter (as you can today) but also Basecamp, which would optionally check off a radio box, marking you as having arrived at your meeting.

Something like this (and much more than this) will surely happen soon, thanks to APIs and ubiquitous standard platforms. You just feel, when you’re around people developing the best new web software, that something new is happening, and that many strands are coming together.

We used to imagine a dystopian future in which Big Brother knew everything you did. Later it was the machines that knew. We’ve been talking about ubiquitous computing for years, and we’ve pictured it happening somehow without necessarily addressing the how—that is, some of the brightest and most inspiring futurists have concerned themselves more with the ethical and cultural transformative dimensions of ubiquitous computing than with the technical nuts and bolts of how it’s supposed to get done.

I’m thinking the nuts and bolts are here. To me it seems that it is already happening. The web is the platform. HTML, CSS, JavaScript/JQuery, Ruby, and PHP are the tools. I’m thinking an uplifting (non-dystopian) ubiquitous computing is going to get done with the stuff we already use every day. Am I dreaming?


Hear This!

Dan Benjamin, creator of wonderful websites, apps, broadcasts, and platforms and longtime friend of A List Apart and your host, introduces a new venture.

5 by 5 Studios is a new internet broadcasting network, home to shows like EE Podcast, Tack Sharp, The Dev Show, The Ruby Show, and Utility Belt, releasing new episodes every week.

As part of the launch, 5 by 5 announces two new shows hosted by Dan:

NOTE: I’m pleased as punch to be the first Pipeline guest. Come hear us on Friday, January 29th, 2010.


Posthumous Hosting and Digital Culture

THE DEATHS of Leslie Harpold and Brad Graham, in addition to being tragic and horrible and sad, have highlighted the questionable long-term viability of blogs, personal sites, and web magazines as legitimate artistic and literary expressions. (Read this, by Rogers Cadenhead.)

Cool URIs don’t change, they just fade away. When you die, nobody pays your hosting company, and your work disappears. Like that.

Now, not every blog post or “Top 10 Ways to Make Money on the Internet” piece deserves to live forever. But there’s gold among the dross, and there are web publications that we would do well to preserve for historical purposes. We are not clairvoyants, so we cannot say which fledgling, presently little-read web publications will matter to future historians. Thus logic and the cultural imperative urge us to preserve them all. But how?

The death of the good in the jaws of time is not limited to internet publications, of course. Film decays, books (even really good ones) constantly go out of print, digital formats perish. Recorded music that does not immediately find an audience disappears from the earth.

Digital subscriptions were supposed to replace microfilm, but American libraries, which knew we were racing toward recession years before the actual global crisis came, stopped being able to pay for digital newspaper and magazine descriptions nearly a decade ago. Many also (even fancy, famous ones) can no longer collect—or can only collect in a limited fashion. Historians and scholars have access to every issue of every newspaper and journal written during the civil rights struggle of the 1960s, but can access only a comparative handful of papers covering the election of Barack Obama.

Thanks to budget shortfalls and format wars, our traditional media, literature, and arts are perishing faster than ever before. Nothing conceived by the human mind, except Heaven and nuclear winter, is eternal.

Still, when it comes to instant disposability, web stuff is in a category all its own.

Unlike with other digital expressions, format is not the problem: HTML, CSS, and backward-compatible web browsers will be with us forever. The problem is, authors pay for their own hosting.

(There are other problems: the total creative output of someone I follow is likely distributed across multiple social networks as well as a personal site and Twitter feed. How to connect those dots when the person has passed on? But let’s leave that to the side for the moment.)

A suggestion for a business. Sooner or later, some hosting company is going to figure out that it can provide a service and make a killing (as it were) by offering ten-, twenty-, and hundred-year packets of posthumous hosting.

A hundred years is not eternity, but you are not Shakespeare, and it’s a start.