OR 

Conversational Semantics

As Alexa, Cortana, Siri, and even customer support chat bots become the norm, we have to start carefully considering not only how our content looks but how it could sound. We can-and should-use HTML and ARIA to make our content structured, sensible, and most importantly, meaningful. Content, confined Most bots and digital assistants work from specially-coded data sets, APIs, and models, but there are more than 4.5 billion pages of content on th

favicon of http://alistapart.com

The Psychology of Design

There are a number of debates about which additional skills designers should learn. Should designers code, write, or understand business? These skills are incredibly valuable but perhaps not essential. However, I would argue that every designer should learn the fundamentals of psychology. As humans, we have an underlying ‘blueprint‘ for how we perceive and process the world around us, and the study of psychology helps us define this b

favicon of http://alistapart.com

The FAQ as Advice Column

Dear A List Apart,I have a problem that may be harming my content strategy career. In my current position, no one likes FAQs except for me. The question-and-answer format is satisfying and efficient. Whenever I mention adding an FAQ section to a website, though, I receive numerous suggestions that I should wean myself off FAQs one question at a time or go cold turkey. Perhaps that is overdoing it, but sometimes I feel like defending FAQs by pen

favicon of http://alistapart.com

Designing for Cognitive Differences

Inclusive design is designing to be inclusive of as many users as possible, considering all aspects of diversity in users. With increased understanding, compassionate discussions around how to design for disabilities are becoming increasingly common in the web industry. But even with this growth, there are misconceptions: accessibility is still frequently thought of as ‘design for blind people‘ when it‘s so much more than that.

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

Web Developer Representation in W3C

During its annual general member meeting on October 19th, the Fronteers board will propose both to become a member of the World Wide Web Consortium (W3C) and to hire Rachel Andrew as our representative in that standards body. What is Fronteers? Why does it want to become a W3C member? And how can you help? Read on; we‘ll start with the second question. Browser vendors have the greatest say As we all know, W3C sets the web standards. In p

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

Responsive Images

I come here not to bury img, but to praise it. Well, mostly. Historically, I like img just fine. It‘s refreshingly uncomplicated, on the surface: it fires off a request for the file in its src attribute, renders the contents of that file, and provides assistive technologies with an alternative narration. It does so quickly, efficiently, and seamlessly. For most of the web‘s life, that‘s all img has ever had to do-and thanks to

favicon of http://alistapart.com

Tags to DOM

In our previous segment, ‘Server to Client,‘ we saw how a URL is requested from a server and learned all about the many conditions and caches that help optimize delivery of the associated resource. Once the browser engine finally gets the resource, it needs to start turning it into a rendered web page. In this segment, we focus primarily on HTML resources, and how the tags of HTML are transformed into the building blocks for what will

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

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

Breaking the Deadlock Between User Experience and Developer Experience

In early 2013, less than 14% of all web traffic came from mobile devices; today, that number has grown to 53%. In other parts of the world the difference is even more staggering: in African countries, more than 64% of web traffic is from mobile devices; in India, nearly 78% of traffic is mobile. This is a big deal, because all 248 million new internet users in 2017 lived outside the United States. And while internet connections are getting faste

favicon of http://alistapart.com

Server to Client

Before anything can happen in a browser, it must first know where to go. There are multiple ways to get somewhere: entering a URL in the address bar, clicking (or tapping) on a link on a page or in another app, or clicking on a favorite. No matter the case, these all result in what‘s called a navigation. A navigation is the very first step in any web interaction, as it kicks off a chain reaction of events that culminates in a web page being

favicon of http://alistapart.com

From URL to Interactive

Imagine, if you will, that you‘re behind the wheel of a gorgeous 1957 Chevy Bel Air convertible, making your way across the desert on a wide open highway. The sun is setting, so you‘ve got the top down, naturally. The breeze caresses your cheek like a warm hand as your nose catches a faint whiff of What was that? The car lurches and chokes before losing all power. You coast, ever more slowly, to a stop. There‘s steam rising fr

favicon of http://alistapart.com

Progressive Web Apps: The Case for PWAs

A note from the editors: We‘re pleased to share an excerpt from Chapter 2 of Jason Grigsby‘s Progressive Web Apps, from A Book Apart.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

favicon of http://alistapart.com

Design with Difficult Data

You‘ve been asked to design a profile screen for a mobile or web app. It will need to include an avatar, a name, a job title, and a location. You fire up Sketch or Figma. Maybe you pull out your drafting pencil or head straight to markup and CSS. What‘s your go-to fake name? Regardless of your choice in tools, you‘re probably going to end up with some placeholder data. Are you the type that uses your own name, or do you conjur

favicon of http://alistapart.com

Writing for Designers

A note from the editors: We‘re pleased to share an excerpt from the Introduction of Scott Kubie‘s Writing for Designers, from A Book Apart.Shit. The writing. We forgot about the writing. The thing, the design thingit needs words! Oh man, so many words. I thought somebodywasn‘t the client going toshit. We‘ve got to get the writing done. We‘ve got to get the writing done! How are we going to get the writing done?! Don

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

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