Jeffrey Zeldman's Blog, page 48

Design is Copy is Design

ART AND COPY have been joined at the hip since Bill Bernbach launched the creative revolution in the 1960s. But on the web, not so much.

It’s great that some of the brightest minds in our industry continue making the point that copy matters, and that “one of the most overlooked designers in any field is the copywriter.” But it’s sad that, whenever we make that point, the only examples we seem to come up with are 37signals and Apple. (Flickr used to be in there, too, but these days, sadly, nobody wants to talk about Flickr—even when they’re a canonical example of doing x right.)

Anyhoo: Great Design is Jargon-Free is another fine instance of a smart web person (in this case, the handsome and erudite Scott Berkun) making those points.

ALA No. 366: better design through translation; better contracts through design

IN ISSUE No. 366 of A List Apart for people who make websites:

Designing Contracts for the XXI Century

by VERONICA PICCIAFUOCO

What’s the ugliest part of client/designer relations? Why, the contract, of course. Redesign yours to reach better, faster, more amiable and more equitable business agreements.

Translation is UX

by ANTOINE LEFEUVRE

While good localization boosts conversion rates, bad or partial translation may ruin a user experience, giving people an uneasy feeling about the whole company. If we care equally about all our users, it’s time we learn what it takes to get it right.

Illustration by Kevin Cornell for A List Apart

Chairman’s Message on Sixth International Blue Beanie Day

If the print aesthetic had won—if the technologies supporting that aesthetic, slice-and-dice table layouts and Flash, had continued to reign supreme—our web use would almost certainly still be limited to the desktop, and web content would very likely be constrained to the whims and abilities of a single, aging desktop browser. With no competition, there’d be no reason for that browser’s manufacturers to update it, and no need to improve its standards support, as the browser’s behavior would be taken as a defacto standard. As a result, there would be no HTML5, no CSS3, no point in innovating standard technologies.

Blue Beanie Day – Celebrate You! by yours truly on Cognition, the blog of Happy Cog.

Illustration by Chris Cashdollar for Happy Cog

Big Web Show 78: Bloomstein on content strategy

IN EPISODE No. 78 of The Big Web Show (“everything web that matters”), I interview Margot Bloomstein, author of Content Strategy at Work: Real-World Stories to Strengthen Every Interactive Engagement (Morgan Kaufmann, 2012), about her professional transition from design to content strategy; the vagaries of the consulting life; how mentoring and non-traditional academic backgrounds can fit into a web career; how to write a content strategy book for people who are not content strategists; and the beauties of Pittsburgh.

Big Web Show 77: @sazzy

IN EPISODE No. 77 of The Big Web Show, I interview returning guest Sarah Parmenter about designing an app for the homeless; the challenges of multi-device design; teaching HTML and CSS to young people; designing a complex reader app; the ideal number of employees for a small design studio; Brooklyn vs. small-town UK; and more.

The Big Web Show features special guests on topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters. Get episodes delivered automatically:

Audio RSS Feed
iTunes Audio

Listen on the go

The new 5by5 Radio iOS app is here! Listen to 5by5 live and get notified when your favorite shows begin. Check it out.

Sarah Parmenter Photo by Pete Karl II. Some rights reserved.

In Defense of Descendant Selectors and ID Elements

Except when I occasionally update Designing With Web Standards, I quit writing hands-on, nuts-and-bolts stuff about CSS and HTML years ago. Publishing abhors a vacuum: other designers and developers took my place. For the most part, this has been a good thing—for them and for our industry. The best writers about code have always been those who spend 25 hours of every day up their necks in it, as I used to. While folks like me migrate into strategic or supervisory roles (providing us with new places to innovate and new things to write about), a new generation of code crafters is making new discoveries and sharing new teachings. Ah, the magical circle of life.

But amid the oodles of resulting goodness, I find occasional stinkers. Take the notion, now concretizing into dogma, that id should almost never be used because it has “too much specificity,” and that class names are always preferable. Respectfully, I call bunk.

To my knowledge, this notion comes out of Nicole Sullivan’s brilliant Object Oriented CSS, an approach for writing HTML and CSS that is designed to scale on sites containing thousands of pages, created by dozens of front-end developers over a period of years, generally with no rules or style guide in place (at least no rules or style guide until it is too late). On sites like these—sites like Amazon or Facebook that are hosed from the get-go thanks to too many cooks and no master chef—the use of structural id and descendant selectors can be problematic, especially when inept coders try to overwrite an id-based descendant selector rule by creating ever-more-specific descendant selector rules.

In this particular (and rare) circumstance, where dueling developers have added rule after rule to a huge, shapeless style sheet that is more of an archeological artifact than a reasonable example of modern code, Nicole’s admonition to avoid descendant selectors based on id is probably wise. If you have the misfortune to work on a huge, poorly developed site where you will never have permission to refactor the templates and CSS according to common sense and best practices, you may have to rely on class names and avoid descendant selectors and ids.

But under almost any other circumstance, properly used ids with descendant selectors are preferable because more semantic and lighter in bandwidth.

The way I have always advocated using id, it was simply a predecessor to the new elements in HTML5. In 2000, we wrote div id="footer" because we had no footer element, and we wanted to give structural meaning to content that appeared within that div. Today, depending on the browsers and devices people use to access our site, we may well have the option to use the HTML5 footer element instead. But if we can’t use the HTML5 element, there is nothing wrong with using the id.

As for descendant selectors, in a site not designed by 100 monkeys, it is safe to assume that elements within an id’d div or HTML5 element will be visually styled in ways that are compatible, and that those same elements may be styled differently within a differently id’d div or HTML5 element. For instance, paragraphs or list items within a footer may be styled differently than paragraphs or list items within an aside. Paragraphs within a footer will be styled similarly to one another; the same goes for paragraphs within an aside. This is what id (or HTML5 element) and descendant selectors were made for. Giving every paragraph element in the sidebar a classname is not only a needless waste of bandwidth, it’s also bad form.

Say it with me: There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

Please understand: I’m not disparaging my friend Nicole Sullivan’s Object Oriented CSS as an approach to otherwise unmanageable websites. No more would I disparage a steam shovel for cleaning up a disaster site. I just wouldn’t use it to clean my room.

I’ll be discussing code and all kinds of other things webbish with Chris Coyier and Dave Rupert on the Shoptalk podcast today. Meanwhile, let me know what you think. And don’t forget November 30th is the sixth international celebration of Blue Beanie Day in support of web standards. Wherever you may stand on the great id debate, please stand with me and thousands of others this November 30th.

Notes and Images from An Event Apart San Francisco

THE SEVENTH and final An Event Apart show of the year 2012—three days of forward thinking and inspiring insights on multi-device design, content strategy for mobile, the next CSS, and more—is now winding down at San Francisco’s Palace Hotel. The show may end, but the memories will linger … enhanced by digital artifacts like these:

An Event Apart San Francisco 2012 – speakers and schedule
A Feed Apart – official Tweetage from An Event Apart
An Event Apart San Francisco – photos on Instagram
An Event Apart San Francisco – photo set on Flickr
Storify: Tweets from An Event Apart San Francisco 2012
An Event Apart: What Clients Don’t Know – Luke Wroblewski’s notes on a presentation by Mike Monteiro. November 13, 2012
An Event Apart: Buttons are a Hack – Luke Wroblewski’s notes on a presentation by Josh Clark. November 13, 2012
An Event Apart: The (CSS) Future is Now – Luke Wroblewski’s notes on a presentation by Eric Meyer. November 13, 2012
An Event Apart: Designing for Content Management Systems – Luke Wroblewski’s notes on a presentation by Jared Ponchot. November 13, 2012
An Event Apart: Adaptive Web Content – Luke Wroblewski’s notes on a presentation by Karen McGrane. November 13, 2012
An Event Apart: HTML5 APIs – Luke Wroblewski’s notes on a presentation by Jen Simmons. November 12, 2012
An Event Apart: Style Tiles — Luke Wroblewski’s notes on a presentation by Samanatha Warren. November 12, 2012

For Your Listening Pleasure

THE BIG WEB SHOW is back, baby! In spite of hurricanes, blackouts, and the vagaries of international travel, my 5by5 audio podcast about “everything web that matters” has returned to weekly broadcasting. Here are the latest episodes for your edification and listening pleasure:

Episode 76: Jen Robbins

Creator of four classic web design books (in 13 editions) Jennifer Robbins and I chat about her upcoming Artifact Conference for multi-device design; why sites are now systems, not pages; how style guides can function as a system design description tool; getting digital UX design into its natural habitat (hint: not a comp) sooner than later; what’s new in web design and the 4th Edition of her O’Reilly classic Learning Web Design; and loads more.

Jennifer Robbins has two decades of web design experience, having designed the first commercial website, O’Reilly’s Global Network Navigator (GNN), in 1993. She’s the author of O’Reilly’s Web Design in a Nutshell, and has taught web design at the Massachusetts College of Art in Boston and Johnson and Wales University in Providence, RI.

Episode 75: Evan Williams

Evan Williams, co-founder of Blogger, Twitter, and Medium, discusses what it’s like to be an internet entrepreneur, from the origin of product ideas to the art of the pivot. Ev is a notoriously private guy; it is wonderful to hear him open up and share his hard-won web wisdom in this episode.

Evan Williams is an American entrepreneur who has co-founded several internet companies, including Pyra Labs (creators of Blogger) and Twitter, where he was previously CEO. His new thing is Medium. Ev was born and raised on a farm in central Nebraska. He lives in San Francisco with his wife and two sons. He likes long walks, tofu, and bourbon. Ev has blogged for over a decade at evhead.com; you can follow him on Twitter at @ev.

Episode 74: Chris Coyier

In Episode No. 74 of The Big Web Show, I interview Chris Coyier of CSS-Tricks, CodePen, and ShopTalk about the path from employee to media maven, upcoming secret features for CodePen, coping with Retina images, finding sponsors, the success of his Kickstarter campaign, tee shirts for manly men, Twitter dramas about baseline grids, and more.

Chris Coyier (@chriscoyier) founded and writes at CSS-Tricks, co-hosts a podcast at ShopTalk, and co-founded and is a designer at CodePen, a sort of Dribble for coders.

Episode 73: Sara Wachter-Boettcher

I chat with content strategist and author of Content Everywhere Sara Wachter-Boettcher (@sara_ann_marie) about how practitioners can organize and structure content to maximize its value, longevity, and future-friendliness.

Sara Wachter-Boettcher is a content strategist and writer based in Lancaster, Pennsylvania, where she drinks strong coffee and sometimes blogs. She is editor in chief at A List Apart magazine, and her book, Content Everywhere, is due out from Rosenfeld Media in the very near future. You can find Sara on Twitter trying not to say all the snarky things she thinks.

Episode 72: Derek Powazek

For the return of The Big Web Show, I speak with web pioneer Derek Powazek (@fraying), Founder and CEO of Cute-Fight, the online game for real-life pets and the people who love them.

Derek Powazek has worked the web since 1995 at pioneering sites like HotWired, Blogger, and Technorati. He is the author of Design for Community: The Art of Connecting Real People in Virtual Places (New Riders, 2001) and the cofounder of JPG, the photography magazine that’s made by its community. He has also been Chief of Design for HP’s MagCloud, advisor to a handful of startup companies, and creator of Fray, the quarterly book of true stories and original art. Derek is now Founder and CEO of Cute-Fight, the online game for real-life pets and the people who love them. Derek lives in San Francisco with his wife, two nutty Chihuahuas, and a house full of plants named Fred.

Content Strategy for Mobile three ways from Sunday

IT’S A Karen McGrane world! Today, as A Book Apart unveils Karen McGrane’s amazing new Content Strategy for Mobile, the entirety of A List Apart Issue No. 364 is dedicated to Karen and her vision for future-friendly web content:

Uncle Sam Wants You (to Optimize Your Content for Mobile)

Thirty-one percent of Americans who access the internet from a mobile device say that’s the way they always or mostly go online. For this group, if your content doesn’t exist on mobile, it doesn’t exist at all. The U.S. government has responded with a broad initiative to make federal website content mobile-friendly. Karen McGrane explains why this matters—and what you can learn from it.

Your Content, Now Mobile

Making your content mobile-ready isn’t easy, but if you take the time now to examine your content and structure it for maximum flexibility and reuse, you’ll have stripped away all the bad, irrelevant bits, and be better prepared the next time a new gadget rolls around. This excerpt from Karen McGrane’s new book, Content Strategy for Mobile, will help you get started.

Help Hurricane Sandy relief efforts

Fifteen percent of sales of Karen McGrane’s Content Strategy for Mobile and other A Book Apart books sold today will go to the Red Cross in its effort to aid victims of Hurricane Sandy.

Two New Yorks

I MOVED to Manhattan during the crack epidemic of 1988. The heroin epidemic of the early 1970s produced CBGB, Studio 54, punk rock and hip hop. The crack epidemic produced crack addicts. If we complained loudly enough to the police, they would chase the crack dealers away for a few days. Crack-addicted hookers always replaced them: children in nylons, propositioning corner deli owners – a blow job for a pack of Newports. We’d complain to the police again; they’d chase away the hookers, and the crack dealers would return.

When Rudolph Giuliani practically wiped out street crime in New York, I enjoyed our new safety, but worried that we would lose our toughness. I needn’t have. September 11th and a half dozen subsequent catastrophes have made clear that we are still plenty tough.

For the past week, my eight-year-old and I have traipsed up and down eight flights of stairs in the pitch dark every day, shivered in the lightless cold of our apartment, and “bathed” by running Baby Wipes over our stinky parts. School was canceled. Our fresh food went bad immediately. For a few days we lived on pasta. Then cookies and popcorn. For an eight-year-old girl, it was paradise. I loved hanging with my kid, and enjoyed roughing it.

This morning at 1:48 AM, our electric power came back. A few hours later, cellular and cable internet service was restored. I walked my daughter down to her mother’s place (she goes back and forth between us), kissed her goodbye for a few days, and busied myself buying bread and water. (My water runs but I’m not sure it’s drinkable; so I buy, thrilling to the miracle of newly reopened stores.)

My super worked all night restoring cold running water, granting us the unimaginable luxury of a flushing toilet. We will not have heat or hot water for at least another week, though, because of an explosion at the Con Edison plant on 39th Street.

Phrases like “explosion at the Con Edison plant” seem normal in my new New York, but there is another New York, where they never lost power, or water, or heat, or internet access, or fresh food, or refrigeration, or elevator service, or subway service, or, frankly, a damn thing. I confess that I am starting to begrudge this other New York its good fortune.

At first I was all about gratitude, patience, survival, a calm willingness to do whatever was necessary. Sliding way down Maslov’s Pyramid can be good for the soul. I was grateful for my first week of deprivation with my kid — the closeness it brought, the fun we had surviving together. I pitied the other New York, whose citizens did not get to experience the bonding joy of plunging into the dark, wet, nineteenth century. My daughter, her mother and I experienced the hurricane. Folks who were lucky enough not to suffer the slightest deprivation had kind of missed something.

That was my feeling until I learned that there would be another week without heat or hot water. And started noticing that some of my acquaintances in the lucky parts of New York hadn’t even asked how I was doing.

A friend and I are going to the theater tonight thanks to the incredible generosity of a colleague, a man I barely know, who emailed me two tickets to tonight’s performance of The Book of Mormon. Filthy or not, I am going to enjoy the hell out of this luxurious theatrical experience … before returning to have-not New York.