OR 

Web Typography: Numerals

A note from the editors: We‘re pleased to share an excerpt from Chapter 2 of Richard Rutter‘s new book, Web Typography.When it comes to numbers we have just ten digits. Throw in a comma and a period and we‘ve got grand total of twelve characters. You might not think that would present much of a challenge to a typographer, but to a professional typesetter (that‘s you if you‘re a designer) numerals require far more nua

favicon of http://alistapart.com

The Best Request Is No Request, Revisited

Over the last decade, web performance optimization has been controlled by one indisputable guideline: the best request is no request. A very humble rule, easy to interpret. Every network call for a resource eliminated improves performance. Every src attribute spared, every link element dropped. But everything has changed now that HTTP/2 is available, hasn‘t it? Designed for the modern web, HTTP/2 is more efficient in responding to a larger

favicon of http://alistapart.com

Why Mutation Can Be Scary

A note from the editors: This article contain sample lessons from Learn JavaScript, a course that helps you learn JavaScript to build real-world components from scratch.To mutate means to change in form or nature. Something that‘s mutable can be changed, while something that‘s immutable cannot be changed. To understand mutation, think of the X-Men. In X-Men, people can suddenly gain powers. The problem is, you don‘t know when th

favicon of http://alistapart.com

Planning for Accessibility

A note from the editors: We‘re pleased to share an excerpt from Chapter 3 (‘Planning for Accessibility") of Laura Kalbag‘s new book, Accessibility for Everyone, available now from A Book Apart.Incorporating accessibility from the beginning is almost always easier, more effective, and less expensive than making accessibility improvements as a separate project. In fact, building accessibility into your project and processes has a

favicon of http://alistapart.com

Faux Grid Tracks

A little while back, there was a question posted to css-discuss: Is it possible to style the rows and columns of a [CSS] grid-the grid itself? I have an upcoming layout that uses what looks like a tic-tac-toe board-complete with the vertical and horizontal lines of said tic-tac-toe board-with text/icon in each grid cell. This is a question I expect to come up repeatedly, as more and more people start to explore Grid layout. The short answer

favicon of http://alistapart.com

What the Failure of New Coke Can Teach Us About User Research And Design

In the late 1970s, Pepsi was running behind Coca-Cola in the competition to be the leading cola. But then Pepsi discovered that in blind taste tests, people actually preferred the sweeter taste of Pepsi. To spread the word, Pepsi ran a famous advertising campaign, called the Pepsi Challenge, which showed people tasting the two brands of cola while not knowing which was which. They chose Pepsi every time. As Pepsi steadily gained market share in

favicon of http://alistapart.com

Feedback That Gives Focus

I have harbored a lifelong dislike of feedback. I didn‘t like it in sixth grade when a kid on the bus told me my brand new sneakers were ‘too bright.‘ And I didn‘t like it when a senior executive heard my pitch for a digital project and said, ‘I hate this idea.‘ Turns out my sneakers were pretty bright, and my pitch wasn‘t the best idea. Still, those experiences and many others like them didn‘t help

favicon of http://alistapart.com

My Grandfather‘s Travel Logs and Other Repetitive Tasks

My grandfather, James, was a meticulous recordkeeper. He kept handwritten journals detailing everything from his doctor visits to the daily fluctuations of stocks he owned. I only discovered this part of his life seven years after his death, when my family‘s basement flooded on Christmas Eve in 2011 and we found his journals while cleaning up the damage. His travel records impressed me the most. He documented every trip he ever took, includ

favicon of http://alistapart.com

Mental Illness in the Web Industry

The picture of the tortured artist has endured for centuries: creative geniuses who struggle with their metaphorical demons and don‘t relate to life the same way as most people. Today, we know some of this can be attributed to mental illness: depression, anxiety, bipolar disorder, and many others. We have modern stories about this and plenty of anecdotal information that fuels the popular belief in a link between creativity and mental illne

favicon of http://alistapart.com

Coding with Clarity

Working code isn‘t necessarily good code. Your code also needs to be easy to read, understand, and modify. It needs clarity, and to achieve that, it has to be organized well, with careful planning and proper separation of ideas taking place before you even open your code editor. Coding for clarity is something that separates the great developers from the merely good, and there are a few basic principles that can set you on that path. Note:

favicon of http://alistapart.com

Ten Extras for Great API Documentation

If you manage to create amazing API documentation and ensure that developers have a positive experience implementing your API, they will sing the praises of your product. Continuously improving your API documentation is an investment, but it can have a huge impact. Great documentation builds trust, differentiates you from your competition, and provides marketing value. I‘ve shared some best practices for creating good API documentation in

favicon of http://alistapart.com

The Story of CSS Grid, from Its Creators

A note from the editors: We want to thank the Microsoft Edge team for sharing transcripts of the interviews they conducted with many of the brilliant people who have contributed to the development of CSS Grid. Those transcripts proved invaluable in compiling this history. You can watch the short video they produced from those interviews, Creating CSS Grid, on Channel 9.On October 17th, Microsoft‘s Edge browser shipped its implementation of

favicon of http://alistapart.com

Web Typography: Designing Tables to be Read, Not Looked At

A note from the editors: We‘re pleased to share an excerpt from Chapter 2 of Richard Rutter‘s new book, Web Typography.Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader. Then comes along a table with the temptation to get creative, and all thoughts of the reader go out of the window. And yet t

favicon of http://alistapart.com

How the Sausage Gets Made: The Hidden Work of Content

I won an Emmy for keeping a website free of dick pics. Officially, my award certificate says I was on a team that won a 2014 Emmy for Interactive Media, Social TV Experience. The category ‘Social TV Experience‘ sounds far classier than my true contribution to the project. The award-winning Live From Space site served as a second-screen experience for a National Geographic Channel show of the same name. The show Live From Space cover

favicon of http://alistapart.com

No More FAQs: Create Purposeful Information for a More Effective User Experience

It‘s normal for your website users to have recurring questions and need quick access to specific information to complete whatever it is they came looking for. Many companies still opt for the ubiquitous FAQ (frequently asked/anticipated questions) format to address some or even all information needs. But FAQs often miss the mark because people don‘t realize that creating effective user information-even when using the apparently simpl

favicon of http://alistapart.com

Working with External User Researchers: Part I

You‘ve got an idea or perhaps some rough sketches, or you have a fully formed product nearing launch. Or maybe you‘ve launched it already. Regardless of where you are in the product lifecycle, you know you need to get input from users. You have a few sound options to get this input: use a full-time user researcher or contract out the work (or maybe a combination of both). Between the three of us, we‘ve run a user research agenc

favicon of http://alistapart.com

The Right Way to Select Technology, An Excerpt

A note from the editors: We‘re pleased to share an excerpt from Chapter 4 of Tony Byrne and Jarrod Gingras‘s new book, The Right Way to Select Technology, available now from Rosenfeld Media.After establishing a solid business case, enterprises will typically turn to assembling the oft-dreaded ‘requirements document‘-or more accurately, a set of documents, spreadsheets, and diagrams that compose a multiheaded requirements p

favicon of http://alistapart.com

The New CSS Layout, An Excerpt

A note from the editors: We‘re pleased to share an excerpt from Chapter 3 (‘The New Layout‘) of Rachel Andrew‘s new book, The New CSS Layout, available now from A Book Apart.As we have seen, flexbox wasn‘t designed for grid layouts-but this is where our newest specification is most at home. CSS Grid Layout does exactly what its name suggests: it enables the creation of grid layouts in CSS. This is two-dimensional lay

favicon of http://alistapart.com

Discovery on a Budget: Part I

If you crack open any design textbook, you‘ll see some depiction of the design cycle: discover, ideate, create, evaluate, and repeat. Whenever we bring on a new client or start working on a new feature, we start at the top of the wheel with discover (or discovery). It is the time in the project when we define what problem we are trying to solve and what our first approach at solving it should be. Ye olde design cycle We commonly talk

favicon of http://alistapart.com