THE NEXT AEA event takes place in Austin and is already sold out (although a few spaces are still available for the full-day workshop on multi-device design).
A handful of seats are available for the final event of the year, An Event Apart San Francisco at the Palace Hotel, December 9–11, 2013. Be there or be square.
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.
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.
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.
In Search of a Genuine Web Aesthetic & Designing For High Density Displays
IN A VERY special issue of A List Apart for people who make websites, Paul Robert Lloyd asks us to put the “design” back in “responsive design” and seek out a genuine web aesthetic. And Dave Rupert shares ways to be thoughtful, not knee-jerk, about high-pixel-density displays, in Mo’ Pixels Mo’ Problems.
Whitney Hess, Jason Santa Maria, and I discuss the past two decades of design history, framing the web’s emergence and explaining the transition from a print-based world to a digital one.
Insites: The Book Honors Web Design, Designers
“INSITES: THE BOOK is a beautiful, limited edition, 256-page book presented in a numbered, foil-blocked presentation box. This very special publication features no code snippets and no design tips; instead, 20 deeply personal conversations with the biggest names in the web community.
“Over the course of six months, we travelled the US and the UK to meet with Tina Roth Eisenberg, Jason Santa Maria, Cameron Moll, Ethan Marcotte, Alex Hunter, Brendan Dawes, Simon Collison, Dan Rubin, Andy McGloughlin, Kevin Rose and Daniel Burka, Josh Brewer, Ron Richards, Trent Walton, Ian Coyle, Mandy Brown, Sarah Parmenter, Jim Coudal, Jeffrey Zeldman, Tim Van Damme, and Jon Hicks.
“We delved into their personal journeys, big wins, and lessons learned, along with the kind of tales you’ll never hear on a conference stage. Each and every person we spoke to has an amazing story to tell — a story we can all relate to, because even the biggest successes have the smallest, most humble of beginnings.” — Insites: The Book
I am honored to be among those interviewed in this beautiful publication.
Insites: The Book is published by Viewport Industries in association with MailChimp.
Lawson on picture element
Those eager to bash Hixie and the WHATWG are using the new spec as if it were a cudgel; “this is how you deal with Hixie and WHATWG” says Marc Drummond. I don’t think that’s productive. What is productive is the debate that this publication will (hopefully) foster.
IN EPISODE 63 of Triangulation, Leo Laporte, a gracious and knowledgeable podcaster/broadcaster straight outta Petaluma, CA, interviews Your Humble Narrator about web standards history, responsive web design, content first, the state of standards in a multi-device world, and why communists sometimes make lousy band managers.
HTML Marches On
IN A LETTER dated July 19, 2012, WHATWG leader and HTML living standard editor (formerly HTML5 editor) Ian Hickson clarifies the relationship between activity on the WHATWG HTML living standard and activity on the W3C HTML5 specification. As my dear Aunt Gladys used to say, you can’t ride two horses with one behind.
“NOT EVERYTHING always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise.”