Position Wanted: Front-End Director

WE have creative directors and design directors, but we don’t seem to have any front-end directors. And maybe we should.

For years at big companies, people in different silos have written CSS with no information or understanding about each other’s work. This results in huge, sloppy files that have a negative impact on site performance, as folks write more and more complex rules trying to override pre-existing ones … or “solve” the problem by adding dozens or even hundreds of classes to their CSS and markup.

Professionals with serious front-end chops have tried to solve the problem by coming up with complex rules and systems which, by the time they filter their way down to less experienced developers, get turned into dogma. Every time I see a front-end article’s comments section rapidly fill with absolute statements about whether it’s okay or not to use id, I recognize that someone’s good idea has turned into somebody else’s religion.

And while I commend my colleagues who craft approaches to CSS that help avoid the inevitable problems large-scale enterprises encounter when many coders in many silos work on many components without talking to each other, I think there may be another way to look at the problem.

We all know having many people in many silos write CSS any old way doesn’t work, unless you consider bloat and poor performance working.

And while restricting how you allow people to write code solves some of these problems, it introduces others: too many class names is just another word for bloat.

So how about following the example of other creative endeavors, and putting a single mind in charge? After all, no matter how many disparate photographers, teamed with how many art directors, work on a given issue of a periodical, there’s always a lead art director who advises, helps plan shoots, and ultimately approves the work. Every orchestra requires a conductor. And no matter how many animators work on a film, there’s always a director. There’s a reason for that.

Imagine shooting a film with no director and no storyboards, in which each scene was written by a different screenwriter, and nobody knew the shape of the overall story. It wouldn’t make a coherent movie, much less a good one. Yet that’s how too many big organizations still approach front-end design and development.

So here’s a thought, big orgs. Instead of throwing a thousand front-end developers at your problem and seeing what sticks, consider creating a front-end director position as empowered as any other director at your organization.

90 Minutes With Amtrak.com

I’m traveling by train next week. This morning, Amtrak .com wouldn’t let me log into my account with my password, which I have never changed, and which Amtrak.com now says is “incorrect.” When I eventually clicked the “Reset password” link (duh, so Amtrak would send an email with a link allowing me to reset my password), Amtrak thanked me and then never sent that email.

I know they didn’t send that mail. I checked Spam, Trash, Junk, and Junk Mail (I don’t know why my Gmail offers all four of those); ran Gmail searches on amtrak.com; and sent the “Reset password” request several times to be sure Amtrak was definitely not mailing me the “Reset password” email after failing to recognize my password.

Well, when a company no longer accepts your password, and when it will not let you create a new one (because the “Reset password” button does nothing), your next option is simply to give up all your miles and just start a new account, using an alternate email address and creating a new password for that account.

I waited 90 minutes before attempting to do so, in case Amtrak, due to an overloaded gateway or poor engineering, was simply experiencing an extraordinary delay prior to sending “Reset password” emails. Patience is not my chief virtue; anxiety around even familiar, comfortable travel impels me to ward off panic attacks by acting too fast for my own good. But today I did not do that. Today I waited the full 90 minutes.

Then I filled in all the fields at Amtrak.com to create a new account, wrote down my new sign-in information so I’d be able to use it again in the future, and hit “Register.”

At which point Amtrak sent me the following error message:

Due to a system issue, we are currently unable to process your request. Try again later. [Error ID: 1009C]

So my guess is that my original password was probably correct, that Amtrak’s backend simply isn’t functioning correctly, and that when Amtrak can’t connect to its database, it sends incorrect error messages by default, i.e. “your password was wrong” instead of “we cannot connect to our database.”

(I say “backend” and “database” rather than “site” because my Amtrak phone app also bumped me out, and won’t let me sign in. So the problem isn’t specific to the web experience.)

I have only two problems: software and people.

Breakfast Links

Hope you’re hungry!

Web Design and Typography

This is freakin’ awesome: Styling Text With SVG Filters from the Code School blog.

John D. Jameson writes great mini-articles about web typography and front-end development on his personal site.

Here’s a look at twelve kinds of italic typeface, with some notes on their cultural contexts, historical backgrounds, and practical applications: Italics Examined, from Hoefler & Co.

So you’ve seen a typeface in use – on a poster, in a magazine, on a website … and you want to know what’s the name of that typeface. Here are five useful tips to identify it: The 5 best Tricks to Identify a Font – Video by Typography Guru. Hat tip: Typewolf.

In the Magazine

Write a better class of CSS: Tim Baxter shows how to make our CSS as semantic and meaningful as our markup in today’s A List Apart: Meaningful CSS: Style Like You Mean It.

JavaScript is more dynamic than you might think: Prototypal Object-Oriented Programming using JavaScript, by Mehdi Maujood.

Conversations

Rachel Andrew, Eric Meyer, Jen Simmons & I discuss radically new web layouts—for real this time—in Episode 115 of The Web Ahead, recorded live at An Event Apart: thewebahead.net/115.

Design For Real Life authors Sara Wachter-Boettcher and Eric Meyer chat with Jason Ogle on the User Defenders podcast: userdefenders.com/podcast/design-for-real-life/

Code

Speaking of radically new web layouts, the future of web layout needs your input and feedback. Read and respond: A Revised Subgrid Specification, by Rachel Andrew.

Better CSS Drop Caps with “initial-letter” (hat tip: Rachel Andrew)

Abandon Hope!

THE FILTHIEST men’s room in New York is on the 8th floor of 291 Broadway. You would think the men’s room at Penn Station or the bus terminal would beat any other for filth and stench but you’d be wrong. 291 Broadway’s is worse. There are five years of crushed insects on the walls. They never get scraped or cleaned away. There is stranger’s urine in every porcelain receptacle in the place. Weeks of it. It never gets flushed. You can try flushing it, sure, but it never goes down. Men urinate fresh streams atop gallons of other men’s stale urine in perpetuity ad infinitum. It sickens the soul. Chills the blood. Is enough to make the pope doubt God’s existence.

This bathroom is not in a slum. It is not in a poor third world favela. This bathroom is in a fancy NYC skyscraper, a stone’s throw from the historic Woolworth Building. I visit this bathroom once a week from the waiting room of a fancy office where, this being New York, I drop $250 per session. This is a court appointed specialist so I can’t choose another—say, one in a building with a clean and functioning restroom. This specialist deals with serious human misery. The kind that comes when families are torn apart. She does a good job of helping people. I doubt she has visited the men’s room here. If she had been to it, even once, even just for a moment, I doubt she could find the will to carry on in her good works. There are many filthy places in New York. Places that breed addiction, crime, and despair. Places no sane person would willingly go. Cesspools of the human spirit. Places where hope dies and light is extinguished. They are all better than the men’s room on the eighth floor at 291 Broadway. 

Shopify Partners Program wants you—and so do I!

Partner Studio

AS MUCH as I love reading (and writing and publishing) books and articles about design, I’ve never learned as much from a book as I’ve picked up over time while rubbing shoulders with colleagues who share my work space.

It’s why, even though NYC office rents are ludicrously expensive, I opened a shared design studio space in gently trending NoMad, Manhattan in January of 2012. And why, just three short months ago, I leaped at the chance to help launch the Shopify Partners Studio Program—a coworking space and casual mentoring program for exceptionally talented freelance ecommerce designers and developers.

The first six participants included a web developer and social media consultant; a visual experience designer; a freelance web developer and blogger; two freelance designer/developers; and a copywriter/marketing consultant. Three of them sought feedback from me on exciting business and product ideas they’d come up with; two asked me for career guidance and business advice. All taught me more than I taught them, and inspired me to look at my own work and career with fresh eyes.

Most or all of these lovely and talented people will be moving on soon, as the next phase of Shopify Partner Studio begins. Which brings us to you.

Apply now to join the next round of Shopify Partner Studio! If selected for residency, you’ll gain access to a suite of opportunities to kickstart your business, including:

  • Free rent and high-speed Internet for three months in my studio on lower Madison Avenue.
  • Mentorship from your humble narrator, Shopify executives, and “other industry icons.” (I put the quotations around Shopify’s phrase to not sound like a complete egomaniac.)
  • Fast-tracked access to the Shopify Experts Marketplace, where Shopify sends its 243,000 merchants looking for help with store, theme, and app builds.
  • A free Shopify store to build your portfolio website.
  • A free ticket to Smashing Conference NYC.

So what are you waiting for? Join me and some of your smartest colleagues in an experience that just might help make your career. Apply now to the Shopify Partners Studio Program.

Getting to the heart of users’ deepest needs

Book excerpt

IN TODAY’S A List Apart, for people who make websites:

Design for Real Life

by Sara Wachter-Boettcher, Eric Meyer

We say we’re crafting personas to fit the needs of “real” people—yet we easily revert to abstractions when raw emotions enter the picture. Common human experiences aren’t “edge” cases; we don’t get to dismiss what seems uncomfortable or different to us. In this excerpt from Design for Real Life, Eric Meyer and Sara Wachter-Boettcher take on the elephant in the room—the tendency to look the other way.

Design for Real Life – An interview with Sara Wachter-Boettcher

by Mica McPheeters, Sara Wachter-Boettcher

A List Apart’s managing editor Mica McPheeters speaks with Sara Wachter-Boettcher about getting to the heart of users’ deepest needs.

Good intentions can easily blind us to bad ideas—accidentally awful outcomes that alienate and distress our users. It’s time to take a hard look at our processes, to recognize and work through our biases toward idealized users in ideal situations. In this interview with managing editor Mica McPheeters, Sara Wachter-Boettcher talks about what she learned while writing Design for Real Life.

Pinterest giveth, and Pinterest taketh away

Jeffrey Zeldman's Pinterest (excerpt)
AS MY design career has taken on more and more strategic and managerial freight, I’ve done less and less hands-on design. This year, I decided to change that. As part of my reimmersion, I found myself reading less, and absorbing visual information more. Enter Pinterest.

I’d played with the app when it first came out—who didn’t?—but it didn’t stick with me the way a handful of apps do. It didn’t become an obsession, and so I gradually forgot about it. That’s just how apps work for me. They’re heroin, or they’re nothing.

But the moment my days began filling with sketching, and coding, and Photoshop comping, the genius of Pinterest, and the addictive high it provides when used obsessively and compulsively, was revealed to me.

In borderline religious ecstasy, I became a Pinterest junkie, compelled to collect and catalog every artist I’ve ever loved—every type designer, illustrator, filmmaker, social absurdity, comic book character, and book designer; every half-forgotten cartoonist; every city or nation I’ve visited.

Using Pinterest not only revived long-dead visual design brain cells, it created new ones. Work-related layouts and color schemes came easier as I spent more and more “downtime” collecting and cataloging half-forgotten styles, genres, and artists—and discovering new ones.

Jeffrey Zeldman's Pinterest (excerpt)

I ♥ Pinterest

As part of this work—for work it is; call it “research” if you prefer—I spent hours rearranging Boards on my profile for maximum aesthetic effect and rhythm. And more hours choosing and replacing the cover illustration for each Board. (If you don’t use Pinterest, here’s a summary: it lets you pin any image you find on the web, or on your own computer desktop or mobile device, to a virtual whiteboard. Pinterest calls each whiteboard you create a “Board,” and each image you affix to it a “Pin.” Part of the fun comes from sequencing Boards on your profile for aesthetic or educational reasons; choosing the featured image for each Board is likewise important and fun.)

Until a few days ago, you could edit and re-edit the featured image for each Board whether you were using Pinterest on the web (that is, via desktop computer), your phone, or your tablet. Doing these things worked differently on the different devices—choosing the featured image was actually faster and less tedious on iPhone and iPad than it was on the web—but the functionality was available in all three places, because Pinterest recognized that brands exist between devices, and that folks interact with your service on different devices at different times, as they choose.

Likewise, until a few days ago, you could change the order of Boards on your profile via drag and drop whether you were using Pinterest on the web or your tablet. (Likely because of screen space constraints, this functionality was not available on iPhone, where the display of Board content necessarily differs from the more desktop-design-focused method used on the web and on iPad.) Users like me changed the order of Boards to create visual interest, set up ironic contrasts, create visual rhythms up and down the screen, and so on. I’m a designer. I have my ways. These details are important to me—and, I imagine, to many other users, since Pinterest is a drug for visual obsessives.

Jeffrey Zeldman's Pinterest (excerpt)

An unexpected change

Then, a few days ago, Pinterest released an update that removed this functionality from the iPhone and iPad (and, I’m assuming, from Android as well). There was no blog post announcing the change. And no rationale offered for taking away features that mattered a lot to users like me. Pinterest knows these features matter, because Pinterest has our data. That’s the difference between making a digital product folks interact with via the internet, and making, say, a toilet plunger. If I manufacture toilet plungers, I can make assumptions about how folks use my product, but I probably don’t have much real data. If I make an application people use via http, I know everything.

Now, it’s not like people were complaining about the ability to edit their Boards: “We have too much freedom! This software provides too many delightful functions. Please remove two of them. But only from my mobile device.”

No. The features are still there on the website. So Pinterest knows people like these features.

And it’s not like the features are too difficult to put into mobile devices, since they already existed in those mobile devices.

Jeffrey Zeldman's Pinterest (excerpt)

A failure to communicate

You may ask why I’m telling you all this instead of telling it to Pinterest. Good question. The answer is, I tried telling Pinterest, but they don’t provide a forum for it. And that is the biggest problem. A company that makes products people love should have a way to communicate with those people. Not grudgingly offer them a few character-limited form fields on a “survey” page that isn’t even referenced in the site’s navigation.

When the features stopped working on my iPhone and iPad, I assumed something had gone wrong with my apps, so I deleted and reinstalled them. (Remember, there was no announcement; but then why would any company announce that it was taking away loved features for no apparent reason?)

When deleting and reinstalling didn’t help, I sought help and contact pages on Pinterest (and was only able to find them via third-party search engine).

In trying to file a bug report, I ended up in a pleasant (but confusing) conversation with a very nice Pinterest employee who explained that I wasn’t experiencing a bug: the software engineers had made a conscious decision to remove the functions I use every day … and had no intention of restoring them. She wasn’t able to tell me why, or point me to a URL that would offer a rationale, but she did tell me I could use Pinterest’s “Recommend a feature” form to “recommend” that the software engineers put those features back.

Since “Recommend a feature” is hidden from site navigation, the kindly person with whom I was in dialog provided a link where I could type in a few characters requesting that Pinterest restore the “drag Board order” functionality. There wasn’t room in the form fields to explain why I thought the feature should be restored, but at least I was able to make the request. The form asked if I was a Business account user, which I am. I don’t remember when or why I bought the Business tier of service. Maybe for the analytics. Maybe just because, as someone who makes stuff myself, I choose to pay for software so I can support the good people who make it, and do what I can to help their product stick around.

(It’s the same reason I remained a Flickr Pro user even after Yahoo gave the whole world 2GB of photo storage space for free. If everything is free, and nobody pays, services you love tend to go away. Half of web history is great services disappearing in the night after investors were dissatisfied with only reasonable profits.)

I don’t know why my paid status mattered to Pinterest, but I couldn’t help feeling there would be a prejudice in favor of my comment if I checked the box letting them know I was a paying customer. Even though it was information they requested, checking the box made me feel dirty. I also wondered why they were asking me. I mean, don’t they know? I gave them the email address they use for my login. I was logged in. They know my status. Are they just checking to see if I know it, too?

Jeffrey Zeldman's Pinterest (excerpt)

There can only be one (feature request)

But I digress. Because here is the main point. The moment I submitted the tiny, inadequate form requesting the restoration of a recently removed feature, the site set a cookie and sent me a message thanking me for completing the “survey.” It wasn’t a survey, but I guess one task completion message is as good as another.

Then I tried to use the inadequate form to report my second concern—the one about the removal of the ability to choose a featured image for my Board. The way this had always worked on the tablet was far superior to the tedious, painstaking way it works on my desktop. On the tablet, you could scroll through all your images with the flick of a finger, select the image you wanted, and complete the task in a few seconds. On the desktop, you had to click your way through every image on your Board in reverse chronological order. It’s the difference between flicking through a calendar, and clicking backwards from today, to yesterday, to the day before yesterday, and so on. The tablet version was fast, easy, intuitive—you interact directly with your content; you can see all relevant content at a glance. The desktop version is cumbersome and 1999-ish. If I had to pick which platform must lose the functionality I relied on, I would not have chosen the tablet. No customer who used the feature in both places would.

But I wasn’t able to share even a few characters of this thought with Pinterest, because once you submit a “survey” requesting a feature, a steel wall in the guise of a cookie slams down, and you cannot make a second feature suggestion.

Not even the next day. (Which is today. Which I just tried.)

Jeffrey Zeldman's Pinterest (excerpt)

This is a love letter

And that is why, as a hardcore fan and user of Pinterest, a service I love and use compulsively, I am using the public web rather than Pinterest’s somewhat unhelpful help center, to share my request with the brilliant software engineers who create this fabulous product.

And with designers, because these are the mistakes we all make when we create products and content sites. We think we are all about the people who use what we create. But we are probably frustrating the pants off them with our arbitrary design decisions and inadequate customer feedback mechanisms.


Also published on Medium.

Grid Layout & Flexbox City

CSS GRID LAYOUT is nearly finalized. Which means it’s time for designers and front-end developers to set the flags enabling their browsers to support the new specification, put CSS Flexbox through its paces by using it to create layouts, and see if anything breaks. This way, if anything does break, we’ll have time to tell the framers of CSS Grid Layout what happened, and get the spec (and browser support) fixed before it is released. Once Grid is finalized, it will be too late to fix oversights.

The links below can help you (and me) get up to speed with the new tech:

CSS Grid Layout and CSS Flexbox Links

Thank You

Additional link curation by Rachel Andrew, author of Get Ready for CSS Grid Layout from A Book Apart, and speaker extraordinaire at An Event Apart Nashville, a three-day conference that wrapped yesterday. For a ton of great web resources, see AEA Resources: Articles, Links, and Tools From An Event Apart Nashville 2016.

Helvetica With Curves—And Other Updated Classics

Keynotesnaps001

Title card from ‘Designing With Web Standards in 2016,’ An Event Apart presentation by Jeffrey Zeldman. Text is set in Forma, an upcoming face from Font Bureau.


NOT UNLIKE what Mattel has done with Barbie, the typographic geniuses at The Font Bureau are working on a humanist geometric sans-serif that could almost be thought of as Helvetica with curves.

Forma is the name of the as-yet unreleased font family, and you can get a peek at one weight of it in the above image, which is taken from my slide deck for “Designing With Web Standards in 2016,” which is the presentation I’ll premiere next month at An Event Apart Nashville.

This new presentation examines the seemingly ever-deepening complexity of designing for our medium today—a complexity that has driven some longtime web designers I know to declare that web design has become “too hard,” or that “the fun has gone out of it”—and asks what our traditions of designing with web standards can teach us about crafting web experiences for a multi-device, mobile-first world.

Given that my original (unpublished) title for Designing With Web Standards was going to be Forward Compatibility—and given that Forward Compatibility is not so different in concept from today’s phrase, Future-Friendly—I’m guessing that structured, semantically marked-up content, progressive enhancement, and the separation of style from structure and behavior still have a huge role to play in today’s day-to-day web design work.

Oh, dear, I hope that wasn’t a spoiler.

I look forward to sharing these ideas with you in greater detail at An Event Apart. Now celebrating our tenth year of bringing great ideas to our community, and creating a space where the smartest folks in web design and development can meet, mingle, bond, network, and learn together. Follow @aneventapart for show announcements, links to useful web resources, and free giveaways on the 10th of every month in 2016. (This month’s giveaway, ten beautiful fleece comforters monogrammed with the A Decade Apart logo, went to ten lucky winners on February 10th. Keep watching the skies.)

Foreword to HTML5 for Web Designers, 2nd Edition

HTML5 for Web Designers, 2nd Edition

WELCOME to the second edition of HTML5 for Web Designers, the book that launched a thousand sites—or apps, if you prefer. It is also the book whose first edition launched our little craft publishing house. And its new edition comes to you when it is needed most, on a web riven by conflicting visions.

For some folks, the web today is what it has always been: namely, the most accessible medium ever devised for sharing content. For others, including the heads of powerful tech companies, the web is a platform for building JavaScript-powered applications whose purpose is to disrupt every industry on earth, chiefly for the benefit of investors.

Adherents of both camps are equally passionate—and both swear by HTML5, which was designed to create both kinds of web. HTML5 has given us a web both more powerful and more divided.

So much has changed over the past five years, it’s hard to remember that many businesses were still betting on Flash as recently as 2009, and still building sites and applications exclusively for the desktop browser. Then, in 2010, Steve Jobs famously declared that his iPhone would not support Flash. Flash was dead, Steve said. HTML5 was the future. A hundred thousand designers, developers, and site owners suddenly asked themselves, “HTML wha—?” The next day, our little book came out, which was good timing for sales, but even better for the industry. And there are still no better guides to the new markup language than Jeremy Keith and Rachel Andrew.

In this book, you will learn what HTML5 is, why it came to be, and how to use it to create sites and applications as powerful as anything you can imagine. Forms, elements, semantics, scripting? It’s all here, guided by a set of principles as straightforward as they are noble—principles that deliver sophisticated web interactivity while remaining true to Tim Berners-Lee’s twenty-five-year-old vision of an open, accessible web that works for all. This book spells out a philosophy that will deepen not only the usability of your projects, but their humanism as well.

HTML5 for Web Designers is a book about HTML like Elements of Style is a book about commas. It’s a book founded on solid design principles, and forged at the cutting edge of twenty-first century multidevice design and development. Jeremy Keith and Rachel Andrew never, for one second, forget what moment of web design history we are in, and how much depends upon our ever bearing in mind not only our users in the wealthiest countries, but also the least of these. I know, admire, and continually learn from the depths of the authors’ belief in humanity and HTML. You will, too.

Jeffrey Zeldman signatureJeffrey Zeldman
Publisher
A Book Apart
February 17, 2016