A List Apart

Menu

The Articles

Issue № 376

  • Designing for Breakpoints

    by Stephen Hay · · 27 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 · · 31 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 · · 32 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 · · 20 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 · · 48 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 · · 32 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 · · 29 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 Hogan · · 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.

Recent Columns

Laura Kalbag on Freelance Design

The Illusion of Free

The number of predictions that algorithms can make about us from even minimal data is shocking. Although we’re offered privacy settings that let us control who of our friends sees what, all our information and behavior tends to be fair game for behind-the-scenes tracking. We simply don’t know everything that’s being done with our data currently, and what companies might be able—and willing—to do with it in the future. Laura Kalbag believes it’s time to locate the exits.

Matt Griffin on How We Work

Readable Wearables

Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don't already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.

Recent Blog posts

Prioritizing Structure in Web Content Projects

New content projects present a classic chicken-and-egg problem: should we start with the words, or focus on the structure they’ll take? There are benefits and challenges either way, but Eileen Webb has recently become a believer that starting with structure creates a better workflow for developers, designers and content creators alike.

A List Apart: On Air

Ready for something new? We're excited to announce ALA: On Air, community-focused events where our readers can get to know our authors, staff, and others who are shaking up our industry. Mat Marquis shares all the details, and has specifics on our first event, Designing for Performance, coming up on February 26.

Style Guide Generator Roundup

Ready to use a style guide generator for your next project? Susan Robertson did the research and shares a number of options to try out, depending on your workflow. If you haven't created a style guide before, hopefully one of these tools will make generating your first one just a bit easier.

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.