A List Apart

Menu

The Articles

Issue № 400

  • How We Read

    by Jason Santa Maria · · 15 Comments

    When you read, you filter text through your experiences and past conversations. You put words into context. You interpret. So how can we use typography to welcome readers and convince them to sit with us through this process? A List Apart alum Jason Santa Maria explains in this excerpt from Chapter 1 of On Web Typography, his new book from A Book Apart.

Issue № 399

  • Gardens, Not Graves

    by Allen Tan · · 4 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 · · 21 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 · · 5 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 · · 6 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 · · 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 · · 49 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 · · 30 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 · · 37 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.

Recent Columns

Mark Llobrera on Professional♥︎Amateurs

Instant Web

For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.

Rachel Andrew on the Business of Web Dev

On Being King of a Shrinking Castle

Being your own boss is awesome. You’re the sovereign of your fate—and with that autonomy comes responsibility for making your business thrive. Your time management skills are more important than ever as you continue to get your to-dos checked off. The thing is… if you get an unexpected call from a friend, can you get away from that tyrannical boss of yours to do something unplanned? Are you able to schedule time with friends or family without feeling that you’re falling behind on work? If you can’t afford to take time to strengthen your connections with others, you’re at risk of being the monarch (and the serf) of an impoverished kingdom, indeed.

Recent Blog posts

15 Years Ago in ALA: Much Ado About 5K

15 years ago this month, a plucky ALA staffer wrote “Much Ado About 5K,” an article on a contest created by Stewart Butterfield that challenged web designers and developers to build a complete website using less than 5K of images and code. As one group of modern web makers embraces mobile-first design and performance budgets, while another (the majority) worships at the altar of bigger, fatter, and slower, the 5K contest reminds us that a byte saved is a follower earned.

On Our Radar: What Engineers Look Like

If you were too buried in work this week to read the internet, don’t worry: the staff of A List Apart read it for you. Catch up with this week’s On Our Radar, featuring our new favorite Instagram account, Mozilla’s latest mission, Twitter bots, and more.

Content-First Design

Video game designers start with the story. What would our work look like if we did too? Steph Hay advocates for a content-first approach to design and walks through how to start prototyping your content.

Context Makes Our Devices

When it comes to new devices, context is everything. Smartphones and tablets gained popularity because they were useful in situations where our laptops weren't. Will smartwatches do the same? Anthony Colangelo looks at the context of these new devices and how they might reach their full potential.