Category: Best practices

Categories
Authoring Best practices Compatibility Content First Content-First CSS CSS3 Design Ethan Marcotte HTML HTML5 Jeremy Keith links Standards State of the Web Told you so Web Design Web Design History Web Standards

Of Patterns and Power: Web Standards Then & Now

IN “CONTENT Display Patterns” (which all front-end folk should read), Dan Mall points to a truth not unlike the one Ethan Marcotte shared last month on 24 ways. It is a truth as old as standards-based design: Construct your markup to properly support your content (not your design).

Modular/atomic design doesn’t change this truth, it just reinforces its wisdom. Flexbox and grid layout don’t change this truth, they just make it easier to do it better. HTML5 doesn’t change this truth, it just reminds us that the separation of structure from style came into existence for a reason. A reason that hasn’t changed. A reason that cannot change, because it is the core truth of the web, and is inextricably bound up with the promise of this medium.

Separating structure from style and behavior was the web standards movement’s prime revelation, and each generation of web designers discovers it anew. This separation is what makes our content as backward-compatible as it is forward-compatible (or “future-friendly,” if you prefer). It’s the key to re-use. The key to accessibility. The key to the new kinds of CMS systems we’re just beginning to dream up. It’s what makes our content as accessible to an ancient device as it will be to an unimagined future one.

Every time a leader in our field discovers, as if for the first time, the genius of this separation between style, presentation, and behavior, she is validating the brilliance of web forbears like Tim Berners-Lee, Håkon Wium Lie, and Bert Bos.

Every time a Dan or an Ethan (or a Sara or a Lea) writes a beautiful and insightful article like the two cited above, they are telling new web designers, and reminding experienced ones, that this separation of powers matters.

And they are plunging a stake into the increasingly slippery ground beneath us.

Why is it slippery? Because too many developers and designers in our amnesiac community have begun to believe and share bad ideas—ideas, like CSS isn’t needed, HTML isn’t needed, progressive enhancement is old-fashioned and unnecessary, and so on. Ideas that, if followed, will turn the web back what it was becoming in the late 1990s: a wasteland of walled gardens that said no to more people than they welcomed. Let that never be so. We have the power.

As Maimonides, were he alive today, would tell us: he who excludes a single user destroys a universe. Web standards now and forever.

Categories
A List Apart art direction Bandwidth Best practices creativity CSS CSS3 Design

CSS & Design: Blending Modes Demystified

A List Apart: Blending Modes Demystified. Illustration by Brad Colbow.

IN AN IDEAL world, we’d be able to modify a design or graphic for the web while keeping the original intact, all without opening an image editor. We’d save tons of time by not having to manually reprocess graphics whenever we changed stuff. Graphics could be neatly specified, maintained, and manipulated with just a few licks of CSS. Oh. Wait. We can do that! Justin McDowell gives us the lowdown: read Blending Modes Demystified in today’s A List Apart.

Illustration by Brad Colbow

Categories
Best practices Code Compatibility Content First content strategy Content-First Design Free Advice HTML Illustration Images IXD maturity Mobile mobile Multi-Device Off My Lawn! Performance photography Responsibility Responsive Web Design Standards State of the Web The Essentials The Profession Told you so tweets Usability User Experience UX Web Design Web Design History Web Standards Websites

The Year in Design

  • Mobile is today’s first screen. So design responsively, focusing on content and structure first.
  • Websites and apps alike should remove distractions and let people interact as directly as possible with content.
  • 90 percent of design is typography. And the other 90 percent is whitespace.
  • Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.
  • One illustration or original photo beats 100 stock images.
  • Design your system to serve your content, not the other way around.
  • Remove each detail from your design until it breaks.
  • Style is the servant of brand and content. Style without purpose is noise.
  • Nobody waits. Speed is to today’s design what ornament was to yesterday’s.
  • Don’t design to prove you’re clever. Design to make the user think she is.

Also published in Medium

Translated into German (also here) by Mark Sargent

Translated into French by Jean-Baptiste Sachsé

Translated into Turkish by omerbalyali.

Translated into Spanish by Tam Lopez Breit.

Categories
art direction Bandwidth Best practices Brands CSS CSS3 Design Designers development Fonts Real type on the web software State of the Web Typekit Typography Web Design Web Standards webfonts Websites

A Helvetica For Readers

A Helvetica for readers–introducing Acumin.

ACUMIN by Robert Slimbach is a new type family from Adobe that does for book (and ebook) designers what Helvetica has always done for graphic designers. Namely, it provides a robust yet water-neutral sans-serif, in a full suite of weights and widths. And unlike the classic pressing of Helvetica that comes on everyone’s computers—but like Helvetica Neue—Acumin contains real italics for every weight and width.

Reading about the design challenges Slimbach set himself (and met) helps you appreciate this new type system, whose virtues are initially all too easy to overlook, because Acumin so successfully avoids bringing a personality to the table. Enjoying Acumin is like developing a taste for exceptionally good water.

Nick Sherman designed the website for Adobe, and its subtly brilliant features are as easy to miss at first look as Acumin’s. For starters, the style grid on the intro page dynamically chooses words to fit the column based on the viewport size. Resize your browser and you’ll see how the words change to fill the space.

Heaps of behind-the-scenes calculation allow the page to load all 90 (!) fonts without breaking your pipes or the internet. Developer Bram Stein is the wizard behind the page’s performance.

Nick uses progressively enhanced CSS3 Columns to create his responsive multi-column layout, incorporating subtle tricks like switching to a condensed font when the multi-column layout shrinks below a certain size. (This is something A List Apart used to do as well; we stopped because of performance concerns.) In browsers like IE9 and earlier, which do not support CSS3 Multiple Column specification, the layout defaults to a quite readable single column. Nick adds:

It’s the first time I’ve used responsive CSS columns for a real-world project. This was both frustrating and fun because the CSS properties for controlling widows and orphans are very far behind what’s possible in InDesign, etc. It also required more thinking about vertical media queries to prevent a situation where the user would have to scroll up and down to get from the bottom of one column to the top of the next. If the viewport is too short to allow for easy reading across columns, it stays as a single column.

He describes the challenges of creating the site’s preview tool thusly:

We had to do some behind the scenes trickery in order to get the sliders to work for changing widths and weights. It’s a good way to allow people to type their own text and get a feeling for how the family can be used as a system for body text and headlines (unlike Helvetica, which is more limited to the middle range of sizes). Chris Lewis helped out a lot with getting this to work. It even works on a phone!

Book designers have long had access to great serif fonts dripping with character that were ideal for setting long passages of text. Now they have a well-made sans serif that’s as sturdy yet self-effacing as a waiter at a great restaurant. Congratulations to Robert Slimbach, Adobe, and the designers and developers mentioned or interviewed here. I look forward to seeing if Acumin makes it into new website designs (perhaps sharing some of Proxima Nova‘s lunch), especially among mature designers focused on creating readable experiences. And I pray Acumin makes its way into the next generation of ebook readers.

(Just me? In both iBooks and Kindle, I’m continually changing typefaces after reading any book for any period of time. All the current faces just call too much attention to themselves, making me aware that I am scanning text—which is rather like making filmgoers aware that they are watching projected images just when they should be losing themselves in the story.)

Categories
Advocacy Best practices Community ethics Jerks love people

Love. Listen. Learn.

NOTE: Below is a transcript of my aural contribution to Episode ? 185 of The ShopTalk Show (“This Idea Must Die”):

AS A COMMUNITY, we have to stop demonizing those with whom we disagree.

Attacking the intelligence, moral fiber, and grip on sanity of those who hold opinions contrary to ours is nothing new on the internet. It’s as old as newsgroups. A minute after somebody started alt.opinions.design, a second person signed up just to tell the first person to screw off.

And of course it’s even older than that. Progressive groups that try to bring positive change to their community are always splitting into factions that despise each other. If you’ve seen Monty Python’s “The Life of Brian,” and remember the sequence where the zealots are sitting in an ancient square, attacking other zealot groups for being “splitters,” you have a good idea of how far back this goes.

To J. Edgar Hoover, there was no difference between Lenin, Stalin, and Trotsky—but, boy, did the Stalinists and Trotskyites disagree with that point of view. Ask two Communists a question and you’ll get three answers and four bullets. And, minus the bullets, the same is true for social-progress-minded web designers and developers. And equally true for reactionaries, who think the system is fair for everyone, since it’s always been good to them.

Until we are free to disagree on the most sensitive of subjects without maligning each other’s integrity, we will not be able to solve the biggest problems we face as a people and an industry.

I’m Jeffrey Zeldman. Thanks for listening.

I encourage you to listen to Episode ? 185 of The ShopTalk Show (“This Idea Must Die”).

Categories
Accessibility animation Best practices Big Web Show Design The Big Web Show

Web Animation with Val Head

The Big Web ShowVAL HEAD and I discuss how to create an animation style guide, the genius of user queries, the web animation API, frame by frame animation, animating with math in Flash, Disney animation and the illusion of life, animating for meaning, how to animate without triggering vestibular disorders, resources for accessible animations, and what to eat in Lawrenceville, PA.

BIG WEB SHOW ? 135: How Does Your Brand Live in Motion? Web Animation with Val Head

Categories
Advertising Amazon Apple Best practices Content-First Standards State of the Web

Ad Blocking and the Future of the Web

YOUR site may soon be collateral damage in a war between Silicon Valley superpowers. By including ad blocking in iOS9, Apple isn’t trying to take down your site or mine—just like the drone program doesn’t deliberately target civilians and children. Apple is trying to hurt arch-rival Google while providing a more elegant (i.e. more Apple-like) web experience than user-hostile ad networks have previously allowed. This is a great example of acting in your own self-interest, yet smelling like a rose. Will independent sites that depend on advertising be hurt along with Google?

We have always been at war with Eastasia

We should be used to this war between digital super companies by now. iPhone and iPad users, consider your Amazon experience on the platform. Notice how you can’t buy books in your Kindle app in iOS? Apple supports Amazon to the extent of letting Amazon distribute Kindle software on the iOS platform. But if you want to buy a Kindle book for your phone, you have to go to a desktop browser (or open Safari on your phone and navigate to Amazon.com). Kind of encourages you to get your digital books in iBooks instead.

Same with Amazon’s video app on iOS. You can stream all the movies you want on your phone or iPad, but you can’t buy them in the Amazon Video app. You must use a desktop browser or navigate to amazon.com in the version of Safari that comes with iOS. Kind of encourages you to buy videos from iTunes instead.

You also can’t buy Kindle books or streaming Amazon videos in the Amazon shopping app for iOS, although you can use that app to shop for anything else.

See, Amazon doesn’t want to give Apple a cut of its media sales, so Apple won’t let Amazon sell products in its apps. In Apple’s reasoning, all other vendors pay Apple a cut; Amazon shouldn’t get a pass. And Amazon is serious about not sharing revenue, because Amazon is a ruthless competitor that has taken over nearly all online retail sales in the U.S. by innovating service and delivery, and giving consumers the lowest possible price—a price that leaves them no margin to share with Apple. It’s also a price that strangles the companies that provide the goods Amazon sells. Oh, well.

Because Amazon is serious about not sharing sales revenue with Apple, and Apple is serious about blocking sales by any vendor that refuses to share revenue, Apple denies Amazon the right to sell products via its iOS apps. Who suffers? You, the consumer, as you put down your phone and toddle over to a desktop—or just shrug and do without. (Not that it’s the worst suffering in this world. But it is anti-consumer, and makes both Amazon and Apple look bad.)

And, of course, you can’t stream Amazon video on your Apple TV, and likewise can’t watch video content you’ve purchased through Apple iTunes on Amazon Fire TV without jumping through (possibly illegal) hoops. Not since Microsoft dominated the desktop software world in the 1990s have tech and media companies viewed success as a last-man-standing affair, with the consumer as collateral damage.

Still, we’re used to all this and don’t think about it.

Ad blocking is a different beast.

Certainly, at first, ad blocking seems like a different beast. After all, consumers may want to buy books in their Kindle app, but no consumer is clamoring for more ads. And media and advertising have only themselves to blame for the horrendous experience online advertising has become. We hate advertising so much, we’ve trained ourselves not to look at the top or right sidebar on most sites. In fact, it’s become a designer’s trick that if the client forces you to put the CEO’s pet link on the home page, you hide it in plain sight at the top of the sidebar, where no one but the CEO will see it. Popups and screen takeovers and every other kind of anti-user nightmare have made advertising a hated and largely ignored thing on the web.

There are tasteful ad networks, to be sure. The Deck, which Jim Coudal created with Jason Fried and me, serves one single, small, tasteful, well targeted ad per page. When we launched The Deck, I hoped other networks would take inspiration from it, and figure out how to increase engagement while minimizing clutter. I even tried to sell my studio’s media clients on the notion of fewer, better priced, better targeted ads. But of course the ad networks have done the opposite—constantly interrupting content to force misleading, low-interest ads on you.

Hip web consumers have long used third-party ad blockers to unfug the web experience, and great applications like Readability explored alternate content revenue models while boosting type size and removing ad clutter from web content. I served on the Readability advisory board. And I used to go around the world warning designers that if we didn’t figure out a way to create readable, clutter-free layouts for our clients’ sites, apps like Readability would do it for us—putting us out of work, and removing advertising as a revenue stream for media companies. As it happens, in the intervening years, many smart sites have found a way to put content first and emphasize not just legibility but readability in their layouts. The best of those sites—I’m thinking of The New York Times here—have found a way to integrate advertising tastefully in those large-type, content-focused, readability-oriented modern layouts. (Medium.com, of course, does an amazing job with big type and readability, but it doesn’t need to integrate advertising—at least not yet—as it floats on a sea of VC bucks.)

But advertisers don’t want to be ignored, and they are drunk on our data, which is what Google and other large networks are really selling. The ads are almost a by-product; what companies really want to know is what antiperspirant a woman of 25-34 is most likely to purchase after watching House of Cards. Which gets us into issues of privacy and spying and government intrusion and don’t ask.

And in this environment of sites so cluttered with misleading ads they are almost unnavigable, Apple looks heroic, riding to the consumer’s rescue by providing all the content from newspapers without the ads, and by blocking ugly advertising on websites. But if they succeed, will media companies and independent sites survive?

Consumer good vs. consumer good

What Apple’s doing wouldn’t matter as much if consumers were still sitting down at a desktop to get their news and cat gifs. But they’re not. Everyone does everything on mobile. Including browse the web.

Thus in The Verge today, Nilay Patel argues there’s a real risk that, in attacking Google’s revenue stream, Apple may hurt the web itself:

The collateral damage of that war — of Apple going after Google’s revenue platform — is going to include the web, and in particular any small publisher on the web that can’t invest in proprietary platform distribution, native advertising, and the type of media wining-and-dining it takes to secure favorable distribution deals on proprietary platforms. It is going to be a bloodbath of independent media. … Taking money and attention away from the web means that the pace of web innovation will slow to a crawl. —Welcome to hell: Apple vs. Google vs. Facebook and the slow death of the web

John Gruber thinks otherwise, at least for small indie sites like his:

Perhaps I am being smug. But I see the fact that Daring Fireball’s revenue streams should remain unaffected by Safari content-blocking as affirmation that my choices over the last decade have been correct: that I should put my readers’ interests first, and only publish the sort of ads and sponsorships that I myself would want to be served, even if that means leaving (significant) amounts of money on the table along the way. But I take no joy in the fact that a terrific publication like The Awl might be facing hard times. They’re smart; they will adapt.—Because of Apple

In Publishing Versus Performance, I looked at the conflict between advertising and content through the filter of performance. For those who didn’t read it (or don’t remember), I pointed out that most consumer interaction with the web happens on mobile, which means it happens on mobile networks, which, at times at least, may be severely bandwidth-constrained; so performance counts as it hasn’t in years. And while good designers and developers are working like never before to create performant websites, the junk ad networks spew interferes with their good work and slows websites to a crawl. This threatens the future of the web, as consumers will blame the web for poor performance, and stick to apps. But removing those ad networks isn’t an option, I pointed out, since, abhorrent or not, advertising dollars are the engine that drives digital media: no bucks, no content.

Well, now, Apple has decided for us. Removing those ad networks may not be an option, but it’s happening anyway. How will it affect your site?

Also published in Medium.com.

Categories
A List Apart Authoring Best practices Culture Design Ideas industry State of the Web

Toward a more inclusive web form

REGISTERING for school, paying bills, updating government documents—we conduct a significant part of our daily lives through web forms. So when simply typing in your name breaks a form, well, user experience, we have a problem. As our population continues to diversify, we need designs that accommodate a broader range of naming conventions. Aimee Gonzalez shows how cultural assumptions affect what we build on the web—and how fostering awareness and refining our processes can start to change that.

Categories
Bandwidth Best practices Design Designers development DOM Ethan Marcotte HTML industry Markup Medium Off My Lawn! people Performance Responsive Web Design Standards State of the Web Tech The Essentials The Profession Usability UX Web Design Web Design History Web Standards XHTML

You’re welcome: cutting the mustard then and now.

EVERY TIME I hear a young web developer cite the BBC’s forward-thinking practice of “cutting the mustard,” by which they mean testing a receiving web device for certain capabilities before serving content, I remember when my team and I at The Web Standards Project invented that very idea. It’s a million web years ago, by which I mean fourteenish human years ago, so nobody remembers but me and some other long toothed grayhairs, plus a few readers of the first edition of Designing With Web Standards. But I like you, so I will tell you the story.

Back then in those dark times, it was common practice for web developers to create four or more versions of the same website—one for each browser then in wide use. It was also a typical (and complementary) practice to send server-side queries to figure out which browser was about to access a site’s content, and then send the person using that browser to the site version that was configured for her browser’s particular quirks, proprietary tags, and standards compliance failings.

The practice was called “browser detection.” Nobody but some accessibility advocates had ever questioned it—and the go-go dot-com era had no time or care for those folks.

But we at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone. In a world like that, you wouldn’t need browser detection, because every browser and device that could read HTML would be able to feast on the meat of your site. (And you’d have more meat to share, because you’d spend your time creating content instead of crafting multiple versions of the same site.)

To hasten that world’s arrival, in 2001 we launched a browser upgrade campaign. Those who participated (example participant here) employed our code and content to send their users the message that relatively standards-compliant browsers were available for every platform, and inviting them to try one. Because if more people used relatively standards-compliant browsers, then we could urge more designers and developers to create their sites with standards (instead of quirks). And as more designers and developers did that, they’d bump against still-unsolved standards compliance conundrums, enabling us to persuade browser makers to improve their standards compliance in those specific areas. Bit by bit, stone by stone, this edifice we could, and would, erect.

The code core of the 2001 browser upgrade campaign was the first instance of capability detection in place of browser detection. Here’s how it worked. After creating a valid web page, you’d insert this script in the head of your document or somewhere in your global JavaScript file:

if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}

We even provided details for various flavors of markup. In HTML 4 or XHTML 1 Transitional documents, it looked like this:

<script type="text/javascript" language="javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->
</script>

In STRICT documents, you’d either use a global .js file, or insert this:

<script type="text/javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->

You could also just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
window.location =
"http://www.yourdomain.com/yourpage.html"
}

Non-WaSP members (at the time) J. David Eisenberg, Tantek Çelik, and Jim Heid contributed technical advice and moral support to the effort. WaSP sysadmin Steven Champeon, the inventor of progressive enhancement, made it all work—under protest, bless him. (Steve correctly believed that all web content should always be available to all people and devices; therefore, in principle, he disliked the upgrade campaign, even though its double purpose was to hasten the arrival of truly standards-compliant browsers and to change front-end design and development from a disrespected world of hacks to a sustainable and professional craft. ((See what I did there? I’m still respectfully arguing with Steve in my head.)))

Discovering rudimentary DOM awareness or its absence in this fashion was the first time web developers had tested for capabilities instead of chasing the dragon in a perpetual and futile attempt to test for every possible browser flavor and version number. It was the grandparent, if you will, of today’s “cutting the mustard.” And it is analogous as well to the sensible responsive design practice of setting breakpoints for the content, instead of trying to set appropriate breakpoints for every possible device out there (including all the ones that haven’t been invented yet).

Which reminds us that the whole point of web standards was and is forward compatibility—to create content that will work not only in yesterday’s and today’s browsers and devices, but in all the wonderful devices that have yet to be invented, and for all the people of the world. You’re welcome.

—CHICAGO, Westin Chicago River Hotel, 1 September 2015

Hat tip: John Morrison

Categories
An Event Apart Bandwidth Best practices Design Designers development Future-Friendly Performance Responsive Web Design State of the Web Web Standards

On Web Performance

Lara Hogan

GET READY for Lara Hogan, author of Designing For Performance, as she shares pretty much about everything you’ll need to know to design optimally performant front-end web experiences. It’s one of twelve essential sessions that make An Event Apart Austin 2015 the Southwest’s don’t-miss web design and development event of 2015.

Categories
Apple Applications apps architecture Best practices Design Dropbox Off My Lawn!

Give me file hierarchies, or give me chaos.

IN “HOW DROPBOX Remains Relevant,” Khoi Vinh explains why Dropbox owes much of its success to subtly faceted, user-focused design:

Even in an age when the biggest operating systems in the world actively eschew file hierarchies, Dropbox is thriving—its service matters deeply to countless users. Why? In part it’s because the company works hard at making file hierarchies useful, that they focus on the outcomes of file management and not just on the files and folders.

Absolutely. Dropbox sweats the user experience details as commendably as it masters the considerable engineering challenges required to reliably sync files everywhere a user may need them.

But there’s another reason Dropbox succeeds. And it isn’t despite its emphasis on old-fashioned file hierarchies. It’s because of that emphasis.

? ALTHOUGH Khoi may well be right that “smart passive management of design assets and working files seems inevitable,” I, for one, do not look forward to the day I no longer have direct access to my files and the ability to control where and how they are stored. To my way of thinking, passive management of file assets is okay for screwing around with iPads, where we’re mainly watching TV on Netflix or obsessive-compulsively checking the popularity of our Instagram uploads. But for real work, and even for passionate hobby work (like managing family photos), give me files and folders any day.

Stay with photos a moment. Consider snapshots. For my money, apps like Photos (and, formerly, iPhoto) that “save” me from the “inconvenience” of knowing where my images are do me no favors. Thanks, but no thanks. Let me save photos where I want to save them, not where the system thinks I should save them—typically on a laptop’s rapidly filling solid state hard drive with minimal storage capacity.

Dropbox, with its emphasis on good old-fashioned hierarchies, is superb at automatically saving one original of each photo I take, whether shot with a phone or a fancy camera. No loops, no duplicates, no confusion. In contrast, Photo’s cloud sync options, designed to spare the user the trouble of thinking, always trip me up. Like when, after syncing my phone to my home desktop computer, I tell Photos to delete the photos I’ve just sync’d from my phone. Photos obeys my command, and then instantly restores the photos to my phone from the “cloud.”

Why would a system expect a user who has deleted files to want those files restored a moment later? In what universe of scenarios can that possibly be what the user expects? [Your system may work differently from mine. Your deletes may stick. If so, good on you. You may have checked a different box in a hidden drawer of a preferences dialog, possibly in the app preferences you can set in the app itself, or possibly in the app preferences you set in the phone’s Settings app, or possibly online—say, in iCloud, or possibly in the iCloud settings in the phone’s Settings app. This is simplicity?]

Because my phone and iCloud restore photos as soon as they’re deleted, my Camera Roll is an unwieldly monster—despite my applying common sense, logic, years of design and computer using experience, and hours of conversation with a rapidly dwindling circle of friends—not to mention the hours I’ve spent scouring the web for hints. The whole situation reminds me of an article I saw on the cover of PC World years ago: “Plug ‘n Play: How To Make It Work.” (Hint: If you have to learn how to make it work, it ain’t plug ‘n play. And that’s kind of how I feel about the current state of passive file management.)

? SYSTEMS designed to relieve you of thinking too often end up forcing you to think, and think, and think, without ever solving the problems their supposed simplicity has created for you. How much easier would photo maintenance on my phone be if Photos, like Dropbox, used file hierarchies? I could solve the problem myself in a second, with the click of a checkbox, if only Apple weren’t committed to chasing a future where nobody needs to know anything about how their computer works—and, as a result, some of us have no clue what to do when the computer doesn’t work quite right.

? I UNDERSTAND that these are difficult problems to solve, and that confusion and frustration are the price consumers pay for innovation that may benefit them in the long run, once all the kinks are out. I’m not anti-innovation or anti-Apple.

But I’m a web person. I like files. I like editing a CSS file without necessarily having to edit an HTML file. I like fixing a problem by replacing a corrupted file with a clean one. Maybe I’m set in my ways, but I don’t consider it a hardship to open a folder or replace a file. I wouldn’t be quite as happy with a web where I didn’t “need” to “bother” writing CSS.

In the same way, I like deciding where files go—saving an image for Project A in a Project A folder, a text document for Project B in a Project B folder (and all of it in Dropbox). I’m glad Adobe Lightroom maintains a picture of my photo folder hierarchy in a sidebar of its interface, enabling me to see where my files live, and instantly choose a group of photos by date (instead of, say, scrolling through thousands of files visually). When it’s time to get dressed in the morning, I don’t throw myself into a giant room full of clothes. I pull socks from my sock drawer and shirts from my shirt drawer. I’ve been doing this since I was five years old. It’s not a challenge.

Khoi ends his excellent Dropbox piece thusly:

Maybe we’re all just set in our ways, but people seem at least resigned, and more likely just plain comfortable with managing their files. It may not be what future workflows are built around, but for working designers, the future is hypothetical, and Dropbox works today.

To which I say Amen. And add the hope that, so long as my career lasts, I can keep using a workflow I find easy and comprehensible.

“Don’t make me think.” Absolutely. But, equally, don’t treat me like an idiot. Folders über alles.

Also published in Medium

Categories
A List Apart Best practices Code Design development editorial Ethan Marcotte Future-Friendly HTML Responsibility Usability W3C Web Design Web Design History Web Standards Websites Zeldman

No Good Can Come of Bad Code: Ask Dr Web in A List Apart

Remember: the future will come whether you design for it or not. If your company charges $300,000 for a website that won’t work on next week’s most popular device, your company won’t be able to stay competitive in this business. It might not even be able to stay in the business, period. After all, clients who pay for sites that break too soon will look elsewhere next time—leaving your company perpetually hunting for new clients in a downward spiral of narrowing margins and diminishing expectations.

Your company’s survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist. This has alwaysbeen the challenge of web design. It’s one A List Apart has taken seriously since we began publishing, and our archives are filled with advice and ideas you can boil down and present to your bosses.

Source: No Good Can Come of Bad Code

Categories
An Event Apart Best practices HTML video

The Long Web – An Event Apart Video

Jeremy Keith at An Event Apart

IN THIS 60-minute video caught live at An Event Apart Austin, Jeremy Keith bets on HTML for the long haul:

The pace of change in our industry is relentless. New frameworks, processes, and technologies are popping up daily. If you’re feeling overwhelmed, you are not alone. Let’s take a step back and look at the over-arching trajectory of web design. Instead of focusing all our attention on the real-time web, let’s see which design principles and development approaches have stood the test of the time. Those who cannot remember the past are condemned to repeat it, but those who can learn from the past will create a future-friendly web.

Enjoy The Long Web by Jeremy Keith – An Event Apart Video.

Follow An Event Apart on Twitter, Google+, or Facebook. And for the latest web design news plus special offers, discounts, and more, subscribe to the AEA mailing list.

Categories
Best practices Career engagement eric meyer facebook Happy Cog™ industry

Unexamined Privilege is the real source of cruelty in Facebook’s “Your Year in Review”

UNEXAMINED PRIVILEGE is the real source of cruelty in Facebook’s “Your Year in Review”—a feature conceived and designed by a group to whom nothing terrible has happened yet. A brilliant upper-middle-class student at an elite university conceived Facebook, and college students, as everyone knows, were its founding user group. The company hires recent graduates of expensive and exclusive design programs and pays them several times the going rate to brainstorm and execute exciting new features.

I’m not saying that these brilliant young designers are heartless, or that individuals among them haven’t personally experienced tragedy—that would be mathematically impossible. I have taught some of these designers, and worked with others. Those I’ve known are wonderful people who want to make a difference in the world. And in theory (and sometimes in practice) a platform like Facebook lets them do that.1

But when you put together teams of largely homogenous people of the same class and background, and pay them a lot of money, and when most of those people are under 30, it stands to reason that when someone in the room says, “Let’s do ‘your year in review, and front-load it with visuals,’” most folks in the room will imagine photos of skiing trips, parties, and awards shows—not photos of dead spouses, parents, and children.

So it comes back to this. When we talk about the need for diversity in tech, we’re not doing it because we like quota systems. Diverse backgrounds produce differing points of view. And those differences are needed if we are to put the flowering of internet genius to use actually helping humanity with its many terrifying and seemingly intractable problems.

If we keep throwing only young, mostly white, mostly upper middle class people at the engine that makes our digital world go, we’ll keep getting camera and reminder and hookup apps—things that make an already privileged life even smoother—and we’ll keep producing features that sound like a good idea to everyone in the room, until they unexpectedly stab someone in the heart.

1 Of course, not all my former students and employees work at Facebook; most don’t. But those who have gone there had other, equally lucrative options; they took the job to make Facebook, and maybe the world, a little better.

Categories
Best practices Blue Beanie Day Web Design Web Standards

Diversity and Web Standards

ON THIS year’s Blue Beanie Day, as we celebrate web standards, we also celebrate our community’s remarkable diversity—and pledge to keep things moving in a positive, humanist direction.

Racism, sexism, misogyny and other forms of foolish, wrongful pre-judging have no place in our beautiful community. As hard as we work to make sure our websites work for everyone, let’s work twice as hard to be certain we are just as open-hearted and welcoming to our peers as our designs are to our users.