Jeffrey Zeldman's Blog, page 47

A List Apart Issue No. 367: Apple’s Vexing Viewport

In A List Apart Issue No. 367, Peter-Paul Koch, Lyza Danger Gardner, Luke Wroblewski, and Stephanie Rieger explain why Apple’s new iPad Mini creates a vexing situation for designers and developers who create flexible, multi-device experiences.

Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.

That’s why it hurts when a device or browser maker does something that goes against our agreement—especially when they’re a visible and trusted friend of the web like Apple. Read Vexing Viewports and contribute to the discussion.

This issue of the magazine also marks the departure of Jason Santa Maria as creative director after seven years of brilliant design and support.

Jason’s elegant redesign of A List Apart and its brand in 2005, together with the master stroke of bringing in Kevin Cornell as illustrator, brought the magazine new fame, new readers, and new respect. Over seven great years, his attention to detail, lack of pretension, and cheerful, can-do attitude has made working on ALA a pleasure. Jason was also a key member of the strategic team that envisioned ALA’s upcoming content expansion—about which, more will be revealed when the site relaunches in January.

Jason will continue at ALA as a contributing writer and as designer of A Book Apart (“brief books for people who make websites”), of which he is also a co-founder.

To Leiden, To Leiden

THEY’RE SLEEPING in New York. They’re sleeping all over the world. Even here in Leiden, The Netherlands, they’re still mumbling and drooling in their beds. But not me. I’m awake and packing for my return home to NYC after three glorious days here in this ancient university town, where I was privileged to speak at the first Inspire conference. And all you got were these lousy photos.

Holland 2012 Inspire – my Leiden and conference photos on Flickr
Ready to Inspire – conference about web design, type and code
Follow inspireconf on Twitter
My Leiden – a Foursquare list
City of Leiden homepage
Leiden on Wikipedia

Related: Design Problem

Design Problem

Golden Tulip hotel, Leiden Centre, Schipholweb 3, The Netherlands

Creative Commons turns 10

HARD TO BELIEVE, but it was ten years ago that I first heard Lawrence Lessig give a talk at SXSWi about an idea he had to save content from death by copyright law.

At the time, copyright law and digital creativity were at odds, and tens of thousands of cultural artifacts were disappearing from the commons because of the Mickey Mouse Protection Act, a copyright extension pushed through congress by the late Sonny Bono at the behest of the Disney corporation. Corey Doctorow, one of Lessig’s partners on the SXSW panel, memorably likened the destruction to the slow motion burning of the Library of Alexandria.

But Lessig had a plan. And, remarkably, it worked: “For a decade now, Creative Commons has made legal sharing and remixing easier for everyone. After ten years, it has become the default third way.”

Let’s help this good work continue. Please donate to Creative Commons if you can.

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.