Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Patrick Clancey
Humility: An Essential Value
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. Article Continues Below That said, this is a book for designers, and to that end, I’d like to start with a story—well, a journey, really.
Personalization Pyramid: A Framework for Designing with User Data
Further reading about Content A Content Model Is Not a Design System These days, content models have to serve a variety of delivery channels, each more outlandish than the last. But why do many content models still look more like design systems rather than reflecting structured data?
Mobile-First CSS: Is It Time for a Rethink?
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? Article Continues Below Well, not necessarily.
Designers, (Re)define Success First
Illustration by Dougal MacPherson About two and a half years ago, I introduced the idea of daily ethical design. It was born out of my frustration with the many obstacles to achieving design that’s usable and equitable; protects people’s privacy, agency, and focus; benefits society; and restores nature.
A Content Model Is Not a Design System
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. Article Continues Below But how do you set up a content management system (CMS) to reach your audience now and in the future?
Never Use a Warning When you Mean Undo
Have you ever had that sinking feeling when you realize—just a split second too late—that you shouldn’t have clicked “Okay” in the “Are you sure you want to quit?” dialog? Article Continues Below Yes? Well, you’re in good company—everybody has had a similar experience, so there’s no need to feel ashamed about it. It’s not your fault: it’s your software’s fault. Why? Because software should “know” that we form habits.
User Research When You Can’t Talk to Your Users
It’s not breaking news to say that the core of UX, in a vacuum, is talking to your users to gather insights and then applying that information to your designs. But it’s equally true that UX does not happen in a vacuum. So what happens when you don’t have the budget or the timeline to run user tests, card sorts, or stakeholder interviews? What should you do when your company doesn’t want you bothering the paying customers who use their software?
Learning from Lego: A Step Forward in Modular Web Design
With hundreds of frameworks and UI kits, we are now assembling all kinds of content blocks to make web pages. However, such modularity and versatility hasn’t been achieved on the web element level yet. Learning from Lego, we can push modular web design one step forward. Article Continues Below Rethinking the status quo#section2 Modular atomic design has been around for a while. Conceptually, we all love it—web components should be versatile and reusable.
Practical CSS Grid: Adding Grid to an Existing Design
Understanding and using CSS Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting. Article Continues Below Grid allows us to literally define column and row grid lines, and then attach elements to those lines in any order we choose.
New A List Apart wants you!
As A List Apart approaches its 20th anniversary—a milestone in independent, web-based publishing—we’re once again reimagining the magazine. We want your feedback. And most of all, we want you. Article Continues Below We’re getting rid of advertisers and digging back to our roots: community-based, community-built, and determinedly non-commercial.
Focus on What You Do Best and Outsource the Rest
Further reading about Industry Designers, (Re)define Success First Designing ethically may sound daunting at first, but Lennart Overkamp sets forth a template for engaging stakeholders around new priorities, exploring objectives that span from individual to global impacts, and finally measure their effects. Webwaste In this excerpt from World Wide Waste, Gerry McGovern examines the environmental impact of bloated websites and unnecessary assets. Digital is physical.
Color Accessibility Workflows
The Web Content Accessibility Guidelines (WCAG) 2.0 contain recommendations from the World Wide Web Consortium (W3C) for making the web more accessible to users with disabilities, including color blindness and other vision deficiencies. Article Continues Below There are three levels of conformance defined in WCAG 2.0, from lowest to highest: A, AA, and AAA. For text and images of text, AA is the minimum level that must be met.
Faux Grid Tracks
A little while back, there was a question posted to css-discuss: Article Continues Below This is a question I expect to come up repeatedly, as more and more people start to explore Grid layout. The short answer is: no, it isn’t possible to do that. But it is possible to fake the effect, which is what I’d like to explore. Defining the grid#section2 Since we’re talking about tic-tac-toe layouts, we’ll need a containing element around nine elements.
The Story of CSS Grid, from Its Creators
Illustration by Dougal MacPherson 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 CSS Grid.
Let Emotion Be Your Guide
We were sitting in a market research room in the midst of a long day of customer interviews. Across from us, a young mother was telling us about her experience bringing her daughter into the ER during a severe asthma attack. We had been interviewing people about their healthcare journeys for a large hospital group, but we’d been running into a few problems. First, the end-goal of the interviews was to develop a strategy for the hospital group’s website.
Network access: Finding and working with creative communities
A curious complaint seems to ripple across the internet every so often: people state that “design” is stale. The criticism is that no original ideas are being generated; anything new is quickly co-opted and copied en-masse, leading to even more sterility, conceptually. And that leads to lots of articles lamenting the state of the communities they work in. What people see is an endless recycling within their group, with very little bleed-over into other disciplines or networks.
Liminal Thinking
Here’s a story I heard from a friend of mine named Adrian Howard. His team was working on a software project, and they were working so hard that they were burning themselves out. They were working late nights, and they agreed as a team to slow down their pace. “We’re going to work 9 to 5, and we’re going to get as much done as we can, but we’re not going to stay late. We’re not going to work late at night. We’re going to pace ourselves.
JavaScript for Web Designers: DOM Scripting
Before we do anything with a page, you and I need to have a talk about something very important: the Document Object Model. There are two purposes to the DOM: providing JavaScript with a map of all the elements on our page, and providing us with a set of methods for accessing those elements, their attributes, and their contents.
Using CSS Mod Queries with Range Selectors
Recently, I was asked to build a simple list that would display in a grid—one that could start with a single element and grow throughout the day, yet alway be tidy regardless of the length. So, as you do sometimes when you’re busy with one thing and asked if you can do something completely different, I tried to think of any reason why it couldn’t be done, came up blank, and distractedly said, “Yes.” At the time, I was working on a London-based news organization’s website.
Using CSS Mod Queries with Range Selectors
Recently, I was asked to build a simple list that would display in a grid—one that could start with a single element and grow throughout the day, yet alway be tidy regardless of the length. So, as you do sometimes when you’re busy with one thing and asked if you can do something completely different, I tried to think of any reason why it couldn’t be done, came up blank, and distractedly said, “Yes.” Article Continues Below At the time, I was working on a London-based news organization’s website.
Communicating Animation
Consistent animation is crucial to both branding and UX. Interfaces obey laws of “design physics”; keeping animation consistent throughout an experience envelops users in an illusion of life, of reality. Animations that step out of line disrupt that flow and feel sloppy or jarring.
Meaningful CSS: Style Like You Mean It
These days, we have a world of meaningful markup at our fingertips. HTML5 introduced a lavish new set of semantically meaningful elements and attributes, ARIA defined an entire additional platform to describe a rich internet, and microformats stepped in to provide still more standardized, nuanced concepts. It’s a golden age for rich, meaningful markup.
Validating Product Ideas
Illustration by Kevin Cornell A note from the editors: We are pleased to present an excerpt from Tomer Sharon's Validating Product Ideas Through Lean User Research published by Rosenfeld Media. Get 20% off your copy using code ALAVPI. Amazingly, 198 out of the 200 enterprise product managers and startup founders interviewed for this book said they were keeping a list of product ideas they wanted to make a reality some day.
From Pages to Patterns: An Exercise for Everyone
Illustration by Elliot Stokes Language defines the life of components. A “blue button” will work until the button is no longer blue—and then the name won’t make sense anymore. The pattern will have no reason to exist if blue buttons have fallen out of use. A component with the name “button,” however, will live a longer and more fruitful life, even if its properties change. Why? Because its name describes its function, not how it looks.
Using Responsive Images (Now)
Ever since Ethan Marcotte started talking about responsive web design in 2010, developers and designers have been scrambling to find ways to deal with the issue of responsive images. It’s a thorny problem because we’re serving the same website, with the same image sources, across a wide range of device widths. Do you want a blurry, pixelated image on a large display? Or do you want to load a huge (but oh-so-pretty) image on your mobile phone? Talk about being stuck between a rock and a hard place.
The Distance to Here
I have this theory. I haven’t been able to prove it, but the evidence is racking up, so I wanted to share it with you. It goes like this: Article Continues Below The larger the distance between people who build a product and people who make decisions about the product, the harder it is to make a good product. There are cousins to this theory, but they usually blame a generic “large organizational culture” for bad products. I don’t think that relationship is causal enough, though.
Thinking Responsively: A Framework for Future Learning
Before the arrival of smartphones and tablets, many of us took a position of blissful ignorance. Believing we could tame the web’s inherent unpredictability, we prescribed requirements for access, prioritizing our own needs above those of users. Article Continues Below As our prescriptions grew ever more detailed, responsive web design signaled a way out.
Context Makes Our Devices
Article Continues Below A few weeks ago, Josh Dzieza of The Verge had this to say about the Apple Watch, and really smartwatches as a whole: When smartphones were first gaining popularity, I could’ve expressed the exact same concern, swapping the word “pocket” for “backpack.” Why would I spend so much money on a phone when my laptop can already manage email, calendars, and notes? Statements like that overlook the reason why certain device categories become successful: context.
Structuring a New Collaborative Culture
When I was a junior designer, my creative director asked me to design a mascot with the rather uninspiring instruction to reorder the shapes of the famous 2012 Olympics logo. Having little choice but to accept my task, I threw myself into it with all the boundless, panicked energy that comes from needing to impress the powers above, trusting my superior to steer me in the right direction.
Responsive Design Won’t Fix Your Content Problem
I spoke to a digital team at a large corporation a while back, and outlined some of the many challenges they were likely to face in creating, revising, and publishing their content so it would work well on smartphone, tablet, and desktop interfaces.
Looking Beyond User-Centered Design
User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field. Article Continues Below The terms “user experience design” (UX) and “user-centered design” (UCD) are often used interchangeably. But there’s an important distinction. UX design is the discipline: what we do. Precise definition is elusive, but most attempts focus on experience as an explicit design objective. User-centered design is a process: how we do it.
Artistic Distance
As web designers, we are often confronted with the argument that the work we do isn’t “really art” because the constraints within which we most frequently work are labeled “commercial.” Yet the solutions we create, at least the successful ones, are almost always based on foundational principles of art and design taught in schools everywhere (whether or not you’ve ever taken a course on basic design or color theory).
Building Twitter Bootstrap
Issue № 342 A year-and-a-half ago, a small group of Twitter employees set out to improve our team’s internal analytical and administrative tools. After some early meetings around this one product, we set out with a higher ambition to create a toolkit for anyone to use within Twitter, and beyond. Thus, we set out to build a system that would help folks like us build new projects on top of it, and Bootstrap was conceived.
Getting Started with Sass
Issue № 340 CSS’ simplicity has always been one of its defining, most welcome features. CSS style sheets are just long lists of rules, each consisting of a selector and some styles to apply. But as our websites and applications get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based layouts—has become a liability.
Art Direction and Design
Issue № 317 Glorifying the supposed arrival of art direction on the web is one of the latest trends in interactive design. There are several galleries devoted to it. There’s even a plug-in for it. Sadly, many designers don’t understand the difference between design and art direction; sadder still, many art directors don’t either: Art direction gives substance to design. Art direction adds humanity to design.
Responsive Web Design
The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last.
Better JavaScript Minification
In the past few years, performance research has become more prevalent thanks to research by the Yahoo! Exceptional Performance Team and Google’s Steve Souders. Most of that research studies not the individual HTML page, but the resources the page requires to display or behave correctly. Article Continues Below Although both CSS and JavaScript may be included within an HTML page, best practices encourage storing CSS and JavaScript in external files that can be downloaded and cached separately.
Infrequently Asked Questions of FAQs
Call me a heretic, but I hate FAQs. I understand that the FAQ has become de rigueur for websites, and I get that users expect them as a conventional content type. I even acknowledge that the FAQ has a venerable history. I don’t find them helpful, however: no one ever seems to ask my questions. Article Continues Below So I have questions about FAQs: Do they really work, or are they just a snake oil remedy for poor content? What does it mean when I can’t find my question in the FAQ?
Flash and Standards: The Cold War of the Web
You’ve probably heard that Apple recently announced the iPad. The absence of Flash Player on the device seems to have awakened the HTML5 vs. Flash debate. Apparently, it’s the final nail in the coffin for Flash. Article Continues Below The arguments run wide, strong, and legitimate on both sides. Apple CEO Steve Jobs calls Flash Player buggy. John Gruber of Daring Fireball says that Apple wants to maintain their own ecosystem—a formula Adobe’s software doesn’t easily fit into.
Words that Zing
People use websites to make decisions—from what product to buy to what health treatment to seek. [1][2][3] When someone consults a website, there is a precious opportunity not only to provide useful information but also to influence their decision. To make the most of this opportune moment, web professionals need to understand the rhetorical concept of kairos.
You Can Get There From Here: Websites for Learners
Like many modern parents, I probably tell my kids to “go look it up online” about a hundred times a week. Where I grew up poring over the World Book Encyclopedia sprawled out on my living room carpet, today’s learners have a potentially better, more immersive multimedia learning platform at their fingertips. Anything we want to learn about—from microscopic organisms to the world’s largest work of art—can be found on the web.
Creating Intrinsic Ratios for Video
Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. Article Continues Below With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See example one.
The Discipline of Content Strategy
Issue № 274 We, the people who make websites, have been talking for fifteen years about user experience, information architecture, content management systems, coding, metadata, visual design, user research, and all the other disciplines that facilitate our users’ abilities to find and consume content. Article Continues Below Weirdly, though, we haven’t been talking about the meat of the matter. We haven’t been talking about the content itself. Yeah, yeah. We know how to write for online readers.
Web 3.0
Google, with the cooperation of prestigious libraries, has been digitizing books to make them findable. The practice excites futurists but angers some publishers. Of necessity, digitization creates virtual copies. The publishers claim that such duplication violates copyright, even if the book’s content is hidden from the public. The New York Public Library, one of Google’s partners in the project, recently hosted a public debate on the subject.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Patrick
Contact Patrick, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack