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
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
Performance Real type on the web Responsibility Standards State of the Web The Essentials Typography Usability Web Design Web Design History Web Standards

Web Performance Today

WEB DESIGNERS have cared about web performance since the profession’s earliest days. When I started, we saved user bandwidth by employing GIF images that had the fewest possible colors—with no dithering, when possible, and by using actual web text instead of pictures of web text. (Kids, ask your parents about life before CSS enabled, type designers created formats for, browsers finally supported, and Typekit quickly popularized web fonts.)

Later, we learned to optimize JPEGs and blur their backgrounds: the blurrier large swathes of a JPEG image can be, the lower the bandwidth requirements for the image. We found the optimally performant size for repeating background tiles (32 x 32 and 64 x 64 were pretty good) and abandoned experiments like single-pixel-wide backgrounds, which seemed like a good idea but slowed browsers, servers, and computers to a crawl.

We developed other tricks, too. Like, when we discovered that GIF images optimized better if they possessed repeating patterns of diagonal lines, we worked diagonal background images into a design trend. It was the trend that preceded drop shadows, the wicked worn look, and skeuomorpic facades, which were themselves a retro recurrence of one of the earliest styles of commercial web design; that trend, which was always on the heavy side, performance-wise, eventually gave way to a far more performant grid-driven minimalism, which hearkened back to classic 1940s Swiss graphic design, but which our industry (sometimes with little knowledge of design history) called “flat design” and justified as being “born digital” despite its true origins going back to pixels, protractors, and a love of Greek mathematics.

All of this nostalgia is prelude to making the obvious comment that web design today is far more complex than it was in those golden years of experimentation; and because it is so much more complex, front-end performance is also far more complicated. You didn’t need an engineering degree to run DeBabelizer and remove needless elements from your markup, but, boy, does front-end design today feel more and more like serious coding.

All of which is to say, if you’re a front-end designer/developer, you should probably read and bookmark Nate Berkopec’s “Ludicrously Fast Page Loads – A Guide for Full-Stack Devs.” While you’re at it, save it to Pocket, and as a PDF you can read on your tablet.

I cannot verify every detail Nate provides, but it is all in line with recommendations I’ve heard over and over at top conferences, and read in articles and books by such performance mavens as Jake Archibald, Lara Hogan, Scott Jehl, and Yesenia Perez-Cruz.

You should also pick up these great books on performance:

(It’s not why I wrote this post, but if you order Scott’s book today, you can save 10% when you enter discount code ABAHARVEST at checkout.)

Even the most complex site should work in any device that reads HTML. It should work if stylesheets fail to load or the device doesn’t recognize CSS. It should work if JavaScript fails to load or the device doesn’t recognize JavaScript. The principles of standards-based design will never change, no matter how complex our web becomes. And as it becomes more complex (and, arguably, much richer), it behooves us to squeeze every byte of performance we can.

Websites can never be too rich or too thin.

Categories
Bandwidth CSS Design Performance webfonts webtype

@font-face and Web Performance

Some time in 2009, Firefox and Opera began shipping @font-face support with the former behavior: text would render with fallback fonts until downloadable font resources became available. But this choice frustrated many users (see the Firefox bug report) and was quickly dubbed FOUT, the Flash of Unstyled Text . Articles were written about fighting the @font-face FOUT. It wasn’t long before most browsers were hiding text while fonts downloaded. Unfortunately, the main issue with @font-face now is what many wanted to avoid years ago: the FOIT, or Flash of Invisible Text.

Source: The @font-face dilemma | Viget

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
A List Apart Bandwidth Performance

A byte saved is a follower earned: Web Performance Then And Now

A List Apart wreathFIFTEEN years ago this month, a plucky ALA staffer wrote “Much Ado About 5K,” an article on a contest created by Stewart Butterfield that challenged web designers and developers to build a complete website using less than five kilobytes of images and code.

As one group of modern web makers embraces mobile-first design and performance budgets, while another (the majority) worships at the altar of bigger, fatter, and slower, the 5K contest reminds us that a byte saved is a follower earned.

More in 15 Years Ago in ALA: Much Ado About 5K.