# A List Apart: The Full Feed Articles for people who make web sites. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Good designers, bad websites: a proposal DevFeed: [Good designers, bad websites: a proposal]() Original publisher: [Read original article]() Author: by Alan Dalton Published: 2026-04-23T12:57:21Z Content type: opinion Language: en Sources: [A List Apart: The Full Feed]() Topics: [User interface design]() Tags: [accessibility](), [accessibility-community-user-experience-user-research-workflow-tools](), [community](), [design](), [usability](), [user-experience](), [user-research](), [workflow-tools]() ### AI overview An opinion article arguing that accessibility must be central to website design. It discusses how designs can exclude people with different sensory, cognitive, and mobility needs, and proposes using usability heuristics to help designers recognize accessibility issues. ### Source excerpt I want to discuss accessibility because it is the most important thing for making websites. Other A List Apart articles give you innovation and insight. This article will give you homework. These are just my personal views, but they're pretty good. I want to start off with a couple of statements, and you will agree: Designers are good people. I have never heard a designer say, "I don't care if somebody can't read this text", "Not my fault if somebody can't use this device", or "Who cares if this is confusing?" Some designs exclude people. You have seen people unable to read the text on a website or app that somebody designed. You've seen people unable to use a physical device that somebody has designed. You've seen people utterly bamboozled while trying to use a service that somebody designed. So what? The first question is, "Is this life-or-death stuff?" The answer is, "Yes." In my favorite essay, This Is All There Is, Aral Balkan makes the point that pretty much everything that we design can affect life events and death events. Aral gives the example of how even a straightforward bus timetable app can affect life and death events, if we design it badly: somebody might miss a life event, such as their daughter's fifth birthday party; or somebody might miss a death event, such as the chance to say goodbye to a dying grandmother. The next--and frustrating--question is, "Why do some designs still exclude people?" After all, we know that: not everybody can see perfectly; not everybody can hear perfectly; not everybody thinks the same way; and not everybody moves the same way. I think the answer is that there's too much to recall. Consider, if you will, the wide variety of topics that A List Apart articles cover. Designers are expected to remember all of that guidance, plus all of the accessibility guidance, plus so much more. It is too much. Recognizing accessibility issues while designing I'd like to point toward one possible solution, starting from Jakob Nielsen's 10 U ## Design for Amiability: Lessons from Vienna DevFeed: [Design for Amiability: Lessons from Vienna]() Original publisher: [Read original article]() Author: by Mark Bernstein Published: 2025-10-15T15:35:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [Web](), [Computer science](), [Math and Logic]() Tags: [community](), [community-industry-state-of-the-web-web-strategy](), [design](), [history](), [industry](), [math](), [research](), [state-of-the-web](), [web](), [web-strategy]() ### AI overview The article examines how amiable design can improve web environments and uses the Vienna Circle and the origins of computer science in Vienna as a historical case study. It connects the quality of interaction in research communities with the design of welcoming online spaces. ### Source excerpt Today's web is not always an amiable place. Sites greet you with a popover that demands assent to their cookie policy, and leave you with Taboola ads promising "One Weird Trick!" to cure your ailments. Social media sites are tuned for engagement, and few things are more engaging than a fight. Today it seems that people want to quarrel; I have seen flame wars among birders. These tensions are often at odds with a site's goals. If we are providing support and advice to customers, we don't want those customers to wrangle with each other. If we offer news about the latest research, we want readers to feel at ease; if we promote upcoming marches, we want our core supporters to feel comfortable and we want curious newcomers to feel welcome. In a study for a conference on the History of the Web, I looked to the origins of Computer Science in Vienna (1928-1934) for a case study of the importance of amiability in a research community and the disastrous consequences of its loss. That story has interesting implications for web environments that promote amiable interaction among disparate, difficult (and sometimes disagreeable) people. The Vienna Circle Though people had been thinking about calculating engines and thinking machines from antiquity, Computing really got going in Depression-era Vienna. The people who worked out the theory had no interest in building machines; they wanted to puzzle out the limits of reason in the absence of divine authority. If we could not rely on God or Aristotle to tell us how to think, could we instead build arguments that were self-contained and demonstrably correct? Can we be sure that mathematics is consistent? Are there things that are true but that cannot be expressed in language? The core ideas were worked out in the weekly meetings (Thursdays at 6) of a group remembered as the Vienna Circle. They got together in the office of Professor Moritz Schlick at the University of Vienna to discuss problems in philosophy, math, and language. The i ## Design Dialects: Breaking the Rules, Not the System DevFeed: [Design Dialects: Breaking the Rules, Not the System]() Original publisher: [Read original article]() Author: by Michel Ferreira Published: 2025-09-26T16:48:12Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [Web](), [systems]() Tags: [component](), [design](), [design-design-systems-web-strategy-workflow-tools](), [design-systems](), [systems](), [web](), [web-strategy](), [workflow-tools]() ### AI overview The article argues that design systems should function as living languages rather than rigid component libraries. It introduces design dialects: systematic adaptations that preserve core principles while allowing context-specific patterns, helping teams solve user problems without sacrificing the system's essential grammar. ### Source excerpt "Language is not merely a set of unrelated sounds, clauses, rules, and meanings; it is a totally coherent system bound to context and behavior." -- Kenneth L. Pike The web has accents. So should our design systems. Design Systems as Living Languages Design systems aren't component libraries--they're living languages. Tokens are phonemes, components are words, patterns are phrases, layouts are sentences. The conversations we build with users become the stories our products tell. But here's what we've forgotten: the more fluently a language is spoken, the more accents it can support without losing meaning. English in Scotland differs from English in Sydney, yet both are unmistakably English. The language adapts to context while preserving core meaning. This couldn't be more obvious to me, a Brazilian Portuguese speaker, who learned English with an American accent, and lives in Sydney. Our design systems must work the same way. Rigid adherence to visual rules creates brittle systems that break under contextual pressure. Fluent systems bend without breaking. Consistency becomes a prison The promise of design systems was simple: consistent components would accelerate development and unify experiences. But as systems matured and products grew more complex, that promise has become a prison. Teams file "exception" requests by the hundreds. Products launch with workarounds instead of system components. Designers spend more time defending consistency than solving user problems. Our design systems must learn to speak dialects. A design dialect is a systematic adaptation of a design system that maintains core principles while developing new patterns for specific contexts. Unlike one-off customizations or brand themes, dialects preserve the system's essential grammar while expanding its vocabulary to serve different users, environments, or constraints. When Perfect Consistency Fails At Booking.com, I learned this lesson the hard way. We A/B-tested everything--color, copy, button sh ## From Beta to Bedrock: Build Products that Stick. DevFeed: [From Beta to Bedrock: Build Products that Stick.]() Original publisher: [Read original article]() Author: by Liam Nugent Published: 2025-04-23T18:04:31Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [bedrock](), [Security]() Tags: [bedrock](), [business](), [business-industry-usability-user-experience-user-research-web-strategy](), [development](), [finance](), [industry](), [security](), [usability](), [user-experience](), [user-research](), [web-strategy]() ### AI overview The article argues that financial products should be built around a stable bedrock of clear customer value rather than an accumulation of features. It discusses the risks of feature-first development, the role of a Minimum Viable Product, and the need to resist internal pressures that can produce confusing, bloated experiences. ### Source excerpt As a product builder over too many years to mention, I've lost count of the number of times I've seen promising ideas go from zero to hero in a few weeks, only to fizzle out within months. Financial products, which is the field I work in, are no exception. With people's real hard-earned money on the line, user expectations running high, and a crowded market, it's tempting to throw as many features at the wall as possible and hope something sticks. But this approach is a recipe for disaster. Here's why: The pitfalls of feature-first development When you start building a financial product from the ground up, or are migrating existing customer journeys from paper or telephony channels onto online banking or mobile apps, it's easy to get caught up in the excitement of creating new features. You might think, "If I can just add one more thing that solves this particular user problem, they'll love me!" But what happens when you inevitably hit a roadblock because the narcs (your security team!) don't like it? When a hard-fought feature isn't as popular as you thought, or it breaks due to unforeseen complexity? This is where the concept of Minimum Viable Product (MVP) comes in. Jason Fried's book Getting Real and his podcast Rework often touch on this idea, even if he doesn't always call it that. An MVP is a product that provides just enough value to your users to keep them engaged, but not so much that it becomes overwhelming or difficult to maintain. It sounds like an easy concept but it requires a razor sharp eye, a ruthless edge and having the courage to stick by your opinion because it is easy to be seduced by "the Columbo Effect"... when there's always "just one more thing..." that someone wants to add. The problem with most finance apps, however, is that they often become a reflection of the internal politics of the business rather than an experience solely designed around the customer. This means that the focus is on delivering as many features and functionalities as pos ## User Research Is Storytelling DevFeed: [User Research Is Storytelling]() Original publisher: [Read original article]() Author: by Gerry Duffy Published: 2024-05-30T18:04:43Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [User experience (UX)](), [User Experience]() Tags: [best-practices](), [research](), [user-experience](), [user-experience-user-research](), [user-research](), [ux]() ### AI overview The article presents user research as storytelling. It recommends using a three-act structure--setup, conflict, and resolution--to explain research, engage stakeholders, understand users' problems, and show how research informs design decisions. ### Source excerpt Ever since I was a boy, I've been fascinated with movies. I loved the characters and the excitement--but most of all the stories. I wanted to be an actor. And I believed that I'd get to do the things that Indiana Jones did and go on exciting adventures. I even dreamed up ideas for movies that my friends and I could make and star in. But they never went any further. I did, however, end up working in user experience (UX). Now, I realize that there's an element of theater to UX--I hadn't really considered it before, but user research is storytelling. And to get the most out of user research, you need to tell a good story where you bring stakeholders--the product team and decision makers--along and get them interested in learning more. Think of your favorite movie. More than likely it follows a three-act structure that's commonly seen in storytelling: the setup, the conflict, and the resolution. The first act shows what exists today, and it helps you get to know the characters and the challenges and problems that they face. Act two introduces the conflict, where the action is. Here, problems grow or get worse. And the third and final act is the resolution. This is where the issues are resolved and the characters learn and change. I believe that this structure is also a great way to think about user research, and I think that it can be especially helpful in explaining user research to others. Three-act structure in movies (© 2024 StudioBinder. Image used with permission from StudioBinder.). Use storytelling as a structure to do research It's sad to say, but many have come to see research as being expendable. If budgets or timelines are tight, research tends to be one of the first things to go. Instead of investing in research, some product managers rely on designers or--worse--their own opinion to make the "right" choices for users based on their experience or accepted best practices. That may get teams some of the way, but that approach can so easily miss out on solving users ## To Ignite a Personalization Practice, Run this Prepersonalization Workshop DevFeed: [To Ignite a Personalization Practice, Run this Prepersonalization Workshop]() Original publisher: [Read original article]() Author: by Colin Eagan, Jeffrey MacIntyre Published: 2024-04-16T19:51:34Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [personalization](), [data]() Tags: [content-strategy](), [content-strategy-information-architecture-user-experience](), [guides](), [information-architecture](), [personalization](), [user-experience](), [workshops]() ### AI overview The article introduces prepersonalization as a workshop-based preparation process for teams designing personalization features. It explains how workshops can align stakeholders, prioritize ideas, reduce mistrust, and improve the chances that personalization programs will succeed. ### Source excerpt Picture this. You've joined a squad at your company that's designing new product features with an emphasis on automation or AI. Or your company has just implemented a personalization engine. Either way, you're designing with data. Now what? When it comes to designing for personalization, there are many cautionary tales, no overnight successes, and few guides for the perplexed. Between the fantasy of getting it right and the fear of it going wrong--like when we encounter "persofails" in the vein of a company repeatedly imploring everyday consumers to buy additional toilet seats--the personalization gap is real. It's an especially confounding place to be a digital professional without a map, a compass, or a plan. For those of you venturing into personalization, there's no Lonely Planet and few tour guides because effective personalization is so specific to each organization's talent, technology, and market position. But you can ensure that your team has packed its bags sensibly. Designing for personalization makes for strange bedfellows. A savvy art-installation satire on the challenges of humane design in the era of the algorithm. Credit: Signs of the Times, Scott Kelly and Ben Polkinghome. There's a DIY formula to increase your chances for success. At minimum, you'll defuse your boss's irrational exuberance. Before the party you'll need to effectively prepare. We call it prepersonalization. Behind the music Consider Spotify's DJ feature, which debuted this past year. https://www.youtube.com/watch?v=ok-aNnc0Dko We're used to seeing the polished final result of a personalization feature. Before the year-end award, the making-of backstory, or the behind-the-scenes victory lap, a personalized feature had to be conceived, budgeted, and prioritized. Before any personalization feature goes live in your product or service, it lives amid a backlog of worthy ideas for expressing customer experiences more dynamically. So how do you know where to place your personalization bets? ## The Wax and the Wane of the Web DevFeed: [The Wax and the Wane of the Web]() Original publisher: [Read original article]() Author: by Ste Grainer Published: 2024-02-29T14:45:00Z Content type: opinion Language: en Sources: [A List Apart: The Full Feed]() Topics: [Web Development]() Tags: [browsers](), [css](), [design](), [developers](), [hacks](), [state-of-the-web](), [state-of-the-web-web-strategy](), [web](), [web-standards](), [web-strategy]() ### AI overview A reflective article on the web's recurring shifts in design and development practices. It contrasts early table-based layouts, font tags, spacer GIFs, and CGI scripts with the rise of web standards and broader CSS adoption. ### Source excerpt I offer a single bit of advice to friends and family when they become new parents: When you start to think that you've got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it's time for solid food, potty training, and overnight sleeping. When you figure those out, it's time for preschool and rare naps. The cycle goes on and on. The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I've seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world. How we got here I built my first website in the mid-'90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 "web safe" colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site. The birth of web standards At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers make ## Opportunities for AI in Accessibility DevFeed: [Opportunities for AI in Accessibility]() Original publisher: [Read original article]() Author: by Aaron Gustafson Published: 2024-02-07T14:00:00Z Content type: opinion Language: en Sources: [A List Apart: The Full Feed]() Topics: [Accessibility](), [Artificial Intelligence](), [alt text](), [Computer vision](), [foundation-models]() Tags: [accessibility](), [accessibility-code-content-workflow-tools](), [ai](), [alt-text](), [code](), [computer-vision](), [content](), [foundation-models](), [microsoft](), [workflow-tools]() ### AI overview The article argues that, despite serious risks and limitations, AI could support accessibility when used thoughtfully and inclusively. It focuses on computer-vision systems for generating alt text, noting their difficulty understanding image context and distinguishing meaningful images from decorative ones. The author supports human-in-the-loop workflows in which AI provides an initial suggestion that people can review and improve. ### Source excerpt In reading Joe Dolson's recent piece on the intersection of AI and accessibility, I absolutely appreciated the skepticism that he has for AI in general as well as for the ways that many have been using it. In fact, I'm very skeptical of AI myself, despite my role at Microsoft as an accessibility innovation strategist who helps run the AI for Accessibility grant program. As with any tool, AI can be used in very constructive, inclusive, and accessible ways; and it can also be used in destructive, exclusive, and harmful ones. And there are a ton of uses somewhere in the mediocre middle as well. I'd like you to consider this a "yes... and" piece to complement Joe's post. I'm not trying to refute any of what he's saying but rather provide some visibility to projects and opportunities where AI can make meaningful differences for people with disabilities. To be clear, I'm not saying that there aren't real risks or pressing issues with AI that need to be addressed--there are, and we've needed to address them, like, yesterday--but I want to take a little time to talk about what's possible in hopes that we'll get there one day. Alternative text Joe's piece spends a lot of time talking about computer-vision models generating alternative text. He highlights a ton of valid issues with the current state of things. And while computer-vision models continue to improve in the quality and richness of detail in their descriptions, their results aren't great. As he rightly points out, the current state of image analysis is pretty poor--especially for certain image types--in large part because current AI systems examine images in isolation rather than within the contexts that they're in (which is a consequence of having separate "foundation" models for text analysis and image analysis). Today's models aren't trained to distinguish between images that are contextually relevant (that should probably have descriptions) and those that are purely decorative (which might not need a description) eit ## Humility: An Essential Value DevFeed: [Humility: An Essential Value]() Original publisher: [Read original article]() Author: by Justin Dauer Published: 2023-06-22T13:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [web design](), [HTML](), [JavaScript](), [browser](), [web-standards](), [Accessibility]() Tags: [browser](), [design](), [html](), [javascript](), [web-design](), [web-standards]() ### AI overview This chapter presents humility as an essential value for designers and describes a personal journey from graphic design into web design. It discusses learning HTML and JavaScript to understand how design decisions are rendered in browsers, while reflecting on creativity, connection, usability, accessibility, and the evolving practices of early web design. ### Source excerpt Humility, a designer's essential value--that has a nice ring to it. What about humility, an office manager's essential value? Or a dentist's? Or a librarian's? They all sound great. When humility is our guiding light, the path is always open for fulfillment, evolution, connection, and engagement. In this chapter, we're going to talk about why. That said, this is a book for designers, and to that end, I'd like to start with a story--well, a journey, really. It's a personal one, and I'm going to make myself a bit vulnerable along the way. I call it: The Tale of Justin's Preposterous Pate When I was coming out of art school, a long-haired, goateed neophyte, print was a known quantity to me; design on the web, however, was rife with complexities to navigate and discover, a problem to be solved. Though I had been formally trained in graphic design, typography, and layout, what fascinated me was how these traditional skills might be applied to a fledgling digital landscape. This theme would ultimately shape the rest of my career. So rather than graduate and go into print like many of my friends, I devoured HTML and JavaScript books into the wee hours of the morning and taught myself how to code during my senior year. I wanted--nay, needed--to better understand the underlying implications of what my design decisions would mean once rendered in a browser. The late '90s and early 2000s were the so-called "Wild West" of web design. Designers at the time were all figuring out how to apply design and visual communication to the digital landscape. What were the rules? How could we break them and still engage, entertain, and convey information? At a more macro level, how could my values, inclusive of humility, respect, and connection, align in tandem with that? I was hungry to find out. Though I'm talking about a different era, those are timeless considerations between non-career interactions and the world of design. What are your core passions, or values, that transcend medium? It's ## Personalization Pyramid: A Framework for Designing with User Data DevFeed: [Personalization Pyramid: A Framework for Designing with User Data]() Original publisher: [Read original article]() Author: by Colin Eagan, Jeffrey MacIntyre Published: 2022-12-08T15:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [personalization](), [User experience (UX)](), [data](), [A/B Testing](), [Content Management System]() Tags: [a-b-testing](), [article](), [content](), [content-interaction-design](), [data](), [forms](), [interaction-design](), [personalization](), [privacy](), [ux]() ### AI overview This article introduces the Personalization Pyramid, a designer-centric framework for creating human-centered personalized digital experiences. It organizes personalization programs around data, segmentation, content delivery, touchpoints, campaigns, goals, and broader strategic objectives. ### Source excerpt As a UX professional in today's data-driven landscape, it's increasingly likely that you've been asked to design a personalized digital experience, whether it's a public website, user portal, or native application. Yet while there continues to be no shortage of marketing hype around personalization platforms, we still have very few standardized approaches for implementing personalized UX. That's where we come in. After completing dozens of personalization projects over the past few years, we gave ourselves a goal: could you create a holistic personalization framework specifically for UX practitioners? The Personalization Pyramid is a designer-centric model for standing up human-centered personalization programs, spanning data, segmentation, content delivery, and overall goals. By using this approach, you will be able to understand the core components of a contemporary, UX-driven personalization program (or at the very least know enough to get started). Growing tools for personalization: According to a Dynamic Yield survey, 39% of respondents felt support is available on-demand when a business case is made for it (up 15% from 2020). Source: "The State of Personalization Maturity - Q4 2021" Dynamic Yield conducted its annual maturity survey across roles and sectors in the Americas (AMER), Europe and the Middle East (EMEA), and the Asia-Pacific (APAC) regions. This marks the fourth consecutive year publishing our research, which includes more than 450 responses from individuals in the C-Suite, Marketing, Merchandising, CX, Product, and IT. Getting Started For the sake of this article, we'll assume you're already familiar with the basics of digital personalization. A good overview can be found here: Website Personalization Planning. While UX projects in this area can take on many different forms, they often stem from similar starting points. Common scenarios for starting a personalization project: Your organization or client purchased a content management system (CMS) o ## Mobile-First CSS: Is It Time for a Rethink? DevFeed: [Mobile-First CSS: Is It Time for a Rethink?]() Original publisher: [Read original article]() Author: by Patrick Clancey Published: 2022-06-09T02:13:10Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [CSS](), [Media Queries](), [Mobile](), [Web Development](), [how to create smooth CSS transitions]() Tags: [code](), [code-css](), [complexity](), [css](), [development](), [devices](), [mobile](), [testing](), [visual-design]() ### AI overview The article examines whether mobile-first CSS remains appropriate for every project. It explains that starting with mobile styles and overriding them at larger min-width media-query breakpoints can create complexity, inefficiency, increased testing effort, and harder-to-maintain code. It also outlines benefits such as a clear development hierarchy, prioritization of mobile user journeys, and avoidance of desktop-centric development. ### Source excerpt The mobile-first design methodology is great--it focuses on what really matters to the user, it's well-practiced, and it's been a common design pattern for years. So developing your CSS mobile-first should also be great, too...right? Well, not necessarily. Classic mobile-first CSS development is based on the principle of overwriting style declarations: you begin your CSS with default style declarations, and overwrite and/or add new styles as you add breakpoints with min-width media queries for larger viewports (for a good overview see "What is Mobile First CSS and Why Does It Rock?"). But all those exceptions create complexity and inefficiency, which in turn can lead to an increased testing effort and a code base that's harder to maintain. Admit it--how many of us willingly want that? On your own projects, mobile-first CSS may yet be the best tool for the job, but first you need to evaluate just how appropriate it is in light of the visual design and user interactions you're working on. To help you get started, here's how I go about tackling the factors you need to watch for, and I'll discuss some alternate solutions if mobile-first doesn't seem to suit your project. Advantages of mobile-first Some of the things to like with mobile-first CSS development--and why it's been the de facto development methodology for so long--make a lot of sense: Development hierarchy. One thing you undoubtedly get from mobile-first is a nice development hierarchy--you just focus on the mobile view and get developing. Tried and tested. It's a tried and tested methodology that's worked for years for a reason: it solves a problem really well. Prioritizes the mobile view. The mobile view is the simplest and arguably the most important, as it encompasses all the key user journeys, and often accounts for a higher proportion of user visits (depending on the project). Prevents desktop-centric development. As development is done using desktop computers, it can be tempting to initially focus on the desk ## Breaking Out of the Box DevFeed: [Breaking Out of the Box]() Original publisher: [Read original article]() Author: by Patrick Brosset Published: 2021-12-09T15:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [PWA](), [User Interfaces](), [Web platform](), [web applications](), [Web Development]() Tags: [browser](), [code](), [code-css](), [css](), [desktop](), [user-interfaces](), [web-app](), [web-platform]() ### AI overview The article introduces the Window Controls Overlay feature for Progressive Web Apps (PWAs). It explains how PWAs combine website characteristics with native-app capabilities and can use the full desktop app window, including the area normally occupied by the title bar, to create more integrated and flexible interfaces. ### Source excerpt CSS is about styling boxes. In fact, the whole web is made of boxes, from the browser viewport to elements on a page. But every once in a while a new feature comes along that makes us rethink our design approach. Round displays, for example, make it fun to play with circular clip areas. Mobile screen notches and virtual keyboards offer challenges to best organize content that stays clear of them. And dual screen or foldable devices make us rethink how to best use available space in a number of different device postures. Sketches of a round display, a common rectangular mobile display, and a device with a foldable display. These recent evolutions of the web platform made it both more challenging and more interesting to design products. They're great opportunities for us to break out of our rectangular boxes. I'd like to talk about a new feature similar to the above: the Window Controls Overlay for Progressive Web Apps (PWAs). Progressive Web Apps are blurring the lines between apps and websites. They combine the best of both worlds. On one hand, they're stable, linkable, searchable, and responsive just like websites. On the other hand, they provide additional powerful capabilities, work offline, and read files just like native apps. As a design surface, PWAs are really interesting because they challenge us to think about what mixing web and device-native user interfaces can be. On desktop devices in particular, we have more than 40 years of history telling us what applications should look like, and it can be hard to break out of this mental model. At the end of the day though, PWAs on desktop are constrained to the window they appear in: a rectangle with a title bar at the top. Here's what a typical desktop PWA app looks like: Sketches of two rectangular user interfaces representing the desktop Progressive Web App status quo on the macOS and Windows operating systems, respectively. Sure, as the author of a PWA, you get to choose the color of the title bar (using the ## How to Sell UX Research with Two Simple Questions DevFeed: [How to Sell UX Research with Two Simple Questions]() Original publisher: [Read original article]() Author: by Sophia V. Prater Published: 2021-10-21T14:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [User experience (UX)](), [Interaction Design](), [User interface design]() Tags: [article](), [design](), [interaction-design](), [user-experience](), [user-experience-user-research](), [user-research](), [ux]() ### AI overview This article explains how to use two questions--what the objects are and how they relate--to help stakeholders recognize risky assumptions, hidden complexity, and the need for UX research. It presents ORCA, an iterative methodology for turning research into a structural foundation for object-oriented UX, screen design, and interaction design. ### Source excerpt Do you find yourself designing screens with only a vague idea of how the things on the screen relate to the things elsewhere in the system? Do you leave stakeholder meetings with unclear directives that often seem to contradict previous conversations? You know a better understanding of user needs would help the team get clear on what you are actually trying to accomplish, but time and budget for research is tight. When it comes to asking for more direct contact with your users, you might feel like poor Oliver Twist, timidly asking, "Please, sir, I want some more." Here's the trick. You need to get stakeholders themselves to identify high-risk assumptions and hidden complexity, so that they become just as motivated as you to get answers from users. Basically, you need to make them think it's their idea. In this article, I'll show you how to collaboratively expose misalignment and gaps in the team's shared understanding by bringing the team together around two simple questions: What are the objects? What are the relationships between those objects? A gauntlet between research and screen design These two questions align to the first two steps of the ORCA process, which might become your new best friend when it comes to reducing guesswork. Wait, what's ORCA?! Glad you asked. ORCA stands for Objects, Relationships, CTAs, and Attributes, and it outlines a process for creating solid object-oriented user experiences. Object-oriented UX is my design philosophy. ORCA is an iterative methodology for synthesizing user research into an elegant structural foundation to support screen and interaction design. OOUX and ORCA have made my work as a UX designer more collaborative, effective, efficient, fun, strategic, and meaningful. The ORCA process has four iterative rounds and a whopping fifteen steps. In each round we get more clarity on our Os, Rs, Cs, and As. The four rounds and fifteen steps of the ORCA process. In the OOUX world, we love color-coding. Blue is reserved for objec ## A Content Model Is Not a Design System DevFeed: [A Content Model Is Not a Design System]() Original publisher: [Read original article]() Author: by Mike Wills Published: 2021-09-23T14:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [Content Management System](), [Bot]() Tags: [content](), [content-content-strategy](), [content-strategy](), [design-systems](), [model](), [related-content](), [types]() ### AI overview The article explains why a semantic, connected content model is essential to an omnichannel content strategy and should not be approached as a design system. ### Source excerpt Do you remember when having a great website was enough? Now, people are getting answers from Siri, Google search snippets, and mobile apps, not just our websites. Forward-thinking organizations have adopted an omnichannel content strategy, whose mission is to reach audiences across multiple digital channels and platforms. But how do you set up a content management system (CMS) to reach your audience now and in the future? I learned the hard way that creating a content model--a definition of content types, attributes, and relationships that let people and systems understand content--with my more familiar design-system thinking would capsize my customer's omnichannel content strategy. You can avoid that outcome by creating content models that are semantic and that also connect related content. I recently had the opportunity to lead the CMS implementation for a Fortune 500 company. The client was excited by the benefits of an omnichannel content strategy, including content reuse, multichannel marketing, and robot delivery--designing content to be intelligible to bots, Google knowledge panels, snippets, and voice user interfaces. A content model is a critical foundation for an omnichannel content strategy, and for our content to be understood by multiple systems, the model needed semantic types--types named according to their meaning instead of their presentation. Our goal was to let authors create content and reuse it wherever it was relevant. But as the project proceeded, I realized that supporting content reuse at the scale that my customer needed required the whole team to recognize a new pattern. Despite our best intentions, we kept drawing from what we were more familiar with: design systems. Unlike web-focused content strategies, an omnichannel content strategy can't rely on WYSIWYG tools for design and layout. Our tendency to approach the content model with our familiar design-system thinking constantly led us to veer away from one of the primary purposes of a conte ## Sustainable Web Design, An Excerpt DevFeed: [Sustainable Web Design, An Excerpt]() Original publisher: [Read original article]() Author: by Tom Greenwood Published: 2021-08-05T14:00:00Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [Web](), [web design](), [App](), [Benchmark]() Tags: [apps](), [benchmark](), [design](), [design-web-strategy](), [reduce](), [standards](), [tools](), [web](), [web-design](), [web-strategy]() ### AI overview This excerpt argues that establishing clear performance benchmarks can expand what developers believe is possible for websites. It introduces sustainable web design, noting that websites and apps lack broadly established environmental standards and that its primary goal is to reduce carbon emissions. ### Source excerpt In the 1950s, many in the elite running community had begun to believe it wasn't possible to run a mile in less than four minutes. Runners had been attempting it since the late 19th century and were beginning to draw the conclusion that the human body simply wasn't built for the task. But on May 6, 1956, Roger Bannister took everyone by surprise. It was a cold, wet day in Oxford, England--conditions no one expected to lend themselves to record-setting--and yet Bannister did just that, running a mile in 3:59.4 and becoming the first person in the record books to run a mile in under four minutes. This shift in the benchmark had profound effects; the world now knew that the four-minute mile was possible. Bannister's record lasted only forty-six days, when it was snatched away by Australian runner John Landy. Then a year later, three runners all beat the four-minute barrier together in the same race. Since then, over 1,400 runners have officially run a mile in under four minutes; the current record is 3:43.13, held by Moroccan athlete Hicham El Guerrouj. We achieve far more when we believe that something is possible, and we will believe it's possible only when we see someone else has already done it--and as with human running speed, so it is with what we believe are the hard limits for how a website needs to perform. Establishing standards for a sustainable web In most major industries, the key metrics of environmental performance are fairly well established, such as miles per gallon for cars or energy per square meter for homes. The tools and methods for calculating those metrics are standardized as well, which keeps everyone on the same page when doing environmental assessments. In the world of websites and apps, however, we aren't held to any particular environmental standards, and only recently have gained the tools and methods we need to even make an environmental assessment. The primary goal in sustainable web design is to reduce carbon emissions. However, it's almos