Categories
Accessibility Adobe Advocacy AIGA art direction Authoring Bandwidth Best practices Browsers business Career client management Community creativity CSS Design Designers development Digital Preservation Fonts Future-Friendly HTML industry interface maturity Medium My Back Pages Off My Lawn! Performance Photoshop Rants Real type on the web Responsibility Responsive Web Design Site Optimization Standards State of the Web The Essentials The Profession Typography Usability User Experience UX Web Design Web Design History Web Standards Websites webtype work Working writing

This Web of Ours, Revisited

ONE MONTH and 24 years ago, in “Where Have All the Designers Gone?” (my HTMHell design column for Adobe of March 20, 2000), I discussed the deepening rift between aesthetically focused web designers and those primarily concerned with creating good experiences online:

More and more web designers seem less and less interested in web design.

Over the past 18 months or so, many of the best practitioners in the industry seem to have given up on the notion that a low-bandwidth, less than cutting-edge site is worth making. Much of the stuff they’ve been making instead has been beautiful and inspiring. But if top designers wash their hands of the rest of the Web, whose hands will build it, and whose minds will guide it? The possibilities are frightening.

An Imperfect Medium for Perfectionists

Why were many of the leading graphic designers and studios at the time uninterested in web design? For one thing, designers trained to strive for visual perfection found the web’s unpredictability depressing. The article provided clues to the frustrations of the time:

Good designers spend hours tweaking typography in Illustrator and Photoshop. Then visitors with slow connections turn off images.

Of course, where professionals trained in graphic design saw a distressing lack of control, others glimpsed in the infant technology a tremendous potential to help people, pixel-perfection be damned. To reduce the conflict to a cartoon, you might characterize it as David Carson versus Jakob Nielsen—though doing so would trivialize the concerns of both men. Designers already charged with creating websites found themselves somewhere in the middle—barking themselves hoarse reminding clients and managers that pixel-perfect rendering was not a thing on the web, while arguing with developers who told designers the exact same thing.

Visually inspiring websites like K10k showed that the web could, if approached carefully and joyfully, provide aesthetic delight. But many designers (along with organizations like AIGA) were unaware of those sites at the time.

Us and Them

Another source of tension in the medium in 2000 sprang from the discrepancy between the privileged access designers enjoyed—fast connections, up-to-date browsers and operating systems, high-res monitors (at least for the time) offering thousands of colors—versus the slow modems, aging and underpowered computers, outdated browsers, and limited-color monitors through which most people at the time experienced the web.

Which was the real design? The widescreen, multicolor, grid-based experience? Or the 216-color job with pixelated Windows type, a shallow “fold,” and pictures of headline text that took forever to be seen?

To view your masterpiece the way most users experienced it, and at the syrup-slow speed with which they experienced it, was to have an awakening or a nightmare—depending on your empathy quotient. Some designers began to take usability, accessibility, and performance seriously as part of their jobs; others fled for the predictability of more settled media (such as print).

A New (Old) Hope

My March, 2000 article ended on an upbeat note—and a gentle call to action:

For content sites to attain the credibility and usefulness of print magazines; for entertainment sites to truly entertain; for commerce sites and Web-based applications to function aesthetically as well as technically, the gifts of talented people are needed. We hope to see you among them.

That was my hope in 2000, and, all these years later, it remains my vision for this web of ours. For though the browsers, connections, and hardware have changed substantially over the past 24 years, and though the medium and its practitioners have, to a significant extent, grown the Hell up, beneath the surface, in 2024, many of these same attitudes and conflicts persist. We can do better.

Minus the framesets that formerly contained it, you may read the original text (complete with archaic instructions about 4.0 browsers and JavaScript that broke my heart, but which Adobe’s editors and producers insisted on posting) courtesy of the Wayback Machine.

☞  Hat tip to Andrey Taritsyn for digging up the article, which I had long forgotten.

Categories
Accessibility Advocacy architecture Authoring Best practices development ethics industry Performance Platforms Responsibility Standards State of the Web Usability User Experience UX W3C Web Standards

CAPTCHA excludes disabled web users

What’s widely used, no longer particularly effective, and makes web content inaccessible to many people with disabilities? It’s our old friend CAPTCHA! In a group note dated 16 December 2021, the W3C explains how CAPTCHA excludes disabled users, and suggests alternatives which may be kinder and more reliable:

Various approaches have been employed over many years to distinguish human users of web sites from robots. The traditional CAPTCHA approach asking users to identify obscured text in an image remains common, but other approaches have emerged. All interactive approaches require users to perform a task believed to be relatively easy for humans but difficult for robots. Unfortunately the very nature of the interactive task inherently excludes many people with disabilities, resulting in a denial of service to these users. Research findings also indicate that many popular CAPTCHA techniques are no longer particularly effective or secure, further complicating the challenge of providing services secured from robotic intrusion yet accessible to people with disabilities. This document examines a number of approaches that allow systems to test for human users and the extent to which these approaches adequately accommodate people with disabilities, including recent non-interactive and tokenized approaches. We have grouped these approaches by two category classifications: Stand-Alone Approaches that can be deployed on a web host without engaging the services of unrelated third parties and Multi-Party Approaches that engage the services of an unrelated third party.

W3C: Inaccessibility of CAPTCHA: Alternatives to Visual Turing Tests on the Web

We can do better!

Tell your friends. Tell your boss. Tell your clients.

Tip o’ the blue beanie to Adrian Roselli.

Categories
Accessibility Design IXD Usability User Experience UX

A faster horse

“The user is never wrong” means, when a user snags on a part of your UX that doesn’t work for her, she’s not making a mistake, she’s doing you a favor.

To benefit from this favor, you must pay vigilant attention, prioritize the discovery, dig deeply enough to understand the problem, and then actually solve it.

In so doing, you will not only be secretly thanking the user who discovered your error, you’ll be aiding all of your users, and ultimately, attracting new ones.


Think about this tomorrow. For today, Happy Labor Day to all who toil.

Categories
A Book Apart Accessibility Advocacy Authoring Best practices books Design

Immersive Content and Usability

So little time, so many wonderful, evergreen titles. The A Book Apart library for people who design, write, and code ... in coffee mug format.

As the lines between our physical and digital surroundings continue to blur, it’s more important than ever to design usable and accessible content for our ever-expanding array of contexts.

In 2021, A Book Apart and I were delighted to bring you Preston So’s Voice Content and Usability, the definitive book on voice content, and A Book Apart’s first voice title.

Now, in 2023, we’re thrilled to present Preston’s brilliant follow-up, Immersive Content and Usability, coming April 18.

Armed with this book, you’ll create incisive and inclusive user-centered experiences across augmented, extended, and virtual realities, transforming the physical world into an exciting new canvas for content.

Pre-order now! https://abookapart.com/products/immersive-content-and-usability

Categories
Accessibility Best practices Blue Beanie Day Design W3C Web Design Web Standards

Blue Beanie Day 2021

Photo of astronaut David Bowman from Stanley Kubrick’s 2001 wearing a blue beanie in support of web standards.

Blue Beanie Day in support of web standards is celebrated around the world on November 30. Hey, that’s today.

So how can you help? Glad you asked! Take a self-portrait wearing a blue beanie (toque, tuque, cap) and post it to your website and social media channels with the hashtag #BlueBeanieDay.

And for that extra extra, slap a blue beanie on your web and social media avatars, as well.

Do this on November 30 as a reminder to design accessible, web-standards-based websites 365 days a year. Thank you. Love you.

Categories
Accessibility Diversity video

A panel on accessibility, design inclusion and ethics, hiring and retaining diverse talent, and landing a job in UX.

It’s one thing to seek diverse talent to add to your team, another to retain the people you’ve hired. Why do so many folks we bring in to add depth and breadth of experience to our design and business decision-making process end up leaving?

Hear thoughtful, useful answers to this question and other mysteries of UX design and tech recruitment in this Live User Defenders podcast video recorded at An Event Apart Denver. Featuring Mina Markham, Farai Madzima, and Derek Featherstone. Discussion led by Jason Ogle. Thanks to Todd Libby for the 4K recording.

The last An Event Apart conference of 2019 begins next week in San Francisco.

Categories
Accessibility Design Usability UX Web Design History

In Defense of Font Size Widgets

A discussion on Twitter“You don’t get to decide which platform or device your customers use to access your content: they do.”—Karen McGrane, Content Strategy for Mobile

“When a person tells you that you hurt them, you don’t get to decide that you didn’t.”—Louis C.K.

“Discomfort with others’ burdens has no place in good design.”—Mica McPheeters

“Historically, teams simply have not been trained to imagine their users as different from themselves—not really, not in any sort of deep and empathetic way.”—Sara Wachter-Boettcher

 

“USER CUSTOMIZATION” on the web hearkens back to the deluded old days of portals, when companies imagined you’d start your daily “net browsing” session by “logging on” to their website’s homepage. Customization was among the chief (largely imaginary) inducements for you to return to their “start” page and not others.

The thought was that changing the fonts and color scheme would make their page feel more like your home. After all, Windows 3.1 users seemed to enjoy switching their home computers to “Black Leather Jacket” or other personalized settings—if only as an escape from the computer environment at work, where their bosses enforced a rigid conformist look and feel, and dictated which software and fonts were allowed on your workstation. Surely, the thinking went, pioneering web explorers would demand custom accommodations as plush as those found in the best-selling operating system.

MySpace … and beyond!

Dropdown style switcher from adactio.com – a memory of the way we were.This fetish for pointless customization—customization for its own sake—persisted through the MySpace era, where it actually made sense as an early mass offering of page owner personal branding. Its descendants are the WordPress, Tumblr, and Squarespace themes that create a professional appearance for the websites of individuals and small businesses. This is a positive (and inevitable) evolution, and a perfect denouement for the impulse that began life as “user customization.”

But, except on a few quirky personal sites like Jeremy Keith’s adactio.com, where sidebar customization widgets live on as a winking look back to the early days of personal content on the web, user customization for its own sake has long been out of favor—because experience, referrer logs, and testing have long shown that visitors don’t bother with it.

Perhaps that’s because people don’t really visit websites any more. They drop in quickly on a page found by search or referred by social media, scan quickly and incompletely, and leave, mostly never to return.

When you use Google, Bing, or Duck Duck Go to find out what a knocking sound in your radiator or a pang in your gulliver might mean, you scan for the information you sought, find it (if you’re lucky), and leave. The notion that most sites could get you to come back by offering you the ability to change fonts or colors is self-evidently absurd. Why bother?

Readability and font customization

Ah, but there’s another kind of user customization that I’m hoping and betting will make a comeback: a subtle, inclusive sort of customization that doesn’t exist for its own sake, but rather to serve.

Our glowing, high-density screens are great for watching Westworld, but a bit too bright and backlit for prolonged reading compared to the paper they’re intended to replace. But screens have one advantage over printed books (besides storage and portability): namely, they offer accessibility features a printed book never could.

I once received an architecture book written by an important scholar, but I was never able to read it, because the layout was terrible: the type was too small, the leading too tight, and (most of all) the measure far too wide to be readable. If an ebook version had been available, I’d have purchased it; but this was before the mass market availability of ebooks, and the tome is now out of print. I own it, but I shall never be able to read it.

It wouldn’t be a problem with an ebook, because all ebooks offer readers the ability to alter the contrast and the basic theme (white text on black, black text on white, dark text on a light background); all ebooks offer the ability to adjust font size; and most include the ability to change fonts. Why do Kindle and iBooks offer this flexibility? Because it helps readers who might otherwise not be able to read the text comfortably—or at all. This isn’t customization for its own sake. It’s customization for the sake of inclusion.

The grey lady and user customization

The font size widget at nytimes.comNow notice who else provides some of this same inclusive customization function: the mighty New York Times.

People in our industry tend to repeat things they’ve heard as if they are eternal verities—when the real truth is that each digital experience is different, each person who engages with it is different, and each device used to access each experience brings its own strengths and limitations.

A font size widget may smell like the pointless old-fashioned “user customization” to be found on half the unvisited sites in the Wayback Machine, but it is the very opposite of such stuff. Even mighty responsive design benefits from offering a choice of font sizes—because there are just too many complications between too many screen sizes and device features and too many pairs of eyes to ensure that even the best designer can provide a readable experience for everyone without adding a simple text size widget.

Most of the sites we’ve designed in the past few years have not had a text size widget, but I believe this was due to our privileged assumptions and biases, and not to the reality of the needs of those we serve. Going forward on client projects at studio.zeldman, and in my publications like A List Apart, I hope to correct this—and I hope you will think about it, too.

 

Also published to A List Apart: Medium.

Categories
A List Apart Accessibility

Accessibility Whack-a-Mole

Accessibility Whack-a-Mole. Article and illustrations by Eleanor Ratliff. In A List Apart, for people who make websites.

DESIGN is a balancing act—and never more so than when it comes to accessibility (AKA #a11y). So what can you do when an a11y solution you’ve devised for one group creates a fresh a11y dilemma for another?

Through the prism of typeface choice, Eleanor Ratliff relates how she and her team tackled the problem of accessibility whack-a-mole for a rebranding project. In today’s edition of A List Apart, for people who make websites.

Categories
Accessibility Blue Beanie Day Design Web Design Web Design History Web Standards

This year more than ever, Blue Beanie Day matters

Donald Trump mocks reporter with disability. Photo: CNN.

AT FIRST GLANCE, November 2016 has bigger fish to fry than a small, cult holiday celebrated by web developers and designers.

Each day since November 8, 2016 has brought new, and, to some of us, unimaginable challenges to the surface. Half of America is angry and terrified. The other half is angry and celebrating. At a time like now, of what possible use is an annual holiday celebrated mainly on social media by a tiny posse of standards- and accessibility-oriented web developers and designers?

From Blue Beanies to Black Hats

Many web developers have “moved on” from a progressive-enhancement-focused practice that designs web content and web experiences in such a way as to ensure that they are available to all people, regardless of personal ability or the browser or device they use.

Indeed, with more and more new developers entering the profession each day, it’s safe to say that many have never even heard of progressive enhancement and accessible, standards-based design.

For many developers—newcomer and seasoned pro alike—web development is about chasing the edge. The exciting stuff is mainly being done on frameworks that not only use, but in many cases actually require JavaScript.

The trouble with this top-down approach is threefold:

Firstly, many new developers will build powerful portfolios by mastering tools whose functioning and implications they may not fully understand. Their work may be inaccessible to people and devices, and they may not know it—or know how to go under the hood and fix it. (It may also be slow and bloated, and they may not know how to fix that either.) The impressive portfolios of these builders of inaccessible sites will get them hired and promoted to positions of power, where they train other developers to use frameworks to build impressive but inaccessible sites.

Only developers who understand and value accessibility, and can write their own code, will bother learning the equally exciting, equally edgy, equally new standards (like CSS Grid Layout) that enable us to design lean, accessible, forward-compatible, future-friendly web experiences. Fewer and fewer will do so.

Secondly, since companies rely on their senior developers to tell them what kinds of digital experiences to create, as the web-standards-based approach fades from memory, and frameworks eat the universe, more and more organizations will be advised by framework- and Javascript-oriented developers.

Thirdly, and as a result of the first and second points, more and more web experiences every day are being created that are simply not accessible to people with disabilities (or with the “wrong” phone or browser or device), and this will increase as  standards-focused professionals retire or are phased out of the work force, superseded by frameworkistas.

#a11y is Code for “Love Your Neighbor”

This third point is important because people with disabilities are already under attack, by example of the U.S. president-elect, and as part of of a recent rise in hate crimes perpetrated by a small but vocal fringe. This fringe group of haters has always been with us, but now they are out of the shadows. They are organized and motivated, and to an unmeasured degree, they helped Donald Trump win the White House. Now that he’s there, people of good will ardently hope that he will condemn the worst bigots among his supporters, and fulfill his executive duties on behalf of all the people. I’m not saying I expect him to do this today. I’m saying I hope he does—and meantime it behooves us to find ways to do more than just hope. Ways to make change.

One small thing designers and developers can do is to make accessibility and usability Job 1 on every project. And to take a broad view of what that means. It means taking people’s messy humanity into account and designing for extreme ends of the bell curve, not just following accessibility authoring guidelines. (But it also means following them.)

In doing those things, we can love our neighbors through action. That—and not simply making sure your HTML validates—is what designing with web standards was always about.

On November 30, I will put on my blue hat and renew my commitment to that cause. Please join me.

 

Also published on Medium.

Categories
Accessibility An Event Apart art direction Best practices Usability User Experience UX

Solve the Right Problem: Derek Featherstone on designing for extremes

Derek Featherstone at An Event Apart

12 LESSONS from An Event Apart San Francisco – ? 3: Derek Featherstone was the 10th speaker at An Event Apart San Francisco, which ended Wednesday. His session, Extreme Design, showed how creating great experiences for people with disabilities results in better designs for everyone.

Focusing relentlessly on accessibility helps us think of extreme scenarios and ask questions like “how can we make this work eyes free?” and “how can we make this work with the least amount of typing?” Most importantly, it leads to deeper design thinking that solves problems for everyone who uses our sites and products.

A Map For The Blind

One of my favorite examples from Derek’s presentation had to do with a map. A Canadian city was expanding geographically to encompass some of the surrounding suburbs. The city’s website was charged with letting all citizens know about the change. The web team did what you or I would probably do: they created a map that clearly showed the old and new city limits.

Unfortunately, this visual map was by definition inaccessible to blind citizens, so the city brought in Derek and his colleagues to design an equivalent experience for the unsighted. Derek’s team and the web team pondered typical solutions—such as laborious written descriptions of the city’s shifting geographic borders. But these were not user-friendly, nor did they get to the heart of the problem.

Maybe creating a verbal equivalent of a visual map wasn’t the answer. Derek’s team kept digging. Why was the map created in the first place, they asked. What was the point of it? What were users supposed to take away from it?

It turned out, people wanted to know if their street fell within the new city boundaries because, if it did, then their taxes were going to go up.

Solving for a map wasn’t the point at all. Allowing people to find out if their home address fell inside the new city limits was the point.

A simple data entry form accomplished the task, and was by definition accessible to all users. It was also a much quicker way even for sighted user to get the information they wanted. By solving for an extreme case—people who can’t see this map—the web teams were able to create a design that worked better for everyone.

Tomorrow I’ll be back with another top takeaway from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017.

 

Also published at Medium.

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
Accessibility

Open Source Accessibility Testing Library

Introducing Deque’s aXeDeque System’s aXe (The Accessibility Engine) open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice.Re-written from scratch over the last year, leveraging 15 years of accessibility experience, these rules represent the state of the art in automated accessibility testing.

Source: Introducing aXe by Deque!

Categories
Accessibility engagement ethics

Online Training to Make Sites and Apps Accessible

ACCESSIBILITY IS LIKE the weather: everyone talks about it, but not enough of us do anything about it. Austin-based Knowbility is one of the few groups in the world with the commitment and expertise to change this. If enough of us fund their new IndieGogo project, they’ll gain the resources they need to create online modules that teach the world how to make our sites work for people with disabilities. This is a cause any web designer or developer should be able to get behind.

I love the web because it is democratic, agnostic, and empowering. Progressive enhancement, responsive design, and other core components of standards-based web design are all about making sure that the experiences we create online are available to any person, via any browser, on any device. That promise is the heart of web accessibility. It will seem obvious to most folks reading this page that a site that works for all is way better than a site that works only for some.

Yet, for all the sophistication and excitement of modern web design, accessibility remains the least-taught, least-understood, least-cared-about of all our new and classic best practices. Let’s help Knowbility change that. Let’s help them help us, and, by extension, help everyone who uses the web (or tries to).

Please contribute to, and spread the word about, Online Training to Make Sites and Apps Accessible: http://is.gd/knowbility. And please hurry! There are only five days left to make a difference.

Update

Here comes Phase II in the fundraising effort. Please visit this updated URL: http://is.gd/knowbility. You know what to do from there. Thanks!

Categories
A List Apart Accessibility Apple Layout mobile Standards State of the Web Web Design Web Design History Web Standards

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.

Categories
A Feed Apart Accessibility Advocacy An Event Apart

An Event Apart Austin 2012

FOLLOW THE ACTION at An Event Apart Austin – three days of design, code, and content for people who make websites, now taking place in Austin, TX.

A Feed Apart

Just the tweets.

Content First

“In his opening keynote at An Event Apart in Austin, TX 2012 Jeffrey Zeldman talked about the need to keep content front and center in websites and the web design process.” Enjoy Luke Wroblewski’s notes on my presentation, “Content First.”

Responsive Design Workflow

“In her presentation at An Event Apart in Austin, TX 2012 Sarah Parmenter talked about the changes responsive web design requires of web designers.” Enjoy Luke Wroblewski’s notes from her talk on “Responsive Design Workflow.”

On Web Typography

Jason Santa Maria “outlined the current state of web fonts and how to approach typography online.” Luke Wroblewski’s notes on the talk.

Mobile To The Future

My notes on Luke Wroblewski’s AEA Austin presentation.

Content Strategy Roadmap

“In her Content Strategy Roadmap presentation at An Event Apart in Austin TX 2012 Kristina Halvorson talked about how to integrate content strategy into a typical web design workflow.” Enjoy Luke Wroblewski’s notes from her talk.

Rolling Up Our Responsive Sleeves

In this presentation, Ethan Marcotte walks through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are Luke Wroblewksi’s notes on the talk.

The Spirit of the Web

“With the explosion of web-enabled devices of all shapes and sizes, the practice of web design and development seems more complex than ever. But if we can learn to see below this overwhelming surface to the underlying web beneath, we can learn to make sites not for specific devices but for the people using them. This presentation will demonstrate how tried and tested principles like REST and progressive enhancement are more important than ever. By embracing the spirit of the web, you can ensure that your websites are backwards compatible and future friendly.” – Jeremy Keith

Bringing A Knife to a Gunfight (1)

All the links from Andy Clarke’s amazing AEA Austin presentation.

Bringing A Knife to a Gunfight (2)

“Andy Clarke talked about the changing processes in web design and shared a number of tools and techniques that can help designers make transition to a more modern workflow.” Luke Wroblewski’s notes from the talk.

The Real Me (1)

At An Event Apart in Austin TX 2012, Aarron Walter shared why having a personality and story matters for companies. Notes by Luke Wroblewski.

The Real Me (2)

Articles and books cited in the Aarron Walter talk; compiled by AW himself.

Conference Photos

Enjoy the Flickr pool of photos from the three-day web design conference event now being held in Austin, TX.

Watch this space!

More to come.