OR 

Coding with Clarity: Part II

As any developer who works with other developers can attest, if code is unclear, problems occur. In Part I of this series, I went over some principles to improve clarity in our code to prevent problems that can arise from unclear code. As our apps get larger, clarity becomes even more important, and we need to take extra care to ensure that our code is easy to read, understand, and modify or extend. This article discusses some more-advanced princ

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

Order Out of Chaos: Patterns of Organization for Writing on the Job

A few years ago, a former boss of mine emailed me out of the blue and asked for a resource that would help him and his colleagues organize information more effectively. Like a dutiful friend, I sent him links to a few articles and the names of some professional writing books. And I qualified my answer with that dreaded disclaimer: ‘Advice varies widely depending on the situation.‘ Implication: ‘You‘ll just have to figure o

favicon of http://alistapart.com

Make Something Great: Become an Open Source Contributor

My first contribution to Bootstrap was a tiny line of CSS. It was a no-brainer to merge, but the feeling of seeing that bit of code in the project‘s codebase was unreal and addictive. You may think that open source is not for you. After all, it has always been a developer-dominant ecosystem. But code is by no means the only thing a piece of software is made of. Open source is first and foremost about community. Whether you‘re a desig

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

What is Typesetting?

A note from the editors: We‘re pleased to share an excerpt from Chapter 1 of Tim Brown‘s Flexible Typesetting, from A Book Apart.Typesetting is the most important part of typography, because most text is meant to be read, and typesetting involves preparing text for reading. You‘re already great at typesetting. Think about it. You choose good typefaces. You determine font sizes and line spacing. You decide on the margins that su

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

Fixing Variable Scope Issues with ECMAScript6

Variable scope has always been tricky in JavaScript, particularly when compared to more structured languages like C and Java. For years, there wasn‘t much talk about it because we had few options for really changing it. But ECMAScript 6 introduced some new features to help give developers more control of variable scope. Browser support is pretty great and these features are ready to use for most developers today. But which to choose? And wh

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

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

Webmentions: Enabling Better Communication on the Internet

Over 1 million Webmentions will have been sent across the internet since the specification was made a full Recommendation by the W3C-the standards body that guides the direction of the web-in early January 2017. That number is rising rapidly, and in the last few weeks I‘ve seen a growing volume of chatter on social media and the blogosphere about these new ‘mentions‘ and the people implementing them. So what are Webmentions and

favicon of http://alistapart.com

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