A List Apart

Menu

The Articles

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 · · 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 · · 30 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 · · 47 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 · · 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

Rian van der Merwe on A View from a Different Valley

How to Do What You Love, the Right Way

You can find work where you do what you love, even without making a huge career zig-zag. Start now by doing what you love some of the time, and it will help you get to a place where you can do what you love most of the time.

Nishant Kothary on the Human Web

The Politics of Feedback

We’re obsessive about collecting input from a wide range of potential users and stakeholders. But with such an onslaught of feedback, there’s always a risk of having your motivation and faith in humanity sucked right out of you. Sometimes, you just need calm critique from the few people who really get you. So which kind of feedback is best? The answer is both.

Recent Blog posts

Learning to Be Flexible

As a freelancer, I work in a lot of different code repos. Almost every team I work with has different ideas of how code should be organized, maintained, and structured. Now, I’m not here to start a battle about tabs versus spaces or alphabetical order of CSS properties versus organizing in terms of concerns (positioning styles, then element layout styles, then whatever else), because I’m honestly not attached to any one system anymore.

Personalizing Git with Aliases

Part of getting comfortable with the command line is making it your own. Small customizations, shortcuts, and time saving techniques become second nature once you spend enough time fiddling around in your terminal. Since Git is my Version Control System of choice (due partially to its incredible popularity via GitHub), I like to spend lots of time optimizing my experience there.

Routines Aren’t the Enemy

I recently read Greg Smith’s piece on Bocoup's blog about how they think about time tracking, including all the fascinating data about how your brain works to solve problems. It interested me a lot, since I've been thinking about not just how I track projects, but also how I structure my day as a freelancer.