A List Apart

Menu

The Articles

Issue № 378

  • Summer Reading Issue

    by ALA Staff · · 10 Comments

    Presenting the second annual ALA Summer Reading Issue—a deep pool of editor’s picks from the recent archives of A List Apart, sprinkled with some of our favorite outside links. This summer’s picks are arranged in clusters that echo the design process, and like all good summer reading, they travel light. (This issue is also available as a Readlist, suitable for reading on Kindle, iPhone, iPad, Readmill, or other ebook reader.) Dive in!

Issue № 377

  • Designing for Services Beyond the Screen

    by Andy Polaine · · 16 Comments

    You redesign the website for an airline, but who is designing the check-in machines, the CRM systems used by call center staff, the print materials, or the policies the cabin crew must adhere to? Like it or not, these channels are part of the overall user experience. Your website or mobile app might be great on its own, but customers experience services in totality, and base their judgments on how well everything works together. Learn to design beyond the screen. By creating visual and tangible artifacts that can be experienced and tested, you can build a bridge between business and design.

  • Don’t Poke the Bear: Creating Content for Sensitive Situations

    by Kate Kiefer Lee · · 6 Comments

    Delivering bad news is hard, but it’s part of life and business. We notify customers when we’re out of a product they want to buy, and we send warnings when people violate our companies’ terms of service. God forbid we have to send a system alert because our database was hacked, affecting every one of our users. But these things happen to the best of us. Can you be the bearer of bad news in a way that respects your customers? Learn how to create empathetic content for tricky situations, and shape your internal culture to foster human values of support, respect, and empathy.

Issue № 376

  • Designing for Breakpoints

    by Stephen Hay · · 26 Comments

    Text, navigation, and tables, oh, my! What’s a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketch minor breakpoints? How should you think about content while sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.

Issue № 375

  • The Design of Code: Organizing JavaScript

    by Anthony Colangelo · · 30 Comments

    Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. Three high-level, language-agnostic aspects of code design are key to achieving this nirvana: system architecture, maintainability, and reusability. All three may be attained via the module pattern, whose extensible structure lends itself to a solid system architecture and a maintainable codebase. Anthony Colangelo shows how to craft our code into well-organized components that can be reused in projects to come.

  • Writing Testable JavaScript

    by Rebecca Murphey · · 27 Comments

    As our JavaScript takes on more and more responsibilities, we need a reliable codebase—one that is thoroughly tested. Integration tests focus on how the pieces of an application work together, but don’t tell us whether individual units of functionality are behaving as expected. That’s where unit testing comes in. And we’ll have a hard time writing unit tests until we start writing testable JavaScript. Rebecca Murphey explains how to save time in the long run by writing cleaner application code and testing, testing, testing.

Issue № 374

  • Even Better In-Browser Mockups with Node.js

    by Garann Means · · 13 Comments

    Designing in the browser has all sorts of benefits, like producing more accurate, comprehensive results and removing the extra step of converting from image file to markup and CSS. But even sites designed in a browser still require pasting in content, faking interactions with the server, and creating placeholder JavaScript that isn’t usable on the live site. Wouldn’t it be nice if we could go from just designing layouts and interactions to designing the whole client side of the application during the same process? We can, says Garann Means in the first of two articles explaining how Node.js can streamline your design process.

  • Node at Work: A Walkthrough

    by Garann Means · · 19 Comments

    In “Even Better In-Browser Mockups with Node.js,” Garann Means explained why Node.js makes designing applications easier and more efficient, and how to get started. Now it’s time to see your new design process in action. In this walkthrough, we’ll build a feature for a mock art store, complete with live demo and GitHub repository. Follow along at home (or in your cubicle) and you’ll have a mockup that mimics the interactions it will have with its production server precisely on the client—without the need for hard-coded data or temporary workarounds.

Issue № 373

  • Growing Your Design Business

    by Jason Blumer · · 46 Comments

    So you’ve launched your own creative business, and you’re starting to grow. That’s great! But good growth won’t just happen. Just as a junior designer starts with small projects and slowly builds her skills, a new business needs time to mature, test new ideas, and prepare itself, too. If you want to grow in a sustainable, satisfying way, then you need to pay attention to how you’re growing, not just how much. Jason Blumer looks at four common pitfalls of growth in the design industry, and how to avoid them.

  • Hack Your Maps

    by Young Hahn · · 31 Comments

    Web maps have come a long way. A ubiquitous and critical component of many apps, they’ve also become one of the mobile space’s most successful transplants. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere. Yet nearly five years since Paul Smith’s landmark article, “Take Control of Your Maps,” web maps are still a blind spot for most web designers. It’s time to integrate maps into our designs in powerful, creative, progressively enhanced new ways. Young Hahn starts us on the journey to map mastery.

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 · · 27 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 · · 30 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 · · 10 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.

Recent Columns

Laura Kalbag on Freelance Design

I Don’t Like It

The most dreaded of all design feedback is the peremptory, “I don’t like it.” Rather than slinking back to the drawing board, it’s important to get clarity on what the client is reacting to. Guiding this conversation can turn a show-stopper into a mutual win.

Nishant Kothary on the Human Web

In Pursuit of Facebook Happiness

Our level of happiness and satisfaction on social networks is largely determined by the same things that make us happy in the rest of our lives. You can let your timeline be a perpetual reunion of your dullest second cousins or get out there and join some clubs.

Recent Blog posts

Longform Content with Craft Matrix

Jason Santa Maria recently shared some thoughts about pacing content, and my developer brain couldn’t help but think about how I’d go about building the examples he talked about. The one fool-proof way to achieve heavily art-directed layouts like those is to write the HTML by hand. The problem is that content managers are not always developers, and the code can get complex pretty quickly. That’s why we use content management systems—to give content managers easier and more powerful control over content.

Ten Years Ago in ALA: Dynamic Text Replacement

Ten years ago this month in Issue 183, A List Apart published Stewart Rosenberger’s “Dynamic Text Replacement.” Stewart lamented text styling as a “dull headache of web design” with “only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML.” To help ease these pains, Stewart presented a technique for styling typography by dynamically replacing text with an image.

Apple and Responsive Design

Apple has always had a funny relationship with responsive design. They’ve only sparingly used media queries to make minor visual tweaks on important pages, like their current homepage. Though a “handcrafted for all devices” approach seems like the “Apple way,” it’s almost as if they’ve avoided it because of the iPhone’s original pitch—giving users the ability to pinch and zoom their way through the “full” web, as opposed to being shuttled off to the mobile web.

Testing Responsive Images

At long last, the native picture element isn’t just coming: it’s here. The picture element has landed in Canary—Google’s “beta” channel for upcoming Chrome releases—and we can try it out for ourselves right now. Now, we need to test it out, look for bugs, and file issues.