A List Apart

Menu

The Articles

Issue № 372

  • Material Honesty on the Web

    by Kevin Goldman · · 61 Comments

    Material honesty—the idea that a substance should be itself, rather than mimic something else—has guided everyone from Ruskin to Charles and Ray Eames. How might material honesty apply to our immaterial (digital) projects? What light might its principles shed on such aesthetic debates as flat versus skeumorphic web design? And how might a materially honest approach change how we conceive and sell our projects? Kevin Goldman forecasts increased longevity for our work and even our careers if we apply the principles of material honesty to our digital world.

  • “Like”-able Content: Spread Your Message with Third-Party Metadata

    by Clinton Forry · · 28 Comments

    Woman does not share by links alone. Although formatting our content via structural markup makes it accessible across a multitude of platforms, standard HTML by itself offers no means to control how our message will come across when shared on popular social networks. Enter third-party metadata schemas. Facebook’s Open Graph protocol (OG) and Twitter’s Cards are metadata protocols designed to provide a better user experience around content shared on these social platforms. Clinton Forry explains how to use these tools for good.

Issue № 371

  • Improving UX Through Front-End Performance

    by Lara Swanson · · 31 Comments

    Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, says a Google study. For every additional 100 milliseconds of load time, sales decrease by 1 percent, Amazon finds. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave. The message is clear: we must make performance optimization a fundamental part of how we design, build, and test every site we create—for every device. Design for performance; measure the results.

  • The Era of Symbol Fonts

    by Brian Suda · · 43 Comments

    Welcome to the third epoch in web performance optimization: symbol fonts. Everything from bullets and arrows to feed and social media icons can now be bundled into a single, tiny font file that can be cached and rendered at various sizes without needing multiple images or colors. This has the same caching and file size benefits as a CSS sprite, plus additional benefits we’re only now realizing with high-resolution displays. Discover the advantages and explore the challenges you’ll encounter when using a symbol font.

Issue № 370

  • See What I Mean

    by Kevin Cheng · · 18 Comments

    We’re pleased to share an excerpt from Kevin Cheng’s new book, See What I Mean: How to Use Comics to Communicate Ideas, available now from Rosenfeld Media.

Issue № 369

  • Environmental Design with the Device API

    by Tim Wright · · 17 Comments

    Real-world factors like low batteries and weak signal strength can turn even the most expertly crafted digital experience into a frustrating clustercuss. These factors are beyond your control, and, until recently, there was nothing you could do about them. Now there just may be. Tim Wright explains how to begin improving your users’ experiences under constantly shifting (and sometimes quite dreadful) conditions, via environmental design thinking and the Device API.

  • Your Website has Two Faces

    by Lyle Mullican · · 11 Comments

    Your website must serve human and robot masters. An interface that reflects too much of a system’s internals will confuse human users; but if data doesn’t conform to a specific structure, it’s likely to confuse the machines that need to use it. How can your designs serve these very different masters? Jon Postel's Robustness Principle, although usually applied to low-level protocols like TCP, offers a clue to designing experiences that meet human and machine needs with equal grace. Lyle Mullican explains.

Issue № 368

  • A List Apart 5.0

    by Jeffrey Zeldman · · 157 Comments

    A design that departs from our past and a platform on which to build the future. Welcome to the relaunch of A List Apart, for people who make websites.

  • What We Learned in 2012

    by Our Gentle Readers · · 1 Comment

    A new A List Apart means a new design, new features, and renewed excitement about the future. But before plowing full-steam into tomorrow-land, we asked some of our friendly authors and readers to share lessons they learned last year, and how those lessons can help all of us work smarter in 2013.

Issue № 367

  • Vexing Viewports

    by Lyza Danger Gardner, Stephanie Rieger, Luke Wroblewski, Peter-Paul Koch · · 44 Comments

    Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important. That’s why it hurts when a device or browser maker does something that goes against our agreement—especially when they’re a very visible and trusted friend of the web like Apple. Peter-Paul Koch, Lyza Danger Gardner, Luke Wroblewski, and Stephanie Rieger explain why Apple’s newest tablet, the iPad Mini, creates a vexing situation for people who are trying to do the right thing and build flexible, multi-device experiences.

Issue № 366

  • Designing Contracts for the XXI Century

    by Veronica Picciafuoco · · 9 Comments

    A design contract is like a business card—it comes from the same desk, and bears the same creative mark. But it’s also the business card you hate handing out: a folder of legal gibberish with terrible formatting that reminds the client of everything that could possibly go wrong before the work has even started. If we want to address the readability problems unique to our era—and improve communication with our clients—then it’s time we fix the language, layout, and typesetting of our contracts. And who better than designers to do it? Veronica Picciafuoco shows how modernizing your contract to match your carefully crafted brand can also help you reach an agreement faster, and even strengthen your position when negotiating.

  • Translation is UX

    by Antoine Lefeuvre · · 21 Comments

    We—the people who make websites—now study almost every aspect of our trade, from content and usability to art direction and typography. Our attention to detail has never been greater as we strive to provide the best possible experience. Yet many users still experience products that lack personality or are difficult to understand. They are users of a translated version. While good localization boosts conversion rates, bad or partial translation may ruin a user experience, giving people an uneasy feeling about the whole company. If we care equally about all our users, it’s time we start thinking of translation as something slightly more complex than a word-to-word job. Antoine Lefeuvre shares why translation matters, and what it takes to get it right.

Issue № 365

  • Becoming Better Communicators

    by Inayaili de Leon · · 20 Comments

    As designers, we already know how to communicate with users in a language they understand. Yet, we often don't do this when communicating with those whom our work requires us to talk to every day: our own colleagues. Inayaili de León shows us why—and how we can build the human relationships and shared vocabularies we need to get better at it.

  • Universal Design IRL

    by Sara Wachter-Boettcher · · 43 Comments

    We talk a lot about building a web that’s accessible to anyone—a web that serves more of us, more fully. But are our own events and conferences as inclusive as the web we’re all working toward? Sara Wachter-Boettcher explores how we can improve the design of our own community.

Issue № 364

  • Uncle Sam Wants You (to Optimize Your Content for Mobile)

    by Karen McGrane · · 8 Comments

    Thirty-one percent of Americans who access the internet from a mobile device say that’s the way they always or mostly go online. For this group, if your content doesn’t exist on mobile, it doesn’t exist at all. The U.S. government has responded with a broad initiative to make federal website content mobile-friendly. Karen McGrane explains why this matters—and what you can learn from it.

  • Your Content, Now Mobile

    by Karen McGrane · · 15 Comments

    Making your content mobile-ready isn’t easy, but if you take the time now to examine your content and structure it for maximum flexibility and reuse, you’ll have stripped away all the bad, irrelevant bits, and be better prepared the next time a new gadget rolls around. This excerpt from Karen McGrane’s new book, Content Strategy for Mobile, will help you get started.

Issue № 363

  • The Infinite Grid

    by Chris Armstrong · · 28 Comments

    Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today you’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between. You’re designing for an infinite canvas—and for that, you need an infinite grid system. Discover techniques and guidelines that can help bring structure to your content whatever the screen size.

  • Responsive Comping: Obtaining Signoff without Mockups

    by Matt Griffin · · 54 Comments

    If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. Designing in code sounds like the answer, but you may be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on. Enter responsive comping. This new, mockup-less web design process makes it easy to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.

Recent Columns

Laura Kalbag on Freelance Design

How Big is Big Enough to Pick On?

Businesses aren't all faceless juggernauts. Some are just one or two people. Yet when we interact with them through reviews or social media, we fall into the notion that there's no real individual in the other side whose feelings can be hurt. Laura Kalbag asks us to be sure to criticize the work and not the person.

The People are the Work

You take pride in your creativity and brilliant work, but the web is a place of transience. Businesses evolve, client needs change, sites are outgrown, and it’s time to start building again. Can you be content with the work of presenting content on the web? For an approach to creating something that stands the test of time, Matt Griffin and the Bearded crew took to heart an old adage in a surprisingly new way.

Recent Blog posts

Thoughtful Modularity

What can we learn from the Mars rover about building the web? Anthony Colangelo describes NASA's new modular approach to mission planning, and suggests a similar strategy for our work on the web. The details of our work may change, but building with thoughtful modularity can help us reap the benefits of the future.

Pinpointing Expectations

In my work as a front-end developer, I’ve come to realize that expectations, and how you handle them, are one of the most integral parts of a project. Expectations are tricky things, especially because we don’t talk about them very much.

The Core Model: Links and Resources

My recent article on the core model was an attempt to sum up two things that I could go on about forever. The Norwegian Cancer Society (NCS) redesign project started in January 2012, and we’re still working together. The core model was created by Are Halland in 2006, and we’re still working on that too! In other words, there is a lot more to say both about that project and the model.

Getting Started with Gulp

While building JavaScript related projects (whether server side via Node.js or front-end libraries), a build tool to help easily maintain and automate many of the processes—including testing, concatenating files, minification, compiling templates, as well as many other options—can be incredibly useful.

Driving Phantom from Grunt

For this example, we're going to build a Grunt task that takes a screen shot of the pages we're building (similar to Wraith, but far less advanced). There are multiple parts to make this work, so let's break it down. First, we will write a PhantomJS script that renders each page. Second, we make a NodeJS function that calls this script. Finally, we make a GruntJS task that calls that Node function. Fun!