OR 

Responsible JavaScript: Part II

You and the rest of the dev team lobbied enthusiastically for a total re-architecture of the company‘s aging website. Your pleas were heard by management-even up to the C-suite-who gave the green light. Elated, you and the team started working with the design, copy, and IA teams. Before long, you were banging out new code. It started out innocently enough with an npm install here and an npm install there. Before you knew it, though, you

favicon of http://alistapart.com

Resilient Management, An Excerpt

In Tuckman‘s Stages of Group Development, the Storming stage happens as a group begins to figure out how to work together. Previously, each person had been doing their own thing as individuals, so necessarily a few things need to be ironed out: how to collaborate, how to hit goals, how to determine priorities. Of course there may be some friction here! But even if your team doesn‘t noticeably demonstrate this kind of internal Sto

favicon of http://alistapart.com

Braces to Pixels

Doesn‘t CSS seem like magic? Well, in this third installment of ‘URL to Interactive‘ we‘ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we‘ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of insert your favorite drink‘s name here, and let‘s get going. Parsing Similar to what w

favicon of http://alistapart.com

var to JIT

In our previous article we described how the browser uses CSS to render beautiful pixels to the user‘s screen. Although modern CSS can (and should!) be used to create highly interactive user experiences, for the last mile of interactivity, we need to dynamically update the HTML document. For that, we‘re going to need JavaScript. Bundle to bytecode For a modern web application, the JavaScript that the browser first sees will typicall

favicon of http://alistapart.com

Progressive Web Apps: The Case for PWAs

Now that you know what a progressive web app is, you‘re probably wondering if your organization would benefit from one. To determine if it makes sense for your organization, ask yourself two questions: Does your organization have a website? If so, you would probably benefit from a progressive web app. This may sound flippant, but it‘s true: nearly every website should be a progressive web app, because they represent best practices f

favicon of http://alistapart.com

Designing for Interaction Modes

We humans have developed ways of coping with digital interfaces. We have tactics. We accept shortcomings. We make do. But why is it still so hard (on most of the internet) to avoid uphill struggles? Often, for example, a quality reading experience is only fully available via a hack, using Safari‘s reader view or a browser plug-in. I use Instapaper to send articles to my Kindle-a device that‘s devoted to reading mode-because reading

favicon of http://alistapart.com

Taming Data with JavaScript

I love data. I also love JavaScript. Yet, data and client-side JavaScript are often considered mutually exclusive. The industry typically sees data processing and aggregation as a back-end function, while JavaScript is just for displaying the pre-aggregated data. Bandwidth and processing time are seen as huge bottlenecks for dealing with data on the client side. And, for the most part, I agree. But there are situations where processing data in th

favicon of http://alistapart.com

Conversations with Robots: Voice, Smart Agents the Case for Structured Content

In late 2016, Gartner predicted that 30 percent of web browsing sessions would be done without a screen by 2020. Earlier the same year, Comscore had predicted that half of all searches would be voice searches by 2020. Though there‘s recent evidence to suggest that the 2020 picture may be more complicated than these broad-strokes projections imply, we‘re already seeing the impact that voice search, artificial intelligence, and smart so

favicon of http://alistapart.com

UX in the Age of Personalization

If you listened to episode 180 of The Big Web Show, you heard two key themes: 1) personalization is now woven into much of the fabric of our digital technology, and 2) designers need to be much more involved in its creation and deployment. In my previous article we took a broad look at the first topic: the practice of harvesting user data to personalize web content, including the rewards (this website gets me!) and risks (creepy!). In this piece,

favicon of http://alistapart.com

Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need

Kip Williams, professor of psychology sciences at Purdue University, conducted a fascinating experiment called ‘cyberball.‘ In his experiment, a test subject and two other participants played a computer game of catch. At a predetermined time, the test subject was excluded from the game, forcing them to only observe as the clock ran down. The experience showed increases in self-reported levels of anger and sadness, as well as low

favicon of http://alistapart.com

Designing for Conversions

What makes creative successful? Creative work often lives in the land of feeling-we can say we like something, point to how happy the client is, or talk about how delighted users will be, but can‘t objectively measure feelings. Measuring the success of creative work doesn‘t have to stop with feeling. In fact, we can assign it numbers, do math with it, and track improvement to show clients objectively how well our creative is working f

favicon of http://alistapart.com

Semantics to Screen Readers

As a child of the ‘90s, one of my favorite movie quotes is from Harriet the Spy: ‘there are as many ways to live as there are people in this world, and each one deserves a closer look.‘ Likewise, there as many ways to browse the web as there are people online. We each bring unique context to our web experience based on our values, technologies, environments, minds, and bodies. Assistive technologies (ATs), which are hardware a

favicon of http://alistapart.com

Canary in a Coal Mine: How Tech Provides Platforms for Hate

As I write this, the world is sending its thoughts and prayers to our Muslim cousins. The Christchurch act of terrorism has once again reminded the world that white supremacy‘s rise is very real, that its perpetrators are no longer on the fringes of society, but centered in our holiest places of worship. People are begging us to not share videos of the mass murder or the hateful manifesto that the white supremacist terrorist wrote. That&ls

favicon of http://alistapart.com

Responsible JavaScript: Part I

By the numbers,JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that‘s merely what‘stransferred. Like other text-based resources, JavaScript is almost always served compressed-but that might be the only thing we‘re getting consistently right in its delivery. Unfortunately, while reducing resource transfer time is a big part of that whole

favicon of http://alistapart.com

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective

Accessibility can be tricky. There are plenty of conditions to take into consideration, and many technical limitations and weird exceptions that make it quite hard to master for most designers and developers. I never considered myself an accessibilityexpert, but I took great pride in making my projects Web Content Accessibility Guidelines (WCAG) compliantish. They would pass most automated tests, show perfectly in the accessibility tree, and

favicon of http://alistapart.com

Nothing Fails Like Success

A family buys a house they can‘t afford. They can‘t make their monthly mortgage payments, so they borrow money from the Mob. Now they‘re in debt to the bank and the Mob, live in fear of losing their home, and must do whatever their creditors tell them to do. Welcome to the internet, 2019. Buying something you can‘t afford, and borrowing from organizations that don‘t have your (or your customers‘) best in

favicon of http://alistapart.com

Everyday Information Architecture: Auditing for Structure

Just as we need to understand our content before we can recategorize it, we need to understand the system before we try to rebuild it. Enter the structural audit: a review of the site focused solely on its menus, links, flows, and hierarchies. I know you thought we were done with audits back in Chapter 2, but hear me out! Structural audits have an important and singular purpose: to help us build a new sitemap. This isn‘t about recre

favicon of http://alistapart.com

Daily Ethical Design

Suddenly, I realized that the people next to me might be severely impacted by my work. I was having a quick lunch in the airport. A group of flight attendants sat down at the table next to me and started to prepare for their flight. For a while now, our design team had been working on futuristic concepts for the operations control center of these flight attendants‘ airline, pushing ourselves to come up with innovative solutions enabled by

favicon of http://alistapart.com

Trans-inclusive Design

Late one night a few years ago, a panicked professor emailed me: ‘My transgender student‘s legal name is showing on our online discussion board. How can I keep him from being outed to his classmates?‘ Short story: we couldn‘t. The professor created an offline workaround with the student. Years later this problem persists not just in campus systems, but in many systems we use every day. To anyone who‘d call that a

favicon of http://alistapart.com