A List Apart

Menu

The Articles

Issue № 392

  • Content-out Layout

    by Nathan Ford · · 23 Comments

    Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. Designers can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen. Nathan Ford takes the next step toward more sophisticated, content-focused layouts on the web.

  • People Skills for Web Workers

    by Jonathan Kahn · · 12 Comments

    The web touches everything an organization does—marketing to customer service, product development to branding, internal communications to recruitment. This is the era of cross-platform digital services, fast networks, and mobile devices. Sounds like the ideal time to be a person who makes websites. So why do we feel frustrated so often? Why do we experience burnout or depression? What makes it difficult to do work that has meaning, that satisfies us? Two words: people skills. Frequent ALA author Jonathan Kahn explains why they matter, and how improving our people skills will give us tools to facilitate collaboration, creating opportunities to improve our work, our organizations, and maybe even our world.

Issue № 391

  • The Battle for the Body Field

    by Jeff Eaton · · 30 Comments

    As we attempt to combine multi-device design requirements with complex, media-rich narratives, we’ve hit the wall. The chunky, fields-and-templates approach we’ve developed can’t save us from the mismatch between our content and HTML’s descriptive tools. The good news is we don’t have to convert all our projects to XML to learn from the XML community’s wisdom. By using custom elements and properties to represent content’s meaning, transforming it into HTML on output, and ensuring that editing tools share the same vocabulary, we can publish structured content that supports the needs of today’s editors and art directors while also making our content safe for future generations.

Issue № 390

  • UI Animation and UX: A Not-So-Secret Friendship

    by Val Head · · 14 Comments

    The words “web animation” make many of us search frantically for the “skip intro” button, but adding motion to our work can be meaningful and functional—when we find the right circumstances. Animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. Val Head shows you how CSS makes it possible.

  • Web Animation at Work

    by Rachel Nabors · · 10 Comments

    We use HTML to tell stories and communicate vast amounts of information—and animation helps us do both better. Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Rachel Nabors explains her fascination with CSS3 animations, Canvas, SVG, the web audio API, webGL, and all the rest, and explains why we need web animation—and web animators.

Issue № 389

  • Designing for Easy Interaction

    by Sarah Horton, Whitney Quesenbery · · 16 Comments

    Whether you contribute to the user experience, development, or strategy of your website, you have a business, ethical, and (in many cases) legal responsibility to make your site accessible. And an equally compelling duty to your stakeholders, creativity, and career to achieve accessibility without sacrificing one whit of design or innovation. So what’s a site and application maker to do? For starters, read this book! We are thrilled to present an exclusive excerpt from Chapter 5 of A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery, available now from Rosenfeld Media—and with a 20 percent discount for ALA readers, even.

Issue № 388

  • A List Together

    by Mat Marquis · · 21 Comments

    A List Apart gets back to its roots: building community, giving a platform to new voices, and getting people excited about the web. We’re making changes to the way we work—starting with our decision to open-source the code that powers alistapart.com itself—and we want you to participate. Our Mat Marquis invites you to contribute code and concepts via GitHub, get to know our acquisition scouts, and use ALA and its editors to share your ideas and insights with the whole web design and development community.

  • Writing Is Thinking

    by Sally Kerrigan · · 27 Comments

    When you write about your work, it makes all of us smarter for the effort, including you. Done well, this kind of sharing means you’re contributing signal, instead of noise. But writers are made, not born. We often hear from people who say they’d love to write for A List Apart or start blogging, but don’t know where to start. They feel unfocused and overwhelmed by the task. If this is beginning to sound like you, read on, as Sally Kerrigan walks you through how writing works, and how you can get better at it.

Issue № 387

  • A Moment to Breathe

    by Nick Cox · · 29 Comments

    Burning both ends of the candle night after night, weekend after weekend, has long been part of web design and development culture. Especially in the startup subculture, we pride ourselves on working long hours with little sleep. It’s part of a new generation’s favorite myth—the one where we get in early in a company destined for an enormous IPO, work our little hearts out for a year or two, and end up rich and happy. The truth is rather less glamorous: the way we are working starves our prefrontal cortex, hurting not only our precious health, but also our productivity. Nick Cox shares the science behind the high cost of constant crisis mode, and explains how to strike a better balance.

Issue № 386

  • Surveying the Big Screen

    by Mike Pick · · 23 Comments

    We’ve been designing responsively for more than three years, now, and have the small-screen pattern libraries and portfolios to prove it. But what about larger screens? While we commonly use liquid design for smaller breakpoints, allowing our content to expand and contract as needed, few of us consider what happens beyond a maximum width of 960 pixels or so—which can leave a heap of unused pixels on a contemporary desktop display. Mike Pick explores how to use negative space, scale, density, and layout devices such as grids, modules, and columns to break through the 1024-pixel layout barrier.

  • Designing Offline-First Web Apps

    by Alex Feyerke ·

    We assume our users are like us—with the latest devices, the most recent software, and the fastest connections. And while we may maintain a veritable zoo of older devices and browsers for testing, we spend most of our time building from the comfort of our modern, always-online desktop devices. But what happens when our users descend into the subway, board a plane, go to live in the country, or just happen to find themselves in the wrong corner of the room? The truth is, offline is a fact of life—but there are ways to design for it. Alex Feyerke tells all.

Issue № 385

  • Why Sass?

    by Dan Cederholm · · 64 Comments

    “I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away!” So says designer, CSS wizard, and Dribbble co-founder Dan Cederholm at the beginning of his new book Sass For Web Designers, released today by A Book Apart. Yet the reluctant convert soon discovers that the popular CSS pre-processor can be a powerful ally to even the hand-craftiest front-end designer/developer. Dan has never learned a thing about CSS he wasn’t willing to share (and great at teaching). And in this exclusive excerpt from Chapter 1 of Sass For Web Designers, you’ll get a taste of how Dan learned to quit worrying and use Sass to take better control of his stylesheets and websites.

Issue № 384

  • Flat UI and Forms

    by Jessica Enders · · 74 Comments

    Though some decry flat user interfaces as pure fashion, or as the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that feel simpler and cleaner. Trouble is, most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. So what happens when flat UIs and forms collide? User experiences can, and often do, suffer. Keep your flat forms from failing by using controlled redundancy to communicate difference.

  • Mastering Digital Project Momentum

    by Perry Hewitt · · 12 Comments

    Digital projects begin in high spirits and tip quickly into miscommunication and crisis. But it doesn’t have to be that way. Extend your early kickoff meeting harmony throughout the life of your projects. By understanding your client’s organizational drivers and key players before the sticky note sessions even begin, you can establish the momentum needed to keep the extended team focused on goals. And by managing stakeholder communications throughout the job, you can avoid land mines, save time and effort in the long run, and deliver a project that satisfies stakeholders, agency, and users alike.

Issue № 383

  • Sustainable Web Design

    by James Christie · · 46 Comments

    Do you know your website’s carbon footprint? Or how to lower it? Emissions standards have been set for the automotive, construction, and telecommunications industries, yet the internet’s carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually—larger than that of the entire aviation industry. At least 40 percent of that falls partially under the responsibility of people who make websites. It’s time for web designers to do our part. James Christie explains how to slim our obese websites and simultaneously attack our industry’s carbon footprint, using methods that conveniently dovetail with good business practice and future-friendly design.

  • The Web Runs on Electricity and We’re Running Out

    by Dorian Peters · · 20 Comments

    It’s a humbling thought, but as web professionals, nothing we create actually exists when the power goes out. As we increase the number of devices in our world, planning for a connected web of things in hopes that the poor will be liberated, education will be free, and our fridges will tell us we’re out of lettuce, we fail to acknowledge that we scarcely have enough fossil fuels to maintain the current state for long. Web designers need to be part of the solution—and the situation is more hopeful than you may think. Dorian Peters shows how we can exercise the surprising power that lies in seemingly small designerly decisions to help our industry not only survive, but create positive impact worldwide.

Recent Columns

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.

Nishant Kothary on the Human Web

Logically Speaking

The human mind has its own logic far beyond the binary states of mere computers. Even in the tech industry, you can't escape the reality that it takes more than data and solid conclusions to win people over.

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!