A List Apart

Menu

The Articles

Issue № 399

  • Gardens, Not Graves

    by Allen Tan · · 3 Comments

    The stream is great for showing timely, scannable content. But solely organizing by reverse chronology leads to a dire loss of context. What can we do to make content easier to understand for those coming across it for the first time? Allen Tan explores methods for turning our untended archives into lively, flourishing spaces.

  • Radio-Controlled Web Design

    by Art Lawry · · 10 Comments

    Tabs, modal overlays, hidden navigation: we’ve developed many patterns to help us design for mobile screens. But these patterns tend to show and hide content using JavaScript—which can come with its own challenges. Art Lawry explores techniques for reducing that dependency on JavaScript using an unlikely tool: radio buttons.

Issue № 398

  • Kids 4–6: “The Muddy Middle”

    by Debra Levin Gelman · · 5 Comments

    Full of knowledge and creativity but not yet quite able to read, kids from ages 4 to 6 occupy a “muddy middle” for designers—they’re too old for toddler games, but too young for most apps and games made for “big kids.” Learn how to understand this group in this excerpt from Deb Gelman’s book, Design for Kids, out now from Rosenfeld Media.

Issue № 397

  • Structuring a New Collaborative Culture

    by Rosie Manning · · 4 Comments

    Collaboration is crucial in creative ventures, yet building a culture that allows it to flourish can be tricky—particularly in traditional, hierarchically minded organizations. But with a little tweaking, any space has the potential to become a hotbed of connected thinking. As Rosie Manning learned recently, true collaboration thrives in an environment built on trust, openness, and flexibility.

  • Persuasion: Applying the Elaboration Likelihood Model to Design

    by Victor Yocco · · 4 Comments

    Persuasion isn’t a slick ad pitch or a campaign promise. It’s inherent to the content, style, and delivery of our messages, for better or for worse. Everything we say, do, and design has an impact on how our message is perceived—so why not put that power to work for you on the web? Victor Yocco shows us how to incorporate a deeper understanding of the psychological underpinnings of persuasion into our designs, allowing us to better reach—and win—the hearts of our users.

Issue № 396

  • Living up to Your (Business) Ideals

    by Geoff DiMasi · · 10 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 · · 8 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 · · 43 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 · · 47 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 · · 26 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 · · 34 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 · · 16 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 · · 22 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 · · 12 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.

Recent Columns

Matt Griffin on How We Work

Being Profitable

So you own a business. It’s the best job you’ve ever had, and it will be forever—as long as the business stays viable. That means understanding when it's profitable, and when you may have to make some adjustments. Don’t worry—it doesn’t require an accounting degree and it won’t turn you into a greedy industrialist.

Laura Kalbag on Freelance Design

I Don’t Like It

The most dreaded of all design feedback is the peremptory, “I don’t like it.” Rather than slinking back to the drawing board, it’s important to get clarity on what the client is reacting to. Guiding this conversation can turn a show-stopper into a mutual win.

Recent Blog posts

Ten CSS One-Liners to Replace Native Apps

Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. Earlier this year, we published his blog post, “CSS Regions Considered Harmful.” When Håkon speaks, whether we always agree or not, we listen. Today, Håkon introduces CSS Figures and argues their case.

Longform Content with Craft Matrix

Jason Santa Maria recently shared some thoughts about pacing content, and my developer brain couldn’t help but think about how I’d go about building the examples he talked about. The one fool-proof way to achieve heavily art-directed layouts like those is to write the HTML by hand. The problem is that content managers are not always developers, and the code can get complex pretty quickly. That’s why we use content management systems—to give content managers easier and more powerful control over content.

Ten Years Ago in ALA: Dynamic Text Replacement

Ten years ago this month in Issue 183, A List Apart published Stewart Rosenberger’s “Dynamic Text Replacement.” Stewart lamented text styling as a “dull headache of web design” with “only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML.” To help ease these pains, Stewart presented a technique for styling typography by dynamically replacing text with an image.