A List Apart

Menu

The Articles

Issue № 396

  • Living up to Your (Business) Ideals

    by Geoff DiMasi · · 15 Comments

    We all want to do work that matches our values—that lets us live up to our ideals for the world. But we also want to keep the lights on, make payroll, and maybe even grow. How can we design our agencies, studios, or freelance businesses to do both? Geoff DiMasi says the answer is in establishing a vision for your work, and directly tying that vision to the way you evaluate prospective clients and projects—and he’s here to help you get started.

  • Prototyping Your Workflow

    by Mark Llobrera · · 9 Comments

    Atomic design. HTML wireframes. Style tiles. We’re all trying to adapt our processes, deliverables, and techniques to meet the challenges of the fast-moving, multi-device web. But replacing your workflow in one fell swoop is probably impossible—and who’s to say someone else’s guidelines will work for your team, anyway? Learn how Mark Llobrera’s team let go of the idea of the perfect workflow, and embraced a more iterative approach to process change instead.

Issue № 395

  • Accessibility: The Missing Ingredient

    by Andrew Hoffman · · 18 Comments

    If economics is “the dismal science,” accessibility has long been the least loved branch of web design and development—and the least specified client requirement. Type and grids (especially the flexible variety) have fans aplenty. CSS, Sass, and frameworks draw huge, passionate crowds. But even die-hard front-enders and dedicated followers of best practices seem to wilt in the face of today's greatly improved accessibility techniques. As a result, while most of us have kept up with the emerging methods, technologies, and challenges of multi-device design and development, essential and well supported specs like WAI-ARIA remain woefully under-implemented. Even the best of us seem to consider accessibility something to be done at the end of the job. Andrew Hoffman explains the advantages and necessity of an “accessibility first” approach.

  • Can Email Be Responsive?

    by Jason Rodriguez · · 48 Comments

    Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile, with over 50 percent of email opens occurring on mobile devices. Still, email design is an outrageously outdated practice. (Remember coding before web standards became… standards?) But coding an email doesn’t need to be a lesson in frustration. While email designers still have to build layouts using tables and style them with HTML attributes and—gasp!—inline styles, a number of intrepid designers are taking modern techniques pioneered for the web and applying them to the archaic practice of email design. Jason Rodriguez shows how to apply the principles of responsive web design to the frustrating but essential realm of email design.

Issue № 394

  • CSS Shapes 101

    by Sara Soueidan · · 53 Comments

    The new CSS Shapes specification has the potential to change the way you think about arranging content on a webpage. (Hint: think outside the rectangles!) Sara Soueidan walks us through the different ways to use this property, with results ranging from simple elegance to eye-popping.

  • DRY-ing Out Your Sass Mixins

    by Sam Richard · · 29 Comments

    You might already be familiar with the DRY principle of writing code: “Don’t Repeat Yourself.” Using Sass is a great way accomplish this, but Sam Richard challenges us to take it a step further than that. By the end of this article, you’ll be adapting your Sass mixins to use the absolute minimum amount of code, so your pages will be super-light and quick to load anywhere. Advanced Sass magic ahead; strap in!

Issue № 393

  • Creating Style Guides

    by Susan Robertson · · 36 Comments

    A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.

  • The Z-Axis: Designing for the Future

    by Wren Lanier · · 19 Comments

    For years we’ve seen the web as a two-dimensional space filled with pages that sit side by side on a flat, infinite plane. But as the devices we design for take on an increasingly diverse array of shapes and sizes, we must embrace new ways of designing up and down. Designing on the z-axis means incorporating three-dimensional physics into our interface designs. Wren Lanier explains how, by using the z-axis to place interface elements above or below one another, we can create better design systems that are more flexible and intuitive to use—and create new patterns that point the way to future interactions.

Issue № 392

  • Content-out Layout

    by Nathan Ford · · 24 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 · · 22 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.

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

On Our Radar: Self-Centered Edition

It's all about us this week at ALA. From steps to sleep to social activities, we're counting every kind of personal data you can think of. But what's all that data add up to? How could we look at it—and ourselves—differently? In this week's On Our Radar, we ask ourselves—and our self—the tough questions.

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.