Adobes Muse Lets Designers Make Websites Without Knowing Code | Co. Design.

YOU FIND ME ENSCONCED in the fabulous Buckhead, Atlanta Intercontinental Hotel, preparing to unleash An Event Apart Atlanta 2011, three days of design, code, and content strategy for people who make websites. Eric Meyer and I co-founded our traveling web conference in December, 2005; in 2006 we chose Atlanta for our second event, and it was the worst show we’ve ever done. We hosted at Turner Field, not realizing that half the audience would be forced to crane their necks around pillars if they wanted to see our speakers or the screen on which slides were projected.

Also not realizing that Turner Field’s promised contractual ability to deliver Wi-Fi was more theoretical than factual: the venue’s A/V guy spent the entire show trying to get an internet connection going. You could watch audience members twitchily check their laptops for email every fourteen seconds, then make the “no internet” face that is not unlike the face addicts make when the crack dealer is late, then check their laptops again.

The food was good, our speakers (including local hero Todd Dominey) had wise lessons to impart, and most attendees had a pretty good time, but Eric and I still shudder to remember everything that went wrong with that gig.

Not to jinx anything, but times have changed. We are now a major three-day event, thanks to a kick-ass staff and the wonderful community that has made this show its home. We thank you from the bottoms of our big grateful hearts.

I will see several hundred of you for the next three days. Those not attending may follow along:

• An Event Apart Atlanta three-day schedule
• A Feed Apart – live tweeting, Monday through Wednesday
• AEA Atlanta Flickr Group
• An Event Apart Facebook page

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

ONE GLORIOUS AFTERNOON in March, 2006, as a friend and I hurried past Austin’s Downtown Hilton Hotel to catch the next session of the SXSW Interactive Festival, a young stranger arrested our progress. With no introduction or preliminaries, he announced that he was available to speak at An Event Apart, a conference for web designers that Eric Meyer and I had launched three months previously. Turning to my companion with my best impression (which is none too good) of Mr Burns of “The Simpsons,” I asked, “Who is this brash young upstart, Smithers?”

The brash young upstart quickly became an essential colleague. In the months and years that followed, Aaron Gustafson created dazzling front- and back-end code for some of my agency’s most demanding clients. Just as importantly, he brilliantly tech-edited the second and third editions of Designing With Web Standards. The job largely consists of alerting Ethan Marcotte and me to the stuff we don’t know about web standards. I’ll let you think about that one. For five years now, Aaron has also been a tough but fair technical editor for A List Apart magazine, where he helps authors succeed while ensuring that they are truly innovative, that their methods are accessible and semantic, and (thanks to his near-encyclopedic knowledge) that they give all prior art its due. Moreover, Aaron has written seminal pieces for the magazine, and, yes, he has lectured at An Event Apart.

Given my experiences with the man and my admiration for his knowledge and abilities, I was thrilled when Aaron told me the premise of this book and began letting me look at chapters. This isn’t just another web design book. It’s an essential and missing piece of the canon. Our industry has long needed a compendium of best practices in adaptive, standards-based design. And with the rise of mobile, the recent significant improvements in desktop and phone browsers, and the new capabilities that come with HTML5, CSS3, and gestural interfaces, it is even more vital that we who make websites have a reliable resource that tells us how to take advantage of these new capabilities while creating content that works in browsers and devices of all sizes and widely differing capabilities. This book is that resource.

The convergence of these new elements and opportunities is encouraging web professionals to finally design for the web as it always should have been done. Adaptive design is the way, and nobody has a wider command than Aaron of the thinking and techniques required to do it well. In these pages you will find all that thinking and those methods. Never again will you lose a day debating how to do great web design (and create great code) that works for everyone. I plan to give this book to all my students, and to everyone I work with. I encourage you to do likewise. And now, enough preliminaries. Dive in, and enjoy!

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
by Aaron Gustafson
Foreword by Jeffrey Zeldman

O’REILLY AUTHOR, INTERVIEWER OF ROCK STARS, and longtime web and UX designer Jen Robbins (jenville.com, @jenville) is our guest in Episode No. 50 of The Big Web Show, to be recorded in front of a live internet audience on Thursday, June 2, at 12:30 PM Eastern via 5by5.tv/live.

Jen began designing for the web in May 1993 as the designer of O’Reilly Media’s “Global Network Navigator.” Since then, she’s written several books about web design, including Web Design in a Nutshell and Learning Web Design. She recently made the switch to mobile as the Senior Designer for O’Reilly Media’s new mobile publishing department. Her first app, “HTML 4 & 5 Complete Reference,” an adaptation of her HTML Pocket Reference book, is available in the App Store now.

The Big Web Show (“Everything Web That Matters”) records live every Thursday. Edited episodes can be watched afterwards, often within hours of recording, via iTunes and the web. Subscribe and enjoy!

Note that, for the time being, the shows are audio only. If you subscribed to the video feed in iTunes, you’ll need to switch to audio. Sorry about that!

Mandy Brown, Roger Black, Daniel Mall and I discuss the state of web design and publishing at SXSW Interactive, Sunday March 13, 2011.

Photos courtesy Adactio. Audio element courtesy HTML5. Sorry, no transcript is available at this time.

ON SUNDAY, while leading a discussion on the future of web design and publishing, I noticed a slightly confused look appearing on some faces in the audience. The discussion had been billed as “Jeffrey Zeldman’s Awesome Internet Design Panel,” and I thought perhaps there was a disconnect for some in the audience between “design” and such topics as where content comes from and who pays for it.

So I asked, “Who here is in publishing?”

A few hands were gently raised.

Uh-huh. “And how many of you work on the web?”

Every right hand in the room shot up.

“You are all in publishing,” I explained.

Now, I like a good rounded corner talk as much as the next designer. I’ve given my share of them. Also of line height and measure, color and contrast, how to design things that don’t work in old versions of Internet Explorer, and so on. In the practice of web and interaction design, there will always be a place for craft discussions—for craft is execution, and ideas without execution are songs without music, meaningless.

But right now (and always) there is a need for design to also be about the big strategic issues. And right now, as much as design is wrestling with open vs. proprietary formats and the old challenges of new devices, design is also very much in the service of applications and publishing. Who gets content, who pays for it, how it is distributed (and how evenly), the balance between broadcast and conversation, editor and user—these are the issues of this moment, and it is designers even more than editors who will answer these riddles.

HEY, YOU WITH THE STARS in your eyes. Yes, you, the all too necessary SXSW Interactive attendee. Got questions about the present and future of web design and publishing for me or the illustrious panelists on Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW Interactive 2011? You do? Bravo! Post them on Twitter using hashtag #jzsxsw and we’ll answer the good ones at 5:00 PM in Big Ballroom D of the Austin Convention Center.

Topics include platform wars (native, web, and hybrid, or welcome back to 1999), web fonts, mobile is the new widescreen, how to succeed in the new publishing, responsive design, HTML5, Flash, East Coast West Coast beefs, whatever happened to…?, and many, many more.

Comments are off here so you’ll post your questions on Twitter.

The panel will be live sketched and live recorded for later partial or full broadcast via sxsw.com. In-person attendees, arrive early for best seats. Don’t eat the brown acid.

BRIAN ALVEY (home, Twitter) is our guest on The Big Web Show Episode 39, recording live Thursday, February 16, at 12:00 PM Eastern at 5by5.tv/live.

Brian is CEO of Crowd Fusion, a publishing platform that combines popular applications like blogging, wikis, tagging and workflow management, and a leader in the content management world. He co-founded Weblogs, Inc.—home to Engadget, Autoblog, TUAW and more—and built the Blogsmith platform, both of which were acquired by Aol and are essential to their current strategy. Brian has been putting big brands on the web since 1995 when he designed the first TV Guide website and helped BusinessWeek leap from Aol to the web.

Brian built database-driven web applications and content management systems for many large companies in the 1990′s including Intel, J.D. Edwards, Deloitte & Touche and The McGraw-Hill Companies. His 1999 Tech-Engine site was a “skinnable HotJobs” which powered over 200 online career centers including XML.com, Perl.com, O’Reilly & Associates Network, DevShed, and Computer User magazine.

He has been the art director of three print magazines (I met him in 1995 when he was art director for “Net Surfer” or something like that) and was the Chief Technology Officer of Rising Tide Studios where he developed The Venture Reporter Network, which is now a Dow Jones property.

In 2003, Brian invented and launched Blogstakes, a sweepstakes application for the blogging community. He is a former Happy Cog partner of mine; at Happy Cog, Brian built content management systems for customers including Capgemini, A List Apart, and the Kansas City Chiefs. He was also the creator and host of the Meet The Makers conference, a series of talk show-style events that were so compelling, they helped inspired me to create An Event Apart with Eric Meyer.

And I’ll stop there. Ladies and gentlemen, a legend and true creative force in this medium. Please join us at tomorrow on 5by5.tv/live for a lively and wide-ranging discussion.

The Big Web Show (“Everything Web That Matters”) records live every Thursday at 12:00 PM Eastern. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

The Big Web Show #39: Brian Alvey.

RELEASED LAST WEEK, Arc90′s Readability 2.0 is a web application/browser extension that removes clutter from any web page, replacing the typical multi-column layout with a simple, elegant, book-style page view—a page view that can be user customized, and that “knows” when it is being viewed on a mobile device and reconfigures itself to create an platform-appropriate reading experience.

In so doing, Readability focuses the user’s attention on the content, creating an enhanced—and often much more accessible—reading experience. It also subverts the typical web browsing design paradigm, where each website offers a different visual experience. Instead, to the Readability user, all web content looks the same, once she has clicked a button to engage the Readability view.

If Readability did only this, it would represent a significant directional departure for the web and for site owners, in that, for the first time in the history of designed websites, branded look and feel is subordinated to a user-focused content experience that transcends the individual site.

Of course, this was always supposed to be possible in HTML, and it always was possible for users of some assistive devices and for CSS experts who felt like creating intricate personal style sheets, but those are edge cases, and Readability is for everyone.

Readability 1.0 was released as open source. Apple used its code for the “Reader” view in Safari. The creators of Flipboard used its code too. And the creators of the open-source Treesaver swapped code and rights with the makers of Readability to enhance both products. I’ve never seen a humble open-source project, created by a not-terribly-well-known shop get so quickly accepted and absorbed by companies like Apple and by the creators of cutting-edge web and hybrid apps.

That was Readability 1.0. What Readability 2.0 adds to the mix is automatic payment for content creators. How it works is simple: I pay a small fee each month to use Readability. Most of that money gets divided between the creators of the web pages I’ve viewed in Readability. This makes Readability 2.0 disruptive two ways:

1. As mentioned earlier, for the first time, branded look and feel is secondary to the user’s desire to engage with written content in a visually comfortable environment. (That Readability 1.0 premiered around the same time as the iPad is not coincidental.)
2. For the first time, content monetization is no longer the problem of content creators. Writers can stop being salespeople, and focus on what they do best: creating compelling content. The better the content, the more people who engage with it via Readability, the more money writers will make—with no bookkeeping, no ad sales, and no hassle. This is a huge subversion of the ad paradigm.

Many of us who watched Arc90 develop Readability worried that short-sighted publishers and site owners would misunderstand and reject the app, maybe even sic’ing their lawyers on it. But in the hectic two weeks just ending, publishers have had time to absorb what Readability 2.0 does and what it could mean to them—and according to Readability creator and Arc90 founder Rich Ziade, the reaction is positive.

Have publishers suddenly grasped the web? Perhaps not. But it’s a rare publisher who’d say no to extra money, risk-free. We are in a wait-and-see, try-it-and-see phase of publishing and the web—past the initial Web 2.0 euphoria and into the hard business of creating great stuff (and finding new ways to keep old great stuff, like great writing and reporting, alive). No one is quite sure what will work. And publishers risk nothing by participating in the Readability program. If the program succeeds, they make additional revenue for their content. If it fails, it’s no skin off their budget.

I’ve interviewed Rich Ziade on The Big Web Show and I’m an advisor on the project but it was only last night, when Rich was addressing my MFA Interaction Design class at School of Visual Arts, that I realized for the first time how profoundly disruptive—and powerful—Readability 2.0 really is. (Video of that class session is available.)

If you love reading and the web, I urge you to give Readability 2.0 a try.

OUR LIBRARY IS BURNING. Copyright extension has banished millions of books to the scrapheap. Digital permanence is a tragically laughable ideal to anyone who remembers the VHS format wars or tries to view Joshua Davis’s 1990s masterpieces on a modern computer. Digital archiving is only as permanent as the next budget cycle—as when libraries switched from microfilm to digital subscriptions and then were forced to cancel the subscriptions during the pre-recession recession. And of course, my digital work vanishes the moment I die or lose the ability to keep hosting it. If you really want to protect your family photos, take them off Flickr and your hard drive, get them on paper, and store them in an airtight box.

Though bits are forever, our medium is mortal, as all but the most naive among us know. And we accept that some of what we hold digitally dear will perish before our eyes. But it irks most especially when people or companies with more money than judgement purchase a thriving online community only to trash it when they can’t figure out how to squeeze a buck out of it. Corporate black thumb is not new to our medium: MGM watered down the Marx Bros; the Saatchis sucked the creative life and half the billings out of the ad agencies they acquired during the 1980s and beyond. But outside the digital world, some corporate purchases and marriages have worked out (think: Disney/Pixar). And with the possible exception of Flickr (better now than the day Yahoo bought it), I can’t think of any online community or publication that has improved as a result of being purchased. Whereas we can all instantly call to mind dozens of wonderful web properties that died or crawled up their own asses as a direct result of new corporate ownership.

My colleague Mandy Brown has written a moving call to arms which, knowingly or unknowingly, invokes the LOCKSS method (“Lots of Copies Keep Stuff Safe”) of preserving digital content by making copies of it; she encourages us all to become archivists. Even a disorganized ground-level effort such as Mandy proposes will be beneficial—indeed, the less organized, the better. And this is certainly part of the answer. (It’s also what drives my friend Tantek’s own your data efforts; my beef with T is mainly aesthetic.) So, yes, we the people can do our part to help undo the harm uncaring companies cause to our e-ecosystem.

But there is another piece of this which no one is discussing and which I now address specifically to my colleagues who create great digital content and communities:

Stop selling your stuff to corporate jerks. It never works. They always wreck what you’ve spent years making.

Don’t go for the quick payoff. You can make money maintaining your content and serving your community. It won’t be a fat fistful of cash, but that’s okay. You can keep living, keep growing your community, and, over the years, you will earn enough to be safe and comfortable. Besides, most people who get a big payoff blow the money within two years (because it’s not real to them, and because there are always professionals ready to help the rich squander their money). By contrast, if you retain ownership of your community and keep plugging away, you’ll have financial stability and manageable success, and you’ll be able to turn the content over to your juniors when the time comes to retire.

Our library is burning. We didn’t start the fire but we sure don’t have to help fan the flames. You can’t sell out if you don’t sell. Owning your content starts with you.

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.

CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.

Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.

Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.

Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.

Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.

Zeldman.com: The Year in Review

A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:

iPad as the New Flash 17 October 2010

Masturbatory novelty is not a business strategy.

Flash, iPad, and Standards 1 February 2010

Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.

An InDesign for HTML and CSS? 5 July 2010

while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.

Stop Chasing Followers 21 April 2010

The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.

Crowdsourcing Dickens 23 March 2010

Like it says.

My Love/Hate Affair with Typekit 22 March 2010

Like it says.

You Cannot Copyright A Tweet 25 February 2010

Like it says.

Free Advice: Show Up Early 5 February 2010

Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.

Outside Reading

A few things I wrote elsewhere might repay your interest as well:

The Future of Web Standards 26 September, for .net Magazine

Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?

Style vs. Design written in 1999 and slightly revised in 2005, for Adobe

When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.

Happy New Year, all!

MANDY BROWN (@aworkinglibrary) is our guest today, Thursday December 23, 2010 in Episode No. 32 of The Big Web Show, co-hosted by Dan Benjamin and recorded at 1:00 PM Eastern before a live internet audience.

Mandy is co-founder and editor for A Book Apart and a contributing editor for A List Apart for people who make websites. A veteran of the publishing industry, she spent a decade at W. W. Norton & Company, an independent and employee-owned publisher, where her work involved everything from book design to web design to writing about design. She serves as Community and Support Manager for Typekit and writes frequently on the Typekit blog.

Named “Video Podcast of the Year” in the 2010 .net Awards, The Big Web Show covers “Everything Web That Matters” and records live every Thursday at 1:00 PM Eastern on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

P.S. This is the last Big Web Show session of the year. We’ll be off next week. (Something about Christmas and New Year’s.) Thank you for watching and listening. We love you bunches!

The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? … A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern [web] standards.

Read about the winning entries: 10K Apart – IEBlog.

iPad. Never have so many embraced a great product for exactly the wrong reasons.

Too many designers and publishers see the iPad as an opportunity to do all the wrong things—things they once did in Flash—without the taint of Flash.

In the minds of many, the iPad is like Flash that pays. You can cram traditional publishing content into an overwrought, novelty Flash interface as The New York Times once did with its T magazine. You may win a design award but nobody will pay you for that content. Ah, but do the same thing on the iPad instead, and subscribers will pay—maybe not enough to save publishing, but enough to keep the content coming and at least some journalists, editors, and art directors employed.

It’s hard to argue with money and jobs, and I wouldn’t dream of doing so.

Alas, the early success of a few publications—publications so good they would doubtless survive with or without iPad—is creating a stampede that will not help most magazines and interfaces that will not please most readers.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

Luke Wroblewski’s Touch Gesture Reference Guide gives designers plenty of ammunition to create dynamic user experiences that work on a wide variety of mobile phones and devices (including iPad) while these same sites can use traditional desktop browser effects like hover to offer equally rich experiences on non-touch-enabled browsers. Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”

I’m not against the iPad. I love my iPad. It’s great for storing and reading books, for browsing websites, for listening to music and watching films, for editing texts, presentations, and spreadsheets, for displaying family photos, and on and on. It’s nearly all the stuff I love about my Mac plus a great ePub reader slipped into a little glass notebook I play like a Theremin.

I’m not against iPad apps. Twitterific for iPad is by far the best way to use Twitter. After all, Twitter is really an internet service, not a website; Twitter’s own site, while leaps ahead of where it used to be, is hardly the most useful or delightful way to access its service. Gowalla for iPad is my constant companion. I dread the idea of traveling without it. And there are plenty of other great iPad apps I love, from Bloom, an “endless music machine” by Brian Eno and Peter Chilvers, to Articles, which turns Wikipedia into an elegant reading experience, to Mellotronics for iPad, an uncannily accurate Mellotron simulator packed with 13 authentic voices—“the same production tapes featured on Strawberry Fields Forever” and other classic tracks (not to mention tracks by nouveau retro bands like Eels).

There are apps that need to be apps, demand to be apps, and I admire and learn from them like every other designer who’s alive at this moment.

I’m just not sold on what the magazines are doing. Masturbatory novelty is not a business strategy.