A List Apart

A List Apart

Since 1998, the design magazine for people who make websites.

A List Apart

A List Apart

Do You Need to Localize Your Website?

Global markets give you access to new customers. All you need to do is inform potential buyers about your product or service. 

Your website is a good place to introduce your product or service outside your locale. Localizing your web content sounds like the right way to reach out to the global market. Localization will bridge the language barriers, or the wider scope of differing cultures. 

Before we move on further with the discussion, let’s focus on the definition of “localization.” 

What is localization?

According to the Cambridge Dictionary, localization (as a marketing term) is “the process of making a product or service more suitable for a particular country, area, etc.,” while translation is “something that is translated, or the process of translating something, from one language to another.” 

Read the article (5 min read)
A List Apart

A List Apart

Human-Readable JavaScript: A Tale of Two Experts

Everyone wants to be an expert. But what does that even mean? Over the years I’ve seen two types of people who are referred to as “experts.” Expert 1 is someone who knows every tool in the language and makes sure to use every bit of it, whether it helps or not. Expert 2 also knows every piece of syntax, but they’re pickier about what they employ to solve problems, considering a number of factors, both code-related and not. 

Can you take a guess at which expert we want working on our team? If you said Expert 2, you’d be right. They’re a developer focused on delivering readable code—lines of JavaScript others can understand and maintain. Someone who can make the complex simple. But “readable” is rarely definitive—in fact, it’s largely based on the eyes of the beholder. So where does that leave us? What should experts aim for when writing readable code? Are there clear right and wrong choices? The answer is, it depends.

Read the article (4 min read)
A List Apart

A List Apart

Now THAT’S What I Call Service Worker!

The Service Worker API is the Dremel of the web platform. It offers incredibly broad utility while also yielding resiliency and better performance. If you’ve not used Service Worker yet—and you couldn’t be blamed if so, as it hasn’t seen wide adoption as of 2020—it goes something like this:

  1. On the initial visit to a website, the browser registers what amounts to a client-side proxy powered by a comparably paltry amount of JavaScript that—like a Web Worker—runs on its own thread.
  2. After the Service Worker’s registration, you can intercept requests and decide how to respond to them in the Service Worker’s fetch() event.

What you decide to do with requests you intercept is a) your call and b) depends on your website. You can rewrite requests, precache static assets during install, provide offline functionality, and—as will be our eventual focus—deliver smaller HTML payloads and better performance for repeat visitors.

Read the article (9 min read)
A List Apart

A List Apart

Keeping Your Design Mind New and Fresh

“Only a fool knows everything.”

African Proverb

Since March 2020, most of us have been working from home, and the days blend into each other and look the same. This is not the first time I have experienced this type of feeling. 

My commute — New York to New Jersey — is what folks in my area call the reverse commute.While going to the office, my days began to look the same: riding the subway to a bus to a shuttle to get to my job. Have you ever arrived at a destination and not even realized how you got there? This is how I began to experience the world everyday. I stopped paying attention to my surroundings.

Because I worked a lot, the only time I would take off was for the holidays. During this time, I was a consultant and was coming to the end of an existing contract. For six years straight, I did this, until I decided to take six weeks off work to travel to Europe and visit places I had not seen before.

Read the article (2 min read)
A List Apart

A List Apart

How to Get a Dysfunctional Team Back on Track

Maybe you’ve been part of a team that you’ve seen slowly slide into a rut. You didn’t notice it happen, but you’re now not shipping anything, no one’s talking to each other, and the management’s Eye of Sauron has cast its gaze upon you.

Maybe you’ve just joined a team that’s in the doldrums.

Maybe the people who used to oil the wheels that kept everyone together have moved on and you’re having to face facts—you all hate each other.

However you’ve ended up in this situation, the fact is that you’re now here and it’s up to someone to do something about it. And that person might be you.

Read the article (6 min read)
A List Apart

A List Apart

The Future of Web Software Is HTML-over-WebSockets

The future of web-based software architectures is already taking form, and this time it’s server-rendered (again). Papa’s got a brand new bag: HTML-over-WebSockets and broadcast everything all the time.

The dual approach of marrying a Single Page App with an API service has left many dev teams mired in endless JSON wrangling and state discrepancy bugs across two layers. This costs dev time, slows release cycles, and saps the bandwidth for innovation.

But a new WebSockets-driven approach is catching web developers’ attention. One that reaffirms the promises of classic server-rendered frameworks: fast prototyping, server-side state management, solid rendering performance, rapid feature development, and straightforward SEO. One that enables multi-user collaboration and reactive, responsive designs without building two separate apps. The end result is a single-repo application that feels to users just as responsive as a client-side all-JavaScript affair, but with straightforward templating and far fewer loading spinners, and no state misalignments, since state only lives in one place. All of this sets us up for a considerably easier (and faster!) development path. 

Read the article (7 min read)
A List Apart

A List Apart

Designing Inclusive Content Models

In the 1920s, Robert Moses designed a system of parkways surrounding New York City. His designs, which included overpasses too low for public buses, have become an often-cited example of exclusionary design and are argued by biographer Robert A. Caro to represent a purposeful barrier between the city’s Black and Puerto Rican residents and nearby beaches. 

Regardless of the details of Moses’s parkway project, it’s a particularly memorable reminder of the political power of design and the ways that choices can exclude various groups based on abilities and resources. The growing interest in inclusive design highlights questions of who can participate, and in relation to the web, this has often meant a focus on accessibility and user experience, as well as on questions related to team diversity and governance. 

Read the article (5 min read)
A List Apart

A List Apart

The Never-Ending Job of Selling Design Systems

I’m willing to bet that you probably didn’t start your web career because you wanted to be a politician or a salesperson. But here’s the cold, hard truth, friend: if you want to work on design systems, you don’t have a choice. Someone has to pay for your time, and that means someone has to sell what you do to an audience that speaks value in an entirely different language. 

It’s not exactly easy to connect the benefits of a design system directly to revenue. With an ecomm site, you can add a feature and measure the impact. With other conversion-based digital experiences, if your work is good, your customers will convert more. But because a design system is (usually) an internal tool, it’s just harder to connect those dots. 

Read the article (7 min read)
A List Apart

A List Apart

Navigating the Awkward: A Framework for Design Conversations

We’ve all been there. A client or coworker shows us this amazing thing they (and maybe their entire team) have worked on for hours or weeks. They are so proud of it. It’s new or maybe it just looks new. They may or may not ask you what you think—but you’re there to experience it. And your brain quietly screams.

As an experienced designer, you often have an intuitive reaction and can quickly spot bad designs; they may be visually incongruent, poorly structured, confusing, lack social awareness, or look like they are trying too hard.

If your initial response is so negative that it slips through into your expression or voice or body language, it can completely sabotage any possibility of buy-in. And, far more seriously, it can ruin the relationship of trust and collaboration you’re building with that person. 

Read the article (7 min read)
A List Apart

A List Apart

Webwaste

In 1994, there were 3,000 websites. In 2019, there were estimated to be 1.7 billion, almost one website for every three people on the planet. Not only has the number of websites exploded, the weight of each page has also skyrocketed. Between 2003 and 2019, the average webpage weight grew from about 100 KB to about 4 MB. The results?

“In our analysis of 5.2 million pages,” Brian Dean reported for Backlinko in October 2019, “the average time it takes to fully load a webpage is 10.3 seconds on desktop and 27.3 seconds on mobile.” In 2013, Radware calculated that the average load time for a webpage on mobile was 4.3 seconds.

Read the article (5 min read)
A List Apart

A List Apart

Connecting the Dots

Two plans: one for design, one for culture.

What I’ve found is that the DNA between both dynamics must be inextricable from one another. Creating with compassion in an environment fueled by compassion means we never lose sight of what it’s all about: people. Beyond functioning in this manner because “it’s the right thing to do,” quality of work, loyalty internally (team) and externally (users), and product innovation are all benefits to reap.

Earlier we talked through the concept of “simplicity” and its application to creation and environment. Now, let’s revisit a few other examples of healthy benchmarks from a creative culture as we’ve discussed in this book:

  • Slowing down / pausing with intent
  • Everyone has a seat at the table
  • The New Day One

In taking a focused look at these facets, their correlation to HCDis readily apparent:

Culture: Slowing down / pausing with intent
Design: Discovery / observation

Read the article (5 min read)
A List Apart

A List Apart

Mr. Roboto: Connecting with Technology

People don’t always need another human being to experience a sense of connection. The deep emotional bonds many people have with their pets proves this. (So might the popularity of the Pet Rock in the 1970s but that’s just speculation.) Even Link in The Legend of Zelda had an inanimate companion: his trusty sword (see Figure 9.1).

A screen from The Legend of Zelda where Link receives his sword from an old man saying 'It's Dangerous To Go Alone! Take This.'
Fig 9.1 Even the company of a wooden sword is better than venturing into Hyrule alone.
Read the article (6 min read)
A List Apart

A List Apart

Building the Woke Web: Web Accessibility, Inclusion & Social Justice

What would your life be like without the internet? Not if it didn’t exist at all, but if you were locked out of it? Would your days be different? Unrecognizable, even? Keeping your answers to that in mind, do you think access to the internet is a human right? Do we need to be able to access it to fully participate in modern society? To answer “yes” to these questions would have been unthinkable 20 years ago.

Living without internet

Globally, over 40% of people still do not have access to the internet. That lack of access and the issues it creates have helped motivate digital equity initiatives like Tech Goes Home and the Good Things Foundation.

Read the article (6 min read)
A List Apart

A List Apart

Color Craft & Counterpoint: A Designer’s Life with Color Vision Deficiency

So, what is it like to be color blind and also work in the web design and development industry? I'll answer that question throughout this article, but it's something that's always factored into my thoughts, given my passion for design and now my career. I wonder if having “normal” vision would have made me a better artist growing up. Would it make me better at my job now? Would I have pursued a more design-oriented career, as opposed to one that’s more dev-focused? These are just some of the things that pop into my head.

Read the article (9 min read)
A List Apart

A List Apart

Figure It Out

Color is, without a doubt, the visual element most often misunderstood and misused.

As mentioned earlier, when designing visual representations, color is often the first visual encoding that people use. It’s also quite limited to about a dozen, distinguishable colors. It’s a potent visual element, but one fraught with accessibility and perceptual problems. A general rule of thumb: Save color for things you want to draw people’s attention to. Start with grayscale representations. Add in color only later, where it might be really, really useful. That’s it. We can move along.

Except…

Read the article (7 min read)
A List Apart

A List Apart

Jobs To Be Done

In this chapter, you’ll learn about these plays:

  • How to create a jobs-driven roadmap
  • Using job stories to solve specific design problems
  • How to architect the structure of a solution
  • Testing assumptions directed by JTBD

A software company I once worked for held what were called “hackweeks” once a quarter. This was a time for developers to work on “whatever they wanted,” as it was framed. Give engineers time to play around with technology, and they’re bound to find the next innovation, or so the theory went.

Hackweek was a big deal for us. Dozens of people organized it, and every developer in the company stopped work to contribute to the effort. It was costly, but we were committed to hackweek. After all, new software offerings come from new development, right?

Read the article (10 min read)
A List Apart

A List Apart

Usability Testing for Voice Content

It’s an important time to be in voice design. Many of us are turning to voice assistants in these times, whether for comfort, recreation, or staying informed. As the interest in interfaces driven by voice continues to reach new heights around the world, so too will users’ expectations and the best practices that guide their design.

Voice interfaces (also known as voice user interfaces or VUIs) have been reinventing how we approach, evaluate, and interact with user interfaces. The impact of conscious efforts to reduce close contact between people will continue to increase users’ expectations for the availability of a voice component on all devices, whether that entails a microphone icon indicating voice-enabled search or a full-fledged voice assistant waiting patiently in the wings for an invocation.

Read the article (8 min read)
A List Apart

A List Apart

Cross-Cultural Design

When I first traveled to Japan as an exchange student in 2001, I lived in northern Kyoto, a block from the Kitayama subway station.

My first time using the train to get to my university was almost a disaster, even though it was only two subway stops away. I thought I had everything I needed to successfully make the trip. I double- and triple-checked that I had the correct change in one pocket and a computer printout of where I was supposed to go in the other. I was able to make it down into the station, but then I just stood at a ticket machine, dumbfounded, looking at all the flashing lights, buttons, and maps above my head (Fig 5.1). Everything was so impenetrable. I was overwhelmed by the architecture, the sounds, the signs, and the language.

Read the article (6 min read)
A List Apart

A List Apart

Standards for Writing Accessibly

Writing to meet WCAG2 standards can be a challenge, but it’s worthwhile. Albert Einstein, the archetypical genius and physicist, once said, “Any fool can make things bigger, more complex, and more violent. It takes a touch of genius—and a lot of courage—to move in the opposite direction.”

Hopefully, this entire book will help you better write for accessibility. So far, you’ve learned:

  • Why clarity is important
  • How to structure messages for error states and stress cases
  • How to test the effectiveness of the words you write

All that should help your writing be better for screen readers, give additional context to users who may need it, and be easier to parse.

But there are a few specific points that you may not otherwise think about, even after reading these pages.

Read the article (3 min read)
A List Apart

A List Apart

Making Room for Variation

Making a brand feel unified, cohesive, and harmonious while also leaving room for experimentation is a tough balancing act. It’s one of the most challenging aspects of a design system.

Graphic designer and Pentagram partner Paula Scher faced this challenge with the visual identity for the Public Theater in New York. As she explained in a talk at Beyond Tellerrand:

I began to realize that if you made everything the same, it was boring after the first year. If you changed it individually for each play, the theater lost recognizability. The thing to do, which I totally got for the first time after working there at this point for 17 years, is what they needed to have were seasons.

Read the article (6 min read)