Jeffrey Zeldman's Blog, page 27

All Websites Look The Same

When was the last time you saw a website that didn’t have a huge image fitting to the screen with some giant text overlaid on it? … Design agencies are guilty too. [They] don’t need to use WordPress themes to create their websites. They don’t need to worry about technical capabilities and they are their own client when it comes to building their own website. They should be the very ones pushing things and taking a chance on something new.

Source: All Websites Look The Same – NoVolume, Web Design Blog

The post All Websites Look The Same appeared first on Zeldman on Web & Interaction Design.

Inclusion and Diversity at Slack

While 45% of all people managers at Slack are women, it’s noteworthy (and not shown above) that fully 41% of all people working at Slack have a woman as their manager. This means that 41% of our people report to a woman who helps set their priorities, measure their performance, mentor them in their work, and who make recommendations that will impact their compensation and career growth.

Source: Inclusion and Diversity at Slack

The post Inclusion and Diversity at Slack appeared first on Zeldman on Web & Interaction Design.

“Adaptive UI encourages us to be strategic.”

[M]ost things simply respond automatically, like content width responding to text size changes; some things need to be modified like the Profile header, which would take up half the screen on a large device if we didn’t modify the layout; only a few things need to be rethought, like Direct Messages, where the list of conversations can sit side-by-side with the conversations when you have a wide enough screen.

Mike Davidson on Building a more unified Twitter for iOS

The post “Adaptive UI encourages us to be strategic.” appeared first on Zeldman on Web & Interaction Design.

Happy birthday, Maurice

MY DAD is 88 today.

The post Happy birthday, Maurice appeared first on Zeldman on Web & Interaction Design.

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 on the web—and how fostering awareness and refining our processes can start to change that.

The post Toward a more inclusive web form appeared first on Zeldman on Web & Interaction Design.

Designing Safer Web Animation For Motion Sensitivity

For millions of people with vertigo and inner ear problems, large-scale web animations can trigger nausea, migraines, and dizziness. To make websites accessible for everyone, we don’t need to eliminate animation; we need to apply it more thoughtfully. Val Head walks us through some of the challenges posed by vestibular disorders and provides guidelines for designing with motion sensitivity in mind.

Designing Safer Web Animation For Motion Sensitivity by Val Head in Issue № 428 of A List Apart, for people who make websites.

The post Designing Safer Web Animation For Motion Sensitivity appeared first on Zeldman on Web & Interaction Design.

Front-end devs, An Event Apart is hiring.

AN EVENT APART, the design conference for people who make websites, seeks a freelance, part-time, front-end developer to work with our web designer, creative director, and project manager on ongoing design and UX improvements to our site at aneventapart.com.

You have a mastery of HTML, CSS (including Flexbox), and JavaScript. You’re a thinker who cares about good user experience and knows that the smallest design details matter. Progressive enhancement is your bread; mobile-first responsive design is your butter. Sweating web performance details is your idea of Saturday night; arguing the semantics of blockquote, your idea of Heaven.

For details, and to apply, see our listing on weworkremotely.com.

The post Front-end devs, An Event Apart is hiring. appeared first on Zeldman on Web & Interaction Design.

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

EVERY TIME I hear a brilliant 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:

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

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

The post You’re welcome: cutting the mustard then and now. appeared first on Zeldman on Web & Interaction Design.

“You’re Now Free to Complain About the Wi-Fi”

LOUIS C.K.’s 2008 viral rant on Conan O’Brien be damned. Seven years later, in-flight Wi-Fi is still maddeningly slow, expensive, and unreliable.

Bloomberg: Why Gogo’s Infuriatingly Expensive, Slow Internet Still Owns the Skies

The post “You’re Now Free to Complain About the Wi-Fi” appeared first on Zeldman on Web & Interaction Design.

Reframing Design

ISSUE № 426 of A List Apart reframes the design process:

The Language of Modular Design

by Alla Kholmatova

Goodbye, pages; hello, systems! When we break things down into atomic units, design elements become more scalable and replaceable, easier to test, and quicker to assemble. Alla Kholmatova emphasizes that a shared vocabulary should be the jumping-off point for teams who want to adopt a modular design approach. Let’s start with language, not interfaces.

Sharing Our Work: Testing and Feedback in Design

by Jessica Harllee

Showing your in-progress designs can be scary, but there’s no better way to keep your product in line with your users’ needs. Research and testing aren’t just boxes to be checked off; they’re methodologies to be integrated into the entire design process—and the more, and the more diverse, the merrier. Jessica Harllee explains how Etsy shares their work with users every step of the way—and the benefits (and surprises) that follow.

The post Reframing Design appeared first on Zeldman on Web & Interaction Desgin.