A List Apart

Menu

The Articles

Issue № 380

  • Getting to Flow

    by Breandán Knowlton · · 5 Comments

    When design and client cultures truly come together, magical and memorable projects emerge. These magic projects aren’t random, though—they happen when you reach a state of flow. The beautiful part is, you can get both yourself and your client into a flow state more often by doing three things: enabling immediate feedback, balancing capability and challenge, and setting clear goals with visible progress. Breandán Knowlton shows you how.

  • Defining a Vision: Making Sure Your Work Matters

    by Russ Starke · · 2 Comments

    When an architect designs a structure, he or she can be fairly sure the work will endure for decades, maybe even centuries. Here on the web, we’re not so lucky. Knowing how temporary digital creations can be, how can we ensure our work matters? By defining the organization's vision. This isn’t just about solidifying a mission statement, though. Russ Starke shows you how to help organizations create a detailed story of their future success—and how that story can serve as a compass for both the company and its customers.

Issue № 379

  • Following Through with Post-Launch Strategy

    by Aaron Mentele · · 18 Comments

    Design studios have traditionally worked on a “launch and dash” model: we study a client’s business problem; address it in design, UX, and content strategy; inject templates into a CMS; take the money, and run. But while we’ve spent years refining our web and UX practices, we’ve never paid much attention to what happens months after we deliver a site. If we truly want to help the client whose conversions are going flat, it’s time to embrace post-launch strategy—and stop thinking of it as a bundle of shameful SEO tricks that are disconnected from our work. Aaron Mentele shares how his small boutique studio hired a digital strategist, and the benefits that have accrued to the studio as well as its clients.

  • Client Relationships and the Multi-Device Web

    by Matt Griffin · · 41 Comments

    When you step into the room with a client, you are a visitor from the future. You, web professional, spend your days immersed in the new paradigms of the multi-device web. Yet even for you, the constant change and adjustments that come with living on the internet can feel overwhelming. So how do you think your clients feel? It’s time to shed the vestigial mindsets we’ve inherited from the advertising world—the closed communications and drama of the “big reveal”—and build new systems based on honesty, inclusion, and genuine communication, says Matt Griffin. In this way, our clients will become true partners—rather than confused, anxious bystanders—as we learn to better navigate this strange, evolving digital universe together.

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 · · 15 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 · · 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 · · 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.

Recent Columns

Lyza Danger Gardner on Building the Web Everywhere

The Implicit Contract

Working with a team of like-minded folks not only makes for more copacetic daily interactions, it actually has a positive effect on the end product. Developers are valued for more than their technical skills. Another hallmark of a good developer is how well they mesh with a team.

Rachel Andrew on the Business of Web Dev

The Ways We’ve Changed—and Stayed the Same

A perusal of the article titles in the seasonal magazine 24 ways shows how the things we’ve needed to learn and keep up with have changed since 2005. Amid all this change, one thing that remains evergreen is the generosity of web people in sharing their knowledge.

Recent Blog posts

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!

Overwhelmed by Code

There is a constant pressure to learn new things and keep up with all the latest ideas: new frameworks, new platforms, new ideas of how to write code, they just keep coming out. In addition, the ebb and flow of what is desired from a front-end developer keeps changing. It used to be that knowing CSS and HTML was enough, then jQuery came along, then responsive techniques, then Node.js and then Angular, Ember, etc., etc., etc. That list, right there, it tires me out.

Why Responsive Images Matter

Building enormous websites means us shifting the burden of our mistakes onto every single user that visits our site. It’s us saying that we’re willing to build something that isn’t for some users, because that’s most comfortable for us—no different from “best viewed in Internet Explorer 5.5” or “best viewed at 600x800,” but much more costly.